jekyll-theme-chirpy 6.2.1 → 6.2.3

data/_includes/refactor-content.html

@@ -30,22 +30,22 @@
 {% endif %}
 
 <!-- Change the icon of checkbox -->
+
 {% if _content contains '<input type="checkbox"' %}
   {% assign _content = _content
-    | replace:
-        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
-        '<i class="fas fa-check-circle fa-fw checked"></i>'
-    | replace:
-        '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
-        '<i class="far fa-circle fa-fw"></i>'
+    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
+      '<i class="fas fa-check-circle fa-fw checked"></i>'
+    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
+      '<i class="far fa-circle fa-fw"></i>'
   %}
 {% endif %}
 
-<!-- images -->
+<!-- Handle images -->
+
 {% assign IMG_TAG = '<img ' %}
 
 {% if _content contains IMG_TAG %}
-  {% assign _img_content = nil %}
+  {% assign _img_content = null %}
   {% assign _img_snippets = _content | split: IMG_TAG %}
 
   <!-- CDN URL -->
@@ -81,10 +81,9 @@
     {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
     {% assign _attrs = _left | split: '" ' %}
 
-    {% assign _width = nil %}
-    {% assign _height = nil %}
-    {% assign _lqip = nil %}
-    {% assign _class = nil %}
+    {% assign _src = null %}
+    {% assign _lqip = null %}
+    {% assign _class = null %}
 
     {% for _attr in _attrs %}
       {% unless _attr contains '=' %}
@@ -96,10 +95,6 @@
       {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
 
       {% case _key %}
-        {% when 'width' %}
-          {% assign _width = _value %}
-        {% when 'height' %}
-          {% assign _height = _value %}
         {% when 'src' %}
           {% assign _src = _value %}
         {% when 'lqip' %}
@@ -115,54 +110,40 @@
       {% assign _left = _left | remove: _old_class %}
     {% endif %}
 
-    {% assign _final_src = nil %}
+    {% assign _final_src = null %}
+    {% assign _lazyload = true %}
 
     {% unless _src contains '//' %}
       {% assign _final_src = _path_prefix | append: _src %}
-      {% capture _src_from %}"{{ _src }}"{% endcapture %}
-      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
-      {% assign _left = _left | replace: _src_from, _src_to %}
+      {% assign _src_alt = 'src="' | append: _path_prefix %}
+      {% assign _left = _left | replace: 'src="', _src_alt %}
     {% endunless %}
 
     {% if _lqip %}
-      {% unless _lqip contains ':' %}
-        {% assign _final_lqip = _path_prefix | append: _lqip %}
-        {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
-        {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
-        {% assign _left = _left | replace: _lqip_from, _lqip_to %}
+      {% assign _lazyload = false %}
+      {% assign _class = _class | append: ' blur' %}
+
+      {% unless _lqip contains 'data:' %}
+        {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
+        {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
       {% endunless %}
-    {% endif %}
 
-    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
-    {% assign _left = _left | replace: 'src=', 'data-src=' %}
-    {% if _left contains 'class=' %}
-      {% assign _left = _left | replace: 'class="', 'class="lazyload '%}
-    {% else %}
-      {% assign _left = _left | append: ' class="lazyload"' %}
-    {% endif %}
+      <!-- add image placeholder -->
+      {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
 
-    <!-- add image placeholder -->
-    {% if _lqip %}
-      {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
     {% else %}
-      {% if _width and _height %}
-        <!-- add SVG placehoder -->
-        {%- capture _svg -%}
-          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width  }} {{ _height }}'%3E%3C/svg%3E"
-        {%- endcapture -%}
-        {% assign _left =  _svg | append: ' ' | append: _left %}
-        {% assign _class = _class | append: ' shimmer' %}
-      {% endif %}
+      {% assign _class = _class | append: ' shimmer' %}
     {% endif %}
 
-    <!-- Bypass the HTML-proofer test -->
-    {% assign _left = _left | append: ' data-proofer-ignore' %}
+    <!-- lazy-load images -->
+    {% if _lazyload %}
+      {% assign _left = _left | append: ' loading="lazy"' %}
+    {% endif %}
 
     {% if page.layout == 'home' %}
       <!-- create the image wrapper -->
-      {%- capture _wrapper_start -%}
-        <div class="preview-img {{ _class | strip }}">
-      {%- endcapture -%}
+      {% assign _wrapper_start = '<div class="preview-img ' | append: _class | append: '">' %}
+
       {% assign _img_content = _img_content | append: _wrapper_start %}
       {% assign _right = _right | prepend: '></div' %}
 
@@ -176,26 +157,30 @@
         {% capture _class %}
           class="img-link{% unless _lqip %} shimmer{% endunless %}"
         {% endcapture %}
-        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
+
       {% else %}
         <!-- create the image wrapper -->
-        {%- capture _wrapper_start -%}
-          <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
-        {%- endcapture -%}
+        {% assign _wrapper_start = _final_src
+          | default: _src
+          | prepend: '<a href="'
+          | append: '" class="popup img-link '
+          | append: _class
+          | append: '">'
+        %}
+
         {% assign _img_content = _img_content | append: _wrapper_start %}
-        {% assign _right = _right | prepend: '></a' %}
+        {% assign _right = '></a' | append: _right %}
       {% endif %}
     {% endif %}
 
     <!-- combine -->
-    {% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
-
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
   {% endfor %}
 
   {% if _img_content %}
     {% assign _content = _img_content %}
   {% endif %}
-
 {% endif %}
 
 <!-- Add header for code snippets -->
@@ -205,13 +190,11 @@
   {% assign _new_content = '' %}
 
   {% for _snippet in _code_spippets %}
-
     {% if forloop.last %}
       {% assign _new_content = _new_content | append: _snippet %}
 
     {% else %}
-
-      {% assign _left = _snippet | split: '><' | last%}
+      {% assign _left = _snippet | split: '><' | last %}
 
       {% if _left contains 'file="' %}
         {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
@@ -226,21 +209,19 @@
         <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
-      {% assign _new_content = _new_content | append: _snippet
-          | append: '<div class="code-header">'
-          | append: _label
-          | append: '<button aria-label="copy" data-title-succeed="'
-          | append: site.data.locales[include.lang].post.button.copy_code.succeed
-          | append: '"><i class="far fa-clipboard"></i></button></div>'
-          | append: '<div class="highlight"><code>'
+      {% assign _new_content = _new_content
+        | append: _snippet
+        | append: '<div class="code-header">'
+        | append: _label
+        | append: '<button aria-label="copy" data-title-succeed="'
+        | append: site.data.locales[include.lang].post.button.copy_code.succeed
+        | append: '"><i class="far fa-clipboard"></i></button></div>'
+        | append: '<div class="highlight"><code>'
       %}
-
     {% endif %}
-
   {% endfor %}
 
   {% assign _content = _new_content %}
-
 {% endif %}
 
 <!-- Create heading anchors -->
@@ -249,11 +230,11 @@
 {% assign _heading_content = _content %}
 
 {% for level in heading_levels %}
-  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
-  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+  {% assign mark_start = '<h' | append: level | append: ' id="' %}
+  {% assign mark_end = '</h' | append: level | append: '>' %}
 
   {% if _heading_content contains mark_start %}
-    {% assign _new_content = nil %}
+    {% assign _new_content = null %}
     {% assign heading_snippets = _heading_content | split: mark_start %}
 
     {% for snippet in heading_snippets %}
@@ -263,20 +244,19 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% assign anchor = '<a href="#'
+        | append: id
+        | append: '" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>'
+      %}
 
       {% assign left = snippet | split: mark_end | first %}
       {% assign right = snippet | slice: left.size, snippet.size %}
       {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}
 
-      {% assign _new_content = _new_content | append: mark_start
-          | append: left | append: anchor | append: right
-      %}
-
+      {% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
     {% endfor %}
 
     {% assign _heading_content = _new_content %}
-
   {% endif %}
 {% endfor %}
 

data/_includes/related-posts.html

@@ -78,9 +78,9 @@
         <article class="col">
           <a href="{{ post.url | relative_url }}" class="post-preview card h-100">
             <div class="card-body">
-              {% include datetime.html date=post.date class="small" lang=include.lang %}
+              {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
-              <div class="text-muted small">
+              <div class="text-muted">
                 <p>
                   {% include no-linenos.html content=post.content %}
                   {{ content | markdownify | strip_html | truncate: 200 | escape }}

data/_includes/sidebar.html

@@ -59,48 +59,46 @@
       {% endif %}
     {% endunless %}
 
-    <address class="d-flex mb-0">
-      {% for entry in site.data.contact %}
-        {% case entry.type %}
-          {% when 'github', 'twitter' %}
-            {%- capture url -%}
+    {% for entry in site.data.contact %}
+      {% case entry.type %}
+        {% when 'github', 'twitter' %}
+          {%- capture url -%}
             https://{{ entry.type }}.com/{{ site[entry.type].username }}
           {%- endcapture -%}
-          {% when 'email' %}
-            {% assign email = site.social.email | split: '@' %}
-            {%- capture url -%}
+        {% when 'email' %}
+          {% assign email = site.social.email | split: '@' %}
+          {%- capture url -%}
             javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
           {%- endcapture -%}
-          {% when 'rss' %}
-            {% assign url = '/feed.xml' | relative_url %}
-          {% else %}
-            {% assign url = entry.url %}
-        {% endcase %}
+        {% when 'rss' %}
+          {% assign url = '/feed.xml' | relative_url %}
+        {% else %}
+          {% assign url = entry.url %}
+      {% endcase %}
 
-        {% if url %}
-          <a
-            href="{{ url }}"
-            aria-label="{{ entry.type }}"
-            {% assign link_types = '' %}
+      {% if url %}
+        <a
+          href="{{ url }}"
+          aria-label="{{ entry.type }}"
+          {% assign link_types = '' %}
 
-            {% unless entry.noblank %}
-              target="_blank"
-              {% assign link_types = 'noopener noreferrer' %}
-            {% endunless %}
+          {% unless entry.noblank %}
+            target="_blank"
+            {% assign link_types = 'noopener noreferrer' %}
+          {% endunless %}
 
-            {% if entry.type == 'mastodon' %}
-              {% assign link_types = link_types | append: ' me' | strip %}
-            {% endif %}
+          {% if entry.type == 'mastodon' %}
+            {% assign link_types = link_types | append: ' me' | strip %}
+          {% endif %}
 
-            {% unless link_types == empty %}
-              rel="{{ link_types }}"
-            {% endunless %}
-          >
-            <i class="{{ entry.icon }}"></i>
-          </a>
-        {% endif %}
-      {% endfor %}
-    </address>
+          {% unless link_types == empty %}
+            rel="{{ link_types }}"
+          {% endunless %}
+        >
+          <i class="{{ entry.icon }}"></i>
+        </a>
+      {% endif %}
+    {% endfor %}
   </div>
   <!-- .sidebar-bottom -->
 </aside>

data/_includes/toc.html

@@ -6,7 +6,7 @@
 {% endif %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4 mb-5">
+  <section id="toc-wrapper" class="ps-0 pe-4">
     <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>

data/_layouts/default.html

@@ -1,6 +1,5 @@
 ---
 layout: compress
-# Default layout
 ---
 
 <!doctype html>
@@ -9,14 +8,8 @@ layout: compress
 
 {% include lang.html %}
 
-{% capture prefer_mode %}
-  {% if site.theme_mode %}
-    data-mode="{{ site.theme_mode }}"
-  {% endif %}
-{% endcapture %}
-
-{% if layout.tail_includes %}
-  {% assign has_tail = true %}
+{% if site.theme_mode %}
+  {% capture prefer_mode %}data-mode="{{ site.theme_mode }}"{% endcapture %}
 {% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
@@ -27,19 +20,20 @@ layout: compress
     {% include sidebar.html lang=lang %}
 
     <div id="main-wrapper" class="d-flex justify-content-center">
-      <div class="container px-xxl-5">
+      <div class="container d-flex flex-column px-xxl-5">
         {% include topbar.html lang=lang %}
 
-        <div class="row">
-          <main
-            aria-label="Main Content"
-            class="col-12 col-lg-11 col-xl-9 px-md-4{% unless has_tail %} pb-5{% endunless %}"
-          >
-            {{ content }}
+        <div class="row flex-grow-1">
+          <main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4">
+            {% if layout.refactor or layout.layout == 'default' %}
+              {% include refactor-content.html content=content lang=lang %}
+            {% else %}
+              {{ content }}
+            {% endif %}
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}
@@ -55,12 +49,10 @@ layout: compress
         <div class="row">
           <!-- tail -->
           <div id="tail-wrapper" class="col-12 col-lg-11 col-xl-9 px-md-4">
-            {% if has_tail %}
-              {% for _include in layout.tail_includes %}
-                {% assign _include_path = _include | append: '.html' %}
-                {% include {{ _include_path }} lang=lang %}
-              {% endfor %}
-            {% endif %}
+            {% for _include in layout.tail_includes %}
+              {% assign _include_path = _include | append: '.html' %}
+              {% include {{ _include_path }} lang=lang %}
+            {% endfor %}
 
             {% include_cached footer.html lang=lang %}
           </div>

data/_layouts/home.html

@@ -1,5 +1,6 @@
 ---
 layout: default
+refactor: true
 ---
 
 {% include lang.html %}
@@ -39,15 +40,13 @@ layout: default
   {% endfor %}
 {% endif %}
 
-{% capture content %}
+<div id="post-list" class="flex-grow-1 px-xl-1">
   {% for post in posts %}
-    <article class="card-wrapper">
-      <a href="{{ post.url | relative_url }}" class="card post-preview flex-md-row-reverse">
-        {% if post.image %}
-          {% if post.image.lqip %}
-            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
-          {% endif %}
+    <article class="card-wrapper card">
+      <a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
+        {% assign card_body_col = '12' %}
 
+        {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
             {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
@@ -55,54 +54,62 @@ layout: default
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
 
-          <img src="{{ src }}" w="17" h="10" alt="{{ alt }}" {{ lqip }}>
-        {% endif %}
+          {% assign lqip = null %}
 
-        <div class="card-body d-flex flex-column">
-          <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
+          {% if post.image.lqip %}
+            {% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
+          {% endif %}
 
-          <div class="card-text content mt-0 mb-2">
-            <p>
-              {% include no-linenos.html content=post.content %}
-              {{ content | markdownify | strip_html | truncate: 200 | escape }}
-            </p>
+          <div class="col-md-5">
+            <img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
           </div>
 
-          <div class="post-meta flex-grow-1 d-flex align-items-end">
-            <div class="me-auto">
-              <!-- posted date -->
-              <i class="far fa-calendar fa-fw me-1"></i>
-              {% include datetime.html date=post.date lang=lang %}
-
-              <!-- categories -->
-              {% if post.categories.size > 0 %}
-                <i class="far fa-folder-open fa-fw me-1"></i>
-                <span class="categories">
-                  {% for category in post.categories %}
-                    {{ category }}
-                    {%- unless forloop.last -%},{%- endunless -%}
-                  {% endfor %}
-                </span>
-              {% endif %}
+          {% assign card_body_col = '7' %}
+        {% endif %}
+
+        <div class="col-md-{{ card_body_col }}">
+          <div class="card-body d-flex flex-column">
+            <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
+
+            <div class="card-text content mt-0 mb-3">
+              <p>
+                {% include no-linenos.html content=post.content %}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
+              </p>
             </div>
 
-            {% if post.pin %}
-              <div class="pin ms-1">
-                <i class="fas fa-thumbtack fa-fw"></i>
-                <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+            <div class="post-meta flex-grow-1 d-flex align-items-end">
+              <div class="me-auto">
+                <!-- posted date -->
+                <i class="far fa-calendar fa-fw me-1"></i>
+                {% include datetime.html date=post.date lang=lang %}
+
+                <!-- categories -->
+                {% if post.categories.size > 0 %}
+                  <i class="far fa-folder-open fa-fw me-1"></i>
+                  <span class="categories">
+                    {% for category in post.categories %}
+                      {{ category }}
+                      {%- unless forloop.last -%},{%- endunless -%}
+                    {% endfor %}
+                  </span>
+                {% endif %}
               </div>
-            {% endif %}
+
+              {% if post.pin %}
+                <div class="pin ms-1">
+                  <i class="fas fa-thumbtack fa-fw"></i>
+                  <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
+                </div>
+              {% endif %}
+            </div>
+            <!-- .post-meta -->
           </div>
-          <!-- .post-meta -->
+          <!-- .card-body -->
         </div>
-        <!-- .card-body -->
       </a>
     </article>
   {% endfor %}
-{% endcapture %}
-
-<div id="post-list" class="flex-grow-1 pe-xl-2">
-  {% include refactor-content.html content=content lang=lang %}
 </div>
 <!-- #post-list -->
 

data/_layouts/page.html

@@ -2,13 +2,7 @@
 layout: default
 ---
 
-{% capture _content %}
-  {% if layout.refactor or page.layout == 'page' %}
-    {% include refactor-content.html content=content lang=lang %}
-  {% else %}
-    {{ content }}
-  {% endif %}
-{% endcapture %}
+{% include lang.html %}
 
 <article class="px-1">
   {% if page.layout == 'page' or page.collection == 'tabs' %}
@@ -18,9 +12,9 @@ layout: default
       {{ title }}
     </h1>
     <div class="content">
-      {{ _content }}
+      {{ content }}
     </div>
   {% else %}
-    {{ _content }}
+    {{ content }}
   {% endif %}
 </article>