Bump version to 4.2.1

the default scrollbar on Windows looks like shit

.travis.yml

@@ -3,48 +3,39 @@ dist: bionic
 
 language: minimal
 
+if: tag =~ /^v(\d)+(\.(\d)+){2}$/
+
 jobs:
   include:
-
-    - name: CD
+    - name: Deploy
       language: ruby
       rvm: 2.7.0
-
       addons:
         apt:
           packages:
             # required to avoid SSL error (for htmlproofer)
             - libcurl4-openssl-dev
-
       cache:
         directories:
           - $TRAVIS_BUILD_DIR/vendor/bundle
-
       before_install:
         # match the Gemfile.lock, travis' bundler is 2.1.2
         - gem install bundler:2.2.4
         - bundle config path 'vendor/bundle'
-
       install:
         # overriding to drop the travis `--development` flag
         - bundle install --jobs=3 --retry=3
-
       script:
         - eval "$BUILD_CMD"
-
       git:
         depth: false # for posts' lastmod
 
     - name: Flush Starter
-      script:
-        - eval "$FLUSH_STARTER"
+      script: eval "$FLUSH_STARTER"
 
 before_script:
   - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
 
-branches:
-  only: /.*-stable$/
-
 notifications:
   email:
     recipients:

_config.yml

@@ -7,8 +7,9 @@ theme: jekyll-theme-chirpy
 # change below value to '/projectname'.
 baseurl: ''
 
-# The language of the site layout › http://www.lingoes.net/en/translator/langcode.htm
-# Go to folder '_data/locales' to check the available language options
+# The language of the webpage › http://www.lingoes.net/en/translator/langcode.htm
+# If it has the same name as one of the files in folder `_data/locales`, the layout language will also be changed,
+# otherwise, the layout language will use the default value of 'en'.
 lang: en
 
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone

_data/locales/en.yml

@@ -16,10 +16,11 @@ tabs:
   archives: Archives
   about: About
 
-# text displayed in the search bar
+# the text displayed in the search bar & search results
 search:
   hint: search
   cancel: Cancel
+  no_results: Oops! No result founds.
 
 panel:
   lastmod: Recent Update
@@ -75,7 +76,9 @@ post:
   button:
     next: Newer
     previous: Older
-    copy:
+    copy_code:
+      succeed: Copied!
+    share_link:
       title: Copy link
       succeed: Link copied successfully!
   # pinned prompt of posts list on homepage

_data/locales/id-ID.yml

@@ -0,0 +1,90 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Postingan
+  category: Kategori
+  tag: Tagar
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Beranda
+  categories: Kategori
+  tags: Tagar
+  archives: Arsip
+  about: Tentang
+
+# the text displayed in the search bar & search results
+search:
+  hint: Cari
+  cancel: Batal
+  no_results: Ups! Tidak ada hasil yang ditemukan.
+
+panel:
+  lastmod: Postingan Terbaru
+  trending_tags: Tagar Terpopuler
+  toc: Konten
+
+#  The liquid date format › http://strftime.net/
+date_format:
+  tooltip: "%a, %e %b, %Y, %l:%M %p"
+  post:
+    long: "%e %b, %Y"
+    short: "%e %b"
+    archive_month: "%b"
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Postingan ini dilisensikan di bawah :LICENSE_NAME oleh penulis.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Sebagian konten dilindungi.
+  verbose: >-
+    Kecuali jika dinyatakan, Postingan blog di situs ini dilisensikan
+    di bawah Lisensi Creative Commons Attribution 4.0 International (CC BY 4.0) oleh penulis.
+
+meta: Didukung oleh :PLATFORM dengan tema :THEME.
+
+not_found:
+  statment: Maaf, kami gagal menemukan URL itu atau memang mengarah ke sesuatu yang tidak ada.
+  hint_template: :HEAD_BAK untuk mencoba mencari kembali, atau cari di :ARCHIVES_PAGE.
+  head_back: Kembali ke Beranda
+  archives_page: Halaman Arsip
+
+# ----- Posts related labels -----
+
+post:
+  published: "pada"
+  updated: Diperbarui
+  timeago:
+    day: hari yang lalu
+    hour: jam yang lalu
+    minute: menit yang lalu
+    just_now: baru saja
+  words: kata
+  pageview_measure: dilihat
+  read_time:
+    unit: menit
+    prompt: baca
+  relate_posts: Postingan Lainya
+  share: Bagikan
+  button:
+    next: Terbaru
+    previous: Terlama
+    copy_code:
+      succeed: Disalin!
+    share_link:
+      title: Salin tautan
+      succeed: Tautan berhasil disalin!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Disematkan
+
+# categories page
+categories:
+  category_measure: kategori
+  post_measure: Postingan

_data/locales/zh-CN.yml

@@ -16,10 +16,11 @@ tabs:
   archives: 归档
   about: 关于
 
-# text displayed in the search bar
+# the text displayed in the search bar & search results
 search:
   hint: 搜索
   cancel: 取消
+  no_results: 搜索结果为空
 
 panel:
   lastmod: 最近更新
@@ -74,8 +75,10 @@ post:
   button:
     next: 下一篇
     previous: 上一篇
-    copy:
-      title: 分享链接
+    copy_code:
+      succeed: 已复制！
+    share_link:
+      title:  分享链接
       succeed: 链接已复制！
   # pinned prompt of posts list on homepage
   pin_prompt: 顶置

_includes/disqus.html

@@ -1,25 +1,54 @@
 <!--
   The Disqus lazy loading.
-  Powered by: <https://github.com/osvaldasvalutis/disqusLoader.js>
 -->
 
-<div id="disqus" class="pt-2 pb-2">
-  <p class="text-center text-muted small pb-5">
+<div id="disqus_thread" class="pt-2 pb-2">
+  <p class="text-center text-muted small mb-5">
     Comments powered by <a href="https://disqus.com/">Disqus</a>.
   </p>
 </div>
 
-<script src="{{ '/assets/js/lib/jquery.disqusloader.min.js' | relative_url }}"></script>
-<script>
-  const options = {
-    scriptUrl: '//{{ site.disqus.shortname }}.disqus.com/embed.js',
-
-    disqusConfig: function() {
-      this.page.title = '{{ page.title }}';
-      this.page.url = '{{ page.url | absolute_url }}';
-      this.page.identifier = '{{ page.url }}';
-    }
+<script type="text/javascript">
+  var disqus_config = function () {
+    this.page.url = '{{ page.url | absolute_url }}';
+    this.page.identifier = '{{ page.url }}';
   };
 
-  $.disqusLoader('#disqus', options);
+  /* Lazy loading */
+
+  var disqus_observer = new IntersectionObserver(function (entries) {
+    if(entries[0].isIntersecting) {
+        (function () {
+            var d = document, s = d.createElement('script');
+            s.src = 'https://{{ site.disqus.shortname }}.disqus.com/embed.js';
+            s.setAttribute('data-timestamp', +new Date());
+            (d.head || d.body).appendChild(s);
+        })();
+
+        disqus_observer.disconnect();
+    }
+  }, { threshold: [0] });
+
+  disqus_observer.observe(document.querySelector('#disqus_thread'));
+
+  /* Auto switch theme */
+
+  function reloadDisqus() {
+    /* Disqus hasn't been loaded */
+    if (typeof DISQUS === "undefined") {
+      return;
+    }
+
+    if (document.readyState == 'complete') {
+      DISQUS.reset({ reload: true, config: disqus_config });
+    }
+  }
+
+  const modeToggle = document.querySelector(".mode-toggle");
+
+  if (modeToggle !== null) {
+    modeToggle.addEventListener('click', reloadDisqus);
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', reloadDisqus);
+  }
+
 </script>

_includes/footer.html

@@ -8,9 +8,9 @@
       <p class="mb-0">
         © {{ 'now' | date: "%Y" }}
         <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-        {% if site.data.locales[site.lang].copyright.brief %}
+        {% if site.data.locales[lang].copyright.brief %}
         <span data-toggle="tooltip" data-placement="top"
-          title="{{ site.data.locales[site.lang].copyright.verbose }}">{{ site.data.locales[site.lang].copyright.brief }}</span>
+          title="{{ site.data.locales[lang].copyright.verbose }}">{{ site.data.locales[lang].copyright.brief }}</span>
         {% endif %}
       </p>
     </div>
@@ -25,7 +25,7 @@
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
         {% endcapture %}
 
-        {{ site.data.locales[site.lang].meta
+        {{ site.data.locales[lang].meta
           | default: 'Powered by :PLATFORM with :THEME theme.'
           | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
         }}

_includes/head.html

@@ -8,11 +8,11 @@
 
   {% if page.layout == 'home' or page.layout == 'post' %}
 
-    <!-- i18n for timeago.js -->
-    <meta name="day-prompt" content="{{ site.data.locales[site.lang].post.timeago.day | default: "d ago" }}">
-    <meta name="hour-prompt" content="{{ site.data.locales[site.lang].post.timeago.hour | default: "hr ago" }}">
-    <meta name="minute-prompt" content="{{ site.data.locales[site.lang].post.timeago.minute | default: "min ago" }}">
-    <meta name="justnow-prompt" content="{{ site.data.locales[site.lang].post.timeago.just_now | default: "just now" }}">
+    <!-- i18n for `_javascript/utils/timeago.js` -->
+    <meta name="day-prompt" content="{{ site.data.locales[lang].post.timeago.day }}">
+    <meta name="hour-prompt" content="{{ site.data.locales[lang].post.timeago.hour }}">
+    <meta name="minute-prompt" content="{{ site.data.locales[lang].post.timeago.minute }}">
+    <meta name="justnow-prompt" content="{{ site.data.locales[lang].post.timeago.just_now }}">
 
     {% if site.google_analytics.pv.proxy_endpoint %}
       <meta name="pv-proxy-endpoint" content="{{ site.google_analytics.pv.proxy_endpoint }}">

_includes/js-selector.html

@@ -14,7 +14,7 @@
 
 {% if page.layout == 'post' or page.layout == 'page' %}
   <!-- image lazy-loading & popup -->
-  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js,npm/clipboard@2/dist/clipboard.min.js"></script>
 {% endif %}
 
 {% if page.layout == 'home'

_includes/lang.html

@@ -0,0 +1,8 @@
+{% comment %}
+Detect appearance language and return it through variable "lang"
+{% endcomment %}
+{% if site.data.locales[site.lang] %}
+  {% assign lang = site.lang %}
+{% else %}
+  {% assign lang = 'en' %}
+{% endif %}

_includes/panel.html

@@ -2,6 +2,8 @@
   The Pannel on right side (Desktop views)
 -->
 
+{% include lang.html %}
+
 <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
 
   <div class="access">
@@ -11,7 +13,7 @@
   {% if update_list.size > 0 %}
 
     <div id="access-lastmod" class="post">
-      <span>{{- site.data.locales[site.lang].panel.lastmod | default: 'Recent Update' -}}</span>
+      <span>{{- site.data.locales[lang].panel.lastmod -}}</span>
       <ul class="post-content pl-0 pb-1 ml-1 mt-2">
 
       {% for item in update_list %}
@@ -30,7 +32,7 @@
 
   {% if trending_tags.size > 0 %}
     <div id="access-tags">
-      <span>{{- site.data.locales[site.lang].panel.trending_tags | default: 'Trending Tags' -}}</span>
+      <span>{{- site.data.locales[lang].panel.trending_tags -}}</span>
       <div class="d-flex flex-wrap mt-3 mb-1 mr-3">
 
       {% for tag_name in trending_tags %}
@@ -48,7 +50,7 @@
     <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">
       <span class="pl-3 pt-2 mb-2">
-      {{- site.data.locales[site.lang].panel.toc | default: 'Contents' -}}
+      {{- site.data.locales[lang].panel.toc -}}
       </span>
       <nav id="toc" data-toggle="toc"></nav>
     </div>

_includes/post-nav.html

@@ -5,24 +5,24 @@
 <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 | default: 'previous' }}">
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
     <p>{{ page.previous.title }}</p>
   </a>
   {% else %}
   <span class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[site.lang].post.button.previous | default: 'previous' }}">
+    prompt="{{ site.data.locales[lang].post.button.previous }}">
     <p>-</p>
   </span>
   {% 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 | default: 'next' }}">
+    prompt="{{ site.data.locales[lang].post.button.next }}">
     <p>{{ page.next.title }}</p>
   </a>
   {% else %}
   <span class="btn btn-outline-primary disabled"
-    prompt="{{ site.data.locales[site.lang].post.button.next | default: 'next' }}">
+    prompt="{{ site.data.locales[lang].post.button.next }}">
     <p>-</p>
   </span>
   {% endif %}

_includes/post-sharing.html

@@ -3,7 +3,7 @@
 -->
 
 <div class="share-wrapper">
-  <span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share | default: 'Share' }}</span>
+  <span class="share-label text-muted mr-1">{{ site.data.locales[lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign url = page.url | absolute_url %}
@@ -16,9 +16,10 @@
         </a>
     {% endfor %}
 
-    <i class="fa-fw fas fa-link small" onclick="copyLink('', '{{ site.data.locales[site.lang].post.button.copy.succeed }}')"
+    <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.copy.title }}">
+        title="{{ site.data.locales[lang].post.button.share_link.title }}"
+        title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
     </i>
 
   </span>

_includes/read-time.html

@@ -16,14 +16,15 @@
 {% endunless %}
 
 {% capture read_prompt %}
-  {{- site.data.locales[site.lang].post.read_time.prompt | default: "read" -}}
+  {{- site.data.locales[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 | default: "words" }}">
-  {{- read_time -}}{{" "}}{{- site.data.locales[site.lang].post.read_time.unit | default: "min" -}}
+  title="{{ words }} {{ site.data.locales[lang].post.words }}">
+  {{- read_time -}}{{" "}}{{- site.data.locales[lang].post.read_time.unit -}}
   {%- if include.prompt -%}
-    {% unless site.lang contains 'zh' %}{{" "}}{% endunless %}{{ read_prompt }}
+    {% assign _prompt_words = read_prompt | number_of_words: 'auto' %}
+    {% unless _prompt_words > 1 %}{{" "}}{% endunless %}{{ read_prompt }}
   {%- endif -%}
 </span>

_includes/refactor-content.html

@@ -102,25 +102,41 @@
 
 {% endif %}
 
-<!-- Add lang-badge for code snippets -->
+<!-- Add header for code snippets -->
 
-{% if _content contains '<div class="language-' %}
-  {% assign _code_splits = _content | split: '<div class="language-' %}
-  {% assign _new_content = nil %}
+{% 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 %}
 
-  {% for _snippet in _code_splits %}
-    {% if forloop.first %}
-      {% assign _new_content = _snippet %}
     {% else %}
-      {% assign _lang = _snippet | split: ' ' | first %}
-      {% capture _tag_head %}<div lang="{{_lang}}" class="language-{% endcapture %}
-      {% assign _new_content = _new_content | append: _tag_head | append: _snippet %}
+
+      {% assign _left = _snippet | split: '><' | last%}
+
+      {% if _left contains 'file="' %}
+        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+      {% else %}
+        {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
+      {% endif %}
+
+      {% assign _new_content = _new_content | append: _snippet
+          | append: '<div class="code-header" text-data="'
+          | append: _text
+          | append: '"><button data-original-title="'
+          | append: site.data.locales[lang].post.button.copy_code.succeed
+          | append: '"><i class="far fa-clone"></i></button></div>'
+          | append: '<div class="highlight"><code>'
+      %}
+
     {% endif %}
+
   {% endfor %}
 
-  {% if _new_content %}
-    {% assign _content = _new_content %}
-  {% endif %}
+  {% assign _content = _new_content %}
 
 {% endif %}
 

_includes/related-posts.html

@@ -81,7 +81,7 @@
 {% if index_list.size > 0 %}
   <div id="related-posts" class="mt-5 mb-2 mb-sm-4">
     <h3 class="pt-2 mt-1 mb-4 ml-1"
-      data-toc-skip>{{ site.data.locales[site.lang].post.relate_posts | default: 'Further Reading' }}</h3>
+      data-toc-skip>{{ site.data.locales[lang].post.relate_posts }}</h3>
     <div class="card-deck mb-4">
     {% for entry in index_list %}
       {% assign index = entry | plus: 0 %}

_includes/search-loader.html

@@ -14,9 +14,9 @@
 </div>
 {% endcapture %}
 
-{% capture not_found %}<p class="mt-5">Oops! No result founds.</p>{% endcapture %}
+{% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
 
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.7.3/dest/simple-jekyll-search.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
 
 <script>
 SimpleJekyllSearch({

_includes/search-results.html

@@ -4,7 +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[site.lang].panel.trending_tags | default: 'Trending Tags' }}</h4>
+      <h4 class="text-muted mb-4">{{ site.data.locales[lang].panel.trending_tags }}</h4>
 
       {% include trending-tags.html %}
 

_includes/sidebar.html

@@ -32,7 +32,7 @@
     <li class="nav-item{% if page.layout == 'home' %}{{ " active" }}{% endif %}">
       <a href="{{ '/' | relative_url }}" class="nav-link">
         <i class="fa-fw fas fa-home ml-xl-3 mr-xl-3 unloaded"></i>
-        <span>{{ site.data.locales[site.lang].tabs.home | default: "home" | upcase }}</span>
+        <span>{{ site.data.locales[lang].tabs.home | upcase }}</span>
       </a>
     </li>
     <!-- the real tabs -->
@@ -42,7 +42,7 @@
         <i class="fa-fw {{ tab.icon }} ml-xl-3 mr-xl-3 unloaded"></i>
         {% capture tab_name %}{{ tab.url | split: '/' }}{% endcapture %}
 
-        <span>{{ site.data.locales[site.lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
+        <span>{{ site.data.locales[lang].tabs.[tab_name] | default: tab.title | upcase }}</span>
       </a>
     </li> <!-- .nav-item -->
     {% endfor %}

_includes/timeago.html

@@ -3,9 +3,9 @@
   See: /assets/js/_utils/timeage.js
 -->
 
-{% assign tooltip_df = site.data.locales[site.lang].date_format.tooltip | default: '%a, %b %e, %Y, %l:%M %p %z' %}
-{% assign post_long_df = site.data.locales[site.lang].date_format.post.long | default: '%b %e, %Y' %}
-{% assign post_short_df = site.data.locales[site.lang].date_format.post.short | default: '%b %e' %}
+{% 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 }}

_includes/topbar.html

@@ -10,7 +10,7 @@
 
     {% if paths.size == 0 or page.layout == 'home' %}
       <!-- index page -->
-      <span>{{ site.data.locales[site.lang].tabs.home | default: 'home' | capitalize }}</span>
+      <span>{{ site.data.locales[lang].tabs.home | capitalize }}</span>
 
     {% else %}
 
@@ -19,14 +19,14 @@
         {% if forloop.first %}
           <span>
             <a href="{{ '/' | relative_url }}">
-              {{ site.data.locales[site.lang].tabs.home | default: 'home' | capitalize }}
+              {{ site.data.locales[lang].tabs.home | capitalize }}
             </a>
           </span>
 
         {% elsif forloop.last %}
 
           {% if page.collection == 'tabs' %}
-            <span>{{ site.data.locales[site.lang].tabs[item] | default: page.title }}</span>
+            <span>{{ site.data.locales[lang].tabs[item] | default: page.title }}</span>
           {% else %}
             <span>{{ page.title }}</span>
           {% endif %}
@@ -34,7 +34,7 @@
         {% elsif page.layout == 'category' or page.layout == 'tag' %}
           <span>
             <a href="{{ item | relative_url }}">
-              {{ site.data.locales[site.lang].tabs[item] | default: page.title }}
+              {{ site.data.locales[lang].tabs[item] | default: page.title }}
             </a>
           </span>
         {% endif %}
@@ -49,12 +49,12 @@
 
     <div id="topbar-title">
       {% if page.layout == 'home' %}
-        {{- site.data.locales[site.lang].title | default: site.title -}}
+        {{- site.data.locales[lang].title | default: site.title -}}
       {% elsif page.collection == 'tabs' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-        {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
+        {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}
-        {{- site.data.locales[site.lang].layout[page.layout] | default: page.layout | capitalize -}}
+        {{- site.data.locales[lang].layout[page.layout] | default: page.layout | capitalize -}}
       {% endif %}
     </div>
 
@@ -62,10 +62,10 @@
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
-        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[site.lang].search.hint | default: 'Search' | capitalize }}...">
+        aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
-    <span id="search-cancel" >{{ site.data.locales[site.lang].search.cancel | default: 'Cancel' }}</span>
+    <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
   </div>
 
 </div>

_javascript/copyright

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.1.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_javascript/utils/clipboard.js

@@ -0,0 +1,131 @@
+/*
+ * Clipboard functions
+ *
+ * Dependencies:
+ *   - popper.js (https://github.com/popperjs/popper-core)
+ *   - clipboard.js (https://github.com/zenorocha/clipboard.js)
+ */
+
+$(function() {
+  const btnSelector = '.code-header>button';
+  const ICON_SUCCESS = 'fas fa-check';
+  const ATTR_TIMEOUT = 'timeout';
+  const TIMEOUT = 2000; // in milliseconds
+
+  function isLocked(node) {
+    if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) {
+      let timeout = $(node).attr(ATTR_TIMEOUT);
+      if (Number(timeout) > Date.now()) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function lock(node) {
+    $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT);
+  }
+
+  function unlock(node) {
+    $(node).removeAttr(ATTR_TIMEOUT);
+  }
+
+  /* --- Copy code block --- */
+
+  // Initial the clipboard.js object
+  const clipboard = new ClipboardJS(btnSelector, {
+    target(trigger) {
+      let codeBlock = trigger.parentNode.nextElementSibling;
+      return codeBlock.querySelector('code .rouge-code');
+    }
+  });
+
+  $(btnSelector).tooltip({
+    trigger: 'click',
+    placement: 'left'
+  });
+
+  function getIcon(btn) {
+    let iconNode = $(btn).children();
+    return iconNode.attr('class');
+  }
+
+  const ICON_DEFAULT = getIcon(btnSelector);
+
+  function showTooltip(btn) {
+    $(btn).tooltip('show');
+  }
+
+  function hideTooltip(btn) {
+    $(btn).tooltip('hide');
+    unlock(btn);
+  }
+
+  function setSuccessIcon(btn) {
+    let btnNode = $(btn);
+    let iconNode = btnNode.children();
+    iconNode.attr('class', ICON_SUCCESS);
+    lock(btn);
+  }
+
+  function resumeIcon(btn) {
+    let btnNode = $(btn);
+    let iconNode = btnNode.children();
+    iconNode.attr('class', ICON_DEFAULT);
+    unlock(btn);
+  }
+
+  clipboard.on('success', (e) => {
+    e.clearSelection();
+
+    const trigger = e.trigger;
+    if (isLocked(trigger)) {
+      return;
+    }
+
+    setSuccessIcon(trigger);
+    showTooltip(trigger);
+
+    setTimeout(() => {
+      hideTooltip(trigger);
+      resumeIcon(trigger);
+    }, TIMEOUT);
+
+  });
+
+  /* --- Post link sharing --- */
+
+  $('#copy-link').click((e) => {
+
+    let target = $(e.target);
+
+    if (isLocked(target)) {
+      return;
+    }
+
+    // Copy URL to clipboard
+
+    const url = window.location.href;
+    const $temp = $("<input>");
+
+    $("body").append($temp);
+    $temp.val(url).select();
+    document.execCommand("copy");
+    $temp.remove();
+
+    // Switch tooltip title
+
+    const defaultTitle = target.attr('data-original-title');
+    const succeedTitle = target.attr('title-succeed');
+
+    target.attr('data-original-title', succeedTitle).tooltip('show');
+    lock(target);
+
+    setTimeout(() => {
+      target.attr('data-original-title', defaultTitle);
+      unlock(target);
+    }, TIMEOUT);
+
+  });
+
+});

_javascript/utils/copy-link.js

@@ -1,22 +0,0 @@
-/*
- * Copy current page url to clipboard.
- */
-
-function copyLink(url, msg) {
-  if (!url || 0 === url.length) {
-    url = window.location.href;
-  }
-
-  const $temp = $("<input>");
-  $("body").append($temp);
-  $temp.val(url).select();
-  document.execCommand("copy");
-  $temp.remove();
-
-  let feedback = "Link copied successfully!";
-  if (msg && msg.length > 0) {
-    feedback = msg;
-  }
-
-  alert(feedback);
-}

_layouts/archives.html

@@ -3,6 +3,8 @@ layout: page
 # The Archives of posts.
 ---
 
+{% include lang.html %}
+
 <div id="archives" class="pl-xl-2">
 
 {% for post in site.posts %}
@@ -17,7 +19,7 @@ layout: page
     <li>
       <div>
         {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
-        {% capture _mth_df %}{{ site.data.locales[site.lang].date_format.post.archive_month | default: "%b" }}{% endcapture %}
+        {% capture _mth_df %}{{ site.data.locales[lang].date_format.post.archive_month }}{% endcapture %}
         {% capture this_month %}{{ post.date | date: _mth_df }}{% endcapture %}
         <span class="date day">{{ this_day }}</span>
         <span class="date month small text-muted">{% include no-zero-date.html date_str=this_month %}</span>

_layouts/categories.html

@@ -3,6 +3,8 @@ layout: page
 # All the Categories of posts
 ---
 
+{% include lang.html %}
+
 {% assign HEAD_PREFIX = "h_" %}
 {% assign LIST_PREFIX = "l_" %}
 
@@ -45,10 +47,10 @@ layout: page
         <span class="text-muted small font-weight-light">
           {% if sub_categories_size > 0 %}
             {{ sub_categories_size }}
-            {{ site.data.locales[site.lang].categories.category_measure | default: 'categories' }},
+            {{ site.data.locales[lang].categories.category_measure }},
           {% endif %}
             {{ top_posts_size }}
-            {{ site.data.locales[site.lang].categories.post_measure | default: 'posts' }}
+            {{ site.data.locales[lang].categories.post_measure }}
         </span>
       </span>
 
@@ -81,7 +83,7 @@ layout: page
           {% assign posts_size = site.categories[sub_category] | size %}
           <span class="text-muted small font-weight-light">
             {{ posts_size }}
-            {{ site.data.locales[site.lang].categories.post_measure | default: 'posts' }}
+            {{ site.data.locales[lang].categories.post_measure }}
           </span>
         </li>
         {% endfor %}

_layouts/category.html

@@ -3,6 +3,8 @@ layout: page
 # The Category layout
 ---
 
+{% include lang.html %}
+
 <div id="page-category">
   <h1 class="pl-lg-2">
     <i class="far fa-folder-open fa-fw text-muted"></i>
@@ -11,7 +13,7 @@ layout: page
   </h1>
 
   <ul class="post-content pl-0">
-    {% assign post_df = site.data.locales[site.lang].date_format.post.long | default: '%b %e, %Y' %}
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
 
     {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">

_layouts/default.html

@@ -5,13 +5,15 @@ layout: compress
 
 <!DOCTYPE html>
 
+{% include lang.html %}
+
 {% capture prefer_mode %}
   {% if site.theme_mode %}
     mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
-<html lang="{{ site.lang | default: 'en' }}" {{ prefer_mode }}>
+<html lang="{{ site.lang }}" {{ prefer_mode }}>
 
   {% include head.html %}
 

_layouts/home.html

@@ -3,6 +3,8 @@ layout: page
 # The Home page layout
 ---
 
+{% include lang.html %}
+
 {% assign pinned = site.posts | where: "pin", "true" %}
 {% assign default = site.posts | where_exp: "item", "item.pin != true" %}
 
@@ -78,7 +80,7 @@ layout: page
       {% if post.pin %}
       <div class="pin">
         <i class="fas fa-thumbtack fa-fw"></i>
-        <span>{{ site.data.locales[site.lang].post.pin_prompt | default: 'Pinned' }}</span>
+        <span>{{ site.data.locales[lang].post.pin_prompt }}</span>
       </div>
       {% endif %}
 

_layouts/page.html

@@ -10,7 +10,7 @@ layout: default
       <h1 class="dynamic-title">
         {% if page.collection == 'tabs' %}
           {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
-          {{- site.data.locales[site.lang].tabs[tab_key] | default: page.title -}}
+          {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
         {% else %}
           {{- page.title -}}
         {% endif %}

_layouts/post.html

@@ -3,6 +3,8 @@ layout: default
 # The posts' layout
 ---
 
+{% include lang.html %}
+
 <div class="row">
 
   <div id="post-wrapper" class="col-12 col-lg-11 col-xl-8">
@@ -17,7 +19,7 @@ layout: default
           <span class="semi-bold">
             {{ page.author | default: site.social.name }}
           </span>
-          {% capture _preposition %}{{ site.data.locales[site.lang].post.published | default: 'on' }}{% endcapture %}
+          {% capture _preposition %}{{ site.data.locales[lang].post.published }}{% endcapture %}
           {% include timeago.html date=page.date tooltip=true preposition=_preposition %}
         </div>
 
@@ -25,7 +27,7 @@ layout: default
           <!-- lastmod -->
           {% if page.last_modified_at %}
           <span>
-            {{ site.data.locales[site.lang].post.updated | default: 'Updated' }}
+            {{ site.data.locales[lang].post.updated }}
             {% include timeago.html date=page.last_modified_at class="lastmod" tooltip=true %}
           </span>
           {% endif %}
@@ -38,7 +40,7 @@ layout: default
           <span id="pv" class="pageviews">
             <i class="fas fa-spinner fa-spin fa-fw"></i>
           </span>
-          {{ site.data.locales[site.lang].post.pageview_measure | default: "views" }}
+          {{ site.data.locales[lang].post.pageview_measure }}
           {% endif %}
 
         </div>
@@ -89,13 +91,13 @@ layout: default
         <div class="post-tail-bottom
           d-flex justify-content-between align-items-center mt-3 pt-5 pb-2">
           <div class="license-wrapper">
-          {% if site.data.locales[site.lang].copyright.license.template %}
+          {% if site.data.locales[lang].copyright.license.template %}
             {% capture _replacement %}
-            <a href="{{ site.data.locales[site.lang].copyright.license.link }}">
-              {{ site.data.locales[site.lang].copyright.license.name }}
+            <a href="{{ site.data.locales[lang].copyright.license.link }}">
+              {{ site.data.locales[lang].copyright.license.name }}
             </a>
             {% endcapture %}
-            {{ site.data.locales[site.lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
+            {{ site.data.locales[lang].copyright.license.template | replace: ':LICENSE_NAME', _replacement }}
           {% endif %}
           </div>
 

_layouts/tag.html

@@ -3,6 +3,8 @@ layout: page
 # The layout for Tag page
 ---
 
+{% include lang.html %}
+
 <div id="page-tag">
   <h1 class="pl-lg-2">
     <i class="fa fa-tag fa-fw text-muted"></i>
@@ -10,7 +12,7 @@ layout: page
     <span class="lead text-muted pl-2">{{ page.posts | size }}</span>
   </h1>
   <ul class="post-content pl-0">
-    {% assign post_df = site.data.locales[site.lang].date_format.post.long | default: '%b %e, %Y' %}
+    {% assign post_df = site.data.locales[lang].date_format.post.long %}
 
     {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">

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

@@ -176,44 +176,23 @@ SHELL=/usr/local/bin/bash
 PYENV_SHELL=bash
 ```
 
-#### Ruby
-
-```ruby
-def sum_eq_n?(arr, n)
-  return true if arr.empty? && n == 0
-  arr.product(arr).reject { |a,b| a == b }.any? { |a,b| a + b == n }
-end
-```
-
 #### Shell
 
-```shell
+```bash
 if [ $? -ne 0 ]; then
     echo "The command was not successful.";
     #do the needful / exit
 fi;
 ```
 
-#### Liquid
+### Specific filename
 
-{% raw %}
-```liquid
-{% if product.title contains 'Pack' %}
-  This product's title contains the word Pack.
-{% endif %}
-```
-{% endraw %}
-
-#### Java
-
-```java
-private void writeObject(java.io.ObjectOutputStream s)
-  throws java.io.IOException {
-  // Write out any hidden serialization magic
-  s.defaultWriteObject();
-  for (E e: map.keySet()) s.writeObject(e);
-}
+```sass
+@import
+  "colors/light-typography",
+  "colors/dark-typography"
 ```
+{: file='_sass/jekyll-theme-chirpy.scss'}
 
 ## Reverse Footnote
 

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

@@ -4,6 +4,7 @@ author: Cotes Chung
 date: 2019-08-08 14:10:00 +0800
 categories: [Blogging, Tutorial]
 tags: [writing]
+render_with_liquid: false
 ---
 
 ## Naming and Path
@@ -72,7 +73,7 @@ math: true
 
 [**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
+```yaml
 ---
 mermaid: true
 ---
@@ -107,6 +108,7 @@ Add italics to the next line of an image，then it will become the caption and a
 ![img-description](/path/to/image)
 _Image Caption_
 ```
+{: .nolineno}
 
 ### Image size
 
@@ -115,6 +117,7 @@ In order to prevent the page content layout from shifting when the image is load
 ```markdown
 ![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }
 ```
+{: .nolineno}
 
 ### Image position
 
@@ -127,18 +130,21 @@ By default, the image is centered, but you can specify the position by using one
   ```markdown
   ![Desktop View](/assets/img/sample/mockup.png){: .normal }
   ```
+  {: .nolineno}
 
 - **Float to the left**
 
   ```markdown
   ![Desktop View](/assets/img/sample/mockup.png){: .left }
   ```
+  {: .nolineno}
 
 - **Float to the right**
 
   ```markdown
   ![Desktop View](/assets/img/sample/mockup.png){: .right }
   ```
+  {: .nolineno}
 
 > **Limitation**: Once you specify the position of an image, it is forbidden to add the image caption.
 
@@ -149,6 +155,7 @@ The screenshots of the program window can be considered to show the shadow effec
 ```markdown
 ![Desktop View](/assets/img/sample/mockup.png){: .shadow }
 ```
+{: .nolineno}
 
 ### CDN URL
 
@@ -157,6 +164,7 @@ If you host the images on the CDN, you can save the time of repeatedly writing t
 ```yaml
 img_cdn: https://cdn.com
 ```
+{: file='_config.yml' .nolineno}
 
 Once `img_cdn` is assigned, the CDN url will be added to the path of all images (images of site avatar and posts) starting with `/`.
 
@@ -165,12 +173,14 @@ For instance, when using images:
 ```markdown
 ![The flower](/path/to/flower.png)
 ```
+{: .nolineno}
 
 The parsing result will automatically add the CDN prefix `https://cdn.com` before the image path:
 
 ```html
 <img src="https://cdn.com/path/to/flower.png" alt="The flower">
 ```
+{: .nolineno}
 
 ## Pinned Posts
 
@@ -184,31 +194,51 @@ pin: true
 
 ## Code Block
 
-Markdown symbols ```` ``` ```` can easily create a code block as following examples.
+Markdown symbols ```` ``` ```` can easily create a code block as follows:
 
 ```
-This is a common code snippet, without syntax highlight and line number.
+This is a plaintext code snippet.
 ```
 
-## Specific Language
+### Specifying Language
 
-Using ```` ```language ```` you will get code snippets with line numbers and syntax highlight.
-
-> **Note**: The Jekyll style `{% raw %}{%{% endraw %} highlight LANGUAGE {% raw %}%}{% endraw %}` or `{% raw %}{%{% endraw %} highlight LANGUAGE linenos {% raw %}%}{% endraw %}` are not allowed to be used in this theme !
+Using ```` ```{language} ```` you will get a code block with syntax highlight:
 
+````markdown
 ```yaml
-# Yaml code snippet
-items:
-    - part_no:   A4786
-      descrip:   Water Bucket (Filled)
-      price:     1.47
-      quantity:  4
+key: value
 ```
+````
+
+> **Limination**: The Jekyll style `highlight` tag ais not compatible with this theme.
+
+### Line Number
+
+By default, all languages except `plaintext`, `console` and `terminal` will display line numbers. When you want to hide the line number of the code block, you can append `{: .nolineno}` at the next line:
+
+````markdown
+```shell
+echo 'No more line numbers!'
+```
+{: .nolineno}
+````
+
+### Specifying the Filename
+
+You may have noticed that the code language will be displayed on the left side of the header of the code block. If you want to replace it with the file name, you can add the attribute `file` to achieve this:
+
+````markdown
+```shell
+# content
+```
+{: file="path/to/file" }
+````
 
 ### Liquid Codes
 
-If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}{%{% endraw %} raw {%raw%}%}{%endraw%}` and `{% raw %}{%{% endraw %} endraw {%raw%}%}{%endraw%}` .
+If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
 
+````markdown
 {% raw %}
 ```liquid
 {% if product.title contains 'Pack' %}
@@ -216,6 +246,9 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%
 {% endif %}
 ```
 {% endraw %}
+````
+
+Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.
 
 ## Learn More
 

_posts/2019-08-09-getting-started.md

@@ -25,12 +25,14 @@ Add this line to your Jekyll site's `Gemfile`:
 ```ruby
 gem "jekyll-theme-chirpy"
 ```
+{: .nolineno file='Gemfile' }
 
 And add this line to your Jekyll site's `_config.yml`:
 
 ```yaml
 theme: jekyll-theme-chirpy
 ```
+{: .nolineno file='_config.yml' }
 
 And then execute:
 

_posts/2021-01-03-enable-google-pv.md

@@ -45,6 +45,7 @@ google_analytics:
     proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
     cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
+{: file="_config.yml"}
 
 When you push these changes to your blog, you should start seeing the traffic on your Google Analytics. Play around with Google Analytics dashboard to get familiar with the options available as it takes like 5 mins to pickup your changes. You should now be able to monitor your traffic in realtime.
 
@@ -140,6 +141,7 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
     # XSRF Settings
     XSRF_KEY = 'OnceUponATimeThereLivedALegend'
     ```
+    {: file="src/config.py"}
 
     **Tip:** You can configure a custom domain instead of `https://PROJECT_ID.REGION_ID.r.appspot.com`. But, for the sake of keeping it simple, we will be using the Google provided default URL.
 
@@ -226,6 +228,7 @@ google_analytics:
     proxy_endpoint: 'https://PROJECT_ID.REGION_ID.r.appspot.com/query?id=<ID FROM SUPER PROXY>'
     cache_path:       # the local PV cache data, friendly to visitors from GFW region
 ```
+{: file="_config.yml"}
 
 Now, you should see the Page View enabled on your blog.
 

_sass/addon/commons.scss

@@ -53,6 +53,26 @@ body {
   font-family: 'Source Sans Pro', 'Microsoft Yahei', sans-serif;
 }
 
+/* --- Scrollbar --- */
+
+$scrollbar-size: 7px;
+
+::-webkit-scrollbar {
+  width: $scrollbar-size;
+  height: $scrollbar-size;
+}
+
+::-webkit-scrollbar-track {
+  @at-root body#{&} {
+    -webkit-box-shadow: inset 0 0 6px var(--scrollbar-track-bg);
+  }
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb-bg);
+  border-radius: calc(#{$scrollbar-size} / 2);
+}
+
 /* --- Typography --- */
 
 h1 {
@@ -460,10 +480,6 @@ footer {
     padding-left: 2rem;
 
     li {
-      + li {
-        margin-top: 0.3rem;
-      }
-
       ol,
       ul { // sub list
         padding-left: 2rem;

_sass/addon/syntax.scss

@@ -27,16 +27,18 @@ html[mode=dark] {
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 6px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 1.5rem;
+  padding: 1.2rem;
 }
 
 div > pre {
@@ -86,12 +88,10 @@ div > pre {
   }
 
   .lineno {
-    margin-left: 0.2rem;
     padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
@@ -135,7 +135,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.5rem 1.5rem 1.5rem 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -152,7 +152,8 @@ div {
   &[class^='highlighter-rouge'],
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
     pre.lineno {
       display: none;
     }
@@ -162,25 +163,76 @@ div {
   }
 }
 
-div[class^='language-']::before {
-  content: attr(lang);
-  position: absolute;
-  right: 2rem;
-  margin-top: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--highlight-lineno-color);
-  text-transform: uppercase;
+.code-header {
+  background: var(--code-header-bg);
+  border-top-left-radius: $code-radius;
+  border-top-right-radius: $code-radius;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1.85rem;
+
+  // text data
+  &::before {
+    content: attr(text-data);
+    color: var(--lang-badge-color);
+    padding-left: 1em;
+
+    // language
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    // file name
+    @at-root [file] #{&} {
+      font-size: 0.85rem;
+      text-transform: none;
+    }
+  }
+
+  // clipboard
+  button {
+    border: 1px solid var(--code-header-bg);
+    border-radius: $code-radius;
+    padding: 0;
+    width: 1.95rem;
+    background-color: inherit;
+    color: var(--highlight-lineno-color);
+
+    &[timeout] {
+      color: var(--clipboard-checked-color);
+      border-color: var(--clipboard-checked-color);
+    }
+
+    &:not([timeout]):hover {
+      background-color: gray;
+      color: white;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 0.9rem;
+    }
+
+  }
+
 }
 
-@media (min-width: 768px) {
-  div[class^='language-']::before {
-    right: 3.1rem;
-  }
-}
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
 
-@media (min-width: 1650px) {
-  div[class^='language-']::before {
-    right: 3.5rem;
+      border-radius: 0;
+
+      .code-header {
+        border-radius: 0;
+        padding-left: 0.4rem;
+        padding-right: 0.5rem;
+      }
+    }
   }
 }

_sass/colors/dark-syntax.scss

@@ -3,20 +3,6 @@
  */
 
 @mixin dark-syntax {
-  /* -----  My styles ------ */
-  --highlight-bg-color: #252525;
-  --highlighter-rouge-color: #de6b18;
-  --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #303435;
-  --inline-code-bg: #272822;
-
-  .highlight {
-    .gp { color: #818c96; }
-  }
-
-  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: var(--highlight-bg-color); }
   .highlight .hll { background-color: var(--highlight-bg-color); }
@@ -81,4 +67,21 @@
   .highlight .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
   .highlight .gd { color: #f92672; background-color: #561c08; } /* Generic.Deleted & Diff Deleted */
   .highlight .gi { color: #a6e22e; background-color: #0b5858; } /* Generic.Inserted & Diff Inserted */
+
+  /* -----  custom styles ------ */
+
+  --highlight-bg-color: #252525;
+  --highlighter-rouge-color: #de6b18;
+  --highlight-lineno-color: #6c6c6d;
+  --inline-code-bg: #272822;
+  --code-header-bg: #353535;
+  --lang-badge-color: #6c6c6d;
+  --clipboard-checked-color: #2bcc2b;
+
+  .highlight {
+    .gp { color: #818c96; }
+  }
+
+  pre { color: #bfbfbf; } /* override Bootstrap */
+  kbd { background-color: black; }
 }

_sass/colors/dark-typography.scss

@@ -3,26 +3,23 @@
  */
 
 @mixin dark-scheme {
-  /* framework */
-  --main-wrapper-bg: rgb(27, 27, 30);
+  /* Framework color */
   --body-bg: var(--main-wrapper-bg);
-  --topbar-wrapper-bg: rgb(39, 40, 43);
-  --search-wrapper-bg: rgb(34, 34, 39);
-  --search-icon-color: rgb(100, 102, 105);
-  --input-focus-border-color: rgb(112, 114, 115);
   --mask-bg: rgb(68, 69, 70);
-  --footer-bg-color: var(--main-wrapper-bg);
-
-  /* common color */
-  --text-color: rgb(175, 176, 177);
-  --heading-color: #cccccc;
-  --text-muted-color: rgb(107, 116, 124);
-  --link-color: rgb(138, 180, 248);
-  --link-underline-color: rgb(82, 108, 150);
+  --main-wrapper-bg: rgb(27, 27, 30);
   --main-border-color: rgb(44, 45, 45);
-  --button-bg: rgb(39, 40, 43);
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgb(173 171 171 / 50%);
+
+  /* Common color */
+  --text-color: rgb(175, 176, 177);
+  --text-muted-color: rgb(107, 116, 124);
+  --heading-color: #cccccc;
   --blockquote-border-color: rgb(66, 66, 66);
   --blockquote-text-color: rgb(117, 117, 117);
+  --link-color: rgb(138, 180, 248);
+  --link-underline-color: rgb(82, 108, 150);
+  --button-bg: rgb(39, 40, 43);
   --btn-border-color: rgb(63, 65, 68);
   --btn-backtotop-color: var(--text-color);
   --btn-backtotop-border-color: var(--btn-border-color);
@@ -36,8 +33,12 @@
   --nav-cursor-color: rgb(183, 182, 182);
   --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
 
-  /* Top Bar */
+  /* Topbar */
   --topbar-text-color: var(--text-color);
+  --topbar-wrapper-bg: rgb(39, 40, 43);
+  --search-wrapper-bg: rgb(34, 34, 39);
+  --search-icon-color: rgb(100, 102, 105);
+  --input-focus-border-color: rgb(112, 114, 115);
 
   /* Home page */
   --post-list-text-color: rgb(175, 176, 177);
@@ -82,6 +83,7 @@
   --timeline-year-dot-color: var(--timeline-color);
 
   /* Footer */
+  --footer-bg-color: var(--main-wrapper-bg);
   --footer-link: rgb(171, 171, 171);
 
   .post-content img {

_sass/colors/light-syntax.scss

@@ -70,6 +70,9 @@
   --highlight-bg-color: #f7f7f7;
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
-  --highlight-lineno-border-color: #e9ecef;
   --inline-code-bg: #f3f3f3;
+  --code-header-bg: #eaeaea;
+  --lang-badge-color: #a4a7ab;
+  --clipboard-checked-color: #43c743;
+
 } // light-syntax

_sass/colors/light-typography.scss

@@ -3,22 +3,24 @@
  */
 
 @mixin light-scheme {
-  /* Common */
+  /* Framework color */
   --body-bg: #fafafa;
   --mask-bg: #c1c3c5;
   --main-wrapper-bg: white;
   --main-border-color: #f3f3f3;
-  --btn-border-color: #e9ecef;
+  --scrollbar-track-bg: rgba(0, 0, 0, 0.3);
+  --scrollbar-thumb-bg: rgba(0, 0, 0, 0.3);
+
+  /* Common color */
   --text-color: #34343c;
+  --text-muted-color: gray;
   --heading-color: black;
   --blockquote-border-color: #eee;
   --blockquote-text-color: #9a9a9a;
   --link-color: #2a408e;
   --link-underline-color: #dee2e6;
-  --text-muted-color: gray;
-  --tb-odd-bg: #fbfcfd;
-  --tb-border-color: #eaeaea;
   --button-bg: #fff;
+  --btn-border-color: #e9ecef;
   --btn-backtotop-color: #686868;
   --btn-backtotop-border-color: #f1f1f1;
   --btn-box-shadow: #eaeaea;
@@ -26,15 +28,12 @@
   --checkbox-checked-color: #07a8f7;
 
   /* Sidebar */
-  --sidebar-bg: radial-gradient(
-    circle,
-    rgba(42, 30, 107, 1) 0%,
-    rgba(35, 37, 46, 1) 100%);
+  --sidebar-bg: radial-gradient(circle, rgba(42, 30, 107, 1) 0%, rgba(35, 37, 46, 1) 100%);
   --nav-cursor-color: #fcfcfc;
 
   /* Topbar */
-  --topbar-wrapper-bg: white;
   --topbar-text-color: rgb(78, 78, 78);
+  --topbar-wrapper-bg: white;
   --search-wrapper-bg: #f5f5f5;
   --search-tag-bg: #f8f9fa;
   --search-icon-color: #c2c6cc;
@@ -58,10 +57,13 @@
   --card-box-shadow: rgba(234, 234, 234, 0.7686274509803922);
   --label-color: #616161;
   --relate-post-date: rgba(30, 55, 70, 0.4);
+  --footnote-target-bg: lightcyan;
   --tag-bg: rgba(0, 0, 0, 0.075);
   --tag-border: #dee2e6;
   --tag-shadow: var(--btn-border-color);
   --tag-hover: rgb(222, 226, 230);
+  --tb-odd-bg: #fbfcfd;
+  --tb-border-color: #eaeaea;
   --categories-hover-bg: var(--btn-border-color);
   --dash-color: silver;
 
@@ -72,6 +74,5 @@
 
   /* Footer */
   --footer-bg-color: #ffffff;
-  --footnote-target-bg: lightcyan;
   --footer-link: #424242;
 } // light-scheme

_sass/jekyll-theme-chirpy.scss

@@ -1,7 +1,7 @@
 /*!
  * The styles for Jekyll theme Chirpy
  *
- * Chirpy v4.1.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

_sass/layout/post.scss

@@ -240,7 +240,8 @@
       }
     }
     > i {
-      padding-top: 0.35rem;
+      position: relative;
+      bottom: 1px;
       &:hover {
         @extend %btn-share-hovor;
       }
@@ -299,16 +300,6 @@
       margin-top: 1rem;
     }
   }
-
-  .post-content > div[class^='language-'] {
-    @include ml-mr(-1.25rem);
-
-    border-radius: 0;
-    &::before { // the lang badge
-      right: 1rem;
-    }
-  }
-
 }
 
 @media all and (max-width: 768px) {

assets/404.html

@@ -11,19 +11,21 @@ redirect_from:
 dynamic_title: true
 ---
 
+{% include lang.html %}
+
 <div class="lead">
 
   {%- capture _head_back -%}
-    <a href="{{ '/' | relative_url }}">{{ site.data.locales[site.lang].not_found.head_back }}</a>
+    <a href="{{ '/' | relative_url }}">{{ site.data.locales[lang].not_found.head_back }}</a>
   {%- endcapture -%}
 
   {%- capture _archives_page -%}
-    <a href="{{ 'archives' | relative_url }}">{{ site.data.locales[site.lang].not_found.archives_page }}</a>
+    <a href="{{ 'archives' | relative_url }}">{{ site.data.locales[lang].not_found.archives_page }}</a>
   {%- endcapture -%}
 
-  <p>{{site.data.locales[site.lang].not_found.statment }}</p>
+  <p>{{site.data.locales[lang].not_found.statment }}</p>
 
-  <p>{{ site.data.locales[site.lang].not_found.hint_template
+  <p>{{ site.data.locales[lang].not_found.hint_template
     | replace: ':HEAD_BAK', _head_back
     | replace: ':ARCHIVES_PAGE', _archives_page }}
   </p>

assets/feed.xml

@@ -15,7 +15,7 @@ permalink: /feed.xml
     <uri>{{ "/" | absolute_url }}</uri>
   </author>
   <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
-  <link rel="alternate" type="text/html" hreflang="{{ site.lang | default: 'en' }}"
+  <link rel="alternate" type="text/html" hreflang="{{ site.lang }}"
     href="{{ '/' | absolute_url }}"/>
   <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
   <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>

assets/js/data/search.json

@@ -11,7 +11,7 @@ layout: compress
     "tags": "{{ post.tags | join: ', ' }}",
     "date": "{{ post.date }}",
     {% include no-linenos.html content=post.content %}
-    "snippet": "{{ content | strip_html | strip_newlines | remove_chars | escape | truncate: 300 | replace: '\', '\\\\' }}"
+    "snippet": "{{ content | strip_html | strip_newlines | remove_chars | escape | replace: '\', '\\\\' }}"
   }{% unless forloop.last %},{% endunless %}
   {% endfor %}
 ]

assets/js/dist/categories.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.1.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/commons.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.1.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/home.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.1.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/dist/pvreport.min.js

@@ -1,5 +1,5 @@
 /*!
- * Chirpy v4.1.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v4.2.1 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */

assets/js/lib/jquery.disqusloader.min.js

@@ -1,8 +0,0 @@
-/*!
-  disqusLoader.js v1.0
-  A JavaScript plugin for lazy-loading Disqus comments widget.
-  -
-  By Osvaldas Valutis, www.osvaldas.info
-  Available for use under the MIT License
-*/
-(function(e,g,h,d){var a=e(g),k=function(o,n){var q,p;return function(){var t=this,s=arguments,r=+new Date;q&&r<q+o?(clearTimeout(p),p=setTimeout(function(){q=r,n.apply(t,s)},o)):(q=r,n.apply(t,s))}},m=false,j=false,i=false,c=false,f="unloaded",b=e(),l=function(){if(!b.length||b.data("disqusLoaderStatus")=="loaded"){return true}var n=a.scrollTop();if(b.offset().top-n>a.height()*j||n-b.offset().top-b.outerHeight()-(a.height()*j)>0){return true}e("#disqus_thread").removeAttr("id");b.attr("id","disqus_thread").data("disqusLoaderStatus","loaded");if(f=="loaded"){DISQUS.reset({reload:true,config:i})}else{g.disqus_config=i;if(f=="unloaded"){f="loading";e.ajax({url:c,async:true,cache:true,dataType:"script",success:function(){f="loaded"}})}}};a.on("scroll resize",k(m,l));e.disqusLoader=function(o,n){n=e.extend({},{laziness:1,throttle:250,scriptUrl:false,disqusConfig:false},n);j=n.laziness+1;m=n.throttle;i=n.disqusConfig;c=c===false?n.scriptUrl:c;b=(typeof o=="string"?e(o):o).eq(0);b.data("disqusLoaderStatus","unloaded");l()}})(jQuery,window,document);

gulpfile.js/tasks/js.js

@@ -46,7 +46,7 @@ const postJs = () => {
       `${JS_SRC}/utils/img-extra.js`,
       `${JS_SRC}/utils/timeago.js`,
       `${JS_SRC}/utils/checkbox.js`,
-      `${JS_SRC}/utils/copy-link.js`,
+      `${JS_SRC}/utils/clipboard.js`,
       // 'smooth-scroll.js' must be called after ToC is ready
       `${JS_SRC}/utils/smooth-scroll.js`
     ], 'post'
@@ -66,7 +66,7 @@ const pageJs = () => {
       `${JS_SRC}/commons/*.js`,
       `${JS_SRC}/utils/checkbox.js`,
       `${JS_SRC}/utils/img-extra.js`,
-      `${JS_SRC}/utils/copy-link.js`,
+      `${JS_SRC}/utils/clipboard.js`
     ], 'page'
   );
 };

jekyll-theme-chirpy.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "4.1.1"
+  spec.version       = "4.2.1"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "4.1.1",
+  "version": "4.2.1",
   "description": "A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation.",
   "main": "index.js",
   "directories": {

tools/bump.sh

@@ -123,19 +123,17 @@ release() {
 
   _release_branch="$_major-$_minor-stable"
 
-  if $opt_manual; then
-    echo -e "Bump version to $_version (manual release)\n"
-    bump "$_version"
-    exit 0
-  fi
+  if ! $opt_manual; then
+    if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
+      git checkout -b "$_release_branch"
+      _new_release_branch=true
+    else
+      # cherry-pick the latest commit from default branch to release branch
+      _last_commit="$(git rev-parse $DEFAULT_BRANCH)"
+      git checkout "$_release_branch"
+      git cherry-pick "$_last_commit" -m 1
+    fi
 
-  if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
-    git checkout -b "$_release_branch"
-    _new_release_branch=true
-  else
-    git checkout "$_release_branch"
-    # cherry-pick the latest commit from master branch to release branch
-    git cherry-pick "$(git rev-parse $DEFAULT_BRANCH)"
   fi
 
   echo -e "Bump version to $_version\n"