custom-chirpy 5.5.2

data/_includes/mode-toggle.html

@@ -0,0 +1,129 @@
+<!--
+  Switch the mode between dark and light.
+-->
+
+<script type="text/javascript">
+  class ModeToggle {
+    static get MODE_KEY() { return "mode"; }
+    static get MODE_ATTR() { return "data-mode"; }
+    static get DARK_MODE() { return "dark"; }
+    static get LIGHT_MODE() { return "light"; }
+    static get ID() { return "mode-toggle"; }
+
+    constructor() {
+      if (this.hasMode) {
+        if (this.isDarkMode) {
+          if (!this.isSysDarkPrefer) {
+            this.setDark();
+          }
+        } else {
+          if (this.isSysDarkPrefer) {
+            this.setLight();
+          }
+        }
+      }
+
+      let self = this;
+
+      /* always follow the system prefers */
+      this.sysDarkPrefers.addEventListener("change", () => {
+        if (self.hasMode) {
+          if (self.isDarkMode) {
+            if (!self.isSysDarkPrefer) {
+              self.setDark();
+            }
+
+          } else {
+            if (self.isSysDarkPrefer) {
+              self.setLight();
+            }
+          }
+
+          self.clearMode();
+        }
+
+        self.notify();
+
+      });
+
+    } /* constructor() */
+
+    get sysDarkPrefers() { return window.matchMedia("(prefers-color-scheme: dark)"); }
+
+    get isSysDarkPrefer() { return this.sysDarkPrefers.matches; }
+
+    get isDarkMode() { return this.mode === ModeToggle.DARK_MODE; }
+
+    get isLightMode() { return this.mode === ModeToggle.LIGHT_MODE; }
+
+    get hasMode() { return this.mode != null; }
+
+    get mode() { return sessionStorage.getItem(ModeToggle.MODE_KEY); }
+
+    /* get the current mode on screen */
+    get modeStatus() {
+      if (this.isDarkMode
+        || (!this.hasMode && this.isSysDarkPrefer)) {
+        return ModeToggle.DARK_MODE;
+      } else {
+        return ModeToggle.LIGHT_MODE;
+      }
+    }
+
+    setDark() {
+      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+    }
+
+    setLight() {
+      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
+      sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+    }
+
+    clearMode() {
+      $('html').removeAttr(ModeToggle.MODE_ATTR);
+      sessionStorage.removeItem(ModeToggle.MODE_KEY);
+    }
+
+    /* Notify another plugins that the theme mode has changed */
+    notify() {
+      window.postMessage({
+        direction: ModeToggle.ID,
+        message: this.modeStatus
+      }, "*");
+    }
+
+  } /* ModeToggle */
+
+  const toggle = new ModeToggle();
+
+  function flipMode() {
+    if (toggle.hasMode) {
+      if (toggle.isSysDarkPrefer) {
+        if (toggle.isLightMode) {
+          toggle.clearMode();
+        } else {
+          toggle.setLight();
+        }
+
+      } else {
+        if (toggle.isDarkMode) {
+          toggle.clearMode();
+        } else {
+          toggle.setDark();
+        }
+      }
+
+    } else {
+      if (toggle.isSysDarkPrefer) {
+        toggle.setLight();
+      } else {
+        toggle.setDark();
+      }
+    }
+
+    toggle.notify();
+
+  } /* flipMode() */
+
+</script>

data/_includes/no-linenos.html

@@ -0,0 +1,10 @@
+{% comment %}
+  Remove the line number of the code snippet.
+{% endcomment %}
+
+{% assign content = include.content %}
+
+{% if content contains '<td class="rouge-gutter gl"><pre class="lineno">' %}
+  {% assign content = content | replace: '<td class="rouge-gutter gl"><pre class="lineno">', '<!-- <td class="rouge-gutter gl"><pre class="lineno">'%}
+  {% assign content = content | replace: '</td><td class="rouge-code">', '</td> --><td class="rouge-code">' %}
+{% endif %}

data/_includes/post-nav.html

@@ -0,0 +1,30 @@
+<!--
+  Navigation buttons at the bottom of the post.
+-->
+
+<div class="post-navigation d-flex justify-content-between">
+  {% if page.previous.url %}
+  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="btn btn-outline-primary"
+    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
+    <p>{{ page.previous.title }}</p>
+  </a>
+  {% else %}
+  <div class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[site.lang].post.button.previous }}">
+    <p>-</p>
+  </div>
+  {% endif %}
+
+  {% if page.next.url %}
+  <a href="{{ site.baseurl }}{{page.next.url}}" class="btn btn-outline-primary"
+    prompt="{{ site.data.locales[site.lang].post.button.next }}">
+    <p>{{ page.next.title }}</p>
+  </a>
+  {% else %}
+  <div class="btn btn-outline-primary disabled"
+    prompt="{{ site.data.locales[site.lang].post.button.next }}">
+    <p>-</p>
+  </div>
+  {% endif %}
+
+</div>

data/_includes/post-paginator.html

@@ -0,0 +1,88 @@
+<!--
+  The paginator for post list on HomgPage.
+-->
+
+<ul class="pagination align-items-center mt-4 pl-lg-2">
+  <!-- left arrow -->
+  {% if paginator.previous_page %}
+    {% assign prev_url = paginator.previous_page_path | relative_url %}
+  {% else %}
+    {% assign prev_url = "#" %}
+  {% endif %}
+
+  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
+      <i class="fas fa-angle-left"></i>
+    </a>
+  </li>
+
+  <!-- page numbers -->
+  {% assign left_ellipsis = false %}
+  {% assign right_ellipsis = false %}
+
+  {% for i in (1..paginator.total_pages) %}
+
+    {% assign pre = paginator.page | minus: 1 %}
+    {% assign next = paginator.page | plus: 1 %}
+    {% assign pre_less = pre | minus: 1 %}
+    {% assign next_more = next | plus: 1 %}
+    {% assign show = false %}
+
+    {% if paginator.page == 1 %}
+      {% if i <= 3 or i == paginator.total_pages %}
+        {% assign show = true %}
+      {% endif %}
+    {% elsif paginator.page == paginator.total_pages %}
+      {% if i == 1 or i >= pre_less %}
+        {% assign show = true %}
+      {% endif %}
+    {% else %}
+      {% if i == 1 or i == paginator.total_pages%}
+        {% assign show = true %}
+      {% elsif i >= pre and i <= next %}
+        {% assign show = true %}
+      {% endif %}
+    {% endif %}
+
+    {% if show %}
+      <!-- show number -->
+      <li class="page-item {% if i == paginator.page %} active{% endif %}">
+        <a class="page-link btn-box-shadow" href="{% if i > 1 %}{{ site.paginate_path | replace: ':num', i | relative_url }}{% else %}{{ '/' | relative_url }}{% endif %}">{{ i }}</a>
+      </li>
+    {% else %}
+      <!-- hide number -->
+      {% if i < pre and left_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
+        </li>
+        {% assign left_ellipsis = true %}
+      {% elsif i > next and right_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
+        </li>
+        {% assign right_ellipsis = true %}
+      {% endif %}
+    {% endif %}
+
+  {% endfor %}
+
+  <!-- mobile pagination -->
+  <li class="page-index align-middle">
+    <span>{{ paginator.page }}</span>
+    <span class="text-muted">/ {{ paginator.total_pages }}</span>
+  </li>
+
+  <!-- right arrow -->
+  {% if paginator.next_page_path %}
+    {% assign next_url = paginator.next_page_path | relative_url %}
+  {% else %}
+    {% assign next_url = "#" %}
+  {% endif %}
+
+  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
+      <i class="fas fa-angle-right"></i>
+    </a>
+  </li>
+
+</ul> <!-- .pagination -->

data/_includes/post-sharing.html

@@ -0,0 +1,27 @@
+<!--
+ Post sharing snippet
+-->
+
+<div class="share-wrapper">
+  <span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share }}</span>
+  <span class="share-icons">
+    {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
+    {% assign title = title | uri_escape %}
+    {% assign url = page.url | absolute_url | url_encode %}
+
+    {% for share in site.data.share.platforms %}
+      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
+        <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
+          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
+          <i class="fa-fw {{ share.icon }}"></i>
+        </a>
+    {% endfor %}
+
+    <i id="copy-link" class="fa-fw fas fa-link small"
+        data-toggle="tooltip" data-placement="top"
+        title="{{ site.data.locales[site.lang].post.button.share_link.title }}"
+        data-title-succeed="{{ site.data.locales[site.lang].post.button.share_link.succeed }}">
+    </i>
+
+  </span>
+</div>

data/_includes/read-time.html

@@ -0,0 +1,30 @@
+<!--
+  Calculate the post's reading time, and display the word count in tooltip
+ -->
+
+{% assign words = include.content | strip_html | number_of_words: "auto" %}
+
+<!-- words per minute  -->
+
+{% assign wpm = 180 %}
+{% assign min_time = 1 %}
+
+{% assign read_time = words | divided_by: wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = min_time %}
+{% endunless %}
+
+{% capture read_prompt %}
+  {{- site.data.locales[site.lang].post.read_time.prompt -}}
+{% endcapture %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom"
+  title="{{ words }} {{ site.data.locales[site.lang].post.words }}">
+  <em>{{- read_time -}}{{" "}}{{- site.data.locales[site.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 }}
+  {%- endif -%}
+</span>

data/_includes/refactor-content.html

@@ -0,0 +1,282 @@
+<!--
+  Refactor the HTML structure.
+-->
+
+{% assign _content = include.content %}
+
+<!--
+  In order to allow a wide table to scroll horizontally,
+  we suround the markdown table with `<div class="table-wrapper">` and `</div>`
+-->
+
+{% if _content contains '<table' %}
+  {% assign _content = _content
+    | replace: '<table', '<div class="table-wrapper"><table'
+    | replace: '</table>', '</table></div>'
+    | replace: '<code><div class="table-wrapper">', '<code>'
+    | replace: '</table></div></code>', '</table></code>'
+  %}
+{% endif %}
+
+<!--
+  Fixed kramdown code highlight rendering:
+  https://github.com/penibelst/jekyll-compress-html/issues/101
+  https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
+-->
+
+{% if _content contains '<pre class="highlight">' %}
+  {% assign _content = _content
+    | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
+    | replace: '</code></pre></div>', '</code></div>'
+  %}
+{% 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>'
+  %}
+{% endif %}
+
+<!-- images -->
+
+{% assign IMG_TAG = '<img ' %}
+
+{% if _content contains IMG_TAG %}
+  {% assign _img_content = nil %}
+  {% assign _img_snippets = _content | split: IMG_TAG %}
+
+  <!-- CDN URL -->
+  {% if site.img_cdn %}
+    {% if site.img_cdn contains '//' %}
+      {% assign _path_prefix = site.img_cdn %}
+    {% else %}
+      {% assign _path_prefix = site.img_cdn | relative_url %}
+    {% endif %}
+  {% else %}
+    {% assign _path_prefix = site.baseurl %}
+  {% endif %}
+
+  <!-- Add image path -->
+  {% if page.img_path %}
+    {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
+    {% assign _path_prefix = _path_prefix | append: _path %}
+  {% endif %}
+
+  {% for _img_snippet in _img_snippets %}
+    {% if forloop.first %}
+      {% assign _img_content = _img_snippet %}
+      {% continue %}
+    {% endif %}
+
+    {% assign _left = _img_snippet | split: '>' | first %}
+    {% assign _right = _img_snippet | remove: _left %}
+
+    {% unless _left contains 'src=' %}
+      {% continue %}
+    {% endunless %}
+
+    {% 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 %}
+
+    {% for _attr in _attrs %}
+      {% unless _attr contains '=' %}
+        {% continue %}
+      {% endunless %}
+
+      {% assign _pair = _attr | remove: '"' | split: '=' %}
+      {% capture _key %}{{ _pair | first }}{% endcapture %}
+      {% capture _value %}{{ _pair | last }}{% endcapture %}
+
+      {% case _key %}
+        {% when 'width' %}
+          {% assign _width = _value %}
+        {% when 'height' %}
+          {% assign _height = _value %}
+        {% when 'src' %}
+          {% assign _src = _value %}
+        {% when 'lqip' %}
+          {% assign _lqip = _value %}
+        {% when 'class' %}
+          {% assign _class = _value %}
+      {% endcase %}
+
+    {% endfor %}
+
+    <!-- take out classes -->
+    {% if _class %}
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
+      {% assign _left = _left | remove: _old_class %}
+    {% endif %}
+
+    {% assign _final_src = nil %}
+
+    {% 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 %}
+    {% 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 %}
+      {% 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 -->
+    {% 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 %}
+    {% endif %}
+
+    <!-- Bypass the HTML-proofer test -->
+    {% assign _left = _left | append: ' data-proofer-ignore' %}
+
+    <!-- make sure the `<img>` is wrapped by `<a>` -->
+    {% assign _parent = _right | slice: 1, 4 %}
+
+    {% if _parent == '</a>' %}
+      <!-- add class to exist <a> tag -->
+      {% assign _size = _img_content | size | minus: 1 %}
+      {% capture _class %}
+        class="img-link{% unless _lqip %} shimmer{% endunless %}"
+      {% endcapture %}
+      {% 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 _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></a' %}
+    {% endif %}
+
+    <!-- combine -->
+    {% 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 -->
+
+{% if _content contains '<div class="highlight"><code>' %}
+  {% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
+  {% assign _new_content = '' %}
+
+  {% for _snippet in _code_spippets %}
+
+    {% if forloop.last %}
+      {% assign _new_content = _new_content | append: _snippet %}
+
+    {% else %}
+
+      {% assign _left = _snippet | split: '><' | last%}
+
+      {% if _left contains 'file="' %}
+        {% 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 _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% assign _label_icon = 'fas fa-code small' %}
+      {% endif %}
+
+      {% capture _label %}
+        <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[site.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 -->
+
+{% 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 text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+
+      {% assign left = snippet | split: mark_end | first %}
+      {% assign right = snippet | slice: left.size, snippet.size %}
+      {% assign left = left | replace_first: '">', '"><span class="mr-2">' | append: '</span>' %}
+
+      {% assign _new_content = _new_content | append: mark_start
+          | append: left | append: anchor | append: right
+      %}
+
+    {% endfor %}
+
+    {% assign _heading_content = _new_content %}
+
+  {% endif %}
+{% endfor %}
+
+{% assign _content = _heading_content %}
+
+<!-- return -->
+
+{{ _content }}