jekyll-theme-chirpy 5.0.2 → 6.2.2

data/_includes/related-posts.html

@@ -1,24 +1,31 @@
-<!--
- Recommend the other 3 posts according to the tags and categories of the current post,
- if the number is not enough, use the other latest posts to supplement.
--->
+<!-- Recommend the other 3 posts according to the tags and categories of the current post. -->
 
-<!-- The total size of related posts  -->
+<!-- The total size of related posts -->
 {% assign TOTAL_SIZE = 3 %}
 
-<!-- An random integer that bigger than 0  -->
+<!-- An random integer that bigger than 0 -->
 {% assign TAG_SCORE = 1 %}
 
-<!-- Equals to TAG_SCORE / {max_categories_hierarchy}  -->
+<!-- Equals to TAG_SCORE / {max_categories_hierarchy} -->
 {% assign CATEGORY_SCORE = 0.5 %}
 
-{% assign SEPARATOR = ":" %}
+{% assign SEPARATOR = ':' %}
 
-{% assign score_list = "" | split: "" %}
-{% assign last_index = site.posts.size | minus: 1 %}
+{% assign match_posts = '' | split: '' %}
+
+{% for category in page.categories %}
+  {% assign match_posts = match_posts | push: site.categories[category] | uniq %}
+{% endfor %}
+
+{% for tag in page.tags %}
+  {% assign match_posts = match_posts | push: site.tags[tag] | uniq %}
+{% endfor %}
+
+{% assign last_index = match_posts.size | minus: 1 %}
+{% assign score_list = '' | split: '' %}
 
 {% for i in (0..last_index) %}
-  {% assign post = site.posts[i] %}
+  {% assign post = match_posts[i] %}
 
   {% if post.url == page.url %}
     {% continue %}
@@ -42,11 +49,9 @@
     {% capture score_item %}{{ score }}{{ SEPARATOR }}{{ i }}{% endcapture %}
     {% assign score_list = score_list | push: score_item %}
   {% endif %}
-
 {% endfor %}
 
-
-{% assign index_list = "" | split: "" %}
+{% assign index_list = '' | split: '' %}
 
 {% if score_list.size > 0 %}
   {% assign score_list = score_list | sort | reverse %}
@@ -56,51 +61,36 @@
   {% endfor %}
 {% endif %}
 
-<!-- Fill with the other newlest posts  -->
-{% assign less = TOTAL_SIZE | minus: index_list.size %}
-
-{% if less > 0 %}
-
-  {% for i in (0..last_index) %}
-    {% assign post = site.posts[i] %}
-    {% if post.url != page.url  %}
-      {% capture cur_index %}{{ i }}{% endcapture %}
-      {% unless index_list contains cur_index %}
-        {% assign index_list = index_list | push: cur_index %}
-        {% assign less = less | minus: 1 %}
-        {% if less <= 0 %}
-          {% break %}
-        {% endif %}
-      {% endunless %}
-    {% endif %}
-  {% endfor %}
-
-{% endif %}
+{% assign relate_posts = '' | split: '' %}
 
+{% for index in index_list %}
+  {% assign i = index | to_integer %}
+  {% assign relate_posts = relate_posts | push: match_posts[i] %}
+{% endfor %}
 
-{% if index_list.size > 0 %}
-  <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
-    <h3 class="pt-2 mt-1 mb-4 ml-1"
-      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
-    <div class="card-deck mb-4">
-    {% for entry in index_list %}
-      {% assign index = entry | plus: 0 %}
-      {% assign post = site.posts[index] %}
-      <div class="card">
-        <a href="{{ post.url | relative_url }}">
-          <div class="card-body">
-            {% include timeago.html date=post.date class="small" %}
-            <h3 class="pt-0 mt-1 mb-3" data-toc-skip>{{ post.title }}</h3>
-            <div class="text-muted small">
-              <p>
-                {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+{% if relate_posts.size > 0 %}
+  <aside id="related-posts" aria-labelledby="related-label">
+    <h3 class="mb-4" id="related-label">
+      {{- site.data.locales[include.lang].post.relate_posts -}}
+    </h3>
+    <nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
+      {% for post in relate_posts %}
+        <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 %}
+              <h4 class="pt-0 my-2">{{ post.title }}</h4>
+              <div class="text-muted small">
+                <p>
+                  {% include no-linenos.html content=post.content %}
+                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
+                </p>
+              </div>
             </div>
-          </div>
-        </a>
-      </div>
-    {% endfor %}
-    </div> <!-- .card-deck -->
-  </div> <!-- #related-posts -->
+          </a>
+        </article>
+      {% endfor %}
+    </nav>
+  </aside>
+  <!-- #related-posts -->
 {% endif %}

data/_includes/search-loader.html

@@ -4,43 +4,44 @@
 -->
 
 {% capture result_elem %}
-<div class="pl-1 pr-1 pl-sm-2 pr-sm-2 pl-lg-4 pr-lg-4 pl-xl-0 pr-xl-0">
-  <a href="{url}">{title}</a>
-  <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
-    {categories}
-    {tags}
-  </div>
-  <p>{snippet}</p>
-</div>
+  <article class="px-1 px-sm-2 px-lg-4 px-xl-0">
+    <header>
+      <h2><a href="{url}">{title}</a></h2>
+      <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
+        {categories}
+        {tags}
+      </div>
+    </header>
+    <p>{snippet}</p>
+  </article>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
-
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[include.lang].search.no_results }}</p>{% endcapture %}
 
 <script>
-SimpleJekyllSearch({
-  searchInput: document.getElementById('search-input'),
-  resultsContainer: document.getElementById('search-results'),
-  json: '{{ '/assets/js/data/search.json' | relative_url }}',
-  searchResultTemplate: '{{ result_elem | strip_newlines }}',
-  noResultsText: '{{ not_found }}',
-  templateMiddleware: function(prop, value, template) {
-    if (prop === 'categories') {
-      if (value === '') {
-        return `${value}`;
-      } else {
-        return `<div class="mr-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+  /* Note: dependent library will be loaded in `js-selector.html` */
+  SimpleJekyllSearch({
+    searchInput: document.getElementById('search-input'),
+    resultsContainer: document.getElementById('search-results'),
+    json: '{{ '/assets/js/data/search.json' | relative_url }}',
+    searchResultTemplate: '{{ result_elem | strip_newlines }}',
+    noResultsText: '{{ not_found }}',
+    templateMiddleware: function(prop, value, template) {
+      if (prop === 'categories') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${value}</div>`;
+        }
       }
-    }
 
-    if (prop === 'tags') {
-      if (value === '') {
-        return `${value}`;
-      } else {
-        return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+      if (prop === 'tags') {
+        if (value === '') {
+          return `${value}`;
+        } else {
+          return `<div><i class="fa fa-tag fa-fw"></i>${value}</div>`;
+        }
       }
     }
-  }
-});
+  });
 </script>

data/_includes/search-results.html

@@ -1,10 +1,9 @@
-<!--
-  The Search results
--->
+<!-- The Search results -->
+
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
-  <div class="col-12 col-sm-11 post-content">
+  <div class="col-11 content">
     <div id="search-hints">
-      {% include trending-tags.html %}
+      {% include_cached trending-tags.html %}
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

data/_includes/sidebar.html

@@ -1,60 +1,56 @@
-<!--
-  The Side Bar
--->
+<!-- The Side Bar -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end" lang="{{lang}}">
-  <div class="profile-wrapper text-center">
-    <div id="avatar">
-      <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
-        {% if site.avatar != '' and site.avatar %}
-          {% capture avatar_url %}
-            {%- if site.avatar contains '://' -%}
+<aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
+  <header class="profile-wrapper">
+    <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
+      {% if site.avatar != empty and site.avatar %}
+        {% capture avatar_url %}
+            {% if site.avatar contains '://' %}
               {{ site.avatar }}
-            {%- elsif site.img_cdn != '' and site.img_cdn -%}
+            {% elsif site.img_cdn != empty and site.img_cdn %}
               {{ site.avatar | prepend: site.img_cdn }}
-            {%- else -%}
+            {% else %}
               {{ site.avatar | relative_url }}
-            {%- endif -%}
+            {% endif %}
           {% endcapture %}
-          <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
-        {% endif %}
-      </a>
-    </div>
+        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
+      {% endif %}
+    </a>
 
-    <div class="site-title mt-3">
+    <h1 class="site-title">
       <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
-    </div>
-    <div class="site-subtitle font-italic">{{ site.tagline }}</div>
-
-  </div><!-- .profile-wrapper -->
-
-  <ul class="w-100">
-
-    <!-- home -->
-    <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
-      <a href="{{ '/' | relative_url }}" class="nav-link">
-        <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
-      </a>
-    </li>
-    <!-- the real tabs -->
-    {% for tab in site.tabs %}
-    <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
-      <a href="{{ tab.url | relative_url }}" class="nav-link">
-        <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
-        {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
-
-        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
-      </a>
-    </li> <!-- .nav-item -->
-    {% endfor %}
+    </h1>
+    <p class="site-subtitle fst-italic mb-0">{{ site.tagline }}</p>
+  </header>
+  <!-- .profile-wrapper -->
 
-  </ul> <!-- ul.nav.flex-column -->
+  <nav class="flex-column flex-grow-1 w-100 ps-0">
+    <ul class="nav">
+      <!-- home -->
+      <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
+        <a href="{{ '/' | relative_url }}" class="nav-link">
+          <i class="fa-fw fas fa-home"></i>
+          <span>{{ site.data.locales[include.lang].tabs.home | upcase }}</span>
+        </a>
+      </li>
+      <!-- the real tabs -->
+      {% for tab in site.tabs %}
+        <li class="nav-item{% if tab.url == page.url %}{{ " active" }}{% endif %}">
+          <a href="{{ tab.url | relative_url }}" class="nav-link">
+            <i class="fa-fw {{ tab.icon }}"></i>
+            {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-  <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
+            <span>{{ site.data.locales[include.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+          </a>
+        </li>
+        <!-- .nav-item -->
+      {% endfor %}
+    </ul>
+  </nav>
 
+  <div class="sidebar-bottom d-flex flex-wrap  align-items-center w-100">
     {% unless site.theme_mode %}
-      <button class="mode-toggle btn" aria-label="Switch Mode">
+      <button type="button" class="mode-toggle btn" aria-label="Switch Mode">
         <i class="fas fa-adjust"></i>
       </button>
 
@@ -64,30 +60,46 @@
     {% endunless %}
 
     {% for entry in site.data.contact %}
-      {% capture url %}
-        {%- if entry.type == 'github' -%}
-          https://github.com/{{ site.github.username }}
-        {%- elsif entry.type == 'twitter' -%}
-          https://twitter.com/{{ site.twitter.username }}
-        {%- elsif entry.type == 'email' -%}
+      {% 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: '@' %}
-          javascript:location.href = 'mailto:' + ['{{ email[0] }}','{{ email[1] }}'].join('@')
-        {%- elsif entry.type == 'rss' -%}
-          {{ "/feed.xml" | relative_url }}
-        {%- else -%}
-          {{ entry.url }}
-        {%- endif -%}
-      {% endcapture %}
+          {%- 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 %}
 
       {% if url %}
-      <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
-        <i class="{{ entry.icon }}"></i>
-      </a>
-      {% endif %}
+        <a
+          href="{{ url }}"
+          aria-label="{{ entry.type }}"
+          {% assign link_types = '' %}
 
-    {% endfor %}
+          {% unless entry.noblank %}
+            target="_blank"
+            {% assign link_types = 'noopener noreferrer' %}
+          {% endunless %}
 
-  </div> <!-- .sidebar-bottom -->
+          {% if entry.type == 'mastodon' %}
+            {% assign link_types = link_types | append: ' me' | strip %}
+          {% endif %}
 
-</div><!-- #sidebar -->
+          {% unless link_types == empty %}
+            rel="{{ link_types }}"
+          {% endunless %}
+        >
+          <i class="{{ entry.icon }}"></i>
+        </a>
+      {% endif %}
+    {% endfor %}
+  </div>
+  <!-- .sidebar-bottom -->
+</aside>
+<!-- #sidebar -->

data/_includes/toc.html

@@ -6,11 +6,8 @@
 {% endif %}
 
 {% if enable_toc %}
-<!-- BS-toc.js will be loaded at medium priority -->
-<script src="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js"></script>
-
-<div id="toc-wrapper" class="pl-0 pr-4 mb-5">
-  <div class="panel-heading pl-3 pt-2 mb-2">{{- site.data.locales[lang].panel.toc -}}</div>
-  <nav id="toc" data-toggle="toc"></nav>
-</div>
+  <section id="toc-wrapper" class="ps-0 pe-4 mb-5">
+    <h2 class="panel-heading ps-3 pt-2 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+    <nav id="toc"></nav>
+  </section>
 {% endif %}

data/_includes/topbar.html

@@ -1,71 +1,77 @@
-<!--
-  The Top Bar
--->
+<!-- The Top Bar -->
 
-<div id="topbar-wrapper" class="row justify-content-center topbar-down">
-  <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
-    <span id="breadcrumb">
+<header id="topbar-wrapper" aria-label="Top Bar">
+  <div
+    id="topbar"
+    class="d-flex align-items-center justify-content-between px-lg-3 h-100"
+  >
+    <nav id="breadcrumb" aria-label="Breadcrumb">
+      {% assign paths = page.url | split: '/' %}
 
-    {% assign paths = page.url | split: '/' %}
+      {% if paths.size == 0 or page.layout == 'home' %}
+        <!-- index page -->
+        <span>{{ site.data.locales[include.lang].tabs.home | capitalize }}</span>
 
-    {% if paths.size == 0 or page.layout == 'home' %}
-      <!-- index page -->
-      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
-
-    {% else %}
-
-      {% for item in paths %}
-
-        {% if forloop.first %}
-          <span>
-            <a href="{{ '/' | relative_url }}">
-              {{ site.data.locales[lang].tabs.home | capitalize }}
-            </a>
-          </span>
-
-        {% elsif forloop.last %}
-
-          {% if page.collection == 'tabs' %}
-            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
-          {% else %}
-            <span>{{ page.title }}</span>
+      {% else %}
+        {% for item in paths %}
+          {% if forloop.first %}
+            <span>
+              <a href="{{ '/' | relative_url }}">
+                {{ site.data.locales[include.lang].tabs.home | capitalize }}
+              </a>
+            </span>
+
+          {% elsif forloop.last %}
+            {% if page.collection == 'tabs' %}
+              <span>{{ site.data.locales[include.lang].tabs[item] | default: page.title }}</span>
+            {% else %}
+              <span>{{ page.title }}</span>
+            {% endif %}
+
+          {% elsif page.layout == 'category' or page.layout == 'tag' %}
+            <span>
+              <a href="{{ item | relative_url }}">
+                {{ site.data.locales[include.lang].tabs[item] | default: page.title }}
+              </a>
+            </span>
           {% endif %}
+        {% endfor %}
+      {% endif %}
+    </nav>
+    <!-- endof #breadcrumb -->
 
-        {% elsif page.layout == 'category' or page.layout == 'tag' %}
-          <span>
-            <a href="{{ item | relative_url }}">
-              {{ site.data.locales[lang].tabs[item] | default: page.title }}
-            </a>
-          </span>
-        {% endif %}
-
-      {% endfor %}
-
-    {% endif %}
-
-    </span><!-- endof #breadcrumb -->
-
-    <i id="sidebar-trigger" class="fas fa-bars fa-fw"></i>
+    <button type="button" id="sidebar-trigger" class="btn btn-link">
+      <i class="fas fa-bars fa-fw"></i>
+    </button>
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.data.locales[lang].title | default: site.title -}}
-      {% elsif page.collection == 'tabs' or page.dynamic_title %}
+        {{- site.data.locales[include.lang].title | default: site.title -}}
+      {% elsif page.collection == 'tabs' or page.layout == 'page' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
+        {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
+        {{- site.data.locales[include.lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
-    <i id="search-trigger" class="fas fa-search fa-fw"></i>
-    <span id="search-wrapper" class="align-items-center">
+    <button type="button" id="search-trigger" class="btn btn-link">
       <i class="fas fa-search fa-fw"></i>
-      <input class="form-control" id="search-input" type="search"
-        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
-      <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
-    </span>
-    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
-  </div>
+    </button>
 
-</div>
+    <search class="align-items-center ms-3 ms-lg-0">
+      <i class="fas fa-search fa-fw"></i>
+      <input
+        class="form-control"
+        id="search-input"
+        type="search"
+        aria-label="search"
+        autocomplete="off"
+        placeholder="{{ site.data.locales[include.lang].search.hint | capitalize }}..."
+      >
+    </search>
+    <button type="button" class="btn btn-link text-decoration-none" id="search-cancel">
+      {{- site.data.locales[include.lang].search.cancel -}}
+    </button>
+  </div>
+</header>

data/_includes/trending-tags.html

@@ -1,29 +1,27 @@
-{% comment %}
-  The trending tags list
-{% endcomment %}
+<!-- The trending tags list -->
 
 {% assign MAX = 10 %}
 
-{% assign size_list = "" | split: "" %}
-{% assign tag_list = "" | split: "" %}
+{% assign size_list = '' | split: '' %}
+{% assign tag_list = '' | split: '' %}
 
 {% for tag in site.tags %}
   {% assign size = tag | last | size %}
   {% assign size_list = size_list | push: size %}
 
-  {% assign tag_str = tag | first | append: "::" | append: size %}
-  {% assign tag_list =  tag_list | push: tag_str %}
+  {% assign tag_str = tag | first | append: '::' | append: size %}
+  {% assign tag_list = tag_list | push: tag_str %}
 {% endfor %}
 
 {% assign size_list = size_list | sort | reverse %}
 
 {% assign tag_list = tag_list | sort_natural %}
 
-{% assign trending_tags = "" | split: "" %}
+{% assign trending_tags = '' | split: '' %}
 
 {% for size in size_list limit: MAX %}
   {% for tag_str in tag_list %}
-    {% assign tag = tag_str | split: "::" %}
+    {% assign tag = tag_str | split: '::' %}
     {% assign tag_name = tag | first %}
     {% assign tag_size = tag | last | plus: 0 %}
     {% if tag_size == size %}
@@ -36,15 +34,13 @@
 {% endfor %}
 
 {% if trending_tags.size > 0 %}
-  <div id="access-tags">
-    <div class="panel-heading">{{- site.data.locales[lang].panel.trending_tags -}}</div>
-    <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
-
-    {% for tag_name in trending_tags %}
-      {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
-      <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
-    {% endfor %}
-
+  <section>
+    <h2 class="panel-heading">{{- site.data.locales[include.lang].panel.trending_tags -}}</h2>
+    <div class="d-flex flex-wrap mt-3 mb-1 me-3">
+      {% for tag_name in trending_tags %}
+        {% assign url = tag_name | slugify | url_encode | prepend: '/tags/' | append: '/' %}
+        <a class="post-tag btn btn-outline-primary" href="{{ url | relative_url }}">{{ tag_name }}</a>
+      {% endfor %}
     </div>
-  </div>
+  </section>
 {% endif %}