Bump version to 5.1.0

Bootstrap 4.6.x has its own class `.shadow`

.github/workflows/ci.yml

@@ -2,15 +2,15 @@ name: 'Continuous Integration'
 on:
   push:
     branches-ignore:
-      - 'production'
+      - 'release/**'
+      - 'docs'
     tags-ignore:
-      - '*'
+      - '**'
     paths-ignore:
       - '.github/**'
       - '!.github/workflows/ci.yml'
       - '.travis.yml'
       - '.gitignore'
-      - 'docs/**'
       - 'README.md'
       - 'LICENSE'
   pull_request:

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

@@ -2,7 +2,7 @@ name: 'Automatic build'
 on:
   push:
     branches:
-      - master
+      - main
     paths-ignore:
       - .gitignore
       - README.md

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "assets/lib"]
+	path = assets/lib
+	url = https://github.com/cotes2020/chirpy-static-assets.git

.travis.yml

@@ -1,32 +1,41 @@
 os: linux
 dist: bionic
+language: ruby
+rvm: 2.7.0
 
-language: minimal
+addons:
+  apt:
+    packages:
+      - libcurl4-openssl-dev  # to avoid SSL error (for htmlproofer)
 
-# only run on tags
+# Overriding to drop the `--development` flag which requires the Gemfile.lock at build
-if: branch =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
+install: bundle install --jobs=3 --retry=3 --path=vendor/bundle
+
+before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
 
 jobs:
   include:
-    - name: Deploy
+    - stage: Upgrade
-      language: ruby
-      rvm: 2.7.0
-      addons:
-        apt:
-          packages:
-            - libcurl4-openssl-dev  # to avoid SSL error (for htmlproofer)
-      install:
-        - bundle install --jobs=3 --retry=3  # overriding to drop the travis `--development` flag
-      script:
-        - eval "$BUILD_CMD"
       git:
         depth: false  # for posts' lastmod
-
+      script: eval "$BUILD_CMD"
-    - name: Flush Starter
+    - stage: Starter
+      language: minimal
+      install: true   # skip install step
       script: eval "$FLUSH_STARTER"
+    - stage: Docs
+      cache: bundler
+      git:
+        depth: false  # for posts' lastmod
+      script: eval "$DOCS_CMD"
 
-before_script:
+stages:
-  - git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
+  - name: Upgrade
+    if: branch =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
+  - name: Starter
+    if: branch =~ /^v(\d)+(\.(\d)+){2}$/ OR tag IS present
+  - name: Docs
+    if: branch = docs
 
 notifications:
   email:

README.md

@@ -12,7 +12,7 @@
 
   [**Live Demo →**](https://cotes2020.github.io/chirpy-demo)
 
-  [![Devices Mockup](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@f4e0354b674f65a53b8917f0f786ed2956898cc1/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
+  [![Devices Mockup](https://raw.githubusercontent.com/cotes2020/chirpy-images/main/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)
 
 </div>
 
@@ -28,7 +28,7 @@
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagram & Flowchart
-- Disqus/Utterances Comments
+- Disqus/Utterances/Giscus Comments
 - Search
 - Atom Feeds
 - Google Analytics
@@ -38,7 +38,7 @@
 
 ## Quick Start
 
-Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`.
+Before starting, please follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.
 
 ### Step 1. Creating a New Site
 
@@ -69,11 +69,11 @@ $ docker run -it --rm \
     jekyll serve
 ```
 
-After a while, the local service will be published at _<http://127.0.0.1:4000>_.
+After a while, navigate to the site at <http://localhost:4000>.
 
 ## Documentation
 
-For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/). At the same time, a copy of the tutorial is also available on the [Wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Please note that the tutorial is based on the [latest release](https://github.com/cotes2020/jekyll-theme-chirpy/releases), and the features of the default branch are usually ahead of the documentation.
+For more details on usage, please refer to the tutorial on the [demo website](https://cotes2020.github.io/chirpy-demo/) / [wiki](https://github.com/cotes2020/jekyll-theme-chirpy/wiki). Note that the tutorial is based on the [latest tag](https://github.com/cotes2020/jekyll-theme-chirpy/tags), and the features of the default branch are usually ahead of the documentation.
 
 ## Contributing
 
@@ -83,9 +83,9 @@ Welcome to report bugs, improve code quality or submit a new feature. For more i
 
 This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files). The avatar and favicon design come from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
 
-:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas or inspired me to write more readable documentation.
+:tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas, or inspired me to write more readable documentation.
 
-Last but not least, thank [JetBrains][jb] for providing the open source license.
+Last but not least, thank [JetBrains][jb] for providing the OSS development license.
 
 ## Sponsoring
 

_config.yml

@@ -12,6 +12,9 @@ baseurl: ''
 # otherwise, the layout language will use the default value of 'en'.
 lang: en
 
+# Additional parameters for datetime localization, optional. › https://github.com/iamkun/dayjs/tree/dev/src/locale
+prefer_datetime_locale:
+
 # Change to your timezone › http://www.timezoneconverter.com/cgi-bin/findzone/findzone
 timezone: Asia/Shanghai
 
@@ -23,9 +26,7 @@ title: Chirpy                          # the main title
 tagline: A text-focused Jekyll theme   # it will display as the sub-title
 
 description: >-                        # used by seo meta and the atom feed
-  A minimal, portfolio, sidebar,
+  A minimal, responsive, and powerful Jekyll theme for presenting professional writing.
-  bootstrap Jekyll theme with responsive web design
-  and focuses on text presentation.
 
 # fill in the protocol & hostname for your site, e.g., 'https://username.github.io'
 url: ''
@@ -49,13 +50,13 @@ social:
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
-google_site_verification: google_meta_tag_verification # change to your verification string
+google_site_verification:               # fill in to your verification string
 
 # ↑ --------------------------
-
+# The end of `jekyll-seo-tag` settings
 
 google_analytics:
-  id: ''              # fill in your Google Analytics ID
+  id:                 # fill in your Google Analytics ID
   # Google Analytics pageviews report settings
   pv:
     proxy_endpoint:   # fill in the Google Analytics superProxy endpoint of Google App Engine
@@ -79,7 +80,7 @@ theme_mode:   # [light|dark]
 # will be added to all image (site avatar & posts' images) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: 'https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images@f4e0354b674f65a53b8917f0f786ed2956898cc1'
+img_cdn: 'https://raw.githubusercontent.com/cotes2020/chirpy-images/main'
 
 # the avatar on sidebar, support local or CORS resources
 avatar: '/commons/avatar.jpg'
@@ -96,6 +97,23 @@ comments:
   utterances:
     repo:         # <gh-username>/<repo>
     issue_term:   # < url | pathname | title | ...>
+  # Giscus options › https://giscus.app
+  giscus:
+    repo:             # <gh-username>/<repo>
+    repo_id:
+    category:
+    category_id:
+    mapping:          # optional, default to 'pathname'
+    input_position:   # optional, default to 'bottom'
+    lang:             # optional, default to the value of `site.lang`
+
+# Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
+assets:
+  self_host:
+    enabled:      # boolean, keep empty means false
+    # specify the Jekyll environment, empty means both
+    # only works if `assets.self_host.enabled` is 'true'
+    env:          # [development|production]
 
 paginate: 10
 
@@ -118,8 +136,7 @@ collections:
     sort_by: order
 
 defaults:
-  -
+  - scope:
-    scope:
       path: ''          # An empty string here means all files in the project
       type: posts
     values:
@@ -129,18 +146,24 @@ defaults:
       # DO NOT modify the following parameter unless you are confident enough
       # to update the code of all other post links in this project.
       permalink: /posts/:title/
-  -
+  - scope:
-    scope:
       path: _drafts
     values:
       comments: false
-  -
+  - scope:
-    scope:
       path: ''
       type: tabs             # see `site.collections`
     values:
       layout: page
       permalink: /:title/
+  - scope:
+      path: assets/img/favicons
+    values:
+      swcache: true
+  - scope:
+      path: assets/js/dist
+    values:
+      swcache: true
 
 sass:
   style: compressed
@@ -158,7 +181,6 @@ exclude:
   - '*.gem'
   - '*.gemspec'
   - tools
-  - docs
   - README.md
   - LICENSE
   - gulpfile.js

_data/assets/cross_origin.yml

@@ -0,0 +1,62 @@
+# CDNs
+
+cdns:
+  # Google Fonts
+  - url: https://fonts.googleapis.com
+  - url: https://fonts.gstatic.com
+    args: crossorigin
+  - url: https://fonts.googleapis.com
+  # jsDelivr CDN
+  - url: https://cdn.jsdelivr.net
+
+# fonts
+
+webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+
+# Libraries
+
+jquery:
+  js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
+
+bootstrap:
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.bundle.min.js
+
+bootstrap-toc:
+  css: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css
+  js: https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.js
+
+fontawesome:
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css
+
+search:
+  js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
+
+mermaid:
+  js: https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
+
+dayjs:
+  js:
+    common: https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1/plugin/localizedFormat.min.js
+
+countup:
+  js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js
+
+magnific-popup:
+  css: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/magnific-popup.min.css
+  js: https://cdn.jsdelivr.net/npm/magnific-popup@1/dist/jquery.magnific-popup.min.js
+
+lozad:
+  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+
+clipboard:
+  js:  https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
+
+polyfill:
+  js: https://polyfill.io/v3/polyfill.min.js?features=es6
+
+mathjax:
+  js: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js

_data/assets/self_host.yml

@@ -0,0 +1,51 @@
+# fonts
+
+webfonts: /assets/lib/fonts/main.css
+
+# Libraries
+
+jquery:
+  js: /assets/lib/jquery-3.6.0/jquery.min.js
+
+bootstrap:
+  css: /assets/lib/bootstrap-4.6.1/bootstrap.min.css
+  js: /assets/lib/bootstrap-4.6.1/bootstrap.bundle.min.js
+
+bootstrap-toc:
+  css: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.css
+  js: /assets/lib/bootstrap-toc-1.0.1/bootstrap-toc.min.js
+
+fontawesome:
+  css: /assets/lib/fontawesome-free-5.15.4/css/all.min.css
+
+search:
+  js: /assets/lib/simple-jekyll-search-1.10.0/simple-jekyll-search.min.js
+
+mermaid:
+  js: /assets/lib/mermaid-8.13.10/mermaid.min.js
+
+dayjs:
+  js:
+    common: /assets/lib/dayjs-1.10.7/dayjs.min.js
+    locale: /assets/lib/dayjs-1.10.7/locale/en.min.js
+    relativeTime: /assets/lib/dayjs-1.10.7/plugin/relativeTime.min.js
+    localizedFormat: /assets/lib/dayjs-1.10.7/plugin/localizedFormat.min.js
+
+countup:
+  js: /assets/lib/countup.js-1.9.3/countUp.min.js
+
+magnific-popup:
+  css: /assets/lib/magnific-popup-1.1.0/magnific-popup.css
+  js: /assets/lib/magnific-popup-1.1.0/jquery.magnific-popup.min.js
+
+lozad:
+  js: /assets/lib/lozad-1.16.0/lozad.min.js
+
+clipboard:
+  js: /assets/lib/clipboard-2.0.9/clipboard.min.js
+
+polyfill:
+  js: /assets/lib/polyfill-v3-es6/polyfill.min.js
+
+mathjax:
+  js: /assets/lib/mathjax-3.2.0/tex-chtml.js

_data/locales/en.yml

@@ -23,18 +23,10 @@ search:
   no_results: Oops! No result founds.
 
 panel:
-  lastmod: Recent Update
+  lastmod: Recently Updated
   trending_tags: Trending Tags
   toc: Contents
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%a, %b %e, %Y, %l:%M %p %z'
-  post:
-    long: '%b %e, %Y'
-    short: '%b %e'
-    archive_month: '%b'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: By
   posted: Posted
   updated: Updated
-  timeago:
-    day: days ago
-    hour: hours ago
-    minute: minutes ago
-    just_now: just now
   words: words
   pageview_measure: views
   read_time:

_data/locales/id-ID.yml

@@ -27,14 +27,6 @@ panel:
   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:
@@ -62,11 +54,6 @@ post:
   written_by: Oleh
   posted: Diterbitkan
   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:

_data/locales/ko-KR.yml

@@ -27,14 +27,6 @@ panel:
   trending_tags: 인기 태그
   toc: 바로가기
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%F, %R %z'
-  post:
-    long: '%Y년 %m월 %d일'
-    short: '%m월 %d일'
-    archive_month: '%b월'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -62,11 +54,6 @@ post:
   written_by: By
   posted: 게시
   updated: 업데이트
-  timeago:
-    day: 일 전
-    hour: 시간 전
-    minute: 분 전
-    just_now: 방금
   words: 단어
   pageview_measure: 조회
   read_time:

_data/locales/my-MM.yml

@@ -0,0 +1,78 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: ပို့စ်
+  category: ကဏ္ဍ
+  tag: နာမ(တက်ဂ်)
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: အဓိကစာမျက်နှာ
+  categories: ကဏ္ဍများ
+  tags: နာမ(တက်ဂ်)များ
+  archives: မှတ်တမ်း​တိုက်
+  about: အကြောင်းအရာ
+
+# the text displayed in the search bar & search results
+search:
+  hint: ရှာဖွေမည်
+  cancel: ဖျက်သိမ်းမည်
+  no_results: အိုး! ဘာမှမရှိပါ
+
+panel:
+  lastmod: မကြာသေးမီကမွမ်းမံထားသည်
+  trending_tags: ခေတ်စားနေသည့်တက်ဂ်များ
+  toc: အကြောင်းအရာများ
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: ဤပို့စ်သည်စာရေးသူ၏ :LICENSE_NAME လိုင်စင်ရထားသည်။
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: မူပိုင်ခွင့်အချို့ကို လက်ဝယ်ထားသည်။
+  verbose: >-
+    အခြားမှတ်သားထားချက်များမှလွဲ၍ ဤဆိုက်ရှိ ဘလော့ဂ်ပို့စ်များသည် စာရေးသူ၏
+    Creative Commons Attribution 4.0 International (CC BY 4.0) အောက်တွင် လိုင်စင်ရထားပါသည်။
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: ဝမ်းနည်းပါသည်၊ ကျွန်ုပ်တို့သည် အဆိုပါ URL ကို မှားယွင်းစွာ နေရာချထားခြင်း သို့မဟုတ် ၎င်းသည် မရှိသောအရာကို ညွှန်ပြနေပါသည်။
+  hint_template: ၎င်းကို ထပ်မံရှာဖွေရန် :HEAD_BAK , သို့မဟုတ် :ARCHIVES_PAGE တွင်ရှာပါ။
+  head_back: အဓိကစာမျက်နှာသို့ပြန်သွားပါ။
+  archives_page: မှတ်တမ်း​တိုက် စာမျက်နှာ။
+
+# ----- Posts related labels -----
+
+post:
+  written_by: ကရေးသားခဲ့သည်။
+  posted: တင်ထားခဲ့သည်။
+  updated: မွမ်းမံထားခဲ့သည်။
+  words: စကားလုံးများ
+  pageview_measure: အမြင်များ
+  read_time:
+    unit: မိနစ်
+    prompt: ဖတ်ပါမည်
+  relate_posts: နောက်ထပ်ဖတ်ရန်
+  share: မျှဝေရန်
+  button:
+    next: အသစ်များ
+    previous: အဟောင်းများ
+    copy_code:
+      succeed: ကူးယူလိုက်ပြီ။
+    share_link:
+      title: လင့်ခ်ကို ကူးယူရန်
+      succeed: လင့်ခ်ကို ကူးယူလိုက်ပြီ။
+  # pinned prompt of posts list on homepage
+  pin_prompt: ချိတ်ထားသည်။
+
+# categories page
+categories:
+  category_measure: ကဏ္ဍများ
+  post_measure: ပို့စ်များ

_data/locales/ru-RU.yml

@@ -0,0 +1,78 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Публикация
+  category: Категория
+  tag: Тег
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Домашняя страница
+  categories: Категории
+  tags: Теги
+  archives: Архив
+  about: О сайте
+
+# the text displayed in the search bar & search results
+search:
+  hint: поиск
+  cancel: Отменить
+  no_results: Ох! Ничего не найдено.
+
+panel:
+  lastmod: Недавно обновлено
+  trending_tags: Популярные теги
+  toc: Содержание
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Публикация защищена лицензией :LICENSE_NAME.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Некоторые права защищены.
+  verbose: >-
+    Публикации на сайте защищены лицензией Creative Commons Attribution 4.0 International (CC BY 4.0),
+    если в тексте публикации не указано иное.
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: Извините, эта ссылка указывает на ресурс который не существует.
+  hint_template: :HEAD_BAK чтобы снова осуществить поиск, или поищите :ARCHIVES_PAGE.
+  head_back: Вернитесь на домашнюю страницу
+  archives_page: архиве
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Автор
+  posted: Время публикации
+  updated: Обновлено
+  words: слов
+  pageview_measure: просмотров
+  read_time:
+    unit: минут
+    prompt: чтения
+  relate_posts: Вам также может быть интересно
+  share: Поделиться
+  button:
+    next: Предыдущая публикация
+    previous: Следующая публикация
+    copy_code:
+      succeed: Скопировано успешно!
+    share_link:
+      title: Скопировать ссылку
+      succeed: Ссылка успешно скопирована!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Закреплено
+
+# categories page
+categories:
+  category_measure: категории
+  post_measure: публикации

_data/locales/uk-UA.yml

@@ -0,0 +1,78 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Публікація
+  category: Категорія
+  tag: Тег
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Домашня сторінка
+  categories: Категорії
+  tags: Теги
+  archives: Архів
+  about: Про сайт
+
+# the text displayed in the search bar & search results
+search:
+  hint: пошук
+  cancel: Скасувати
+  no_results: Ох! Нічого не знайдено.
+
+panel:
+  lastmod: Нещодавно оновлено
+  trending_tags: Популярні теги
+  toc: Зміст
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Публікація захищена ліцензією :LICENSE_NAME.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Деякі права захищено.
+  verbose: >-
+    Публікації на сайті захищено ліцензією Creative Commons Attribution 4.0 International (CC BY 4.0),
+    якщо інше не вказано в тексті.
+
+meta: Powered by :PLATFORM with :THEME theme.
+
+not_found:
+  statment: Вибачте, це посилання вказує на ресурс, що не існує.
+  hint_template: :HEAD_BAK аби здійснити пошук, або пошукайте в :ARCHIVES_PAGE.
+  head_back: Поверніться на домашню сторінку
+  archives_page: архіві
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Автор
+  posted: Час публікації
+  updated: Оновлено
+  words: слів
+  pageview_measure: переглядів
+  read_time:
+    unit: хвилин
+    prompt: читання
+  relate_posts: Вас також може зацікавити
+  share: Поділитися
+  button:
+    next: Попередня публікація
+    previous: Наступна публікація
+    copy_code:
+      succeed: Успішно скопійовано!
+    share_link:
+      title: Скопіювати посилання
+      succeed: Посилання успішно скопійовано!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Закріплено
+
+# categories page
+categories:
+  category_measure: категорії
+  post_measure: публікації

_data/locales/zh-CN.yml

@@ -27,14 +27,6 @@ panel:
   trending_tags: 热门标签
   toc: 文章内容
 
-#  The liquid date format › http://strftime.net/
-date_format:
-  tooltip: '%F, %R %z'
-  post:
-    long: '%F'
-    short: '%m-%d'
-    archive_month: '%m月'
-
 copyright:
   # Shown at the bottom of the post
   license:
@@ -61,11 +53,6 @@ post:
   written_by: 作者
   posted: 发表于
   updated: 更新于
-  timeago:
-    day: 天前
-    hour: 小时前
-    minute: 分钟前
-    just_now: 刚刚
   words: 字
   pageview_measure: 次浏览
   read_time:

_data/share.yml

@@ -13,7 +13,7 @@ platforms:
   -
     type: Telegram
     icon: "fab fa-telegram"
-    link: "https://telegram.me/share?text=TITLE&url=URL"
+    link: "https://t.me/share/url?url=URL&text=TITLE"
 
   # Uncomment below if you need to.
   # -

_includes/assets-origin.html

@@ -0,0 +1,12 @@
+{% comment %} Site static assets origin {% endcomment %}
+{% assign origin = 'cross_origin' %}
+
+{% if site.assets.self_host.enabled %}
+  {% if site.assets.self_host.env %}
+    {% if site.assets.self_host.env == jekyll.environment %}
+      {% assign origin = 'self_host' %}
+    {% endif %}
+  {% else %}
+    {% assign origin = 'self_host' %}
+  {% endif %}
+{% endif %}

_includes/comments/giscus.html

@@ -0,0 +1,56 @@
+<!-- https://giscus.app/ -->
+<script type="text/javascript">
+  $(function () {
+    const origin = "https://giscus.app";
+    const iframe = "iframe.giscus-frame";
+    const lightTheme = "light";
+    const darkTheme = "dark_dimmed";
+    let initTheme = lightTheme;
+
+    if ($("html[data-mode=dark]").length > 0
+        || ($("html[data-mode]").length == 0
+            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+      initTheme = darkTheme;
+    }
+
+    let giscusAttributes = {
+      "src": "https://giscus.app/client.js",
+      "data-repo": "{{ site.comments.giscus.repo}}",
+      "data-repo-id": "{{ site.comments.giscus.repo_id }}",
+      "data-category": "{{ site.comments.giscus.category }}",
+      "data-category-id": "{{ site.comments.giscus.category_id }}",
+      "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
+      "data-reactions-enabled": "1",
+      "data-emit-metadata": "0",
+      "data-theme": initTheme,
+      "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
+      "data-lang": "{{ site.comments.giscus.lang | default: lang }}",
+      "crossorigin": "anonymous",
+      "async": ""
+    };
+
+    let giscusScript = document.createElement("script");
+    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
+    document.getElementById("tail-wrapper").appendChild(giscusScript);
+
+    addEventListener("message", (event) => {
+      if (event.source === window && event.data &&
+            event.data.direction === ModeToggle.ID) {
+        /* global theme mode changed */
+        const mode = event.data.message;
+        const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+
+        const message = {
+          setConfig: {
+            theme: theme
+          }
+        };
+
+        const giscus = document.querySelector(iframe).contentWindow;
+        giscus.postMessage({ giscus: message }, origin);
+      }
+
+    });
+
+  });
+</script>

_includes/comments/utterances.html

@@ -14,8 +14,8 @@
     const darkTheme = "github-dark";
     let initTheme = lightTheme;
 
-    if ($("html[mode=dark]").length > 0
+    if ($("html[data-mode=dark]").length > 0
-        || ($("html[mode]").length == 0
+        || ($("html[data-mode]").length == 0
             && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
       initTheme = darkTheme;
     }

_includes/css-selector.html

@@ -1,15 +0,0 @@
-<!--
-  CSS selector for site.
--->
-
-<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
-
-{% if site.toc and page.toc %}
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
-{% endif %}
-
-{% if page.layout == 'page' or page.layout == 'post' %}
-  <!-- Manific Popup -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
-{% endif %}

_includes/head.html

@@ -6,13 +6,12 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-  {% if page.layout == 'home' or page.layout == 'post' %}
+  <!-- Allow having a localized datetime different from the appearance language -->
+  {% if site.prefer_datetime_locale %}
+    <meta name="prefer-datetime-locale" content="{{ site.prefer_datetime_locale }}">
+  {% endif %}
 
-    <!-- i18n for `_javascript/utils/timeago.js` -->
+  {% if page.layout == 'home' or page.layout == 'post' %}
-    <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 }}">
@@ -35,12 +34,24 @@
 
   {% include favicons.html %}
 
-  <!-- Google Fonts -->
+  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
+
-  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
+    <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
+
+  {% else %}
+
+    {% for cdn in site.data.assets[origin].cdns %}
+      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
+      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
+    {% endfor %}
+
+    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts }}">
+
+  {% endif %}
 
   <!-- GA -->
-  {% if jekyll.environment == 'production' %}
+  {% if jekyll.environment == 'production'
+      and site.google_analytics.id != empty and site.google_analytics.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 
@@ -49,27 +60,31 @@
 
     {% if site.google_analytics.pv.proxy_endpoint %}
       {% assign proxy_url = site.google_analytics.pv.proxy_endpoint
-        | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
+          | replace: "https://", "" | split: "/" | first | prepend: "https://" %}
-
       <link rel="preconnect" href="{{ proxy_url }}" crossorigin="use-credentials">
       <link rel="dns-prefetch" href="{{ proxy_url }}">
     {% endif %}
   {% endif %}
 
-  <!-- jsDelivr CDN -->
-  <link rel="preconnect" href="https://cdn.jsdelivr.net">
-  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
-
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css }}">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.11.2/css/all.min.css">
+  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css }}">
 
-  {% include css-selector.html %}
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+
+  {% if site.toc and page.toc %}
+    <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap-toc.css }}">
+  {% endif %}
+
+  {% if page.layout == 'page' or page.layout == 'post' %}
+    <!-- Manific Popup -->
+    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css }}">
+  {% endif %}
 
   <!-- JavaScript -->
 
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
+  <script src="{{ site.data.assets[origin].jquery.js }}"></script>
 
 </head>

_includes/js-selector.html

@@ -7,14 +7,43 @@
 {% if page.layout == 'post' %}
   {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
-    <script async src="https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js"></script>
+    <script async src="{{ site.data.assets[origin].countup.js }}"></script>
     <script defer src="{{ '/assets/js/dist/pvreport.min.js' | relative_url }}"></script>
   {% endif %}
 {% endif %}
 
 {% if page.layout == 'post' or page.layout == 'page' %}
-  <!-- image lazy-loading & popup -->
+  <!-- image lazy-loading & popup & clipboard -->
-  <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>
+  {% assign _urls = site.data.assets[origin].magnific-popup.js
+      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].clipboard.js
+  %}
+
+  {% include jsdelivr-combine.html urls=_urls %}
+
+{% endif %}
+
+{% if page.layout == 'home'
+    or page.layout == 'post'
+    or page.layout == 'archives'
+    or page.layout == 'category'
+    or page.layout == 'tag' %}
+
+  {% if site.prefer_datetime_locale %}
+    {% assign locale = site.prefer_datetime_locale | downcase %}
+  {% else %}
+    {% assign locale = site.lang | split: '-' | first %}
+  {% endif %}
+
+  {% assign _urls = site.data.assets[origin].dayjs.js.common
+      | append: ',' | append: site.data.assets[origin].dayjs.js.locale
+      | replace: ':LOCALE', locale
+      | append: ',' | append: site.data.assets[origin].dayjs.js.relativeTime
+      | append: ',' | append: site.data.assets[origin].dayjs.js.localizedFormat
+  %}
+
+  {% include jsdelivr-combine.html urls=_urls %}
+
 {% endif %}
 
 {% if page.layout == 'home'
@@ -22,12 +51,16 @@
     or page.layout == 'post'
     or page.layout == 'page' %}
   {% assign type = page.layout %}
+{% elsif page.layout == 'archives'
+    or page.layout == 'category'
+    or page.layout == 'tag' %}
+  {% assign type = "misc" %}
 {% else %}
   {% assign type = "commons" %}
 {% endif %}
 
-{% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}
+{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
-<script defer src="{{ js | relative_url }}"></script>
+<script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
   <!-- MathJax -->
@@ -46,22 +79,21 @@
     }
   };
   </script>
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+  <script src="{{ site.data.assets[origin].polyfill.js }}"></script>
-  <script type="text/javascript" id="MathJax-script" async
+  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js }}">
-    src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js">
   </script>
 {% endif %}
 
 <!-- commons -->
 
-<script src="https://cdn.jsdelivr.net/combine/npm/popper.js@1.16.1,npm/bootstrap@4/dist/js/bootstrap.min.js"></script>
+<script src="{{ site.data.assets[origin].bootstrap.js }}"></script>
 
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   <script defer src="{{ '/app.js' | relative_url }}"></script>
 
   <!-- GA -->
-  {% if site.google_analytics.id %}
+  {% if site.google_analytics.id != empty and site.google_analytics.id %}
     {% include google-analytics.html %}
   {% endif %}
 

_includes/jsdelivr-combine.html

@@ -0,0 +1,32 @@
+{% assign urls = include.urls | split: ',' %}
+
+{% assign combined_urls = nil %}
+
+{% assign domain = 'https://cdn.jsdelivr.net/' %}
+
+{% for url in urls %}
+
+  {% if url contains domain %}
+    {% assign url_snippet = url | slice: domain.size, url.size %}
+
+    {% if combined_urls %}
+      {% assign combined_urls = combined_urls | append: ',' | append: url_snippet %}
+    {% else %}
+      {% assign combined_urls = domain | append: 'combine/' | append: url_snippet %}
+    {% endif %}
+
+  {% elsif url contains '//' %}
+
+    <script src="{{ url }}"></script>
+
+  {% else %}
+
+    <script src="{{ url | relative_url }}"></script>
+
+  {% endif %}
+
+{% endfor %}
+
+{% if combined_urls %}
+  <script src="{{ combined_urls }}"></script>
+{% endif %}

_includes/mermaid.html

@@ -2,7 +2,7 @@
   mermaid-js loader
 -->
 
-<script src="https://cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js"></script>
+<script src="{{ site.data.assets[origin].mermaid.js }}"></script>
 
 <script>
   $(function() {
@@ -33,8 +33,8 @@
 
     let initTheme = "default";
 
-    if ($("html[mode=dark]").length > 0
+    if ($("html[data-mode=dark]").length > 0
-      || ($("html[mode]").length == 0
+      || ($("html[data-mode]").length == 0
         && window.matchMedia("(prefers-color-scheme: dark)").matches ) ) {
       initTheme = "dark";
     }

_includes/mode-toggle.html

@@ -5,6 +5,7 @@
 <script type="text/javascript">
   class ModeToggle {
     static get MODE_KEY() { return "mode"; }
+    static get MODE_ATTR() { return "data-mode"; }
     static get DARK_MODE() { return "dark"; }
     static get LIGHT_MODE() { return "light"; }
     static get ID() { return "mode-toggle"; }
@@ -70,17 +71,17 @@
     }
 
     setDark() {
-      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
+      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.DARK_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.DARK_MODE);
     }
 
     setLight() {
-      $('html').attr(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
+      $('html').attr(ModeToggle.MODE_ATTR, ModeToggle.LIGHT_MODE);
       sessionStorage.setItem(ModeToggle.MODE_KEY, ModeToggle.LIGHT_MODE);
     }
 
     clearMode() {
-      $('html').removeAttr(ModeToggle.MODE_KEY);
+      $('html').removeAttr(ModeToggle.MODE_ATTR);
       sessionStorage.removeItem(ModeToggle.MODE_KEY);
     }
 

_includes/no-zero-date.html

@@ -1,13 +0,0 @@
-{% comment %}
-  Remove the zero padding from a month/day string
-{% endcomment %}
-
-{% assign ret = include.date_str %}
-{% assign _first_chat = ret | slice: 0 %}
-
-{% if _first_chat == '0' %}
-  {% assign _last_idx = ret.size | minus: 1 %}
-  {% assign ret = ret | slice: 1, _last_idx %}
-{% endif %}
-
-{{ ret | replace: ' 0', ' ' }}

_includes/post-sharing.html

@@ -9,7 +9,7 @@
     {% assign url = page.url | absolute_url %}
 
     {% for share in site.data.share.platforms %}
-      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
+      {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url | escape %}
         <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
           title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
           <i class="fa-fw {{ share.icon }}"></i>
@@ -19,7 +19,7 @@
     <i id="copy-link" class="fa-fw fas fa-link small"
         data-toggle="tooltip" data-placement="top"
         title="{{ site.data.locales[lang].post.button.share_link.title }}"
-        title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
+        data-title-succeed="{{ site.data.locales[lang].post.button.share_link.succeed }}">
     </i>
 
   </span>

_includes/refactor-content.html

@@ -165,13 +165,13 @@
       {% endif %}
 
       {% capture _label %}
-        <span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
+        <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
       {% assign _new_content = _new_content | append: _snippet
           | append: '<div class="code-header">'
           | append: _label
-          | append: '<button aria-label="copy" title-succeed="'
+          | append: '<button aria-label="copy" data-title-succeed="'
           | append: site.data.locales[lang].post.button.copy_code.succeed
           | append: '"><i class="far fa-clipboard"></i></button></div>'
           | append: '<div class="highlight"><code>'
@@ -205,12 +205,11 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %}<a href="#{{ id }}" class="anchor"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
 
       {% assign left = snippet | split: mark_end | first %}
-      {% assign _start_index = left | size %}
+      {% assign right = snippet | slice: left.size, snippet.size %}
-      {% assign _end_index = snippet | size | minus: 1 %}
+      {% assign left = left | replace: '">', '"><span class="mr-2">' | append: '</span>' %}
-      {% assign right = snippet | slice: _start_index, _end_index %}
 
       {% assign _new_content = _new_content | append: mark_start
           | append: left | append: anchor | append: mark_end | append: right
@@ -225,6 +224,54 @@
 
 {% assign _content = _heading_content %}
 
+<!-- Wrap prompt element of blockquote with the <div> tag -->
+
+{% assign blockquote_start = '<blockquote class=' %}
+{% assign blockquote_end = '</blockquote>' %}
+{% assign cls_prefix = 'prompt-' %}
+
+{% if _content contains blockquote_start %}
+
+  {% assign _prompt_content = nil %}
+  {% assign _prompt_snippets = _content | split: blockquote_start %}
+
+  {% for _snippet in _prompt_snippets %}
+
+    {% if forloop.first %}
+      {% assign _prompt_content =  _snippet %}
+      {% continue %}
+    {% endif %}
+
+    {% assign left = _snippet | split: blockquote_end | first %}
+    {% assign right = _snippet | slice: left.size, _snippet.size %}
+
+    {% assign cls_str = left | split: '>' | first %}
+    {% assign cls_array = cls_str | remove: '"' | split: ' ' %}
+    {% assign is_prompt = false %}
+
+    {% for cls in cls_array %}
+      {% if cls contains cls_prefix %}
+        {% assign is_prompt = true %}
+        {% break %}
+      {% endif %}
+    {% endfor %}
+
+    {% unless is_prompt %}
+      {% assign _prompt_content = _prompt_content | append: blockquote_start | append: _snippet %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign left = left | slice: cls_str.size, left.size %}
+    {% assign left = cls_str | append: '><div' | append: left | append: '</div>' %}
+
+    {% assign _prompt_content = _prompt_content | append: blockquote_start | append: left | append: right %}
+
+  {% endfor %}
+
+  {% assign _content = _prompt_content %}
+
+{% endif %}
+
 <!-- return -->
 
 {{ _content }}

_includes/search-loader.html

@@ -16,7 +16,7 @@
 
 {% capture not_found %}<p class="mt-5">{{ site.data.locales[lang].search.no_results }}</p>{% endcapture %}
 
-<script src="https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js"></script>
+<script src="{{ site.data.assets[origin].search.js }}"></script>
 
 <script>
 SimpleJekyllSearch({

_includes/sidebar.html

@@ -2,19 +2,19 @@
   The Side Bar
 -->
 
-<div id="sidebar" class="d-flex flex-column align-items-end" lang="{{lang}}">
+<div id="sidebar" class="d-flex flex-column align-items-end">
   <div class="profile-wrapper text-center">
     <div id="avatar">
       <a href="{{ '/' | relative_url }}" alt="avatar" class="mx-auto">
-        {% if site.avatar != '' and site.avatar %}
+        {% if site.avatar != empty and site.avatar %}
           {% capture avatar_url %}
-            {%- if site.avatar contains '://' -%}
+            {% if site.avatar contains '://' %}
               {{ site.avatar }}
-            {%- elsif site.img_cdn != '' and site.img_cdn -%}
+            {% elsif site.img_cdn != empty and site.img_cdn %}
               {{ site.avatar | prepend: site.img_cdn }}
-            {%- else -%}
+            {% else %}
               {{ site.avatar | relative_url }}
-            {%- endif -%}
+            {% endif %}
           {% endcapture %}
           <img src="{{ avatar_url }}" alt="avatar" onerror="this.style.display='none'">
         {% endif %}

_includes/timeago.html

@@ -3,24 +3,13 @@
   See: ${JS_ROOT}/utils/timeago.js
 -->
 
-{% assign tooltip_df = site.data.locales[lang].date_format.tooltip %}
-{% assign post_long_df = site.data.locales[lang].date_format.post.long %}
-{% assign post_short_df = site.data.locales[lang].date_format.post.short %}
-
 <em class="timeago{% if include.class %} {{ include.class }}{% endif %}"
-    date="{{ include.date }}"
+    data-ts="{{ include.date | date: '%s' }}"
     {% if include.tooltip %}
-      data-toggle="tooltip"
+      data-toggle="tooltip" data-placement="bottom" data-tooltip-df="llll"
-      data-placement="bottom"
+    {% endif %}
-      title="{{ include.date | date: tooltip_df }}"
+    {% if include.capitalize %}
+      data-capitalize="true"
     {% endif %}>
-
+  {{ include.date | date: '%Y-%m-%d' }}
-  {%- assign this_year = site.time | date: "%Y" -%}
-  {%- assign post_year = include.date | date: "%Y" -%}
-
-  {%- if post_year == this_year -%}
-    {{ include.date | date: post_short_df }}
-  {%- else -%}
-    {{ include.date | date: post_long_df }}
-  {%- endif -%}
 </em>

_includes/toc.html

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

_includes/topbar.html

@@ -2,7 +2,7 @@
   The Top Bar
 -->
 
-<div id="topbar-wrapper" class="row justify-content-center topbar-down">
+<div id="topbar-wrapper" class="row justify-content-center">
   <div id="topbar" class="col-11 d-flex h-100 align-items-center justify-content-between">
     <span id="breadcrumb">
 
@@ -50,7 +50,7 @@
     <div id="topbar-title">
       {% if page.layout == 'home' %}
         {{- site.data.locales[lang].title | default: site.title -}}
-      {% elsif page.collection == 'tabs' or page.dynamic_title %}
+      {% elsif page.collection == 'tabs' or page.layout == 'page' %}
         {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%}
         {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       {% else %}
@@ -63,7 +63,6 @@
       <i class="fas fa-search fa-fw"></i>
       <input class="form-control" id="search-input" type="search"
         aria-label="search" autocomplete="off" placeholder="{{ site.data.locales[lang].search.hint | capitalize }}...">
-      <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <span id="search-cancel" >{{ site.data.locales[lang].search.cancel }}</span>
   </div>

_javascript/commons/locale-helper.js

@@ -0,0 +1,19 @@
+/**
+ * A tool for locale datetime
+ */
+
+const LocaleHelper = (function () {
+  const $preferLocale = $('meta[name="prefer-datetime-locale"]');
+  const locale = $preferLocale.length > 0 ?
+      $preferLocale.attr('content').toLowerCase() : $('html').attr('lang').substr(0, 2);
+  const attrTimestamp = 'data-ts';
+  const attrDateFormat = 'data-df';
+
+  return {
+    locale: () => locale,
+    attrTimestamp: () => attrTimestamp,
+    attrDateFormat: () => attrDateFormat,
+    getTimestamp: ($elem) => Number($elem.attr(attrTimestamp)),  // unix timestamp
+    getDateFormat: ($elem) => $elem.attr(attrDateFormat)
+  };
+}());

_javascript/commons/scroll-helper.js

@@ -0,0 +1,36 @@
+/**
+ * A tool for smooth scrolling and topbar switcher
+ */
+const ScrollHelper = (function () {
+  const $body = $("body");
+  const ATTR_TOPBAR_VISIBLE = "data-topbar-visible";
+  const topbarHeight = $("#topbar-wrapper").outerHeight();
+
+  let scrollUpCount = 0; // the number of times the scroll up was triggered by ToC or anchor
+  let topbarLocked = false;
+  let orientationLocked = false;
+
+  return {
+    hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
+    showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
+
+    // scroll up
+
+    addScrollUpTask: () => {
+      scrollUpCount += 1;
+      if (!topbarLocked) { topbarLocked = true; }
+    },
+    popScrollUpTask: () => scrollUpCount -= 1,
+    hasScrollUpTask: () => scrollUpCount > 0,
+    topbarLocked: () => topbarLocked === true,
+    unlockTopbar: () => topbarLocked = false,
+    getTopbarHeight: () => topbarHeight,
+
+    // orientation change
+
+    orientationLocked: () => orientationLocked === true,
+    lockOrientation: () => orientationLocked = true,
+    unLockOrientation: () => orientationLocked = false
+  };
+
+}());

_javascript/commons/search-display.js

@@ -3,12 +3,9 @@
 */
 
 $(function() {
-
   const btnSbTrigger = $("#sidebar-trigger");
   const btnSearchTrigger = $("#search-trigger");
   const btnCancel = $("#search-cancel");
-  const btnClear = $("#search-cleaner");
-
   const main = $("#main");
   const topbarTitle = $("#topbar-title");
   const searchWrapper = $("#search-wrapper");
@@ -33,8 +30,7 @@ $(function() {
     };
   }());
 
-
+  /*--- Actions in mobile screens (Sidebar hidden) ---*/
-  /*--- Actions in small screens (Sidebar unloaded) ---*/
 
   const mobileSearchBar = (function () {
     return {
@@ -75,7 +71,6 @@ $(function() {
             hints.removeClass("unloaded");
           }
           resultWrapper.addClass("unloaded");
-          btnClear.removeClass("visible");
           main.removeClass("unloaded");
 
           // now the release method must be called after $(#main) display
@@ -92,7 +87,6 @@ $(function() {
 
   }());
 
-
   function isMobileView() {
     return btnCancel.hasClass("loaded");
   }
@@ -116,38 +110,20 @@ $(function() {
     searchWrapper.removeClass("input-focus");
   });
 
-  input.on("keyup", function(e) {
+  input.on("input", () => {
-    if (e.keyCode === 8 && input.val() === "") {
+    if (input.val() === "") {
-      if (!isMobileView()) {
+      if (isMobileView()) {
-        resultSwitch.off();
-      } else {
         hints.removeClass("unloaded");
+      } else {
+        resultSwitch.off();
       }
+
     } else {
-      if (input.val() !== "") {
+      resultSwitch.on();
-        resultSwitch.on();
+      if (isMobileView()) {
-
+        hints.addClass("unloaded");
-        if (!btnClear.hasClass("visible")) {
-          btnClear.addClass("visible");
-        }
-
-        if (isMobileView()) {
-          hints.addClass("unloaded");
-        }
       }
     }
   });
 
-  btnClear.on("click", function() {
-    input.val("");
-    if (isMobileView()) {
-      hints.removeClass("unloaded");
-      results.empty();
-    } else {
-      resultSwitch.off();
-    }
-    input.focus();
-    btnClear.removeClass("visible");
-  });
-
 });

_javascript/commons/topbar-switch.js

@@ -1,70 +0,0 @@
-/*
- * Hide Header on scroll down
- */
-
-$(function() {
-  const $topbarWrapper = $("#topbar-wrapper");
-  const $topbarTitle = $("#topbar-title");
-  const $panel = $("#panel-wrapper");
-  const $searchInput = $("#search-input");
-
-  const CLASS_TOPBAR_UP = "topbar-up";
-  const CLASS_TOPBAR_DOWN = "topbar-down";
-  const ATTR_TOC_SCROLLING_UP = "toc-scrolling-up"; // topbar locked
-
-  let didScroll;
-  let lastScrollTop = 0;
-
-  const delta = $topbarWrapper.outerHeight();
-  const topbarHeight = $topbarWrapper.outerHeight();
-
-  function hasScrolled() {
-    let st = $(this).scrollTop();
-
-    /* Make sure they scroll more than delta */
-    if (Math.abs(lastScrollTop - st) <= delta) {
-      return;
-    }
-
-    if (st > lastScrollTop ) { // Scroll Down
-      if (st > topbarHeight) {
-        $topbarWrapper.removeClass(CLASS_TOPBAR_DOWN).addClass(CLASS_TOPBAR_UP);
-        $panel.removeClass(CLASS_TOPBAR_DOWN);
-
-        if ($searchInput.is(":focus")) {
-          $searchInput.blur(); /* remove focus */
-        }
-      }
-    } else  {// Scroll up
-      // did not reach the bottom of the document, i.e., still have space to scroll up
-      if (st + $(window).height() < $(document).height()) {
-        let tocScrollingUp = $topbarWrapper.attr(ATTR_TOC_SCROLLING_UP);
-        if (typeof tocScrollingUp !== "undefined") {
-          if (tocScrollingUp === "false") {
-            $topbarWrapper.removeAttr(ATTR_TOC_SCROLLING_UP);
-          }
-
-        } else {
-          $topbarWrapper.removeClass(CLASS_TOPBAR_UP).addClass(CLASS_TOPBAR_DOWN);
-          $panel.addClass(CLASS_TOPBAR_DOWN);
-        }
-      }
-    }
-
-    lastScrollTop = st;
-  }
-
-  $(window).scroll(function(event) {
-    if ($topbarTitle.is(":hidden")) {
-      didScroll = true;
-    }
-  });
-
-  setInterval(function() {
-    if (didScroll) {
-      hasScrolled();
-      didScroll = false;
-    }
-  }, 250);
-
-});

_javascript/commons/topbar-switcher.js

@@ -0,0 +1,90 @@
+/*
+ * Hide Header on scroll down
+ */
+
+$(function() {
+  const $searchInput = $("#search-input");
+  const delta = ScrollHelper.getTopbarHeight();
+
+  let didScroll;
+  let lastScrollTop = 0;
+
+  function hasScrolled() {
+    let st = $(this).scrollTop();
+
+    /* Make sure they scroll more than delta */
+    if (Math.abs(lastScrollTop - st) <= delta) {
+      return;
+    }
+
+    if (st > lastScrollTop ) { // Scroll Down
+      ScrollHelper.hideTopbar();
+
+      if ($searchInput.is(":focus")) {
+        $searchInput.blur(); /* remove focus */
+      }
+
+    } else  { // Scroll up
+      // has not yet scrolled to the bottom of the screen, that is, there is still space for scrolling
+      if (st + $(window).height() < $(document).height()) {
+
+        if (ScrollHelper.hasScrollUpTask()) {
+          return;
+        }
+
+        if (ScrollHelper.topbarLocked()) { // avoid redundant scroll up event from smooth scrolling
+          ScrollHelper.unlockTopbar();
+        } else {
+          if (ScrollHelper.orientationLocked()) { // avoid device auto scroll up on orientation change
+            ScrollHelper.unLockOrientation();
+          } else {
+            ScrollHelper.showTopbar();
+          }
+        }
+      }
+    }
+
+    lastScrollTop = st;
+
+  } // hasScrolled()
+
+  function handleLandscape() {
+    if ($(window).scrollTop() === 0) {
+      return;
+    }
+    ScrollHelper.lockOrientation();
+    ScrollHelper.hideTopbar();
+  }
+
+  if (screen.orientation) {
+    screen.orientation.onchange = () => {
+      const type = screen.orientation.type;
+      if (type ===  "landscape-primary" || type === "landscape-secondary") {
+        handleLandscape();
+      }
+    };
+
+  } else {
+    // for the browsers that not support `window.screen.orientation` API
+    $(window).on("orientationchange",() => {
+      if ($(window).width() < $(window).height()) { // before rotating, it is still in portrait mode.
+        handleLandscape();
+      }
+    });
+  }
+
+  $(window).scroll(() => {
+    if (didScroll) {
+      return;
+    }
+    didScroll = true;
+  });
+
+  setInterval(() => {
+    if (didScroll) {
+      hasScrolled();
+      didScroll = false;
+    }
+  }, 250);
+
+});

_javascript/commons/topbar-title.js

@@ -14,17 +14,22 @@ $(function() {
   }
 
   const defaultTitleText = $topbarTitle.text().trim();
-  let titleText = $pageTitle.text().trim();
+  let pageTitleText = $pageTitle.text().trim();
   let hasScrolled = false;
   let lastScrollTop = 0;
 
   if ($("#page-category").length || $("#page-tag").length) {
     /* The title in Category or Tag page will be "<title> <count_of_posts>" */
-    if (/\s/.test(titleText)) {
+    if (/\s/.test(pageTitleText)) {
-      titleText = titleText.replace(/[0-9]/g, "").trim();
+      pageTitleText = pageTitleText.replace(/[0-9]/g, "").trim();
     }
   }
 
+  // When the page is scrolled down and then refreshed, the topbar title needs to be initialized
+  if ($pageTitle.offset().top < $(window).scrollTop()) {
+    $topbarTitle.text(pageTitleText);
+  }
+
   let options = {
     rootMargin: '-48px 0px 0px 0px', // 48px equals to the topbar height (3rem)
     threshold: [0, 1]
@@ -43,7 +48,7 @@ $(function() {
 
     if (isScrollDown) {
       if (heading.intersectionRatio === 0) {
-        $topbarTitle.text(titleText);
+        $topbarTitle.text(pageTitleText);
       }
     } else {
       if (heading.intersectionRatio === 1) {

_javascript/copyright

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

_javascript/utils/clipboard.js

@@ -10,6 +10,8 @@ $(function() {
   const btnSelector = '.code-header>button';
   const ICON_SUCCESS = 'fas fa-check';
   const ATTR_TIMEOUT = 'timeout';
+  const ATTR_TITLE_SUCCEED = 'data-title-succeed';
+  const ATTR_TITLE_ORIGIN = 'data-original-title';
   const TIMEOUT = 2000; // in milliseconds
 
   function isLocked(node) {
@@ -53,12 +55,12 @@ $(function() {
   const ICON_DEFAULT = getIcon(btnSelector);
 
   function showTooltip(btn) {
-    const succeedTitle = $(btn).attr('title-succeed');
+    const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED);
-    $(btn).attr('data-original-title', succeedTitle).tooltip('show');
+    $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
   }
 
   function hideTooltip(btn) {
-    $(btn).tooltip('hide').removeAttr('data-original-title');
+    $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN);
   }
 
   function setSuccessIcon(btn) {
@@ -115,14 +117,14 @@ $(function() {
 
     // Switch tooltip title
 
-    const defaultTitle = target.attr('data-original-title');
+    const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
-    const succeedTitle = target.attr('title-succeed');
+    const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
 
-    target.attr('data-original-title', succeedTitle).tooltip('show');
+    target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
     lock(target);
 
     setTimeout(() => {
-      target.attr('data-original-title', defaultTitle);
+      target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
       unlock(target);
     }, TIMEOUT);
 

_javascript/utils/locale-datetime.js

@@ -0,0 +1,20 @@
+/**
+ * Update month/day to locale datetime
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
+ */
+
+$(function() {
+  dayjs.locale(LocaleHelper.locale());
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
+
+  $(`[${LocaleHelper.attrTimestamp()}]`).each(function () {
+    const date = dayjs.unix(LocaleHelper.getTimestamp($(this)));
+    const df = LocaleHelper.getDateFormat($(this));
+    const text = date.format(df);
+
+    $(this).text(text);
+    $(this).removeAttr(LocaleHelper.attrTimestamp());
+    $(this).removeAttr(LocaleHelper.attrDateFormat());
+  });
+});

_javascript/utils/smooth-scroll.js

@@ -8,21 +8,16 @@
 */
 
 $(function() {
-  const $topbarWrapper = $("#topbar-wrapper");
-  const topbarHeight = $topbarWrapper.outerHeight();
   const $topbarTitle = $("#topbar-title");
-
-  const ATTR_TOC_SCROLLING = "toc-scrolling-up";
-  const SCROLL_MARK = "scroll-focus";
   const REM = 16; // in pixels
-  let tocScrollUpCount = 0;
+  const ATTR_SCROLL_FOCUS = "scroll-focus";
 
   $("a[href*='#']")
     .not("[href='#']")
     .not("[href='#0']")
     .click(function(event) {
-
+      if (this.pathname.replace(/^\//, "") !==
-      if (this.pathname.replace(/^\//, "") !== location.pathname.replace(/^\//, "")) {
+            location.pathname.replace(/^\//, "")) {
         return;
       }
 
@@ -36,9 +31,8 @@ $(function() {
       let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
       let $target = $(selector);
 
-      let parent = $(this).parent().prop("tagName");
+      let isMobileViews = $topbarTitle.is(":visible");
-      let isAnchor = RegExp(/^H\d/).test(parent);
+      let isPortrait = $(window).width() < $(window).height();
-      let isMobileViews = !$topbarTitle.is(":hidden");
 
       if (typeof $target === "undefined") {
         return;
@@ -50,26 +44,20 @@ $(function() {
         history.pushState(null, null, hash);
       }
 
-      let curOffset = isAnchor ? $(this).offset().top : $(window).scrollTop();
+      let curOffset = $(window).scrollTop();
       let destOffset = $target.offset().top -= REM / 2;
 
       if (destOffset < curOffset) { // scroll up
-        if (!isAnchor && !toFootnote) { // trigger by ToC item
+        ScrollHelper.hideTopbar();
-          if (!isMobileViews) { // on desktop/tablet screens
+        ScrollHelper.addScrollUpTask();
-            $topbarWrapper.removeClass("topbar-down").addClass("topbar-up");
+
-            // Send message to `${JS_ROOT}/commons/topbar-switch.js`
+        if (isMobileViews && isPortrait) {
-            $topbarWrapper.attr(ATTR_TOC_SCROLLING, true);
+          destOffset -= ScrollHelper.getTopbarHeight();
-            tocScrollUpCount += 1;
-          }
         }
 
-        if ((isAnchor || toFootnoteRef) && isMobileViews) {
+      } else { // scroll down
-          destOffset -= topbarHeight;
+        if (isMobileViews && isPortrait) {
-        }
+          destOffset -= ScrollHelper.getTopbarHeight();
-
-      } else {
-        if (isMobileViews) {
-          destOffset -= topbarHeight;
         }
       }
 
@@ -79,18 +67,18 @@ $(function() {
         $target.focus();
 
         /* clean up old scroll mark */
-        if ($(`[${SCROLL_MARK}=true]`).length) {
+        if ($(`[${ATTR_SCROLL_FOCUS}=true]`).length) {
-          $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
+          $(`[${ATTR_SCROLL_FOCUS}=true]`).attr(ATTR_SCROLL_FOCUS, false);
         }
 
         /* Clean :target links */
         if ($(":target").length) { /* element that visited by the URL with hash */
-          $(":target").attr(SCROLL_MARK, false);
+          $(":target").attr(ATTR_SCROLL_FOCUS, false);
         }
 
         /* set scroll mark to footnotes */
         if (toFootnote || toFootnoteRef) {
-          $target.attr(SCROLL_MARK, true);
+          $target.attr(ATTR_SCROLL_FOCUS, true);
         }
 
         if ($target.is(":focus")) { /* Checking if the target was focused */
@@ -100,12 +88,8 @@ $(function() {
           $target.focus(); /* Set focus again */
         }
 
-        if (typeof $topbarWrapper.attr(ATTR_TOC_SCROLLING) !== "undefined") {
+        if (ScrollHelper.hasScrollUpTask()) {
-          tocScrollUpCount -= 1;
+          ScrollHelper.popScrollUpTask();
-
-          if (tocScrollUpCount <= 0) {
-            $topbarWrapper.attr(ATTR_TOC_SCROLLING, "false");
-          }
         }
       });
     }); /* click() */

_javascript/utils/timeago.js

@@ -1,77 +1,87 @@
-/*
+/**
  * Calculate the Timeago
+ *
+ * Requirement: <https://github.com/iamkun/dayjs>
  */
 
 $(function() {
-  const timeagoElem = $(".timeago");
+  const attrTimestamp = LocaleHelper.attrTimestamp();
-  let tasks = timeagoElem.length;
+  const attrCapitalize = 'data-capitalize';
+  const $timeago = $(".timeago");
+
+  let timeagoTasks = $timeago.length;
   let intervalId = void 0;
 
-  const dPrompt = $("meta[name=day-prompt]").attr("content");
+  dayjs.locale(LocaleHelper.locale());
-  const hrPrompt = $("meta[name=hour-prompt]").attr("content");
+  dayjs.extend(window.dayjs_plugin_relativeTime);
-  const minPrompt = $("meta[name=minute-prompt]").attr("content");
+  dayjs.extend(window.dayjs_plugin_localizedFormat);
-  const justnowPrompt = $("meta[name=justnow-prompt]").attr("content");
 
-  function timeago(date, initDate) {
+  function relativetime($elem) {
-    let now = new Date();
+    const now = dayjs();
-    let past = new Date(date);
+    const past = dayjs.unix(LocaleHelper.getTimestamp($elem));
 
-    if (past.getFullYear() !== now.getFullYear()
+    let diffMonth = now.diff(past, 'month', true);
-        || past.getMonth() !== now.getMonth()) {
+    if (diffMonth > 10) { // year ago range: 11 months to 17months
-      return initDate;
+      $elem.removeAttr(attrTimestamp);
+      return past.format('ll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats
     }
 
-    let seconds = Math.floor((now - past) / 1000);
+    let diffMinute = now.diff(past, 'minute', true);
-
+    if (diffMinute > 44) { // an hour ago range: 45 to 89 minutes
-    let day = Math.floor(seconds / 86400);
+      $elem.removeAttr(attrTimestamp);
-    if (day >= 1) {
-      return ` ${day} ${dPrompt}`;
     }
 
-    let hour = Math.floor(seconds / 3600);
+    return past.fromNow();
-    if (hour >= 1) {
-      return ` ${hour} ${hrPrompt}`;
-    }
-
-    let minute = Math.floor(seconds / 60);
-    if (minute >= 1) {
-      return ` ${minute} ${minPrompt}`;
-    }
-
-    return justnowPrompt;
   }
 
   function updateTimeago() {
-    $(".timeago").each(function() {
+    $timeago.each(function() {
-      if ($(this)[0].hasAttribute("date") === false) {
+      if (typeof $(this).attr(attrTimestamp) === 'undefined') {
-        tasks -= 1;
+        timeagoTasks -= 1;
         return;
       }
 
-      let date = $(this).attr("date");
+      let relativeTime = relativetime($(this));
-      let initDate = $(this).text();
+      const capitalize = $(this).attr(attrCapitalize);
-      let relativeDate = timeago(date, initDate);
+      if (typeof capitalize !== 'undefined' && capitalize === 'true') {
-
+        relativeTime = relativeTime.replace(/^\w/, (c) => c.toUpperCase());
-      if (relativeDate === initDate) {
-        $(this).removeAttr("date");
-      } else {
-        $(this).text(relativeDate);
       }
 
+      if ($(this).text() !== relativeTime) {
+        $(this).text(relativeTime);
+      }
     });
 
-    if (tasks === 0 && typeof intervalId !== "undefined") {
+    if (timeagoTasks === 0 && typeof intervalId !== "undefined") {
       clearInterval(intervalId); /* stop interval */
     }
-    return tasks;
+
+    return timeagoTasks;
   }
 
-  if (tasks === 0) {
+  function setupTooltips() {
+    $timeago.each(function() {
+      const tooltip = $(this).attr('data-toggle');
+      if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') {
+        return;
+      }
+
+      const df = $(this).attr('data-tooltip-df');
+      const ts = LocaleHelper.getTimestamp($(this));
+      const dateStr = dayjs.unix(ts).format(df);
+      $(this).attr('data-original-title', dateStr);
+      $(this).removeAttr('data-tooltip-df');
+    });
+  }
+
+  if (timeagoTasks === 0) {
     return;
   }
 
-  if (updateTimeago() > 0) { /* run immediately */
+  setupTooltips();
-    intervalId = setInterval(updateTimeago, 60000); /* run every minute */
+
+  if (updateTimeago()) { /* run immediately */
+    intervalId = setInterval(updateTimeago, 60 * 1000); /* run every minute */
   }
 
 });

_layouts/archives.html

@@ -3,8 +3,6 @@ layout: page
 # The Archives of posts.
 ---
 
-{% include lang.html %}
-
 <div id="archives" class="pl-xl-2">
 
 {% for post in site.posts %}
@@ -18,11 +16,11 @@ layout: page
   {% endif %}
     <li>
       <div>
-        {% capture this_day %}{{ post.date | date: "%d" }}{% endcapture %}
+        {% assign ts = post.date | date: '%s' %}
-        {% capture _mth_df %}{{ site.data.locales[lang].date_format.post.archive_month }}{% endcapture %}
+        <span class="date day" data-ts="{{ ts }}" data-df="DD">{{ post.date | date: "%d" }}</span>
-        {% capture this_month %}{{ post.date | date: _mth_df }}{% endcapture %}
+        <span class="date month small text-muted" data-ts="{{ ts }}" data-df="MMM">
-        <span class="date day">{{ this_day }}</span>
+          {{ post.date | date: '%m' }}
-        <span class="date month small text-muted">{% include no-zero-date.html date_str=this_month %}</span>
+        </span>
         <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       </div>
     </li>

_layouts/category.html

@@ -3,8 +3,6 @@ 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>
@@ -13,13 +11,13 @@ layout: page
   </h1>
 
   <ul class="post-content pl-0">
-    {% 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">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small">{{ post.date | date: post_df }}</span>
+      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
+        {{ post.date | date: '%Y-%m-%d' }}
+      </span>
     </li>
     {% endfor %}
   </ul>

_layouts/default.html

@@ -7,9 +7,11 @@ layout: compress
 
 {% include lang.html %}
 
+{% include assets-origin.html %}
+
 {% capture prefer_mode %}
   {% if site.theme_mode %}
-    mode="{{ site.theme_mode }}"
+    data-mode="{{ site.theme_mode }}"
   {% endif %}
 {% endcapture %}
 
@@ -21,7 +23,7 @@ layout: compress
     {% include mode-toggle.html %}
   {% endunless %}
 
-  <body data-spy="scroll" data-target="#toc">
+  <body data-spy="scroll" data-target="#toc" data-topbar-visible="true">
 
     {% include sidebar.html %}
 

_layouts/home.html

@@ -6,7 +6,7 @@ layout: page
 {% include lang.html %}
 
 {% assign pinned = site.posts | where: "pin", "true" %}
-{% assign default = site.posts | where_exp: "item", "item.pin != true" %}
+{% assign default = site.posts | where_exp: "item", "item.pin != true and item.hidden != true" %}
 
 {% assign posts = "" | split: "" %}
 
@@ -62,7 +62,7 @@ layout: page
       <div class="mr-auto">
         <!-- posted date -->
         <i class="far fa-calendar fa-fw"></i>
-        {% include timeago.html date=post.date tooltip=true %}
+        {% include timeago.html date=post.date tooltip=true capitalize=true %}
 
         <!-- time to read -->
         <i class="far fa-clock fa-fw"></i>

_layouts/page.html

@@ -4,6 +4,8 @@ layout: default
 
 {% include lang.html %}
 
+{% include assets-origin.html %}
+
 <div class="row">
 
   <!-- core -->
@@ -34,7 +36,7 @@ layout: default
   </div> <!-- #core-wrapper -->
 
   <!-- pannel -->
-  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted topbar-down">
+  <div id="panel-wrapper" class="col-xl-3 pl-2 text-muted">
 
     <div class="access">
       {% include update-list.html %}

_layouts/tag.html

@@ -3,8 +3,6 @@ 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>
@@ -12,13 +10,13 @@ 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[lang].date_format.post.long %}
-
     {% for post in page.posts %}
     <li class="d-flex justify-content-between pl-md-3 pr-md-3">
       <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
       <span class="dash flex-grow-1"></span>
-      <span class="text-muted small">{{ post.date | date: post_df }}</span>
+      <span class="text-muted small" data-ts="{{ post.date | date: '%s' }}" data-df="ll">
+        {{ post.date | date: '%Y-%m-%d' }}
+      </span>
     </li>
     {% endfor %}
   </ul>

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

@@ -76,7 +76,21 @@ Moon
 
 ## Block Quote
 
-> This line to shows the Block Quote.
+> This line shows the _block quote_.
+
+## Prompts
+
+> An example showing the `tip` type prompt.
+{: .prompt-tip }
+
+> An example showing the `info` type prompt.
+{: .prompt-info }
+
+> An example showing the `warning` type prompt.
+{: .prompt-warning }
+
+> An example showing the `danger` type prompt.
+{: .prompt-danger }
 
 ## Tables
 
@@ -154,6 +168,10 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
 
 This is an example of `Inline Code`.
 
+## Filepath
+
+Here is the `/path/to/the/file.extend`{: .filepath}.
+
 ## Code block
 
 ### Common

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

@@ -13,7 +13,7 @@ This post will guide you how to write a post on _Chirpy_ theme. Even if you have
 
 ## Naming and Path
 
-Create a new file named `YYYY-MM-DD-TITLE.EXTENSION` and put it in the `_posts` of the root directory. Please note that the `EXTENSION` must be one of `md` and `markdown`. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this.
+Create a new file named `YYYY-MM-DD-TITLE.EXTENSION`{: .filepath} and put it in the `_posts`{: .filepath} of the root directory. Please note that the `EXTENSION`{: .filepath} must be one of `md`{: .filepath} and `markdown`{: .filepath}. If you want to save time of creating files, please consider using the plugin [`Jekyll-Compose`](https://github.com/jekyll/jekyll-compose) to accomplish this.
 
 ## Front Matter
 
@@ -28,11 +28,12 @@ tags: [TAG]     # TAG names should always be lowercase
 ---
 ```
 
-> **Note**: The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+> The posts' _layout_ has been set to `post` by default, so there is no need to add the variable _layout_ in the Front Matter block.
+{: .prompt-tip }
 
 ### Timezone of Date
 
-In order to accurately record the release date of a post, you should not only set up the `timezone` of _\_config.yml_ but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
+In order to accurately record the release date of a post, you should not only set up the `timezone` of `_config.yml`{: .filepath} but also provide the post's timezone in variable `date` of its Front Matter block. Format: `+/-TTTT`, e.g. `+0800`.
 
 ### Categories and Tags
 
@@ -59,7 +60,7 @@ author:
 
 ## Table of Contents
 
-By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to _\_config.yml_ and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
+By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
 
 ```yaml
 ---
@@ -69,7 +70,7 @@ toc: false
 
 ## Comments
 
-The global switch of comments is defined by variable `comments.active` in the file _\_config.yml_. After selecting a comment system for this variable, comments will be turned on for all posts.
+The global switch of comments is defined by variable `comments.active` in the file `_config.yml`{: .filepath}. After selecting a comment system for this variable, comments will be turned on for all posts.
 
 If you want to close the comment for a specific post, add the following to the **Front Matter** of the post:
 
@@ -131,7 +132,10 @@ Starting from _Chirpy v5.0.0_, `height` and `width` support abbreviations (`heig
 
 ### Position
 
-By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`. For example:
+By default, the image is centered, but you can specify the position by using one of the classes `normal`, `left`, and `right`.
+
+> Once the position is specified, the image caption should not be added.
+{: .prompt-warning }
 
 - **Normal position**
 
@@ -156,8 +160,6 @@ By default, the image is centered, but you can specify the position by using one
   ```
   {: .nolineno}
 
-> **Limitation**: Once the position of the image is specified, the image caption should not be added.
-
 ### Shadow
 
 The screenshots of the program window can be considered to show the shadow effect, and the shadow will be visible in the `light` mode:
@@ -169,7 +171,7 @@ The screenshots of the program window can be considered to show the shadow effec
 
 ### CDN URL
 
-If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of _\_config.yml_ file:
+If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file:
 
 ```yaml
 img_cdn: https://cdn.com
@@ -217,7 +219,6 @@ The output will be:
 ```
 {: .nolineno }
 
-
 ### Preview Image
 
 If you want to add an image to the top of the post contents, specify the attribute `src`, `width`, `height`, and `alt` for the image:
@@ -246,15 +247,43 @@ pin: true
 ---
 ```
 
-## Code Block
+## Prompts
+
+There are several types of prompts: `tip`, `info`, `warning`, and `danger`. They can be generated by adding the class `prompt-{type}` to the blockquote. For example, define a prompt of type `info` as follows:
+
+```md
+> Example line for prompt.
+{: .prompt-info }
+```
+{: .nolineno }
+
+## Syntax
+
+### Inline Code
+
+```md
+`inline code part`
+```
+{: .nolineno }
+
+### Filepath Hightlight
+
+```md
+`/path/to/a/file.extend`{: .filepath}
+```
+{: .nolineno }
+
+### Code Block
 
 Markdown symbols ```` ``` ```` can easily create a code block as follows:
 
+````md
 ```
 This is a plaintext code snippet.
 ```
+````
 
-### Specifying Language
+#### Specifying Language
 
 Using ```` ```{language} ```` you will get a code block with syntax highlight:
 
@@ -264,22 +293,23 @@ key: value
 ```
 ````
 
-> **Limitation**: The Jekyll style `highlight` tag is not compatible with this theme.
+> The Jekyll tag `{% highlight %}` is not compatible with this theme.
+{: .prompt-danger }
 
-### Line Number
+#### 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:
+By default, all languages except `plaintext`, `console`, and `terminal` will display line numbers. When you want to hide the line number of a code block, add the class `nolineno` to it:
 
 ````markdown
 ```shell
 echo 'No more line numbers!'
 ```
-{: .nolineno}
+{: .nolineno }
 ````
 
-### Specifying the Filename
+#### 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:
+You may have noticed that the code language will be displayed at the top 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
@@ -288,7 +318,7 @@ You may have noticed that the code language will be displayed on the left side o
 {: file="path/to/file" }
 ````
 
-### Liquid Codes
+#### Liquid Codes
 
 If you want to display the **Liquid** snippet, surround the liquid code with `{% raw %}` and `{% endraw %}`:
 

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

@@ -11,7 +11,7 @@ pin: true
 
 ## Prerequisites
 
-Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`.
+Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installation/) to complete the installation of `Ruby`, `RubyGems`, `Jekyll`, and `Bundler`. In addition, [Git](https://git-scm.com/) is also required to be installed.
 
 ## Installation
 
@@ -36,18 +36,18 @@ And then execute:
 $ bash tools/init.sh
 ```
 
-> **Note**: If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+> If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
+{: .prompt-info }
 
 The above command will:
 
 1. Removes some files or directories from your repository:
-    - `.travis.yml`
+    - `.travis.yml`{: .filepath}
-    - files under `_posts`
+    - files under `_posts`{: .filepath}
-    - folder `docs`
 
-2. If the option `--no-gh` is provided, the directory `.github` will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook` of `.github/workflows/pages-deploy.yml.hook`, and then remove the other files and directories in the folder `.github`.
+2. If the option `--no-gh` is provided, the directory `.github`{: .filepath} will be deleted. Otherwise, set up the GitHub Action workflow by removing the extension `.hook`{: .filepath} of `.github/workflows/pages-deploy.yml.hook`{: .filepath}, and then remove the other files and directories in the folder `.github`{: .filepath}.
 
-3. Removes item `Gemfile.lock` from `.gitignore`.
+3. Removes item `Gemfile.lock` from `.gitignore`{: .filepath}.
 
 4. Creates a new commit to save the changes automatically.
 
@@ -63,7 +63,7 @@ $ bundle
 
 ### Configuration
 
-Update the variables of `_config.yml` as needed. Some of them are typical options:
+Update the variables of `_config.yml`{: .filepath} as needed. Some of them are typical options:
 
 - `url`
 - `avatar`
@@ -72,9 +72,15 @@ Update the variables of `_config.yml` as needed. Some of them are typical option
 
 ### Customing Stylesheet
 
-If you need to customize the stylesheet, copy the theme's `assets/css/style.scss` to the same path on your Jekyll site, and then add the custom style at the end of the style file.
+If you need to customize the stylesheet, copy the theme's `assets/css/style.scss`{: .filepath} to the same path on your Jekyll site, and then add the custom style at the end of the style file.
 
-Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`, create a new file `_sass/variables-hook.scss` and assign new values to the target variable in it.
+Starting from [`v4.1.0`][chirpy-4.1.0], if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, create a new file `_sass/variables-hook.scss`{: .filepath} and assign new values to the target variable in it.
+
+### Customing Static Assets
+
+Static assets configuration was introduced in version `5.1.0`. The CDN of the static assets is defined by file `_data/assets/cross_origin.yml`{: .filepath }, and you can replace some of them according to the network conditions in the region where your website is published.
+
+Also, if you'd like to self-host the static assets, please refer to the [_chirpy-static-assets_](https://github.com/cotes2020/chirpy-static-assets#readme).
 
 ### Running Local Server
 
@@ -95,23 +101,23 @@ $ docker run -it --rm \
 
 After a while, the local service will be published at _<http://127.0.0.1:4000>_.
 
-### Deployment
+## Deployment
 
-Before the deployment begins, check out the file `_config.yml` and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`.
+Before the deployment begins, check out the file `_config.yml`{: .filepath} and make sure the `url` is configured correctly. Furthermore, if you prefer the [**project site**](https://help.github.com/en/github/working-with-github-pages/about-github-pages#types-of-github-pages-sites) and don't use a custom domain, or you want to visit your website with a base URL on a web server other than **GitHub Pages**, remember to change the `baseurl` to your project name that starts with a slash, e.g, `/project-name`.
 
 Now you can choose ONE of the following methods to deploy your Jekyll site.
 
-#### Deploy by Using Github Actions
+### Deploy by Using Github Actions
 
 For security reasons, GitHub Pages build runs on `safe` mode, which restricts us from using plugins to generate additional page files. Therefore, we can use **GitHub Actions** to build the site, store the built site files on a new branch, and use that branch as the source of the GitHub Pages service.
 
 Quickly check the files needed for GitHub Actions build:
 
-- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
+- Ensure your Jekyll site has the file `.github/workflows/pages-deploy.yml`{: .filepath}. Otherwise, create a new one and fill in the contents of the [sample file][workflow], and the value of the `on.push.branches` should be the same as your repo's default branch name.
 
-- Ensure your Jekyll site has file `tools/deploy.sh`. Otherwise, copy it from here to your Jekyll site.
+- Ensure your Jekyll site has file `tools/deploy.sh`{: .filepath}. Otherwise, copy it from here to your Jekyll site.
 
-- Furthermore, if you have committed `Gemfile.lock` to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file:
+- Furthermore, if you have committed `Gemfile.lock`{: .filepath} to the repo, and your runtime system is not Linux, don't forget to update the platform list in the lock file:
 
   ```console
   $ bundle lock --add-platform x86_64-linux
@@ -129,7 +135,7 @@ Now publish your Jekyll site by:
 
 3. Visit your website at the address indicated by GitHub.
 
-#### Manually Build and Deploy
+### Manually Build and Deploy
 
 On self-hosted servers, you cannot enjoy the convenience of **GitHub Actions**. Therefore, you should build the site on your local machine and then upload the site files to the server.
 
@@ -149,13 +155,13 @@ $ docker run -it --rm \
     jekyll build
 ```
 
-Unless you specified the output path, the generated site files will be placed in folder `_site` of the project's root directory. Now you should upload those files to the target server.
+Unless you specified the output path, the generated site files will be placed in folder `_site`{: .filepath} of the project's root directory. Now you should upload those files to the target server.
 
-### Upgrading
+## Upgrading
 
 It depends on how you use the theme:
 
-- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`), editing the `Gemfile` and update the version number of the theme gem, for example:
+- If you are using the theme gem (there will be `gem "jekyll-theme-chirpy"` in the `Gemfile`{: .filepath}), editing the `Gemfile`{: .filepath} and update the version number of the theme gem, for example:
 
   ```diff
   - gem "jekyll-theme-chirpy", "~> 3.2", ">= 3.2.1"
@@ -171,7 +177,7 @@ It depends on how you use the theme:
 
   As the version upgrades, the critical files (for details, see the [Startup Template][starter]) and configuration options will change. Please refer to the [Upgrade Guide](https://github.com/cotes2020/jekyll-theme-chirpy/wiki/Upgrade-Guide) to keep your repo's files in sync with the latest version of the theme.
 
-- If you forked from the source project (there will be `gemspec` in the `Gemfile` of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
+- If you forked from the source project (there will be `gemspec` in the `Gemfile`{: .filepath} of your site), then merge the [latest upstream tags][latest-tag] into your Jekyll site to complete the upgrade.
 The merge is likely to conflict with your local modifications. Please be patient and careful to resolve these conflicts.
 
 [starter]: https://github.com/cotes2020/chirpy-starter

_posts/2019-08-11-customize-the-favicon.md

@@ -8,7 +8,7 @@ categories: [Blogging, Tutorial]
 tags: [favicon]
 ---
 
-The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
+The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`{: .filepath}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
 
 ## Generate the favicon
 
@@ -20,10 +20,10 @@ In the next step, the webpage will show all usage scenarios. You can keep the de
 
 Download the generated package, unzip and delete the following two from the extracted files:
 
-- `browserconfig.xml`
+- `browserconfig.xml`{: .filepath}
-- `site.webmanifest`
+- `site.webmanifest`{: .filepath}
 
-And then copy the remaining image files (`PNG` and `ICO`) to cover the original files in the directory `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
+And then copy the remaining image files (`.PNG`{: .filepath} and `.ICO`{: .filepath}) to cover the original files in the directory `assets/img/favicons/`{: .filepath} of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
 
 The following table will help you understand the changes to the favicon files:
 
@@ -32,6 +32,7 @@ The following table will help you understand the changes to the favicon files:
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 
-> Note: ✓ means keep, ✗ means delete.
+>  ✓ means keep, ✗ means delete.
+{: .prompt-info }
 
 The next time you build the site, the favicon will be replaced with a customized edition.

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

@@ -37,7 +37,7 @@ It should look like this:
 
 ![google-analytics-data-stream](/posts/20210103/01-google-analytics-data-stream.png){: width="1086" height="542"}
 
-Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml` file
+Now, click on the new data stream and grab the **Measurement ID**. It should look something like `G-V6XXXXXXXX`. Copy this to your `_config.yml`{: .filepath} file:
 
 ```yaml
 google_analytics:
@@ -115,16 +115,16 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
 
 1. Clone the **Google Analytics superProxy** project on Github: <https://github.com/googleanalytics/google-analytics-super-proxy> to your local.
 
-2.  Remove the first 2 lines in the [`src/app.yaml`](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
+2.  Remove the first 2 lines in the [`src/app.yaml`{: .filepath}](https://github.com/googleanalytics/google-analytics-super-proxy/blob/master/src/app.yaml#L1-L2) file:
 
     ```diff
     - application: your-project-id
     - version: 1
     ```
 
-3. In `src/config.py`, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from your App Engine Dashboard.
+3. In `src/config.py`{: .filepath}, add the `OAUTH_CLIENT_ID` and `OAUTH_CLIENT_SECRET` that you gathered from your App Engine Dashboard.
 
-4.  Enter any random key for `XSRF_KEY`, your `config.py` should look similar to this
+4.  Enter any random key for `XSRF_KEY`, your `config.py`{: .filepath} should look similar to this
 
     ```python
     #!/usr/bin/python2.7
@@ -146,9 +146,11 @@ There is a detailed [tutorial](https://developers.google.com/analytics/solutions
     ```
     {: 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.
+    > 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.
+    {: .prompt-info }
 
-5.  From inside the src/ directory, deploy the app
+5.  From inside the `src/`{: .filepath} directory, deploy the app
 
     ```console
     [root@bc96abf71ef8 src]# gcloud app deploy
@@ -221,7 +223,7 @@ Once all the hard part is done, it is very easy to enable the Page View on Chirp
 
 ![superproxy-dashboard](/posts/20210103/05-superproxy-dashboard.png){: width="1210" height="694"}
 
-Update the `_config.yml` file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
+Update the `_config.yml`{: .filepath} file of [**Chirpy**][chirpy-homepage] project with the values from your dashboard, to look similar to the following:
 
 ```yaml
 google_analytics:

_sass/addon/commons.scss

@@ -1,37 +1,30 @@
 /*
   The common styles
 */
-@import url('https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;900&display=swap');
 
-@mixin mode-toggle($dark-mode: false) {
+html {
-  @if $dark-mode {
+  @media (prefers-color-scheme: light) {
-    @include dark-scheme;
+    &:not([data-mode]),
-  } @else {
+    [data-mode=light] {
-    @include light-scheme;
+      @include light-scheme;
-  }
+    }
-}
 
-html:not([mode]),
+    &[data-mode=dark] {
-html[mode=light] {
+      @include dark-scheme;
-  @include mode-toggle();
+    }
-}
-
-html[mode=dark] {
-  @include mode-toggle(true);
-}
-
-@media (prefers-color-scheme: dark) {
-  html:not([mode]),
-  html[mode=dark] {
-    @include mode-toggle(true);
   }
 
-  html[mode=light] {
+  @media (prefers-color-scheme: dark) {
-    @include mode-toggle();
+    &:not([data-mode]),
-  }
+    &[data-mode=dark] {
-}
+      @include dark-scheme;
+    }
+
+    &[data-mode=light] {
+      @include light-scheme;
+    }
+  }
 
-:root {
   font-size: 16px;
 }
 
@@ -54,7 +47,7 @@ h1 {
 h2 {
   @extend %heading;
   @extend %section;
-  @extend %anchor-relative;
+  @extend %anchor;
 
   font-size: 1.5rem;
 }
@@ -104,6 +97,33 @@ blockquote {
   border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
   color: var(--blockquote-text-color);
+
+  &[class^="prompt-"] {
+    display: flex;
+    border-left: 0;
+    border-radius: 6px;
+    padding: 0.75rem 1.2rem;
+    color: var(--prompt-text-color);
+
+    &::before {
+      margin-right: 1rem;
+      font-family: "Font Awesome 5 Free";
+      text-align: center;
+      width: 1.25rem;
+    }
+
+    p:last-child {
+      margin-bottom: 0rem;
+    }
+  }
+
+  @include prompt("tip", "\f0eb", 400);
+
+  @include prompt("info", "\f06a");
+
+  @include prompt("warning", "\f06a");
+
+  @include prompt("danger", "\f071");
 }
 
 kbd {
@@ -160,7 +180,7 @@ footer {
   }
 }
 
-i { // fontawesome icons
+i { /* fontawesome icons */
   &.far,
   &.fas {
     @extend %no-cursor;
@@ -191,7 +211,10 @@ img[data-src] {
 
   &.shadow {
     filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+    box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */
   }
+
+  @extend %img-caption;
 }
 
 /* --- Panels --- */
@@ -224,7 +247,7 @@ img[data-src] {
 }
 
 #panel-wrapper {
-  // the headings
+  /* the headings */
   .panel-heading {
     @include label(inherit);
   }
@@ -247,7 +270,7 @@ img[data-src] {
     }
   }
 
-  &.topbar-down > div {
+  [data-topbar-visible=true] & > div {
     top: 6rem;
   }
 }
@@ -290,7 +313,7 @@ img[data-src] {
       margin-bottom: 0;
     }
 
-    // [scroll-focus] added by `smooth-scroll.js`
+    /* [scroll-focus] added by `smooth-scroll.js` */
     &:target:not([scroll-focus]),
     &[scroll-focus=true] > p {
       background-color: var(--footnote-target-bg);
@@ -311,7 +334,7 @@ img[data-src] {
     transition: background-color 1.5s ease-in-out;
   }
 
-  // [scroll-focus] added by `smooth-scroll.js`
+  /* [scroll-focus] added by `smooth-scroll.js` */
   @at-root sup:target:not([scroll-focus]),
   sup[scroll-focus=true] > a#{&} {
     background-color: var(--footnote-target-bg);
@@ -331,7 +354,7 @@ img[data-src] {
 
 /* --- Begin of Markdown table style --- */
 
-// it will be created by Liquid
+/* it will be created by Liquid */
 .table-wrapper {
   overflow-x: auto;
   margin-bottom: 1.5rem;
@@ -365,8 +388,8 @@ img[data-src] {
           @extend %table-cell;
         }
       }
-    } // tbody
+    } /* tbody */
-  }// table
+  }/* table */
 }
 
 /* --- post --- */
@@ -382,7 +405,7 @@ img[data-src] {
       @extend %no-cursor;
     }
 
-    // created by `_includes/img-extra.html`
+    /* created by `_includes/img-extra.html` */
     &.popup {
       cursor: zoom-in;
 
@@ -396,7 +419,7 @@ img[data-src] {
         @extend %link-hover;
       }
     }
-  } // a
+  } /* a */
 
 }
 
@@ -439,23 +462,18 @@ img[data-src] {
       }
     }
 
-    &.img-link + em {
+    &.img-link {
-      display: block;
+      @extend %img-caption;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
     }
 
   }
 
   ul {
-    // attribute 'hide-bullet' was added by liquid
+    /* attribute 'hide-bullet' was added by liquid */
     .task-list-item[hide-bullet] {
       list-style-type: none;
 
-      > i { // checkbox icon
+      > i { /* checkbox icon */
         margin: 0 0.4rem 0.2rem -1.4rem;
         vertical-align: middle;
         color: var(--checkbox-color);
@@ -472,7 +490,7 @@ img[data-src] {
       vertical-align: middle;
     }
 
-  } // ul
+  } /* ul */
 
   > ol,
   > ul {
@@ -480,7 +498,7 @@ img[data-src] {
 
     li {
       ol,
-      ul { // sub list
+      ul { /* sub list */
         padding-left: 2rem;
         margin-top: 0.3rem;
       }
@@ -498,7 +516,7 @@ img[data-src] {
     margin-left: 1rem;
   }
 
-} // .post-content
+} /* .post-content */
 
 .tag:hover {
   @extend %tag-hover;
@@ -570,10 +588,6 @@ img[data-src] {
   box-shadow: 0 0 8px 0 var(--btn-box-shadow) !important;
 }
 
-.topbar-up {
-  top: -3rem !important; /* same as topbar height. */
-}
-
 .no-text-decoration {
   @include no-text-decoration;
 }
@@ -603,14 +617,14 @@ img[data-src] {
 
 /* --- Overriding --- */
 
-// magnific-popup
+/* magnific-popup */
 figure .mfp-title {
   text-align: center;
   padding-right: 0;
   margin-top: 0.5rem;
 }
 
-// mermaid
+/* mermaid */
 .mermaid {
   text-align: center;
 }
@@ -658,7 +672,7 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
       border: 2px solid rgba(222, 222, 222, 0.7);
       overflow: hidden;
-      transform: translateZ(0); // fixed the zoom in Safari
+      transform: translateZ(0); /* fixed the zoom in Safari */
       -webkit-transition: border-color 0.35s ease-in-out;
       -moz-transition: border-color 0.35s ease-in-out;
       transition: border-color 0.35s ease-in-out;
@@ -682,7 +696,7 @@ $sidebar-display: "sidebar-display";
         transform: scale(1.2);
       }
     }
-  } // #avatar
+  } /* #avatar */
 
   .site-title {
     a {
@@ -701,7 +715,7 @@ $sidebar-display: "sidebar-display";
     line-height: 1.2rem;
     word-spacing: 1px;
     margin: 0.5rem 1.5rem 0.5rem 1.5rem;
-    min-height: 3rem; // avoid vertical shifting in multi-line words
+    min-height: 3rem; /* avoid vertical shifting in multi-line words */
     user-select: none;
   }
 
@@ -745,7 +759,7 @@ $sidebar-display: "sidebar-display";
           width: 100%;
         }
 
-        &::after { // the cursor
+        &::after { /* the cursor */
           display: table;
           visibility: hidden;
           content: "";
@@ -758,7 +772,7 @@ $sidebar-display: "sidebar-display";
           pointer-events: none;
         }
       }
-    } // li
+    } /* li */
 
     @mixin fix-cursor($top) {
       top: $top;
@@ -783,9 +797,9 @@ $sidebar-display: "sidebar-display";
         }
       }
 
-    } // @for
+    } /* @for */
 
-  } // ul
+  } /* ul */
 
   .sidebar-bottom {
     margin-bottom: 2.1rem;
@@ -836,9 +850,9 @@ $sidebar-display: "sidebar-display";
       border-radius: 50%;
     }
 
-  } // .sidebar-bottom
+  } /* .sidebar-bottom */
 
-} // #sidebar
+} /* #sidebar */
 
 @media (hover: hover) {
   #sidebar ul > li:last-child::after {
@@ -876,10 +890,14 @@ $sidebar-display: "sidebar-display";
   z-index: 50;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07);
   background-color: var(--topbar-wrapper-bg);
+
+  [data-topbar-visible=false] & {
+    top: -$topbar-height; /* same as topbar height. */
+  }
 }
 
 #topbar {
-  i { // icons
+  i { /* icons */
     color: #999;
   }
 
@@ -901,7 +919,7 @@ $sidebar-display: "sidebar-display";
       }
     }
   }
-} // #topbar
+} /* #topbar */
 
 #sidebar-trigger,
 #search-trigger {
@@ -921,12 +939,6 @@ $sidebar-display: "sidebar-display";
     font-size: 0.9rem;
     color: var(--search-icon-color);
   }
-
-  .fa-times-circle { /* button 'clean up' */
-    @extend %cursor-pointer;
-
-    visibility: hidden;
-  }
 }
 
 #search-cancel { /* 'Cancel' link */
@@ -943,6 +955,7 @@ $sidebar-display: "sidebar-display";
   border-radius: 0;
   padding: 0.18rem 0.3rem;
   color: var(--text-color);
+  height: auto;
 
   &:focus {
     box-shadow: none;
@@ -1006,7 +1019,7 @@ $sidebar-display: "sidebar-display";
       margin-bottom: 1rem;
     }
 
-    i { // icons
+    i { /* icons */
       color: #818182;
       margin-right: 0.15rem;
       font-size: 80%;
@@ -1020,7 +1033,7 @@ $sidebar-display: "sidebar-display";
       -webkit-box-orient: vertical;
     }
   }
-} // #search-results
+} /* #search-results */
 
 #topbar-title {
   display: none;
@@ -1090,7 +1103,7 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  div.row:first-of-type:last-of-type { // alone
+  div.row:first-of-type:last-of-type { /* alone */
     margin-bottom: 4rem;
   }
 }
@@ -1143,33 +1156,7 @@ $sidebar-display: "sidebar-display";
 
 @media all and (max-width: 576px) {
 
-  $footer-height: $footer-height-mobile; // overwrite
+  $footer-height: $footer-height-mobile; /* overwrite */
-
-  #main > div.row:first-child > div:first-child {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
-  }
-
-  #core-wrapper {
-    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
-
-    h1 {
-      margin-top: 2.2rem;
-      font-size: 1.75rem;
-    }
-  }
-
-  #avatar > a {
-    width: 5rem;
-    height: 5rem;
-  }
-
-  .site-subtitle {
-    @include ml-mr(1.8rem);
-  }
-
-  #main-wrapper {
-    padding-bottom: $footer-height;
-  }
 
   footer {
     height: $footer-height;
@@ -1189,13 +1176,53 @@ $sidebar-display: "sidebar-display";
     }
   }
 
+  #main > div.row:first-child > div:first-child {
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height});
+  }
+
+  #core-wrapper {
+    min-height: calc(100vh - #{$topbar-height} - #{$footer-height} - #{$bottom-min-height}) !important;
+
+    h1 {
+      margin-top: 2.2rem;
+      font-size: 1.75rem;
+    }
+
+    .post-content {
+      > blockquote[class^=prompt-] {
+        @include ml-mr(-1.25rem);
+        border-radius: 0;
+      }
+    }
+
+  }
+
+  #avatar > a {
+    width: 5rem;
+    height: 5rem;
+  }
+
+  .site-subtitle {
+    @include ml-mr(1.8rem);
+  }
+
+  #main-wrapper {
+    padding-bottom: $footer-height;
+  }
+
 }
 
 /* hide sidebar and panel */
 @media all and (max-width: 849px) {
-  %slide {
+  @mixin slide($append: null) {
-    -webkit-transition: transform 0.4s ease;
+    $basic: transform 0.4s ease;
-    transition: transform 0.4s ease;
+    @if $append {
+      -webkit-transition: $basic, $append;
+      transition: $basic, $append;
+    } @else {
+      -webkit-transition: $basic;
+      transition: $basic;
+    }
   }
 
   html,
@@ -1203,15 +1230,6 @@ $sidebar-display: "sidebar-display";
     overflow-x: hidden;
   }
 
-  .footnotes ol > li {
-    padding-top: 3.5rem;
-    margin-top: -3.2rem;
-
-    &:first-child {
-      margin-top: -3.5rem;
-    }
-  }
-
   [#{$sidebar-display}] {
     #sidebar {
       transform: translateX(0);
@@ -1221,13 +1239,12 @@ $sidebar-display: "sidebar-display";
     #main-wrapper {
       transform: translateX(#{$sidebar-width});
     }
-
   }
 
   #sidebar {
-    @extend %slide;
+    @include slide;
 
-    transform: translateX(-#{$sidebar-width}); // hide
+    transform: translateX(-#{$sidebar-width}); /* hide */
     -webkit-transform: translateX(-#{$sidebar-width});
 
     .cursor {
@@ -1238,7 +1255,7 @@ $sidebar-display: "sidebar-display";
   }
 
   #main-wrapper {
-    @extend %slide;
+    @include slide;
 
     padding-top: $topbar-height;
   }
@@ -1253,15 +1270,11 @@ $sidebar-display: "sidebar-display";
   }
 
   #topbar-wrapper {
-    @extend %slide;
+    @include slide(top 0.2s ease);
 
     left: 0;
   }
 
-  .topbar-up {
-    top: 0 !important;
-  }
-
   #main > div.row:first-child > div:nth-child(1),
   #main > div.row:first-child > div:nth-child(2) {
     margin-top: 0;
@@ -1277,10 +1290,6 @@ $sidebar-display: "sidebar-display";
     &.loaded ~ a {
       margin-right: 1rem;
     }
-
-    .fa-times-circle {
-      right: 5.2rem;
-    }
   }
 
   #search-input {
@@ -1306,7 +1315,13 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-} // max-width: 849px
+} /* max-width: 849px */
+
+@media all and (max-width: 849px) and (orientation: portrait) {
+  [data-topbar-visible=false] #topbar-wrapper {
+    top: 0;
+  }
+}
 
 /* Phone & Pad */
 @media all and (min-width: 577px) and (max-width: 1199px) {
@@ -1353,10 +1368,6 @@ $sidebar-display: "sidebar-display";
     right: 1.2rem;
   }
 
-  .topbar-up {
-    box-shadow: none !important;
-  }
-
   #topbar-title {
     text-align: left;
   }
@@ -1523,10 +1534,6 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-  #search-wrapper .fa-times-circle {
-    right: 2.6rem;
-  }
-
 }
 
 @media all and (min-width: 1400px) and (max-width: 1650px) {
@@ -1613,7 +1620,7 @@ $sidebar-display: "sidebar-display";
         margin-top: 0.3rem;
       }
 
-    } // .profile-wrapper (min-width: 1650px)
+    } /* .profile-wrapper (min-width: 1650px) */
 
     ul {
       padding-left: 2.5rem;
@@ -1660,7 +1667,7 @@ $sidebar-display: "sidebar-display";
         @include ml-mr(0.15rem);
 
         height: $icon-block-size;
-        margin-bottom: 0.5rem; // wrap line
+        margin-bottom: 0.5rem; /* wrap line */
       }
 
       i {
@@ -1683,9 +1690,9 @@ $sidebar-display: "sidebar-display";
         top: 0.9rem;
       }
 
-    } // .sidebar-bottom
+    } /* .sidebar-bottom */
 
-  } // #sidebar
+  } /* #sidebar */
 
   footer > div.d-flex {
     width: 92%;
@@ -1698,7 +1705,7 @@ $sidebar-display: "sidebar-display";
     }
   }
 
-} // min-width: 1650px
+} /* min-width: 1650px */
 
 @media all and (min-width: 1700px) {
   #topbar-wrapper {

_sass/addon/module.scss

@@ -13,19 +13,21 @@
 %section {
   #core-wrapper & {
     margin-top: 2.5rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.25rem;
+
+    &:focus {
+      outline: none; /* avoid outline in Safari */
+    }
   }
 }
 
 %anchor {
   .anchor {
-    font-size: 1rem;
+    font-size: 80%;
-    margin-left: 0.5rem;
   }
 
   @media (hover: hover) {
     .anchor {
-      border-bottom: none !important;
       visibility: hidden;
       opacity: 0;
       transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
@@ -41,15 +43,6 @@
   }
 }
 
-%anchor-relative {
-  @extend %anchor;
-
-  .anchor {
-    position: relative;
-    bottom: 1px;
-  }
-}
-
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -95,10 +88,15 @@
   font-style: normal;
 }
 
-/* ---------- scss mixin --------- */
+%img-caption {
-
+  + em {
-@mixin no-text-decoration {
+    display: block;
-  text-decoration: none;
+    text-align: center;
+    font-style: normal;
+    font-size: 80%;
+    padding: 0;
+    color: #6d6c6c;
+  }
 }
 
 %sidebar-links {
@@ -106,6 +104,12 @@
   user-select: none;
 }
 
+/* ---------- scss mixin --------- */
+
+@mixin no-text-decoration {
+  text-decoration: none;
+}
+
 @mixin ml-mr($value) {
   margin-left: $value;
   margin-right: $value;
@@ -133,3 +137,15 @@
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
 }
+
+@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+  &.prompt-#{$type} {
+    background-color: var(--prompt-#{$type}-bg);
+
+    &::before {
+      content: $fw-icon;
+      color: var(--prompt-#{$type}-icon-color);
+      font-weight: $icon-weight;
+    }
+  }
+}

_sass/addon/syntax.scss

@@ -5,23 +5,27 @@
 @import "colors/light-syntax";
 @import "colors/dark-syntax";
 
-html:not([mode]),
+html {
-html[mode=light] {
+  @media (prefers-color-scheme: light) {
-  @include light-syntax;
+    &:not([data-mode]),
-}
+    [data-mode=light] {
+      @include light-syntax;
+    }
 
-html[mode=dark] {
+    &[data-mode=dark] {
-  @include dark-syntax;
+      @include dark-syntax;
-}
+    }
-
-@media (prefers-color-scheme: dark) {
-  html:not([mode]),
-  html[mode=dark] {
-    @include dark-syntax;
   }
 
-  html[mode=light] {
+  @media (prefers-color-scheme: dark) {
-    @include light-syntax;
+    &:not([data-mode]),
+    &[data-mode=dark] {
+      @include dark-syntax;
+    }
+
+    &[data-mode=light] {
+      @include light-syntax;
+    }
   }
 }
 
@@ -95,7 +99,7 @@ $code-radius: 6px;
     user-select: none;
   }
 
-} //.highlight
+} /* .highlight */
 
 code {
   -webkit-hyphens: none;
@@ -110,8 +114,15 @@ code {
     background-color: var(--inline-code-bg);
   }
 
+  &.filepath {
+    background-color: inherit;
+    color: var(--filepath-text-color);
+    font-weight: 600;
+    padding: 0;
+  }
+
   a > &.highlighter-rouge {
-    padding-bottom: 0; // show link's underlinke
+    padding-bottom: 0; /* show link's underlinke */
     color: inherit;
   }
 
@@ -119,7 +130,7 @@ code {
     border-bottom: none;
   }
 
-  blockquote &.highlighter-rouge {
+  blockquote & {
     color: inherit;
   }
 
@@ -131,8 +142,10 @@ code {
 td.rouge-code {
   @extend %code-snippet-padding;
 
-  // Prevent some browser extends from
+  /*
-  // changing the URL string of code block.
+    Prevent some browser extends from
+    changing the URL string of code block.
+  */
   a {
     color: inherit !important;
     border-bottom: none !important;
@@ -186,9 +199,9 @@ div {
       ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
   }
 
-  // the label block
+  /* the label block */
   span {
-    // label icon
+    /* label icon */
     i {
       font-size: 1rem;
       margin-right: 0.4rem;
@@ -201,19 +214,19 @@ div {
 
     @at-root [file] #{&} > i {
       position: relative;
-      top: 1px; // center the file icon
+      top: 1px; /* center the file icon */
     }
 
-    // label text
+    /* label text */
     &::after {
-      content: attr(label-text);
+      content: attr(data-label-text);
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--code-header-text-color);
     }
   }
 
-  // clipboard
+  /* clipboard */
   button {
     @extend %cursor-pointer;
 

_sass/addon/variables.scss

@@ -4,24 +4,24 @@
 
 /* sidebar */
 
-$sidebar-width: 260px !default;        // the basic width
+$sidebar-width: 260px !default;        /* the basic width */
-$sidebar-width-small: 210px !default;  // screen width: >= 850px, <= 1199px (iPad landscape)
+$sidebar-width-small: 210px !default;  /* screen width: >= 850px, <= 1199px (iPad landscape) */
-$sidebar-width-large: 350px !default;  // screen width: >= 1650px
+$sidebar-width-large: 350px !default;  /* screen width: >= 1650px */
 
 /* tabs of sidebar */
 
-$tab-count: 5 !default;   // backward compatible (version <= 4.0.2)
+$tab-count: 5 !default;   /* backward compatible (version <= 4.0.2) */
 $tab-height: 3rem !default;
 $tab-cursor-height: 1.6rem !default;
 
-$cursor-width: 2px !default;    // the cursor width of the selected tab
+$cursor-width: 2px !default;    /* the cursor width of the selected tab */
 
 /* other framework sizes */
 
 $topbar-height: 3rem !default;
 
 $footer-height: 5rem !default;
-$footer-height-mobile: 6rem !default;   // screen width: <= 576px
+$footer-height-mobile: 6rem !default;   /* screen width: <= 576px */
 
 $main-content-max-width: 1150px !default;
 

_sass/colors/dark-syntax.scss

@@ -78,6 +78,7 @@
   --code-header-muted-color: rgb(60 60 60);
   --code-header-icon-color: rgb(86 86 86);
   --clipboard-checked-color: #2bcc2b;
+  --filepath-text-color: #bdbdbd;
 
   .highlight {
     .gp { color: #818c96; }

_sass/colors/dark-typography.scss

@@ -69,6 +69,15 @@
   --kbd-wrap-color: #6a6a6a;
   --kbd-text-color: #d3d3d3;
   --kbd-bg-color: #242424;
+  --prompt-text-color: rgb(216 212 212 / 75%);
+  --prompt-tip-bg: rgba(77, 187, 95, 0.2);
+  --prompt-tip-icon-color: rgb(5 223 5 / 68%);
+  --prompt-info-bg: rgb(7 59 104 / 80%);
+  --prompt-info-icon-color: #0075d1;
+  --prompt-warning-bg: rgb(90 69 3 / 95%);
+  --prompt-warning-icon-color: rgb(255 165 0 / 80%);
+  --prompt-danger-bg: rgb(86 28 8 / 80%);
+  --prompt-danger-icon-color: #cd0202;
 
   /* tags */
   --tag-border: rgb(59, 79, 88);
@@ -145,4 +154,4 @@
     color-scheme: none;
   }
 
-} // dark-scheme
+} /* dark-scheme */

_sass/colors/light-syntax.scss

@@ -76,4 +76,9 @@
   --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
-} // light-syntax
+  [class^=prompt-] {
+    --inline-code-bg: #fbfafa;
+    --highlighter-rouge-color: rgb(82 82 82);
+  }
+
+} /* light-syntax */

_sass/colors/light-typography.scss

@@ -68,6 +68,19 @@
   --kbd-wrap-color: #bdbdbd;
   --kbd-text-color: var(--text-color);
   --kbd-bg-color: white;
+  --prompt-text-color: rgb(46 46 46 / 77%);
+  --prompt-tip-bg: rgb(123 247 144 / 20%);
+  --prompt-tip-icon-color: #03b303;
+  --prompt-info-bg: #e1f5fe;
+  --prompt-info-icon-color: #0070cb;
+  --prompt-warning-bg: rgb(255 243 205);
+  --prompt-warning-icon-color: #ef9c03;
+  --prompt-danger-bg: rgb(248 215 218 / 56%);
+  --prompt-danger-icon-color: #df3c30;
+
+  [class^=prompt-] {
+    --link-underline-color: rgb(219 216 216);
+  }
 
   /* Categories */
   --categories-hover-bg: var(--btn-border-color);
@@ -78,4 +91,4 @@
   --timeline-node-bg: #c2c6cc;
   --timeline-year-dot-color: #ffffff;
 
-} // light-scheme
+} /* light-scheme */

_sass/jekyll-theme-chirpy.scss

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

_sass/layout/post.scss

@@ -55,7 +55,7 @@ img.preview-img {
   border-bottom: 1px double var(--main-border-color);
   font-size: 0.85rem;
 
-  .post-meta a {
+  .post-meta a:not(:hover) {
     @extend %link-underline;
   }
 }

_tabs/about.md

@@ -4,5 +4,5 @@ icon: fas fa-info-circle
 order: 4
 ---
 
-
+> Add Markdown syntax content to file `_tabs/about.md`{: .filepath } and it will show up on this page.
-> **Note**: Add Markdown syntax content to file `_tabs/about.md` and it will show up on this page.
+{: .prompt-tip }

assets/404.html

@@ -7,8 +7,6 @@ redirect_from:
   - /norobots/
   - /assets/
   - /posts/
-
-dynamic_title: true
 ---
 
 {% include lang.html %}

assets/js/data/search.json

@@ -1,5 +1,6 @@
 ---
 layout: compress
+swcache: true
 ---
 
 [

assets/js/data/swcache.js

@@ -9,13 +9,7 @@ const resource = [
   /* --- CSS --- */
   '{{ "/assets/css/style.css" | relative_url }}',
 
-  /* --- JavaScripts --- */
+  /* --- PWA --- */
-  {% assign js_path = "/assets/js" | relative_url %}
-  '{{ js_path }}/dist/home.min.js',
-  '{{ js_path }}/dist/page.min.js',
-  '{{ js_path }}/dist/post.min.js',
-  '{{ js_path }}/dist/categories.min.js',
-  '{{ js_path }}/data/search.json',
   '{{ "/app.js" | relative_url }}',
   '{{ "/sw.js" | relative_url }}',
 
@@ -26,30 +20,27 @@ const resource = [
     '{{ tab.url | relative_url }}',
   {% endfor %}
 
-  /* --- Favicons --- */
+  /* --- Favicons & compressed JS --- */
-  {% assign favicon_path = "/assets/img/favicons" | relative_url %}
+  {% assign cache_list = site.static_files | where: 'swcache', true  %}
-
+  {% for file in cache_list %}
-  '{{ favicon_path }}/android-chrome-192x192.png',
+    '{{ file.path | relative_url }}'{%- unless forloop.last -%},{%- endunless -%}
-  '{{ favicon_path }}/android-chrome-512x512.png',
+  {% endfor %}
-  '{{ favicon_path }}/apple-touch-icon.png',
-  '{{ favicon_path }}/favicon-16x16.png',
-  '{{ favicon_path }}/favicon-32x32.png',
-  '{{ favicon_path }}/favicon.ico',
-  '{{ favicon_path }}/mstile-150x150.png',
-  '{{ favicon_path }}/site.webmanifest',
-  '{{ favicon_path }}/browserconfig.xml'
 
 ];
 
 /* The request url with below domain will be cached */
 const allowedDomains = [
-  {% if site.google_analytics.id != '' %}
+  {% if site.google_analytics.id != empty and site.google_analytics.id %}
     'www.googletagmanager.com',
     'www.google-analytics.com',
   {% endif %}
 
   '{{ site.url | split: "//" | last }}',
 
+  {% if site.img_cdn contains '//' and site.img_cdn %}
+    '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
+  {% endif %}
+
   'fonts.gstatic.com',
   'fonts.googleapis.com',
   'cdn.jsdelivr.net',

assets/js/dist/categories.min.js

@@ -1,6 +1,6 @@
 /*!
- * Chirpy v5.0.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.1.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(e=>{const o=$(e.target);let t=o.prop("tagName")==="button".toUpperCase()?o:o.parent();t.blur(),flipMode()})}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),s=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),r=$("#search-wrapper"),n=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),f={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),r.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),r.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},p=function(){let e=!1;return{on(){e||(u.block(),n.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),s.removeClass("visible"),a.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return t.hasClass("loaded")}o.click(function(){f.on(),p.on(),i.focus()}),t.click(function(){f.off(),p.off()}),i.focus(function(){r.addClass("input-focus")}),i.focusout(function(){r.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):p.off():""!==i.val()&&(p.on(),s.hasClass("visible")||s.addClass("visible"),h()&&c.addClass("unloaded"))}),s.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),d.empty()):p.off(),i.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),o=$("#topbar-title"),s=$("#panel-wrapper"),a=$("#search-input"),l="topbar-up",r="topbar-down",n="toc-scrolling-up";let d,i=0;const c=t.outerHeight(),u=t.outerHeight();$(window).scroll(function(e){o.is(":hidden")&&(d=!0)}),setInterval(function(){d&&(function(){var e,o=$(this).scrollTop();Math.abs(i-o)<=c||(o>i?o>u&&(t.removeClass(r).addClass(l),s.removeClass(r),a.is(":focus")&&a.blur()):o+$(window).height()<$(document).height()&&(void 0!==(e=t.attr(n))?"false"===e&&t.removeAttr(n):(t.removeClass(l).addClass(r),s.addClass(r))),i=o)}(),d=!1)},250)}),$(function(){var o="div.post>h1:first-of-type";const t=$(o),r=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!r.is(":hidden")){const n=r.text().trim();let s=t.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim());let e=new IntersectionObserver(e=>{var o,t;a?(o=$(window).scrollTop(),t=l<o,l=o,e=e[0],t?0===e.intersectionRatio&&r.text(s):1===e.intersectionRatio&&r.text(n)):a=!0},{rootMargin:"-48px 0px 0px 0px",threshold:[0,1]});e.observe(document.querySelector(o)),r.click(function(){$("body,html").animate({scrollTop:0},800)})}}),$(function(){const e=$(".collapse");e.on("hide.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${e} i.fas`).addClass("rotate"),$("#"+e).removeClass("hide-border-bottom"))}),e.on("show.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${e} i.fas`).removeClass("rotate"),$("#"+e).addClass("hide-border-bottom"))})});
+$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))});const LocaleHelper=function(){const e=$('meta[name="prefer-datetime-locale"]'),o=0<e.length?e.attr("content").toLowerCase():$("html").attr("lang").substr(0,2),t="data-ts",a="data-df";return{locale:()=>o,attrTimestamp:()=>t,attrDateFormat:()=>a,getTimestamp:e=>Number(e.attr(t)),getDateFormat:e=>e.attr(a)}}();$(function(){$(".mode-toggle").click(e=>{const o=$(e.target);let t=o.prop("tagName")==="button".toUpperCase()?o:o.parent();t.blur(),flipMode()})});const ScrollHelper=function(){const e=$("body"),o="data-topbar-visible",t=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>e.attr(o,!1),showTopbar:()=>e.attr(o,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0<a,topbarLocked:()=>!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>t,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),s=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),d=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),r.addClass("unloaded"),o.addClass("unloaded"),l.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),r.removeClass("unloaded"),o.removeClass("unloaded")}},u=function(){let e=!1;return{on(){e||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(s.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),i.val(""),e=!1)},isVisible(){return e}}}();function f(){return t.hasClass("loaded")}o.click(function(){p.on(),u.on(),i.focus()}),t.click(function(){p.off(),u.off()}),i.focus(function(){l.addClass("input-focus")}),i.focusout(function(){l.removeClass("input-focus")}),i.on("input",()=>{""===i.val()?f()?c.removeClass("unloaded"):u.off():(u.on(),f()&&c.addClass("unloaded"))})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#search-input"),t=ScrollHelper.getTopbarHeight();let e,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var e=screen.orientation.type;"landscape-primary"!==e&&"landscape-secondary"!==e||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{e=e||!0}),setInterval(()=>{e&&(function(){var e=$(this).scrollTop();if(!(Math.abs(a-e)<=t)){if(e>a)ScrollHelper.hideTopbar(),o.is(":focus")&&o.blur();else if(e+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=e}}(),e=!1)},250)}),$(function(){var o="div.post>h1:first-of-type";const t=$(o),n=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!n.is(":hidden")){const s=n.text().trim();let a=t.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),t.offset().top<$(window).scrollTop()&&n.text(a);let e=new IntersectionObserver(e=>{var o,t;r?(o=$(window).scrollTop(),t=l<o,l=o,e=e[0],t?0===e.intersectionRatio&&n.text(a):1===e.intersectionRatio&&n.text(s)):r=!0},{rootMargin:"-48px 0px 0px 0px",threshold:[0,1]});e.observe(document.querySelector(o)),n.click(function(){$("body,html").animate({scrollTop:0},800)})}}),$(function(){const e=$(".collapse");e.on("hide.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${e} i.fas`).addClass("rotate"),$("#"+e).removeClass("hide-border-bottom"))}),e.on("show.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${e} i.fas`).removeClass("rotate"),$("#"+e).addClass("hide-border-bottom"))})});

assets/js/dist/commons.min.js

@@ -1,6 +1,6 @@
 /*!
- * Chirpy v5.0.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.1.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$(".mode-toggle").click(e=>{const o=$(e.target);let t=o.prop("tagName")==="button".toUpperCase()?o:o.parent();t.blur(),flipMode()})}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),s=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),i=$("#search-results"),d=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),s.removeClass("visible"),a.removeClass("unloaded"),u.release(),d.val(""),e=!1)},isVisible(){return e}}}();function m(){return t.hasClass("loaded")}o.click(function(){p.on(),f.on(),d.focus()}),t.click(function(){p.off(),f.off()}),d.focus(function(){n.addClass("input-focus")}),d.focusout(function(){n.removeClass("input-focus")}),d.on("keyup",function(e){8===e.keyCode&&""===d.val()?m()?c.removeClass("unloaded"):f.off():""!==d.val()&&(f.on(),s.hasClass("visible")||s.addClass("visible"),m()&&c.addClass("unloaded"))}),s.on("click",function(){d.val(""),m()?(c.removeClass("unloaded"),i.empty()):f.off(),d.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),o=$("#topbar-title"),s=$("#panel-wrapper"),a=$("#search-input"),l="topbar-up",n="topbar-down",r="toc-scrolling-up";let i,d=0;const c=t.outerHeight(),u=t.outerHeight();$(window).scroll(function(e){o.is(":hidden")&&(i=!0)}),setInterval(function(){i&&(function(){var e,o=$(this).scrollTop();Math.abs(d-o)<=c||(o>d?o>u&&(t.removeClass(n).addClass(l),s.removeClass(n),a.is(":focus")&&a.blur()):o+$(window).height()<$(document).height()&&(void 0!==(e=t.attr(r))?"false"===e&&t.removeAttr(r):(t.removeClass(l).addClass(n),s.addClass(n))),d=o)}(),i=!1)},250)}),$(function(){var o="div.post>h1:first-of-type";const t=$(o),n=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!n.is(":hidden")){const r=n.text().trim();let s=t.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim());let e=new IntersectionObserver(e=>{var o,t;a?(o=$(window).scrollTop(),t=l<o,l=o,e=e[0],t?0===e.intersectionRatio&&n.text(s):1===e.intersectionRatio&&n.text(r)):a=!0},{rootMargin:"-48px 0px 0px 0px",threshold:[0,1]});e.observe(document.querySelector(o)),n.click(function(){$("body,html").animate({scrollTop:0},800)})}});
+$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))});const LocaleHelper=function(){const e=$('meta[name="prefer-datetime-locale"]'),o=0<e.length?e.attr("content").toLowerCase():$("html").attr("lang").substr(0,2),t="data-ts",a="data-df";return{locale:()=>o,attrTimestamp:()=>t,attrDateFormat:()=>a,getTimestamp:e=>Number(e.attr(t)),getDateFormat:e=>e.attr(a)}}();$(function(){$(".mode-toggle").click(e=>{const o=$(e.target);let t=o.prop("tagName")==="button".toUpperCase()?o:o.parent();t.blur(),flipMode()})});const ScrollHelper=function(){const e=$("body"),o="data-topbar-visible",t=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>e.attr(o,!1),showTopbar:()=>e.attr(o,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0<a,topbarLocked:()=>!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>t,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),s=$("#search-results"),c=$("#search-input"),i=$("#search-hints"),d=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),r.addClass("unloaded"),o.addClass("unloaded"),l.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),r.removeClass("unloaded"),o.removeClass("unloaded")}},u=function(){let e=!1;return{on(){e||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(s.empty(),i.hasClass("unloaded")&&i.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),c.val(""),e=!1)},isVisible(){return e}}}();function f(){return t.hasClass("loaded")}o.click(function(){p.on(),u.on(),c.focus()}),t.click(function(){p.off(),u.off()}),c.focus(function(){l.addClass("input-focus")}),c.focusout(function(){l.removeClass("input-focus")}),c.on("input",()=>{""===c.val()?f()?i.removeClass("unloaded"):u.off():(u.on(),f()&&i.addClass("unloaded"))})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#search-input"),t=ScrollHelper.getTopbarHeight();let e,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var e=screen.orientation.type;"landscape-primary"!==e&&"landscape-secondary"!==e||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{e=e||!0}),setInterval(()=>{e&&(function(){var e=$(this).scrollTop();if(!(Math.abs(a-e)<=t)){if(e>a)ScrollHelper.hideTopbar(),o.is(":focus")&&o.blur();else if(e+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=e}}(),e=!1)},250)}),$(function(){var o="div.post>h1:first-of-type";const t=$(o),n=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!n.is(":hidden")){const s=n.text().trim();let a=t.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),t.offset().top<$(window).scrollTop()&&n.text(a);let e=new IntersectionObserver(e=>{var o,t;r?(o=$(window).scrollTop(),t=l<o,l=o,e=e[0],t?0===e.intersectionRatio&&n.text(a):1===e.intersectionRatio&&n.text(s)):r=!0},{rootMargin:"-48px 0px 0px 0px",threshold:[0,1]});e.observe(document.querySelector(o)),n.click(function(){$("body,html").animate({scrollTop:0},800)})}});

assets/js/dist/misc.min.js

@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v5.1.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 2019 Cotes Chung
+ * MIT Licensed
+ */
+$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))});const LocaleHelper=function(){const e=$('meta[name="prefer-datetime-locale"]'),t=0<e.length?e.attr("content").toLowerCase():$("html").attr("lang").substr(0,2),o="data-ts",a="data-df";return{locale:()=>t,attrTimestamp:()=>o,attrDateFormat:()=>a,getTimestamp:e=>Number(e.attr(o)),getDateFormat:e=>e.attr(a)}}();$(function(){$(".mode-toggle").click(e=>{const t=$(e.target);let o=t.prop("tagName")==="button".toUpperCase()?t:t.parent();o.blur(),flipMode()})});const ScrollHelper=function(){const e=$("body"),t="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>e.attr(t,!1),showTopbar:()=>e.attr(t,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0<a,topbarLocked:()=>!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),s=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),d=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),r.addClass("unloaded"),t.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),r.removeClass("unloaded"),t.removeClass("unloaded")}},u=function(){let e=!1;return{on(){e||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(s.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),i.val(""),e=!1)},isVisible(){return e}}}();function f(){return o.hasClass("loaded")}t.click(function(){p.on(),u.on(),i.focus()}),o.click(function(){p.off(),u.off()}),i.focus(function(){l.addClass("input-focus")}),i.focusout(function(){l.removeClass("input-focus")}),i.on("input",()=>{""===i.val()?f()?c.removeClass("unloaded"):u.off():(u.on(),f()&&c.addClass("unloaded"))})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#search-input"),o=ScrollHelper.getTopbarHeight();let e,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var e=screen.orientation.type;"landscape-primary"!==e&&"landscape-secondary"!==e||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{e=e||!0}),setInterval(()=>{e&&(function(){var e=$(this).scrollTop();if(!(Math.abs(a-e)<=o)){if(e>a)ScrollHelper.hideTopbar(),t.is(":focus")&&t.blur();else if(e+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=e}}(),e=!1)},250)}),$(function(){var t="div.post>h1:first-of-type";const o=$(t),n=$("#topbar-title");if(0!==o.length&&!o.hasClass("dynamic-title")&&!n.is(":hidden")){const s=n.text().trim();let a=o.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),o.offset().top<$(window).scrollTop()&&n.text(a);let e=new IntersectionObserver(e=>{var t,o;r?(t=$(window).scrollTop(),o=l<t,l=t,e=e[0],o?0===e.intersectionRatio&&n.text(a):1===e.intersectionRatio&&n.text(s)):r=!0},{rootMargin:"-48px 0px 0px 0px",threshold:[0,1]});e.observe(document.querySelector(t)),n.click(function(){$("body,html").animate({scrollTop:0},800)})}}),$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){const e=dayjs.unix(LocaleHelper.getTimestamp($(this)));var t=LocaleHelper.getDateFormat($(this)),t=e.format(t);$(this).text(t),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat())})});

assets/js/dist/pvreport.min.js

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

gulpfile.js/tasks/js.js

@@ -11,7 +11,7 @@ const insert = require('gulp-insert');
 const fs = require('fs');
 
 const JS_SRC = '_javascript';
-const JS_DEST = `assets/js/dist/`;
+const JS_DEST = `assets/js/dist`;
 
 function concatJs(files, output) {
   return src(files)
@@ -72,12 +72,21 @@ const pageJs = () => {
   );
 };
 
+const miscJs = () => {
+  return concatJs([
+      `${JS_SRC}/commons/*.js`,
+      `${JS_SRC}/utils/locale-datetime.js`
+    ], 'misc'
+  );
+};
+
 // GA pageviews report
 const pvreportJs = () => {
   return concatJs(`${JS_SRC}/utils/pageviews.js`, 'pvreport');
 };
 
-const buildJs = parallel(commonsJs, homeJs, postJs, categoriesJs, pageJs, pvreportJs);
+const buildJs = parallel(
+  commonsJs, homeJs, postJs, categoriesJs, pageJs, miscJs, pvreportJs);
 
 exports.build = series(buildJs, minifyJs);
 
@@ -86,8 +95,7 @@ exports.liveRebuild = () => {
 
   watch([
       `${ JS_SRC }/commons/*.js`,
-      `${ JS_SRC }/utils/*.js`,
+      `${ JS_SRC }/utils/*.js`
-      `${ JS_SRC }/lib/*.js`
     ],
     buildJs
   );

jekyll-theme-chirpy.gemspec

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

package.json

@@ -1,14 +1,7 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "5.0.2",
+  "version": "5.1.0",
-  "description": "A minimal, sidebar, responsive web design Jekyll theme that focuses on text presentation.",
+  "description": "A minimal, responsive, and powerful Jekyll theme for presenting professional writing.",
-  "main": "index.js",
-  "directories": {
-    "doc": "docs"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cotes2020/jekyll-theme-chirpy.git"

tools/bump.sh

@@ -85,23 +85,22 @@ main() {
 
   echo "Input a version number (hint: latest version is ${_latest_tag:1})"
 
-  read _version
+  read -p "> " _version
 
-  if [[ $_version =~ ^[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]$ ]]; then
+  [[ $_version =~ ^[[:digit:]]+\.[[:digit:]]+\.[[:digit:]]$ ]] ||
+    (
+      echo "Error: Illegal version number: '$_version'"
+      exit 1
+    )
 
-    if git tag --list | egrep -q "^v$_version$"; then
+  if git tag --list | egrep -q "^v$_version$"; then
-      echo "Error: version '$_version' already exists"
+    echo "Error: version '$_version' already exists"
-      exit -1
+    exit 1
-    fi
-
-    echo -e "Bump version to $_version\n"
-    bump "$_version"
-
-  else
-
-    echo "Error: Illegal version number: '$_version'"
   fi
 
+  echo -e "Bump version to $_version\n"
+  bump "$_version"
+
 }
 
 main

tools/init.sh

@@ -28,16 +28,14 @@ check_status() {
 check_init() {
   local _has_inited=false
 
-  if [[ ! -d docs ]]; then
+  if [[ ! -d .github ]]; then # using option `--no-gh`
-    if [[ ! -d .github ]]; then
+    _has_inited=true
-      _has_inited=true # --no-gh
+  else
-    else
+    if [[ -f .github/workflows/$ACTIONS_WORKFLOW ]]; then
-      if [[ -f .github/workflows/$ACTIONS_WORKFLOW ]]; then
+      # on BSD, the `wc` could contains blank
-        # on BSD, the `wc` could contains blank
+      local _count="$(find .github/workflows/ -type f -name "*.yml" | wc -l)"
-        local _count="$(find .github/workflows/ -type f -name "*.yml" | wc -l)"
+      if [[ ${_count//[[:blank:]]/} == 1 ]]; then
-        if [[ ${_count//[[:blank:]]/} == 1 ]]; then
+        _has_inited=true
-          _has_inited=true
-        fi
       fi
     fi
   fi
@@ -80,7 +78,7 @@ init_files() {
 
   # remove the other fies
   rm -f .travis.yml
-  rm -rf _posts/* docs
+  rm -rf _posts/*
 
   # save changes
   git add -A
@@ -98,19 +96,19 @@ _no_gh=false
 while (($#)); do
   opt="$1"
   case $opt in
-    --no-gh)
+  --no-gh)
-      _no_gh=true
+    _no_gh=true
-      shift
+    shift
-      ;;
+    ;;
-    -h | --help)
+  -h | --help)
-      help
+    help
-      exit 0
+    exit 0
-      ;;
+    ;;
-    *)
+  *)
-      # unknown option
+    # unknown option
-      help
+    help
-      exit 1
+    exit 1
-      ;;
+    ;;
   esac
 done
 

tools/release.sh

@@ -16,6 +16,20 @@ set -eu
 
 GEM_SPEC="jekyll-theme-chirpy.gemspec"
 
+opt_pre=false
+
+help() {
+  echo "A tool to release new version Chirpy gem"
+  echo
+  echo "Usage:"
+  echo
+  echo "   bash ./tools/release.sh [options]"
+  echo
+  echo "Options:"
+  echo "     -p, --preview            Enable preview mode, only pakcage, and will not modify the branches"
+  echo "     -h, --help               Print this information."
+}
+
 check() {
   if [[ -n $(git status . -s) ]]; then
     echo "Error: Commit unstaged files first, and then run this tool againt."
@@ -43,19 +57,22 @@ release() {
   _version="$(grep "spec.version" jekyll-theme-chirpy.gemspec | sed 's/.*= "//;s/".*//')" # X.Y.Z
   _release_branch="release/${_version%.*}"
 
-  if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
+  if [[ $opt_pre = "false" ]]; then
-    # create a new release branch
+    # Modify the GitLab release branches
-    git checkout -b "$_release_branch"
+    if [[ -z $(git branch -v | grep "$_release_branch") ]]; then
-  else
+      # create a new release branch
-    # cherry-pick the latest commit from default branch to release branch
+      git checkout -b "$_release_branch"
-    _last_commit="$(git rev-parse "$_default_branch")"
+    else
-    git checkout "$_release_branch"
+      # cherry-pick the latest commit from default branch to release branch
-    git cherry-pick "$_last_commit" -m 1
+      _last_commit="$(git rev-parse "$_default_branch")"
-  fi
+      git checkout "$_release_branch"
+      git cherry-pick "$_last_commit" -m 1
+    fi
 
-  # create new tag
+    # Create a new tag
-  echo -e "Create tag v$_version\n"
+    echo -e "Create tag v$_version\n"
-  git tag "v$_version"
+    git tag "v$_version"
+  fi
 
   # build a gem package
   echo -e "Build the gem pakcage for v$_version\n"
@@ -70,4 +87,23 @@ main() {
   release
 }
 
+while (($#)); do
+  opt="$1"
+  case $opt in
+  -p | --preview)
+    opt_pre=true
+    shift
+    ;;
+  -h | --help)
+    help
+    exit 0
+    ;;
+  *)
+    # unknown option
+    help
+    exit 1
+    ;;
+  esac
+done
+
 main