Bump version to 2.7.0

This reverts commit 07d29ec9bf.

.gitattributes

@@ -0,0 +1,16 @@
+# Set default behavior to automatically normalize line endings.
+* text=auto
+
+# Force bash scripts to always use LF line endings so that if a repo is accessed
+# in Unix via a file share from Windows, the scripts will work.
+*.sh text eol=lf
+
+# Force batch scripts to always use CRLF line endings so that if a repo is accessed
+# in Windows via a file share from Linux, the scripts will work.
+*.{cmd,[cC][mM][dD]} text eol=crlf
+*.{bat,[bB][aA][tT]} text eol=crlf
+
+# Denote all files that are truly binary and should not be modified.
+*.png binary
+*.jpg binary
+*.ico binary

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,7 @@
 ---
 name: Bug Report
 about: Create a report to help us improve
-labels: bug
+labels: suspect
 ---
 
 <!-- NOTE: Please maintain all sections, otherwise the issue will be automatically closed :) -->

.github/stale.yml

@@ -0,0 +1,17 @@
+# Clean up the stale issues
+
+daysUntilStale: 30
+daysUntilClose: 1
+
+exemptLabels:
+  - in progress
+  - pending
+
+staleLabel: stale
+
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+
+closeComment: false

.github/workflows/ci.yml

@@ -36,13 +36,13 @@ jobs:
       - name: Setup Ruby
         uses: actions/setup-ruby@v1
         with:
-          ruby-version: 2.6.x
+          ruby-version: 2.7
 
       - name: Bundle Caching
         uses: actions/cache@v2
         with:
           path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 

.github/workflows/issue-pr-interceptor.yml

@@ -1,16 +1,20 @@
 name: "Intercept bad issue/PRs"
 
-on: [issues, pull_request]
+on:
+  issues:
+    types: [opened]
+  pull_request:
+    types: [opened]
 
 jobs:
   autoclose:
     runs-on: ubuntu-latest
     steps:
-    - name: Autoclose issues that did not follow issue template
+    - name: Auto close issues/pr that did not follow template
       uses: roots/issue-closer@v1.1
       with:
         repo-token: ${{ secrets.GITHUB_TOKEN }}
         issue-pattern: "\\[x\\] I have read"
-        issue-close-message: "Hi @${issue.user.login} :wave:,\n\nThis issue is being automatically closed because it does not follow the issue template."
+        issue-close-message: ":wave: Hi @${issue.user.login},\n\nThis issue is being automatically closed because it does not follow the issue template."
         pr-pattern: "\\[x\\] Bug|\\[x\\] New feat|\\[x\\] Break|\\[x\\] Doc"
-        pr-close-message: "Hi @${pull_request.user.login} :wave:,\n\nThis PR is being automatically closed because it does not follow the PR template."
+        pr-close-message: ":wave: Hi @${pull_request.user.login},\n\nThis PR is being automatically closed because it does not follow the PR template."

.github/workflows/pages-deploy.yml.hook

@@ -25,13 +25,13 @@ jobs:
       - name: Setup Ruby
         uses: actions/setup-ruby@v1
         with:
-          ruby-version: 2.6.x
+          ruby-version: 2.7
 
       - name: Bundle Caching
         uses: actions/cache@v2
         with:
           path: ${{ env.GEMS_PATH }}
-          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile') }}
+          key: ${{ runner.os }}-gems-${{ hashFiles('**/Gemfile.lock') }}
           restore-keys: |
             ${{ runner.os }}-gems-
 

.gitignore

@@ -4,5 +4,4 @@
 
 # jekyll cache
 _site
-Gemfile.lock
 vendor

.travis.yml

@@ -2,13 +2,9 @@ os: linux
 dist: bionic
 
 language: ruby
-rvm: 2.6.5
+rvm: 2.7.0
 
-before_install:
+cache: bundler
-  - bundle config path 'vendor/bundle'
-
-install:
-  - bundle install --quiet
 
 addons:
   apt:
@@ -25,10 +21,6 @@ branches:
 git:
   depth: false # for posts lastmod
 
-cache:
-  directories:
-    - $TRAVIS_BUILD_DIR/vendor/bundle
-
 notifications:
   email:
     recipients:

Gemfile

@@ -1,18 +1,18 @@
 source "https://rubygems.org"
 
-gem "jekyll", ">= 3.8.6", "< 5.0"
+gem "jekyll", ">= 4.0.0", "< 5.0"
 
 # plugins
 group :jekyll_plugins do
   gem "jekyll-paginate"
   gem "jekyll-redirect-from"
-  gem "jekyll-seo-tag", "~> 2.6.1"
+  gem "jekyll-seo-tag"
   gem "jekyll-archives"
   gem "jekyll-sitemap"
 end
 
 group :test do
-  gem "html-proofer", "~> 3.16.0"
+  gem "html-proofer"
 end
 
 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem

Gemfile.lock

@@ -0,0 +1,111 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.7)
+    em-websocket (0.5.2)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    ffi (1.13.1)
+    forwardable-extended (2.6.0)
+    html-proofer (3.17.4)
+      addressable (~> 2.3)
+      mercenary (~> 0.3)
+      nokogumbo (~> 2.0)
+      parallel (~> 1.3)
+      rainbow (~> 3.0)
+      typhoeus (~> 1.3)
+      yell (~> 2.0)
+    http_parser.rb (0.6.0)
+    i18n (1.8.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (4.1.1)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (~> 2.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (~> 0.4.0)
+      pathutil (~> 0.9)
+      rouge (~> 3.0)
+      safe_yaml (~> 1.0)
+      terminal-table (~> 1.8)
+    jekyll-archives (2.2.1)
+      jekyll (>= 3.6, < 5.0)
+    jekyll-paginate (1.1.0)
+    jekyll-redirect-from (0.16.0)
+      jekyll (>= 3.3, < 5.0)
+    jekyll-sass-converter (2.1.0)
+      sassc (> 2.0.1, < 3.0)
+    jekyll-seo-tag (2.7.1)
+      jekyll (>= 3.8, < 5.0)
+    jekyll-sitemap (1.4.0)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.3.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    liquid (4.0.3)
+    listen (3.3.3)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.4.0)
+    mini_portile2 (2.4.0)
+    nokogiri (1.10.10)
+      mini_portile2 (~> 2.4.0)
+    nokogumbo (2.0.4)
+      nokogiri (~> 1.8, >= 1.8.4)
+    parallel (1.20.1)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rainbow (3.0.0)
+    rb-fsevent (0.10.4)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rexml (3.2.4)
+    rouge (3.25.0)
+    safe_yaml (1.0.5)
+    sassc (2.4.0)
+      ffi (~> 1.9)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.4.0)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.8)
+      thread_safe (~> 0.1)
+    tzinfo-data (1.2020.4)
+      tzinfo (>= 1.0.0)
+    unicode-display_width (1.7.0)
+    wdm (0.1.1)
+    yell (2.2.2)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  html-proofer
+  jekyll (>= 4.0.0, < 5.0)
+  jekyll-archives
+  jekyll-paginate
+  jekyll-redirect-from
+  jekyll-seo-tag
+  jekyll-sitemap
+  tzinfo (~> 1.2)
+  tzinfo-data
+  wdm (~> 0.1.1)
+
+BUNDLED WITH
+   2.1.4

README.md

@@ -1,6 +1,6 @@
 # Chirpy
 
-Language: English | [简体中文](docs/README_zh-CN.md)
+Language: English | [简体中文](docs/README.zh-CN.md)
 
 [![Build Status](https://github.com/cotes2020/jekyll-theme-chirpy/workflows/build/badge.svg?branch=master&event=push)](https://github.com/cotes2020/jekyll-theme-chirpy/actions?query=branch%3Amaster+event%3Apush)
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/8220b926db514f13afc3f02b7f884f4b)](https://app.codacy.com/manual/cotes2020/jekyll-theme-chirpy?utm_source=github.com&utm_medium=referral&utm_content=cotes2020/jekyll-theme-chirpy&utm_campaign=Badge_Grade_Dashboard)
@@ -31,6 +31,7 @@ A minimal, sidebar, responsive web design Jekyll theme that focuses on text pres
 - Automatically recommend related posts
 - Syntax highlighting
 - Mathematical expressions
+- Mermaid diagram & flowchart
 - Search
 - Atom Feeds
 - Disqus Comments

_config.yml

@@ -6,7 +6,7 @@
 
 
 # jekyll-seo-tag settings › https://github.com/jekyll/jekyll-seo-tag/blob/master/docs/usage.md
-#--------------------------
+# --------------------------
 title: Chirpy                          # the main title
 
 tagline: A text-focused Jekyll theme.  # it will display as the sub-title
@@ -41,7 +41,7 @@ social:
     # - https://www.linkedin.com/in/username
 
 google_site_verification: google_meta_tag_verification # change to your verification string
-#--------------------------
+# --------------------------
 
 
 # Only if your site type is GitHub Project sites and doesn't have a custom domain,
@@ -67,31 +67,29 @@ disqus:
   shortname: ''    # Fill with your Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
 
 
-# Prefer color scheme setting, available values:
+# Prefer color scheme setting.
 #
-#     dual   - Follow the system prefer color by default, and a toggle will display
+# Note: Keep empty will follow the system prefer color by default,
-#              in the left bottom of Sidebar, which used for switch the theme between dark and light.
+# and there will be a toggle to switch the theme between dark and light
+# on the bottom left of the sidebar.
+#
+# Available options:
 #
 #     light  - Use the light color scheme
 #
 #     dark   - Use the dark color scheme
 #
-theme_mode: dual
+theme_mode:   # <light|dark>
 
 # boolean type, the global switch for ToC in posts.
 toc: true
 
 paginate: 10
 
-markdown: kramdown
-
-highlighter: rouge
-
 kramdown:
-  input: GFM
   syntax_highlighter: rouge
   syntax_highlighter_opts:   # Rouge Options › https://github.com/jneen/rouge#full-options
-    css_class: 'highlight'
+    css_class: highlight
     # default_lang: console
     span:
       line_numbers: false
@@ -196,5 +194,5 @@ jekyll-archives:
     category: category
     tag: tag
   permalinks:
-    tag: '/tags/:name/'
+    tag: /tags/:name/
-    category: '/categories/:name/'
+    category: /categories/:name/

_data/label.yml

@@ -4,16 +4,17 @@
 # © 2017-2019 Cotes Chung
 # MIT Licensed
 
-
 panel:
-  lastmod: "Recent Update"
+  lastmod: Recent Update
-  trending_tags: "Trending Tags"
+  trending_tags: Trending Tags
-  toc: "Contents"
+  toc: Contents
 
 post:
-  relate_posts: "Further Reading"
+  relate_posts: Further Reading
   button:
     next: Newer
     previous: Older
 
-search_hint: "Search"   # text show on search bar
+search_hint: Search   # text show on search bar
+
+pin_prompt: Pinned   # pinned prompt

_data/meta.yml

@@ -1,3 +1,3 @@
 name: Chirpy
-version: 2.6.2
+version: 2.7.0
 homepage: https://github.com/cotes2020/jekyll-theme-chirpy/

_data/read_time.yml

@@ -0,0 +1,7 @@
+# words per minute
+wpm: 180
+
+# minimum value
+min_time: 1
+
+prompt: min

_includes/css-selector.html

@@ -6,50 +6,21 @@
   MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
-  <link rel="preload" href="{{ '/assets/css/home.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/home.css' | relative_url }}">
 
-{% elsif page.layout == 'page' %}
+{% if page.layout == 'category' or page.layout == 'tag' %}
+  {% assign style = 'category-tag' %}
+{% else %}
+  {% assign style =  page.layout %}
+{% endif %}
 
-  {% if page.collection == 'tabs' and page.title != 'About' %}
+{% assign src = style | prepend: '/assets/css/' | append: '.css' | relative_url %}
 
-    {% if page.title == 'Categories' %}
+<link rel="preload" href="{{ src }}" as="style">
-      <link rel="preload" href="{{ '/assets/css/categories.css' | relative_url }}" as="style">
+<link rel="stylesheet" href="{{ src }}">
-      <link rel="stylesheet" href="{{ '/assets/css/categories.css' | relative_url }}">
-   
-    {% elsif page.title == 'Tags' %}
-      <link rel="preload" href="{{ '/assets/css/tags.css' | relative_url }}" as="style">
-      <link rel="stylesheet" href="{{ '/assets/css/tags.css' | relative_url }}">
-   
-    {% elsif page.title == 'Archives'%}
-      <link rel="preload" href="{{ '/assets/css/archives.css' | relative_url }}" as="style">
-      <link rel="stylesheet" href="{{ '/assets/css/archives.css' | relative_url }}">
-   
-    {% endif %}
-
-  {% else %}
-
-    <link rel="preload" href="{{ '/assets/css/page.css' | relative_url }}" as="style">
-    <link rel="stylesheet" href="{{ '/assets/css/page.css' | relative_url }}">
-
-  {% endif %}
-
-{% elsif page.layout == 'category' or page.layout == 'tag' %}
-
-  <link rel="preload" href="{{ '/assets/css/category-tag.css' | relative_url }}" as="style">
-  <link rel="stylesheet" href="{{ '/assets/css/category-tag.css' | relative_url }}">
-
-{% elsif page.layout == 'post' %}
-
-  <link rel="preload" as="style" href="{{ '/assets/css/post.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/css/post.css' | relative_url }}">
 
+{% if page.layout == 'post' %}
   {% if site.toc and page.toc %}
-
     <link rel="preload" as="style" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}">
     <link rel="stylesheet" href="{{ '/assets/css/lib/bootstrap-toc.min.css' | relative_url }}" />
-
   {% endif %}
-
 {% endif %}

_includes/google-analytics.html

@@ -6,11 +6,13 @@
   MIT License
 -->
 <!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
 <script>
+  document.addEventListener("DOMContentLoaded", function(event) {
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
 
     gtag('js', new Date());
     gtag('config', '{{ site.google_analytics.id }}');
+  });
 </script>

_includes/head.html

@@ -61,7 +61,7 @@
 
   <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
 
-  <script async
+  <script defer
     src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.15.0,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
 
   {% include js-selector.html %}

_includes/js-selector.html

@@ -6,36 +6,29 @@
   MIT Licensed
 -->
 
-{% if page.layout == 'home' %}
+{% if page.layout == 'home' or page.layout == 'post' or page.layout == 'categories' %}
-
+  {% assign js = page.layout %}
-  <script async src="{{ '/assets/js/home.min.js' | relative_url }}"></script>
-
-{% elsif page.layout == 'post' %}
-
-  <script async src="{{ '/assets/js/post.min.js' | relative_url }}"></script>
-
-  {% if page.math %}
-    <!-- MathJax -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-  {% endif %}
-
-{% elsif page.layout == 'page' %}
-
-  {% if page.title == 'Categories' and page.collection == 'tabs' %}
-    <script async src="{{ '/assets/js/categories.min.js' | relative_url }}"></script>
-  {% else %}
-    <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
-  {% endif %}
-
 {% else %}
-
+  {% assign js = "page" %}
-  <script async src="{{ '/assets/js/page.min.js' | relative_url }}"></script>
-
 {% endif %}
 
+{% assign js_src = js | prepend: '/assets/js/' | append: '.min.js' | relative_url %}
+
+<script async src="{{ js_src }}"></script>
+
+{% if page.math %}
+  <!-- MathJax -->
+  <script defer src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+{% endif %}
 
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   <script defer src="{{ '/app.js' | relative_url }}"></script>
+
+  <!-- GA -->
+  {% if site.google_analytics.id %}
+    {% include google-analytics.html %}
+  {% endif %}
+
 {% endif %}

_includes/mermaid.html

@@ -0,0 +1,28 @@
+<!--
+  mermaid-js loader
+-->
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>
+  $(function() {
+    let initTheme = "default";
+
+    if ($("html[mode=dark]").length > 0
+      || ($("html[mode]").length == 0
+        && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
+      initTheme = "dark";
+    }
+
+    let mermaidConf = {
+      theme: initTheme  /* <default|dark|forest|neutral> */
+    };
+
+    /* Markdown converts to HTML */
+    $("pre").has("code.language-mermaid").each(function() {
+      let svgCode = $(this).children().html();
+      $(this).addClass("unloaded");
+      $(this).after(`<div class=\"mermaid\">${svgCode}</div>`);
+    });
+
+    mermaid.initialize(mermaidConf);
+  });
+</script>

_includes/mode-toggle.html

@@ -7,8 +7,7 @@
   MIT License
 -->
 
-<i class="mode-toggle fas fa-sun" dark-mode-invisible></i>
+<i class="mode-toggle fas fa-adjust"></i>
-<i class="mode-toggle fas fa-moon" light-mode-invisible></i>
 
 <script type="text/javascript">
 
@@ -18,8 +17,8 @@
     static get LIGHT_MODE() { return "light"; }
 
     constructor() {
-      if (this.mode != null) {
+      if (this.hasMode) {
-        if (this.mode == ModeToggle.DARK_MODE) {
+        if (this.isDarkMode) {
           if (!this.isSysDarkPrefer) {
             this.setDark();
           }
@@ -34,8 +33,8 @@
 
       /* always follow the system prefers */
       this.sysDarkPrefers.addListener(function() {
-        if (self.mode != null) {
+        if (self.hasMode) {
-          if (self.mode == ModeToggle.DARK_MODE) {
+          if (self.isDarkMode) {
             if (!self.isSysDarkPrefer) {
               self.setDark();
             }
@@ -48,6 +47,8 @@
 
           self.clearMode();
         }
+
+        self.updateMermaid();
       });
 
     } /* constructor() */
@@ -80,6 +81,33 @@
 
     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;
+      }
+    }
+
+    updateMermaid() {
+      if (typeof mermaid !== "undefined") {
+        let expectedTheme = (this.modeStatus === ModeToggle.DARK_MODE? "dark" : "default");
+        let config = { theme: expectedTheme };
+
+        /* 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);
+        });
+
+        mermaid.initialize(config);
+        mermaid.init(undefined, ".mermaid");
+      }
+    }
+
     flipMode() {
       if (this.hasMode) {
         if (this.isSysDarkPrefer) {
@@ -105,6 +133,8 @@
         }
       }
 
+      this.updateMermaid();
+
     } /* flipMode() */
 
   } /* ModeToggle */
@@ -112,7 +142,9 @@
   let toggle = new ModeToggle();
 
   $(".mode-toggle").click(function() {
+
     toggle.flipMode();
+
   });
 
 </script>

_includes/panel.html

@@ -37,9 +37,9 @@
       <span>{{- site.data.label.panel.trending_tags -}}</span>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
-      {% for tag in trending_tags %}
+      {% for tag_name in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        {% assign url = tag_name | slugify | url_encode | prepend: "/tags/" | append: "/" %}
-        <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
+        <a class="post-tag" href="{{ url | relative_url }}">{{ tag_name }}</a>
       {% endfor %}
 
       </div>

_includes/read-time.html

@@ -0,0 +1,15 @@
+<!--
+  Calculate the post's reading time, and display the word count in tooltip
+ -->
+{% assign words = include.content | strip_html | number_of_words: "auto" %}
+
+{% assign read_time = words | divided_by: site.data.read_time.wpm %}
+
+{% unless read_time > 0 %}
+  {% assign read_time = site.data.read_time.min_time %}
+{% endunless %}
+
+<!-- return element -->
+<span class="readtime" data-toggle="tooltip" data-placement="bottom" title="{{ words }} words">
+  {{- read_time -}}{{" "}}{{- site.data.read_time.prompt -}}
+</span>

_includes/refactor-content.html

@@ -4,24 +4,33 @@
 
 {% assign _content = include.content %}
 
-<!--
+<!-- Suroundding the markdown table with '<div class="table-wrapper">. and '</div>' -->
-  Suroundding the markdown table with '<div class="table-wrapper">. and '</div>'
--->
 {% if _content contains '<table>' %}
-  {% assign _content = _content | replace: '<table>', '<div class="table-wrapper"><table>' %}
+  {% assign _content = _content
-  {% assign _content = _content | replace: '</table>', '</table></div>' %}
+    | replace: '<table>', '<div class="table-wrapper"><table>'
-  {% assign _content = _content | replace: '</table></div></code>', '</table></code>' %}
+    | replace: '</table>', '</table></div>'
+    | 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' %}
+  {% assign _content = _content
-  {% assign _content = _content | replace: '</code></pre></div>', '</code></div>' %}
+    | replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
+    | replace: '</code></pre></div>', '</code></div>'
+  %}
 {% endif %}
 
+<!-- Add attribute 'hide-bullet' to the checkbox list -->
+{% if _content contains '<li class="task-list-item"><' %}
+  {% assign _content = _content
+    | replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
+  %}
+{% endif %}
+
+<!-- return -->
 {{ _content }}

_includes/search-results.html

@@ -13,7 +13,7 @@
       {% include trending-tags.html %}
 
       {% for tag in trending_tags %}
-        {% capture url %}/tags/{{ tag | downcase | url_encode }}/{% endcapture %}
+        {% capture url %}/tags/{{ tag | slugify | url_encode }}/{% endcapture %}
         <a class="post-tag" href="{{ url | relative_url }}">{{ tag | replace: '-', ' ' }}</a>
       {% endfor %}
 

_includes/sidebar.html

@@ -52,12 +52,12 @@
 
 <div class="sidebar-bottom d-flex flex-wrap justify-content-around mt-4">
 
-  {% if site.theme_mode == "dual" %}
+  {% unless site.theme_mode %}
   <span id="mode-toggle-wrapper">
     {% include mode-toggle.html %}
   </span>
   <span class="icon-border"></span>
-  {% endif %}
+  {% endunless %}
 
   {% for entry in site.data.contact %}
     {% capture url %}
@@ -75,7 +75,7 @@
       {%- endif -%}
     {% endcapture %}
 
-    {% if url != '' %}
+    {% if url %}
     <a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
       <i class="{{ entry.icon }}"></i>
     </a>

_includes/trending-tags.html

@@ -15,7 +15,7 @@
   {% assign size = tag | last | size %}
   {% assign size_list = size_list | push: size %}
 
-  {% assign tag_str = tag | first | replace: " ", "-" | append: "::" | append: size %}
+  {% assign tag_str = tag | first | append: "::" | append: size %}
   {% assign tag_list =  tag_list | push: tag_str %}
 {% endfor %}
 

_layouts/archives.html

@@ -0,0 +1,41 @@
+---
+layout: page
+
+# The Archives of posts.
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+
+<div id="archives" class="pl-xl-2">
+{% for post in site.posts %}
+  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
+  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
+  {% if forloop.first %}
+    {% assign last_day = "" %}
+    {% assign last_month = "" %}
+  <span class="lead">{{this_year}}</span>
+  <ul class="list-unstyled">
+  {% endif %}
+    <li>
+      <div>
+        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
+        {% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
+        <span class="date day">{{ this_day }}</span>
+        <span class="date month small text-muted">{{ this_month }}</span>
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+      </div>
+    </li>
+  {% if forloop.last %}
+  </ul>
+  {% elsif this_year != pre_year %}
+  </ul>
+  <span class="lead">{{pre_year}}</span>
+  <ul class="list-unstyled">
+    {% assign last_day = "" %}
+    {% assign last_month = "" %}
+  {% endif %}
+{% endfor %}
+</div>

_layouts/categories.html

@@ -0,0 +1,105 @@
+---
+layout: page
+
+# All the Categories of posts
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+
+{% assign HEAD_PREFIX = "h_" %}
+{% assign LIST_PREFIX = "l_" %}
+
+{% assign group_index = 0 %}
+
+{% assign sort_categories = site.categories | sort %}
+
+{% for category in sort_categories %}
+  {% assign category_name = category | first %}
+  {% assign posts_of_category = category | last %}
+  {% assign first_post = posts_of_category | first %}
+
+  {% if category_name == first_post.categories[0] %}
+    {% assign sub_categories = "" | split: "" %}
+
+    {% for post in posts_of_category %}
+      {% assign second_category = post.categories[1] %}
+      {% if second_category %}
+        {% unless sub_categories contains second_category %}
+          {% assign sub_categories = sub_categories | push: second_category %}
+        {% endunless %}
+      {% endif %}
+    {% endfor %}
+
+    {% assign sub_categories = sub_categories | sort %}
+    {% assign sub_categories_size = sub_categories | size %}
+
+  <div class="card categories">
+    <!-- top-category -->
+    <div class="card-header d-flex justify-content-between hide-border-bottom"
+        id="{{ HEAD_PREFIX }}{{ group_index }}">
+      <span>
+      {% if sub_categories_size > 0 %}
+        <i class="far fa-folder-open fa-fw"></i>
+      {% else %}
+        <i class="far fa-folder fa-fw"></i>
+      {% endif %}
+        <a href="{{ site.baseurl }}/categories/{{ category_name | slugify | url_encode }}/"
+          class="ml-1 mr-2">
+          {{ category_name }}
+        </a>
+
+        <!-- content count -->
+        {% assign top_posts_size = site.categories[category_name] | size %}
+        <span class="text-muted small font-weight-light">
+          {% if sub_categories_size > 0 %}
+            {{ sub_categories_size }}
+            {% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
+          {% endif %}
+            {{ top_posts_size }}
+            post{% if top_posts_size > 1 %}s{% endif %}
+        </span>
+      </span>
+
+      <!-- arrow -->
+      {% if sub_categories_size > 0%}
+      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse"
+        aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger"
+        class="category-trigger hide-border-bottom">
+        <i class="fas fa-fw fa-angle-down"></i>
+      </a>
+      {% else %}
+      <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
+        <i class="fas fa-fw fa-angle-right"></i>
+      </span>
+      {% endif %}
+
+    </div> <!-- .card-header -->
+
+    <!-- Sub-categories -->
+    {% if sub_categories_size > 0 %}
+    <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
+      <ul class="list-group">
+        {% for sub_category in sub_categories %}
+        <li class="list-group-item">
+          <i class="far fa-folder fa-fw"></i>
+          <a href="{{ site.baseurl }}/categories/{{ sub_category | slugify | url_encode }}/"
+            class="ml-1 mr-2">{{ sub_category }}</a>
+          {% assign posts_size = site.categories[sub_category] | size %}
+          <span class="text-muted small font-weight-light">{{ posts_size }}
+            post{% if posts_size > 1 %}s{% endif %}
+          </span>
+        </li>
+        {% endfor %}
+      </ul>
+    </div>
+    {% endif %}
+
+  </div> <!-- .card -->
+
+    {% assign group_index = group_index | plus: 1 %}
+
+  {% endif %}
+{% endfor %}

_layouts/default.html

@@ -9,19 +9,13 @@ layout: compress
 
 <!DOCTYPE html>
 
-{% if site.lang %}
-  {% assign lang = site.lang | split: "_" | first %}
-{% else %}
-  {% assign lang = 'en' %}
-{% endif %}
-
 {% capture prefer_mode %}
-  {% if site.theme_mode != "dual" %}
+  {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ lang }}" {{ prefer_mode }} >
+<html lang="{{ site.lang | split: "_" | first | default: "en" }}" {{ prefer_mode }}>
 
   {% include head.html %}
 
@@ -46,6 +40,10 @@ layout: compress
 
     </div> <!-- #main-wrapper -->
 
+    {% if page.mermaid %}
+      {% include mermaid.html %}
+    {% endif %}
+
     <div id="mask"></div>
 
     <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
@@ -54,10 +52,6 @@ layout: compress
 
     {% include search-loader.html %}
 
-    {% if site.google_analytics.id and jekyll.environment == 'production' %}
-      {% include google-analytics.html %}
-    {% endif %}
-
   </body>
 
 </html>

_layouts/home.html

@@ -49,13 +49,10 @@ layout: page
 {% for post in posts %}
 
   <div class="post-preview">
-    <div class="d-flex justify-content-between pr-xl-2">
+    <a href="{{ post.url | relative_url }}">
-      <h1><a href="{{ post.url | relative_url }}">{{ post.title }}</a></h1>
+      <h1>{{ post.title }}</h1>
-      {% if post.pin == true %}
+    </a>
-        <i class="fas fa-thumbtack fa-fw text-muted mt-1 ml-2 mt-xl-2" data-toggle="tooltip" data-placement="left"
+
-        title="Pinned"></i>
-      {% endif %}
-    </div>
     <div class="post-content">
       <p>
         {% include no-linenos.html content=post.content %}
@@ -63,11 +60,17 @@ layout: page
       </p>
     </div>
 
-    <div class="post-meta text-muted">
+    <div class="post-meta text-muted d-flex justify-content-between">
+
+      <div>
         <!-- posted date -->
-      <i class="far fa-clock fa-fw"></i>
+        <i class="far fa-calendar fa-fw"></i>
         {% include timeago.html date=post.date tooltip=true %}
 
+        <!-- time to read -->
+        <i class="far fa-clock fa-fw"></i>
+        {% include read-time.html content=post.content %}
+
         <!-- page views -->
         {% if site.google_analytics.pv.enabled %}
         <i class="far fa-eye fa-fw"></i>
@@ -76,6 +79,16 @@ layout: page
         </span>
         {% endif %}
       </div>
+
+      {% if post.pin %}
+      <div class="pin">
+        <i class="fas fa-thumbtack fa-fw"></i>
+        <span>{{ site.data.label.pin_prompt }}</span>
+      </div>
+      {% endif %}
+
+    </div> <!-- .post-meta -->
+
   </div> <!-- .post-review -->
 
 {% endfor %}

_layouts/post.html

@@ -18,43 +18,41 @@ layout: default
       <div class="post-meta text-muted d-flex flex-column">
         <!-- Published date and author -->
         <div>
-          Posted
           {% include timeago.html date=page.date tooltip=true %}
           by
           <span class="author">
-          {% if page.author %}
+            {{ page.author | default: site.author }}
-            {{ page.author }}
-          {% else %}
-            {{ site.author }}
-          {% endif %}
           </span>
         </div>
 
+        <div>
           <!-- lastmod -->
           {% if page.last_modified_at %}
-        <div>
+          <span>
             Updated
             {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
-        </div>
+          </span>
           {% endif %}
 
+          <!-- read time -->
+          {% include read-time.html content=content %}
+
           <!-- page views -->
           {% if site.google_analytics.pv.enabled %}
-        <div>
           <span id="pv" class="pageviews"><i class="fas fa-spinner fa-spin fa-fw"></i></span>
-          views
-        </div>
           {% endif %}
 
+        </div>
+
       </div> <!-- .post-meta -->
 
       <div class="post-content">
         {%- capture img_placehodler -%}
           data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
-        {% endcapture%}
+        {%- endcapture -%}
 
         {% if page.image %}
-          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="post-preview-img">
+          <img src="{{ img_placehodler }}" data-src="{{ page.image }}" class="preview-img">
         {% endif %}
 
         <!-- Using lozad. See: <https://github.com/ApoorvSaxena/lozad.js#usage> -->
@@ -73,7 +71,7 @@ layout: default
         <div class="post-meta mb-3">
           <i class="far fa-folder-open fa-fw mr-1"></i>
           {% for category in page.categories %}
-            <a href='{{ site.baseurl }}/categories/{{ category | replace: ' ', '-' | downcase | url_encode }}/'>{{ category }}</a>
+            <a href='{{ site.baseurl }}/categories/{{ category | slugify | url_encode }}/'>{{ category }}</a>
             {%- unless forloop.last -%}, {%- endunless -%}
           {% endfor %}
         </div>
@@ -84,7 +82,7 @@ layout: default
         <div class="post-tags">
           <i class="fa fa-tags fa-fw mr-1"></i>
           {% for tag in page.tags %}
-          <a href="{{ site.baseurl }}/tags/{{ tag | replace: ' ', '-' | downcase | url_encode }}/"
+          <a href="{{ site.baseurl }}/tags/{{ tag | slugify | url_encode }}/"
             class="post-tag no-text-decoration" >
             {{- tag -}}
           </a>

_layouts/tags.html

@@ -0,0 +1,26 @@
+---
+layout: page
+
+# All the Tags of posts.
+# v2.0
+# https://github.com/cotes2020/jekyll-theme-chirpy
+# © 2017-2019 Cotes Chung
+# MIT License
+---
+
+<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
+
+  {% assign tags = "" | split: "" %}
+  {% for t in site.tags %}
+    {% assign tags = tags | push: t[0] %}
+  {% endfor %}
+
+  {% assign sorted_tags = tags | sort_natural %}
+
+  {% for t in sorted_tags %}
+    <div>
+      <a class="tag" href="{{ site.baseurl }}/tags/{{ t | slugify | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
+    </div>
+  {% endfor %}
+
+</div>

_posts/2019-08-08-text-and-typography.md

@@ -5,6 +5,7 @@ date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
 tags: [typography]
 math: true
+mermaid: true
 image: /assets/img/sample/devices-mockup.png
 ---
 
@@ -12,18 +13,16 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 
 ## Titles
-
 ---
+# H1 - heading
 
-# H1
+<h2 data-toc-skip>H2 - heading</h2>
 
-<h2 data-toc-skip>H2</h2>
+<h3 data-toc-skip>H3 - heading</h3>
-
-<h3 data-toc-skip>H3</h3>
-
-<h4>H4</h4>
 
+<h4>H4 - heading</h4>
 ---
+<br>
 
 ## Paragraph
 
@@ -43,17 +42,25 @@ Fluttering and dancing in the breeze.
 
 ### Ordered list
 
-1. first item
+1. Firstly
-2. second item
+2. Secondly
-3. third item
+3. Thirdly
 
 ### Unordered list
 
-- item 1
+- Chapter
-	- sub item 1
+	- Setcion
-	- sub item 2
+      - Paragraph
 
-- item 2
+### Checkbox list
+
+- [ ] TODO
+- [x] Completed
+- Hold on
+- [ ] Defeat COVID-19
+  - [x] Vaccine production
+  - [ ] Economic recovery
+  - [ ] People smile again
 
 ## Block Quote
 
@@ -79,32 +86,50 @@ Click the hook will locate the footnote[^footnote].
 
 ## Images
 
-By default, the image is centered and the image caption can be displayed at the bottom:
+- Default (with caption)
 
 ![Desktop View](/assets/img/sample/mockup.png)
 _Full screen width and center alignment_
 
-You can change the size of the picture:
+<br>
+
+- Specify width
 
 ![Desktop View](/assets/img/sample/mockup.png){: width="400"}
 _400px image width_
 
-In addition, you can use class `normal` , `left` and `right` to specify the image position (but in these case, the image caption is prohibited), for example:
+<br>
 
-- Normal position
+- Left aligned
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="350" class="normal"}
+![Desktop View](/assets/img/sample/mockup.png){: width="350" .normal}
 
-- Float to the left
+<br>
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="left"}
+- Float to left
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .left}
   "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
-- Float to the right
+<br>
 
-  ![Desktop View](/assets/img/sample/mockup.png){: width="240" class="right"}
+- Float to right
+
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .right}
   "A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space. A repetitive and meaningless text is used to fill the space."
 
+<br>
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
 ## Inline code
 
 This is an example of `Inline Code`.
@@ -173,7 +198,7 @@ fi;
 ```
 {% endraw %}
 
-#### HTML
+#### Html
 
 ```html
 <div class="sidenav">
@@ -190,21 +215,27 @@ fi;
 </div>
 ```
 
-**Horizontal Scrolling**
+#### Java
 
-```html
+```java
-<div class="panel-group">
+private void writeObject(java.io.ObjectOutputStream s)
-  <div class="panel panel-default">
+  throws java.io.IOException {
-    <div class="panel-heading" id="{{ category_name }}">
+  // Write out any hidden serialization magic
-      <i class="far fa-folder"></i>
+  s.defaultWriteObject();
-      <p>This is a very long long long long long long long long long long long long long long long long long long long long long line.</p>
+
-      </a>
+  // Write out HashMap capacity and load factor
-    </div>
+  s.writeInt(map.capacity());
-  </div>
+  s.writeFloat(map.loadFactor());
-</div>
+
+  // Write out size
+  s.writeInt(map.size());
+
+  // Write out all elements in the proper order.
+  for (E e: map.keySet())
+    s.writeObject(e);
+}
 ```
 
-
 ## Reverse Footnote
 
 [^footnote]: The footnote source.

_posts/2019-08-08-write-a-new-post.md

@@ -8,7 +8,7 @@ tags: [writing]
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. From `v2.4.1`, you can create sub-directories under `_posts/` to categorize posts.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_post/` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`.
 
 ## Front Matter
 
@@ -68,7 +68,21 @@ math: true
 ---
 ```
 
-## Preview Image
+## Mermaid
+
+[**Mermaid**](https://github.com/mermaid-js/mermaid) is a great diagrams generation tool. To enable it on your post, add the following to the YAML block:
+
+```yml
+---
+mermaid: true
+---
+```
+
+Then you can use it like other markdown language: surround the graph code with <code class="highlighter-rouge">```mermaid</code>.
+
+## Images
+
+### Preview image
 
 If you want to add an image to the top of the post contents, specify the url for the image by:
 
@@ -78,6 +92,49 @@ image: /path/to/image-file
 ---
 ```
 
+### Image caption
+
+Add italics to the next line of an image，then it will become the caption and appear at the bottom of the image:
+
+```markdown
+![img-description](/path/to/image)
+_Image Caption_
+```
+
+### Image size
+
+You can specify the width (and height) of a image with `width`:
+
+```markdown
+![Desktop View](/assets/img/sample/mockup.png){: width="400"}
+```
+
+### Image position
+
+By default, the image is centered, but you can specify the position by using one of class `normal` , `left` and `right`. For example:
+
+- **Normal position**
+
+  Image will be left aligned in below sample:
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="350" .normal}
+  ```
+
+- **Float to the left**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .left}
+  ```
+
+- **Float to the right**
+
+  ```markdown
+  ![Desktop View](/assets/img/sample/mockup.png){: width="240" .right}
+  ```
+
+> **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
+
 ## Pinned Posts
 
 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:

_tabs/archives.md

@@ -1,42 +1,7 @@
 ---
+layout: archives
 title: Archives
 icon: fas fa-archive
 order: 3
-
-# The Archives of posts.
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
 
-<div id="archives" class="pl-xl-2">
-{% for post in site.posts %}
-  {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %}
-  {% capture pre_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %}
-  {% if forloop.first %}
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  <span class="lead">{{this_year}}</span>
-  <ul class="list-unstyled">
-  {% endif %}
-    <li>
-      <div>
-        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
-        {% capture this_month %}{{ post.date | date: "%b" }}{% endcapture %}
-        <span class="date day">{{ this_day }}</span>
-        <span class="date month small text-muted">{{ this_month }}</span>
-        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
-      </div>
-    </li>
-  {% if forloop.last %}
-  </ul>
-  {% elsif this_year != pre_year %}
-  </ul>
-  <span class="lead">{{pre_year}}</span>
-  <ul class="list-unstyled">
-    {% assign last_day = "" %}
-    {% assign last_month = "" %}
-  {% endif %}
-{% endfor %}
-</div>

_tabs/categories.md

@@ -1,106 +1,6 @@
 ---
+layout: categories
 title: Categories
 icon: fas fa-stream
 order: 1
-
-# All the Categories of posts
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
-
-{% assign HEAD_PREFIX = "h_" %}
-{% assign LIST_PREFIX = "l_" %}
-
-{% assign group_index = 0 %}
-
-{% assign sort_categories = site.categories | sort %}
-
-{% for category in sort_categories %}
-  {% assign category_name = category | first %}
-  {% assign posts_of_category = category | last %}
-  {% assign first_post = posts_of_category | first %}
-
-  {% if category_name == first_post.categories[0] %}
-    {% assign sub_categories = "" | split: "" %}
-
-    {% for post in posts_of_category %}
-      {% assign second_category = post.categories[1] %}
-      {% if second_category %}
-        {% unless sub_categories contains second_category %}
-          {% assign sub_categories = sub_categories | push: second_category %}
-        {% endunless %}
-      {% endif %}
-    {% endfor %}
-
-    {% assign sub_categories = sub_categories | sort %}
-    {% assign sub_categories_size = sub_categories | size %}
-
-  <div class="card categories">
-    <!-- top-category -->
-    <div class="card-header d-flex justify-content-between hide-border-bottom"
-        id="{{ HEAD_PREFIX }}{{ group_index }}">
-      <span>
-      {% if sub_categories_size > 0 %}
-        <i class="far fa-folder-open fa-fw"></i>
-      {% else %}
-        <i class="far fa-folder fa-fw"></i>
-      {% endif %}
-        <a href="{{ site.baseurl }}/categories/{{ category_name | replace: ' ', '-' | downcase | url_encode }}/"
-          class="ml-1 mr-2">
-          {{ category_name }}
-        </a>
-
-        <!-- content count -->
-        {% assign top_posts_size = site.categories[category_name] | size %}
-        <span class="text-muted small font-weight-light">
-          {% if sub_categories_size > 0 %}
-            {{ sub_categories_size }}
-            {% if sub_categories_size > 1 %}categories{% else %}category{% endif %},
-          {% endif %}
-            {{ top_posts_size }}
-            post{% if top_posts_size > 1 %}s{% endif %}
-        </span>
-      </span>
-
-      <!-- arrow -->
-      {% if sub_categories_size > 0%}
-      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" 
-        aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger" 
-        class="category-trigger hide-border-bottom">
-        <i class="fas fa-fw fa-angle-down"></i>
-      </a>
-      {% else %}
-      <span data-toggle="collapse" class="category-trigger hide-border-bottom disabled">
-        <i class="fas fa-fw fa-angle-right"></i>
-      </span>
-      {% endif %}
-
-    </div> <!-- .card-header -->
-
-    <!-- Sub-categories -->
-    {% if sub_categories_size > 0 %}
-    <div id="{{ LIST_PREFIX }}{{ group_index }}" class="collapse show" aria-expanded="true">
-      <ul class="list-group">
-        {% for sub_category in sub_categories %}
-        <li class="list-group-item">
-          <i class="far fa-folder fa-fw"></i>
-          <a href="{{ site.baseurl }}/categories/{{ sub_category | replace: ' ', '-' | downcase | url_encode }}/"
-            class="ml-1 mr-2">{{ sub_category }}</a>
-          {% assign posts_size = site.categories[sub_category] | size %}
-          <span class="text-muted small font-weight-light">{{ posts_size }}
-            post{% if posts_size > 1 %}s{% endif %}
-          </span>
-        </li>
-        {% endfor %}
-      </ul>
-    </div>
-    {% endif %}
-
-  </div> <!-- .card -->
-
-    {% assign group_index = group_index | plus: 1 %}
-
-  {% endif %}
-{% endfor %}

_tabs/tags.md

@@ -1,31 +1,6 @@
 ---
+layout: tags
 title: Tags
 icon: fas fa-tags
 order: 2
-
-# All the Tags of posts.
-# v2.0
-# https://github.com/cotes2020/jekyll-theme-chirpy
-# © 2017-2019 Cotes Chung
-# MIT License
 ---
-
-{% comment %}
-  'site.tags' looks like a Map, e.g. site.tags.MyTag.[ Post0, Post1, ... ]
-  Print the {{ site.tags }} will help you to understand it.
-{% endcomment %}
-<div id="tags" class="d-flex flex-wrap ml-xl-2 mr-xl-2">
-{% assign tags = "" | split: "" %}
-{% for t in site.tags %}
-  {% assign tags = tags | push: t[0] %}
-{% endfor %}
-
-{% assign sorted_tags = tags | sort_natural %}
-
-{% for t in sorted_tags %}
-  <div>
-    <a class="tag" href="{{ site.baseurl }}/tags/{{ t | replace: ' ', '-' | downcase | url_encode }}/">{{ t }}<span class="text-muted">{{ site.tags[t].size }}</span></a>
-  </div>
-{% endfor %}
-
-</div>

assets/css/_addon/main.scss

@@ -12,23 +12,18 @@
 @import "_colors/light-typography";
 @import "_colors/dark-typography";
 
-@mixin set-visible($light-display, $dark-display) {
-  [light-mode-invisible] {
-    display: $light-display;
-  }
-
-  [dark-mode-invisible] {
-    display: $dark-display;
-  }
-}
 
 @mixin mode-toggle($dark-mode: false) {
   @if $dark-mode {
-    @include set-visible(inline-block, none);
     @include dark-scheme;
+    .mode-toggle {
+      transform: rotateY(180deg);
+    }
   } @else {
-    @include set-visible(none, inline-block);
     @include light-scheme;
+    .mode-toggle {
+      transform: none;
+    }
   }
 }
 
@@ -191,7 +186,7 @@ $sidebar-display: "sidebar-display";
     #mode-toggle-wrapper {
       i {
         @include sidebar-links;
-        margin-right: 0;
+        margin: 0;
         font-size: 1.05rem;
         text-align: center;
         position: relative;
@@ -211,10 +206,10 @@ $sidebar-display: "sidebar-display";
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
-    -webkit-transition: top .5s ease;
+    -webkit-transition: top 0.5s ease;
-    -moz-transition: top .5s ease;
+    -moz-transition: top 0.5s ease;
-    -o-transition: top .5s ease;
+    -o-transition: top 0.5s ease;
-    transition: top .5s ease;
+    transition: top 0.5s ease;
   }
 }
 
@@ -248,9 +243,9 @@ $sidebar-display: "sidebar-display";
   img {
     width: 100%;
     height: 100%;
-    -webkit-transition: transform .5s;
+    -webkit-transition: transform 0.5s;
-    -moz-transition: transform .5s;
+    -moz-transition: transform 0.5s;
-    transition: transform .5s;
+    transition: transform 0.5s;
 
     &:hover {
       -ms-transform: scale(1.2);
@@ -303,7 +298,7 @@ $sidebar-display: "sidebar-display";
     &:not(:last-child) {
       &::after {
         content: "›";
-        padding: 0 .3rem;
+        padding: 0 0.3rem;
       }
     }
   }
@@ -320,7 +315,7 @@ $sidebar-display: "sidebar-display";
   border-radius: 1rem;
   border: 1px solid var(--search-wrapper-bg);
   background: var(--search-wrapper-bg);
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
   i {
     z-index: 2;
     font-size: 0.9rem;
@@ -341,7 +336,7 @@ $sidebar-display: "sidebar-display";
   background: center;
   border: 0;
   border-radius: 0;
-  padding: 0.18rem .3rem;
+  padding: 0.18rem 0.3rem;
   color: var(--text-color);
 }
 
@@ -543,8 +538,8 @@ footer {
     background: none;
     border: 1px solid var(--btn-border-color);
     border-radius: 0.8rem;
-    padding: 0.3rem .5rem;
+    padding: 0.3rem 0.5rem;
-    margin: 0 .35rem .5rem 0;
+    margin: 0 0.35rem 0.5rem 0;
     &:hover {
       background-color: #2a408e;
       border-color: #2a408e;
@@ -647,7 +642,7 @@ blockquote {
 }
 
 kbd {
-  margin: 0 .3rem;
+  margin: 0 0.3rem;
 }
 
 sup {
@@ -681,7 +676,7 @@ sup {
 
 .footnote {
   @at-root a#{&} {
-    margin: 0 .2em;
+    margin: 0 0.2em;
     border-bottom-style: none !important;
     -webkit-transition: background-color 1.5s ease-in-out; /* Safari prior 6.1 */
     transition: background-color 1.5s ease-in-out;
@@ -812,7 +807,7 @@ div.post-content .table-wrapper {
   word-wrap: break-word;
 
   @mixin img($caption: false) {
-    > img:not([style]) {
+    > img[data-src] {
       margin: 0.5rem 0;
 
       &:not(.normal):not(.left):not(.right) {
@@ -865,7 +860,35 @@ div.post-content .table-wrapper {
     font-size: 1.08rem;
     @include img(true);
   }// p
-}
+
+  ul {
+    &.task-list, &:not([class]) {
+      padding-left: 2rem;
+    }
+
+    // attribute 'hide-bullet' was added by liquid
+    .task-list-item[hide-bullet] {
+      list-style-type: none;
+
+      > i { // checkbox icon
+        margin: 0 0.4rem 0.2rem -1.4rem;
+        vertical-align: middle;
+        color: var(--checkbox-color);
+        &.checked {
+          color: var(--checkbox-checked-color);
+        }
+      }
+
+    }
+
+    input[type=checkbox] {
+      margin: 0 0.5rem 0.2rem -1.3rem;
+      vertical-align: middle;
+    }
+
+  } // ul
+
+} // .post-content
 
 .tag:hover {
   @extend %tag-hover;
@@ -877,7 +900,7 @@ div.post-content .table-wrapper {
   text-align: center;
   background: var(--tag-bg);
   border-radius: 0.3rem;
-  padding: 0 .4rem;
+  padding: 0 0.4rem;
   color: inherit;
   line-height: 1.3rem;
   &:not(:last-child) {
@@ -961,7 +984,7 @@ div.post-content .table-wrapper {
   box-shadow: none;
   border-color: var(--input-focus-border-color) !important;
   background: center !important;
-  transition: background-color .15s ease-in-out,border-color .15s ease-in-out;
+  transition: background-color 0.15s ease-in-out,border-color 0.15s ease-in-out;
 }
 
 /*--- Responsive Design ---*/
@@ -992,13 +1015,6 @@ div.post-content .table-wrapper {
     @include ml-mr(1.8rem);
   }
 
-  /* table text in small screens */
-  div > table, p ~ table {
-    width: 100%;
-    table-layout: fixed;
-    word-wrap: break-word;
-  }
-
   #main-wrapper {
     padding-bottom: $footer-height;
   }
@@ -1299,8 +1315,8 @@ div.post-content .table-wrapper {
   }
 
   #search-input {
-    -webkit-transition: all .3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
-    transition: all .3s ease-in-out;
+    transition: all 0.3s ease-in-out;
   }
 
   #search-result-wrapper {
@@ -1458,7 +1474,7 @@ div.post-content .table-wrapper {
         @include icon-round(1.65rem);
         line-height: 1rem;
         font-size: 0.6rem;
-        padding: 0.5em 0 0 .1em;
+        padding: 0.5em 0 0 0.1em;
         display: inline-block!important;
       }
     }

assets/css/_addon/module.scss

@@ -17,6 +17,7 @@
 %table-cell {
   padding: 0.4rem 1rem;
   font-size: 95%;
+  white-space: nowrap;
 }
 
 %link-hover {

assets/css/_addon/syntax.scss

@@ -36,11 +36,11 @@ html[mode=dark] {
 }
 
 %code-snippet-radius {
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 0.8rem 1rem;
+  padding: 1.5rem;
 }
 
 $code-font-size: 0.85rem;
@@ -69,8 +69,8 @@ div > pre {
 
   overflow: auto;
   .lineno {
-    margin: 0.8rem 0;
+    margin-left: 0.2rem;
-    padding: 0 0.5rem;
+    padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -131,8 +131,7 @@ code {
 }
 
 td.rouge-code {
-  padding-left: 1rem;
+  padding: 1.5rem 1.5rem 1.5rem 1rem;
-  padding-right: 1rem;
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */
@@ -149,3 +148,20 @@ div {
     }
   }
 }
+
+[class^='language-']::before {
+  content: attr(lang);
+  position: absolute;
+  right: 1.8rem;
+  margin-top: 3px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--highlight-lineno-color);
+  text-transform: uppercase;
+}
+
+@media (min-width: 768px) {
+  [class^='language-']::before {
+    right: 3.1rem;
+  }
+}

assets/css/_colors/dark-syntax.scss

@@ -8,22 +8,22 @@
 
 @mixin dark-syntax {
   /* -----  My styles ------ */
-  --highlight-bg-color: #272822;
+  --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #3c4042;
+  --highlight-lineno-border-color: #303435;
-  --inline-code-bg: var(--highlight-bg-color);
+  --inline-code-bg: #272822;
 
   .highlight {
     .gp { color: #818c96; }
   }
 
-  pre { color: #818c96; } /* override Bootstrap */
+  pre { color: #bfbfbf; } /* override Bootstrap */
   kbd { background-color: black; }
 
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
-  .highlight pre { background-color: #272822; }
+  .highlight pre { background-color: var(--highlight-bg-color); }
-  .highlight .hll { background-color: #272822; }
+  .highlight .hll { background-color: var(--highlight-bg-color); }
   .highlight .c { color: #75715e; } /* Comment */
   .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
   .highlight .k { color: #66d9ef; } /* Keyword */
@@ -35,7 +35,7 @@
   .highlight .cp { color: #75715e; } /* Comment.Preproc */
   .highlight .c1 { color: #75715e; } /* Comment.Single */
   .highlight .cs { color: #75715e; } /* Comment.Special */
-  .highlight .ge { font-style: italic; } /* Generic.Emph */
+  .highlight .ge { color: inherit; font-style: italic; } /* Generic.Emph */
   .highlight .gs { font-weight: bold; } /* Generic.Strong */
   .highlight .kc { color: #66d9ef; } /* Keyword.Constant */
   .highlight .kd { color: #66d9ef; } /* Keyword.Declaration */

assets/css/_colors/dark-typography.scss

@@ -32,6 +32,8 @@
   --btn-box-shadow: var(--main-wrapper-bg);
   --card-header-bg: rgb(51, 50, 50);
   --label-color: rgb(108, 117, 125);
+  --checkbox-color: rgb(118 120 121);
+  --checkbox-checked-color: var(--link-color);
 
   /* Sidebar */
   --nav-cursor-color: rgb(183, 182, 182);
@@ -49,6 +51,8 @@
   --btn-text-color: var(--text-color);
   --btn-paginator-border-color: var(--btn-border-color);
   --btn-paginator-shadow: var(--main-wrapper-bg);
+  --pin-bg: rgb(34 35 37);
+  --pin-color: iherit;
 
   /* Posts */
   --toc-highlight: rgb(116, 178, 243);

assets/css/_colors/light-typography.scss

@@ -23,8 +23,10 @@
   --tb-border-color: #eaeaea;
   --button-bg: #fff;
   --btn-backtotop-color: #686868;
-  --btn-backtotop-border-color: #f1f1f1; //--main-border-color,
+  --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
+  --checkbox-color: darkgrey;
+  --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
   --sidebar-bg: radial-gradient(
@@ -50,6 +52,8 @@
   --btn-text-color: #f8f8f8;
   --btn-paginator-border-color: #f1f1f1;
   --btn-paginator-shadow: #4b92d2;
+  --pin-bg: #f5f5f5;
+  --pin-color: #999fa4;
 
   /* Posts */
   --btn-share-hover-color: var(--link-color);

assets/css/home.scss

@@ -20,17 +20,14 @@
     h1 {
       font-size: 1.4rem;
       margin: 0;
-      ~i { // pinned icon
-        font-size: 0.86rem;
-      }
     }
 
     .post-meta {
       i {
         font-size: 0.73rem;
-        &:not(:first-child) { // post-meta icons on the homepage
-          margin-left: 1.5rem;
       }
+      span:not(:last-child) {
+        margin-right: 1.2rem;
       }
     }
 
@@ -38,7 +35,7 @@
       margin-top: 0.6rem;
       margin-bottom: 0.6rem;
       color: var(--post-list-text-color);
-      >p {
+      > p {
         /* Make preview shorter on the homepage */
         margin: 0;
         overflow: hidden;
@@ -49,6 +46,17 @@
       }
     }
 
+    .pin {
+      > i {
+        transform: rotate(45deg);
+        padding-left: 3px;
+        color: var(--pin-color);
+      }
+      > span {
+        display: none;
+      }
+    }
+
   } // .post-preview
 
 } // #post-list
@@ -107,12 +115,6 @@
 
 } // .pagination
 
-@media all and (max-width: 576px) {
-  #post-list .post-meta>span i:not(:first-child) {
-    margin-left: 1rem;
-  }
-}
-
 /* Hide SideBar and TOC */
 @media all and (max-width: 830px) {
   .pagination {
@@ -125,6 +127,21 @@
 
   #post-list {
     margin-top: 1.5rem;
+    .post-preview .post-meta {
+      .pin {
+        background: var(--pin-bg);
+        border-radius: 5px;
+        line-height: 1.4rem;
+        height: 1.3rem;
+        margin-top: 3px;
+        padding-left: 1px;
+        padding-right: 6px;
+
+        > span {
+          display: inline;
+        }
+      }
+    }
   }
 
   .pagination {

assets/css/post.scss

@@ -27,22 +27,44 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   border-color: var(--btn-border-color);
 }
 
+@mixin dot($pl: 0.2rem, $pr: 0.4rem) {
+  content: "\2022";
+  color: rgba(158, 158, 158, 0.8);
+  padding-left: $pl;
+  padding-right: $pr;
+}
+
+.post .post-meta {
+  > div:nth-child(2) {
+    > span:not(:first-child)::before {
+      @include dot;
+    }
+  }
+  #pv::after {
+    content: " views";
+  }
+  .readtime::after {
+    content: " read";
+  }
+}
+
 .post-content {
   > ol, > ul, > dl {
     padding-left: 2rem;
-    li+li {
+    li + li {
       margin-top: 0.3rem;
     }
   }
   li {
     > ol, > ul, > dl { // sub list
       padding-left: 2rem;
+      margin-top: 0.3rem;
     }
     > p {
       margin: 1rem 0 0.8rem;
     }
   }
-  .post-preview-img {
+  .preview-img {
     margin-top: 0;
     margin-bottom: 2.5rem;
     @include align-center;
@@ -137,7 +159,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   position: sticky;
   top: 4rem;
   transition: top 0.2s ease-in-out;
-  animation: fade-up .8s;
+  animation: fade-up 0.8s;
   &.topbar-down {
     top: 6rem;
   }
@@ -163,9 +185,9 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
     border: 1px solid var(--card-border-color);
     background-color: var(--card-bg);
     box-shadow: 0 0 5px 0 var(--card-box-shadow);
-    -webkit-transition: all .3s ease-in-out;
+    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all .3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
-    transition: all .3s ease-in-out;
+    transition: all 0.3s ease-in-out;
     h3 {
       color: var(--text-color);
     }
@@ -317,11 +339,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
   .post {
     .post-meta {
       >div:not(:first-child)::before {
-        content: "\2022";
+        @include dot(0.5rem, 0.2rem);
-        color: rgba(158, 158, 158, 0.8);
-        font-weight: bold;
-        padding-left: 0.5rem;
-        padding-right: 0.3rem;
       }
       &.flex-column {
         -webkit-box-orient: horizontal!important;

assets/js/_commons.js

@@ -18,4 +18,6 @@
 
 {% include_relative _commons/copy-link.js %}
 
+{% include_relative _commons/checkbox.js %}
+
 {% include_relative _utils/tooltip-loader.js %}

assets/js/_commons/back-to-top.js

@@ -1,18 +1,21 @@
 /*
 Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
 */
-$(window).scroll(function() {
+
-  if ($(this).scrollTop() > 50
+$(function() {
-      && $("#sidebar-trigger").css("display") === "none") {
+  $(window).scroll(function() {
+    if ($(this).scrollTop() > 50 &&
+      $("#sidebar-trigger").css("display") === "none") {
       $("#back-to-top").fadeIn();
     } else {
       $("#back-to-top").fadeOut();
     }
-});
+  });
 
-$(function() {
   $("#back-to-top").click(function() {
-    $("body,html").animate({scrollTop: 0}, 800);
+    $("body,html").animate({
+      scrollTop: 0
+    }, 800);
     return false;
   });
 });

assets/js/_commons/checkbox.js

@@ -0,0 +1,12 @@
+/*
+ * Create a more beautiful checkbox
+ */
+
+$(function() {
+  /* hide browser default checkbox */
+  $("input[type=checkbox]").addClass("unloaded");
+  /* create checked checkbox */
+  $("input[type=checkbox][checked]").before("<i class=\"fas fa-check-circle checked\"></i>");
+  /* create normal checkbox */
+  $("input[type=checkbox]:not([checked])").before("<i class=\"far fa-circle\"></i>");
+});

assets/js/_utils/lang-badge.js

@@ -0,0 +1,20 @@
+/**
+ *  Add language indicator to code snippets
+ */
+
+$(function() {
+  const prefix = "language-";
+  const regex = new RegExp(`^${prefix}([a-z])+$`);
+
+  $(`div[class^=${prefix}`).each(function() {
+    let clzsses = $(this).attr("class").split(" ");
+
+    clzsses.forEach((clzss) => {
+      if (regex.test(clzss)) {
+        let lang = clzss.substring(prefix.length);
+        $(this).attr("lang", `${lang}`);
+      }
+    });
+
+  });
+});

assets/js/_utils/pageviews.js

@@ -145,7 +145,7 @@ function displayPageviews(data) {
 
   if ($("#post-list").length > 0) { /* the Home page */
     $(".post-preview").each(function() {
-      var path = $(this).children("div").children("h1").children("a").attr("href");
+      var path = $(this).find("a").attr("href");
       tacklePV(rows, path, $(this).find(".pageviews"), hasInit);
     });
 

assets/js/data/cache-list.js

@@ -26,18 +26,13 @@ const include = [
   '{{ "/assets/js/home.min.js" | relative_url }}',
   '{{ "/assets/js/page.min.js" | relative_url }}',
   '{{ "/assets/js/post.min.js" | relative_url }}',
+  '{{ "/assets/js/categories.min.js" | relative_url }}',
 
   /*--- HTML ---*/
 
   /* Tabs */
-  {% for tab in site.data.tabs %}
+  {% for tab in site.tabs %}
-    {% capture item %}
+    '{{ tab.url }}',
-      {%- unless tab.name == 'Home' -%}
-        /tabs/{{ tab.name | downcase }}
-      {%- endunless -%}
-      {{- "/" -}}
-    {% endcapture %}
-    '{{ item | relative_url }}',
   {% endfor %}
 
   /*--- Icons ---*/

assets/js/post.min.js

@@ -15,3 +15,5 @@ layout: compress
 {% include_relative _utils/toc-filter.js %}
 
 {% include_relative _utils/img-hyperlink.js %}
+
+{% include_relative _utils/lang-badge.js %}

docs/README.zh-CN.md

@@ -11,7 +11,7 @@ Language: [English](../README.md) | 简体中文
 
 [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/jekyll-theme-chirpy/master/assets/img/sample/devices-mockup.png)](https://chirpy.cotes.info)
 
-> ⚠️ 中文版文档存在更新不及时的风险（开源文档以英文为主，请见谅）。如果发现中、英文内容不匹配的情况，一切以英文版内容为准。如果您愿意的话，可提交 issuse 提醒作者更新中文版 README，谢谢。
+> :bulb: 中文版文档存在更新不及时的风险（开源文档以英文为主，请见谅）。如果发现中、英文内容不匹配的情况，一切以英文版内容为准。如果您愿意的话，可提交 issue 提醒作者更新中文版 README，谢谢。
 
 ## 目录
 
@@ -19,7 +19,7 @@ Language: [English](../README.md) | 简体中文
 - [安装](#安装)
 - [使用](#使用)
 - [参与贡献](#参与贡献)
-- [感谢](#感谢)
+- [鸣谢](#鸣谢)
 - [赞助](#赞助)
 - [许可证书](#许可证书)
 
@@ -33,6 +33,7 @@ Language: [English](../README.md) | 简体中文
 - 语法高亮
 - 二级目录
 - 数学表达式
+- Mermaid 图表
 - 搜索
 - Atom 订阅
 - Disqus 评论

tools/deploy.sh

@@ -15,6 +15,16 @@ _no_branch=false
 _backup_dir="$(mktemp -d)"
 
 init() {
+  if [[ -z ${GITHUB_ACTION+x} ]]; then
+    echo "ERROR: This script is not allowed to run outside of GitHub Action."
+    exit -1
+  fi
+
+  # Gemfile could be changed by `bundle install` in actions workflow
+  if [[ -n $(git status Gemfile.lock --porcelain) ]]; then
+    git checkout -- Gemfile.lock
+  fi
+
   if [[ -z $(git branch -av | grep "$PAGES_BRANCH") ]]; then
     _no_branch=true
     git checkout -b "$PAGES_BRANCH"

tools/run.sh

@@ -7,5 +7,5 @@
 # © 2020 Cotes Chung
 # MIT Licensed
 
-bundle exec jekyll s -l -o
+bundle exec jekyll s -H 0.0.0.0 -l
 

tools/test.sh

@@ -64,7 +64,7 @@ if $_build; then
   JEKYLL_ENV=production bundle exec jekyll b
 fi
 
-bundle exec htmlproofer $DEST \
+bundle exec htmlproofer "$DEST" \
   --disable-external \
   --check-html \
   --empty_alt_ignore \