jekyll-theme-chirpy 4.3.1 → 5.0.0

data/_includes/mode-toggle.html

@@ -2,14 +2,12 @@
   Switch the mode between dark and light.
 -->
 
-<i class="mode-toggle fas fa-adjust"></i>
-
 <script type="text/javascript">
-
   class ModeToggle {
     static get MODE_KEY() { return "mode"; }
     static get DARK_MODE() { return "dark"; }
     static get LIGHT_MODE() { return "light"; }
+    static get ID() { return "mode-toggle"; }
 
     constructor() {
       if (this.hasMode) {
@@ -24,10 +22,10 @@
         }
       }
 
-      var self = this;
+      let self = this;
 
       /* always follow the system prefers */
-      this.sysDarkPrefers.addListener(function() {
+      this.sysDarkPrefers.addEventListener("change", () => {
         if (self.hasMode) {
           if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
@@ -43,34 +41,19 @@
           self.clearMode();
         }
 
-        self.updateMermaid();
+        self.notify();
+
       });
 
     } /* constructor() */
 
-
-    setDark() {
-      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
-      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
-    }
-
-    setLight() {
-      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
-      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
-    }
-
-    clearMode() {
-      $('html').removeAttr(ModeToggle.MODE_KEY);
-      sessionStorage.removeItem(ModeToggle.MODE_KEY);
-    }
-
     get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
 
     get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
 
-    get isDarkMode() { return this.mode == ModeToggle.DARK_MODE; }
+    get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
 
-    get isLightMode() { return this.mode == ModeToggle.LIGHT_MODE; }
+    get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
 
     get hasMode() { return this.mode != null; }
 
@@ -79,67 +62,67 @@
     /* get the current mode on screen */
     get modeStatus() {
       if (this.isDarkMode
-        || (!this.hasMode && this.isSysDarkPrefer) ) {
+        || (!this.hasMode && this.isSysDarkPrefer)) {
         return ModeToggle.DARK_MODE;
       } else {
         return ModeToggle.LIGHT_MODE;
       }
     }
 
-    updateMermaid() {
-      if (typeof mermaid !== "undefined") {
-        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
-        let config = { theme: expectedTheme };
+    setDark() {
+      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+    }
+
+    setLight() {
+      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+    }
 
-        /* re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function() {
-          let svgCode = $(this).prev().children().html();
-          $(this).removeAttr("data-processed");
-          $(this).html(svgCode);
-        });
+    clearMode() {
+      $('html').removeAttr(ModeToggle.MODE_KEY);
+      sessionStorage.removeItem(ModeToggle.MODE_KEY);
+    }
 
-        mermaid.initialize(config);
-        mermaid.init(undefined, ".mermaid");
-      }
+    /* Notify another plugins that the theme mode has changed */
+    notify() {
+      window.postMessage({
+        direction: ModeToggle.ID,
+        message: this.modeStatus
+      }, "*");
     }
 
-    flipMode() {
-      if (this.hasMode) {
-        if (this.isSysDarkPrefer) {
-          if (this.isLightMode) {
-            this.clearMode();
-          } else {
-            this.setLight();
-          }
+  } /* ModeToggle */
 
+  const toggle = new ModeToggle();
+
+  function flipMode() {
+    if (toggle.hasMode) {
+      if (toggle.isSysDarkPrefer) {
+        if (toggle.isLightMode) {
+          toggle.clearMode();
         } else {
-          if (this.isDarkMode) {
-            this.clearMode();
-          } else {
-            this.setDark();
-          }
+          toggle.setLight();
         }
 
       } else {
-        if (this.isSysDarkPrefer) {
-          this.setLight();
+        if (toggle.isDarkMode) {
+          toggle.clearMode();
         } else {
-          this.setDark();
+          toggle.setDark();
         }
       }
 
-      this.updateMermaid();
-
-    } /* flipMode() */
-
-  } /* ModeToggle */
-
-  let toggle = new ModeToggle();
-
-  $(".mode-toggle").click(function() {
+    } else {
+      if (toggle.isSysDarkPrefer) {
+        toggle.setLight();
+      } else {
+        toggle.setDark();
+      }
+    }
 
-    toggle.flipMode();
+    toggle.notify();
 
-  });
+  } /* flipMode() */
 
 </script>

data/_includes/read-time.html

@@ -22,9 +22,9 @@
 <!-- return element -->
 <span class="readtime" data-toggle="tooltip" data-placement="bottom"
   title="{{ words }} {{ site.data.locales[lang].post.words }}">
-  {{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}
+  <em>{{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}</em>
   {%- if include.prompt -%}
-    {% assign _prompt_words = read_prompt | number_of_words: 'auto' %}
-    {% unless _prompt_words > 1 %}{{" "}}{% endunless %}{{ read_prompt }}
+    {%- assign _prompt_words = read_prompt | number_of_words: 'auto' -%}
+    {%- unless _prompt_words > 1 -%}{{ " " }}{%- endunless -%}{{ read_prompt }}
   {%- endif -%}
 </span>

data/_includes/refactor-content.html

@@ -38,63 +38,100 @@
   %}
 {% endif %}
 
-
 <!-- images -->
 
-{% if _content contains '<img src="' %}
-
-  <!-- add CDN prefix if it exists -->
-
-  {% if site.img_cdn != '' %}
-    {% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
-  {% else %}
-    {% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
-  {% endif %}
-
-  {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
-
-  <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-
-  {% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %}
-
-  <!-- add image placehoder to prevent layout reflow -->
+{% assign IMG_TAG = '<img ' %}
 
+{% if _content contains IMG_TAG %}
   {% assign _img_content = nil %}
+  {% assign _img_snippets = _content | split: IMG_TAG %}
 
-  {% assign _images = _content | split: '<img ' %}
-
-  {% for _img in _images %}
+  {% for _img_snippet in _img_snippets %}
     {% if forloop.first %}
-      {% assign _img_content = _img %}
+      {% assign _img_content = _img_snippet %}
       {% continue %}
     {% endif %}
 
     {% assign _width = nil %}
     {% assign _height = nil %}
-    {% assign _attrs = _img | split: '>' | first | split: ' ' %}
+    {% assign _src = nil %}
+
+    {% assign _left = _img_snippet | split: '/>' | first %}
+    {% assign _right = _img_snippet | replace: _left, '' %}
+
+    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: ' ' %}
 
     {% for _attr in _attrs %}
-      {% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
-      {% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
+      {% assign _pair = _attr | split: '=' %}
+      {% if _pair.size < 2 %}
+        {% continue %}
+      {% endif %}
+
+      {% capture _key %}{{ _pair | first }}{% endcapture %}
+      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
 
       {% case _key %}
         {% when 'width' %}
           {% assign _width = _value %}
         {% when 'height' %}
           {% assign _height = _value %}
+        {% when 'src' %}
+          {% assign _src = _value %}
       {% endcase %}
 
-      {% if _width and _height %}
-        {% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
-        {% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
+      {% if _width and _height and _src %}
         {% break %}
       {% endif %}
-
     {% endfor %}
 
-    {% unless _width and _height %}
-      {% assign _img_content = _img_content | append: '<img ' | append: _img %}
-    {% endunless %}
+    {% if _src %}
+      {% unless _src contains '://' %}
+
+        <!-- Add CDN URL -->
+        {% if site.img_cdn %}
+          {% assign _src_prefix = site.img_cdn %}
+        {% else %}
+          {% assign _src_prefix = site.baseurl %}
+        {% endif %}
+
+        <!-- Add image path -->
+        {% if page.img_path %}
+          {% assign _path = page.img_path %}
+          {% assign last_char = _path | slice: -1 %}
+
+          {% unless last_char == '/' %}
+            {% assign _path = _path | append: '/' %}
+          {% endunless %}
+
+          {% assign _src_prefix = _src_prefix | append: _path %}
+        {% endif %}
+
+        {% assign _final_src = _src_prefix | append: _src %}
+        {% assign _left = _left | replace: _src, _final_src %}
+
+      {% endunless %}
+
+      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
+
+      {% assign _left = _left | replace: 'src=', 'data-src=' %}
+
+    {% endif %}
+
+    <!-- Add SVG placehoder to prevent layout reflow -->
+
+    {% if _width and _height %}
+      {%- 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 %}
+    {% endif %}
+
+    <!-- Bypass the HTML-proofer test -->
+    {% assign _left = _left | append: ' data-proofer-ignore' %}
+
+    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
 
   {% endfor %}
 
@@ -118,16 +155,16 @@
       {% assign _left = _snippet | split: '><' | last%}
 
       {% if _left contains 'file="' %}
-        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
         {% assign _label_icon = 'far fa-file-code' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
-        {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
         {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
       {% capture _label %}
-        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+        <span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
       {% assign _new_content = _new_content | append: _snippet
@@ -147,6 +184,43 @@
 
 {% endif %}
 
+<!-- Create heading anchors -->
+
+{% assign heading_levels = '2,3,4,5' | split: ',' %}
+{% assign _heading_content = _content %}
+
+{% for level in heading_levels %}
+  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
+  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+
+  {% if _heading_content contains mark_start %}
+    {% assign _new_content = nil %}
+    {% assign heading_snippets = _heading_content | split: mark_start %}
+
+    {% for snippet in heading_snippets %}
+      {% if forloop.first %}
+        {% assign _new_content = snippet %}
+        {% continue %}
+      {% endif %}
+
+      {% assign id = snippet | split: '"' | first %}
+      {% capture anchor %}<a href="#{{ id }}" class="anchor"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+
+      {% assign left = snippet | split: mark_end | first %}
+      {% assign right = snippet | replace: left, '' %}
+
+      {% assign _new_content = _new_content | append: mark_start
+          | append: left | append: anchor | append: mark_end | append: right
+      %}
+
+    {% endfor %}
+
+    {% assign _heading_content = _new_content %}
+
+  {% endif %}
+{% endfor %}
+
+{% assign _content = _heading_content %}
 
 <!-- return -->
 

data/_includes/related-posts.html

@@ -94,7 +94,7 @@
             <div class="text-muted small">
               <p>
                 {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 }}
+                {{ content | markdownify | strip_html | truncate: 200 | escape }}
               </p>
             </div>
           </div>

data/_includes/search-loader.html

@@ -5,7 +5,7 @@
 
 {% 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="{{ site.url }}{url}">{title}</a>
+  <a href="{url}">{title}</a>
   <div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
     {categories}
     {tags}

data/_includes/search-results.html

@@ -4,15 +4,7 @@
 <div id="search-result-wrapper" class="d-flex justify-content-center unloaded">
   <div class="col-12 col-sm-11 post-content">
     <div id="search-hints">
-      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
-
       {% include trending-tags.html %}
-
-      {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
-      {% endfor %}
-
     </div>
     <div id="search-results" class="d-flex flex-wrap justify-content-center text-muted mt-3"></div>
   </div>

data/_includes/sidebar.html

@@ -53,6 +53,16 @@
 
   <div class="sidebar-bottom mt-auto d-flex flex-wrap justify-content-center align-items-center">
 
+    {% unless site.theme_mode %}
+      <button class="mode-toggle btn" aria-label="Switch Mode">
+        <i class="fas fa-adjust"></i>
+      </button>
+
+      {% if site.data.contact.size > 0 %}
+        <span class="icon-border"></span>
+      {% endif %}
+    {% endunless %}
+
     {% for entry in site.data.contact %}
       {% capture url %}
         {%- if entry.type == 'github' -%}
@@ -71,7 +81,6 @@
 
       {% if url %}
       <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless site.theme_mode %}class="order-{{ forloop.index | plus: 2 }}"{% endunless %}
         {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
         <i class="{{ entry.icon }}"></i>
       </a>
@@ -79,16 +88,6 @@
 
     {% endfor %}
 
-    {% unless site.theme_mode %}
-      {% if site.data.contact.size > 0 %}
-        <span class="icon-border order-2"></span>
-      {% endif %}
-
-      <span id="mode-toggle-wrapper" class="order-1">
-        {% include mode-toggle.html %}
-      </span>
-    {% endunless %}
-
   </div> <!-- .sidebar-bottom -->
 
 </div><!-- #sidebar -->

data/_includes/timeago.html

@@ -1,27 +1,26 @@
 <!--
   Date format snippet
-  See: /assets/js/_utils/timeage.js
+  See: ${JS_ROOT}/utils/timeago.js
 -->
 
 {% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
 {% assign post_long_df = site.data.locales[lang].date_format.post.long %}
 {% assign post_short_df = site.data.locales[lang].date_format.post.short %}
 
-{% if include.preposition %}
-  {{ include.preposition }}
-{% endif %}
-<span class="timeago {% if include.class %}{{ include.class }}{% endif %}"
-  {% if include.tooltip %}
-    data-toggle="tooltip"
-    data-placement="bottom"
-    title="{{ include.date | date: tooltip_df }}"
-  {% endif %}>
+<em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
+    date="{{ include.date }}"
+    {% if include.tooltip %}
+      data-toggle="tooltip"
+      data-placement="bottom"
+      title="{{ include.date | date: tooltip_df }}"
+    {% endif %}>
+
   {%- assign this_year = site.time | date: "%Y" -%}
   {%- assign post_year = include.date | date: "%Y" -%}
+
   {%- if post_year == this_year -%}
     {{ include.date | date: post_short_df }}
   {%- else -%}
     {{ include.date | date: post_long_df }}
   {%- endif -%}
-  <i class="unloaded">{{ include.date | date_to_xmlschema }}</i>
-</span>
+</em>

data/_includes/toc.html

@@ -0,0 +1,16 @@
+{% assign enable_toc = false %}
+{% if site.toc and page.toc %}
+  {% if page.content contains '<h2' or page.content contains '<h3' %}
+    {% assign enable_toc = true %}
+  {% endif %}
+{% 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>
+{% endif %}

data/_includes/topbar.html

@@ -50,7 +50,7 @@
     <div id="topbar-title">
       {% if page.layout == 'home' %}
         {{- site.data.locales[lang].title | default: site.title -}}
-      {% elsif page.collection == 'tabs' %}
+      {% elsif page.collection == 'tabs' or page.dynamic_title %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
         {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}

data/_includes/trending-tags.html

@@ -34,3 +34,17 @@
     {% endif %}
   {% endfor %}
 {% 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 %}
+
+    </div>
+  </div>
+{% endif %}

data/_includes/update-list.html

@@ -22,3 +22,19 @@
 {% for entry in all_list limit:MAX_SIZE %}
   {% assign update_list = update_list | push: entry %}
 {% endfor %}
+
+{% if update_list.size > 0 %}
+
+  <div id="access-lastmod" class="post">
+    <div class="panel-heading">{{- site.data.locales[lang].panel.lastmod -}}</div>
+    <ul class="post-content pl-0 pb-1 ml-1 mt-2">
+      {% for item in update_list %}
+        {% assign index = item | split: "::" | last | plus: 0 %}
+        {% assign post = site.posts[index] %}
+        {% assign url = post.url | relative_url %}
+      <li><a href="{{ url }}">{{ post.title }}</a></li>
+      {% endfor %}
+    </ul>
+  </div> <!-- #access-lastmod -->
+
+{% endif %}

data/_layouts/default.html

@@ -13,10 +13,14 @@ layout: compress
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang }}" {{ prefer_mode }}>
+<html lang="{{ site.lang }}"{{ prefer_mode }}>
 
   {% include head.html %}
 
+  {% unless site.theme_mode %}
+    {% include mode-toggle.html %}
+  {% endunless %}
+
   <body data-spy="scroll" data-target="#toc">
 
     {% include sidebar.html %}
@@ -26,7 +30,7 @@ layout: compress
     <div id="main-wrapper">
       <div id="main">
 
-        {% include refactor-content.html content=content %}
+        {{ content }}
 
         {% include footer.html %}
 

data/_layouts/home.html

@@ -53,13 +53,13 @@ layout: page
     <div class="post-content">
       <p>
         {% include no-linenos.html content=post.content %}
-        {{ content | markdownify | strip_html | truncate: 200 }}
+        {{ content | markdownify | strip_html | truncate: 200 | escape }}
       </p>
     </div>
 
-    <div class="post-meta text-muted d-flex justify-content-between">
+    <div class="post-meta text-muted d-flex">
 
-      <div>
+      <div class="mr-auto">
         <!-- posted date -->
         <i class="far fa-calendar fa-fw"></i>
         {% include timeago.html date=post.date tooltip=true %}
@@ -68,12 +68,15 @@ layout: page
         <i class="far fa-clock fa-fw"></i>
         {% include read-time.html content=post.content %}
 
-        <!-- page views -->
-        {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
-        <i class="far fa-eye fa-fw"></i>
-        <span id="pv_{{-post.title-}}" class="pageviews">
-          <i class="fas fa-spinner fa-spin fa-fw"></i>
-        </span>
+        <!-- categories -->
+        {% if post.categories.size > 0 %}
+          <i class="far fa-folder-open fa-fw"></i>
+          <span>
+          {% for category in post.categories %}
+            {{ category }}
+            {%- unless forloop.last -%},{%- endunless -%}
+          {% endfor %}
+          </span>
         {% endif %}
       </div>