Merge branch 'master' into production

chore(release): 5.5.0
fix: prompt with nested blockquotes renders incorrectly (#846 )
2025-12-18 21:53:26 +00:00 · 2023-01-30 05:04:12 +08:00 · 2023-01-30 05:04:10 +08:00 · 2023-01-30 04:58:30 +08:00 · 2023-01-30 03:08:35 +08:00 · 2023-01-30 03:01:02 +08:00
59 changed files with 999 additions and 498 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,6 +9,8 @@ trim_trailing_whitespace = true
 end_of_line = lf
 insert_final_newline = true

-
 [*.js]
 indent_size = 4
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -33,7 +33,7 @@ During JavaScript development, real-time debugging can be performed through the
 Firstly, start a Jekyll server:

 ```console
-$ bash tools/run.sh
+$ bash tools/run
 ```

 And then open a new terminal tab and run:
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -22,7 +22,7 @@ Please select the desired item checkbox and change it to "[x]", then delete opti
 Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
 -->

- [ ] I have run `bash ./tools/test.sh` (at the root of the project) locally and passed
+- [ ] I have run `bash ./tools/test` (at the root of the project) locally and passed
 - [ ] I have tested this feature in the browser

 ### Test Configuration
--- a/.github/workflows/cd.yml
+++ b/.github/workflows/cd.yml
@@ -0,0 +1,14 @@
+name: CD
+on:
+  push:
+    branches: [production, docs]
+
+jobs:
+  launch:
+    runs-on: ubuntu-latest
+    steps:
+      - run: |
+          curl -X POST -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            https://api.github.com/repos/${{ secrets.BUILDER }}/dispatches \
+            -d '{"event_type":"deploy", "client_payload":{"branch": "${{ github.ref_name }}"}}'
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,14 +2,11 @@ name: 'CI'
 on:
  push:
    branches-ignore:
-      - 'release/**'
+      - 'production'
      - 'docs'
-    tags-ignore:
-      - '**'
    paths-ignore:
      - '.github/**'
      - '!.github/workflows/ci.yml'
-      - '.travis.yml'
      - '.gitignore'
      - 'README.md'
      - 'LICENSE'
@@ -23,7 +20,7 @@ jobs:

    strategy:
      matrix:
-        ruby: [2.5, 2.6, 2.7, 3]
+        ruby: [2.7, 3]

    steps:
      - name: Checkout
@@ -38,4 +35,4 @@ jobs:
          bundler-cache: true

      - name: Test Site
-        run: bash tools/test.sh
+        run: bash tools/test
--- a/.github/workflows/pages-deploy.yml.hook
+++ b/.github/workflows/pages-deploy.yml.hook
@@ -42,7 +42,7 @@ jobs:
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
-          ruby-version: 3 # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
+          ruby-version: 3   # reads from a '.ruby-version' or '.tools-version' file if 'ruby-version' is omitted
          bundler-cache: true

      - name: Build site
--- a/.github/workflows/style-lint.yml
+++ b/.github/workflows/style-lint.yml
@@ -2,11 +2,14 @@ name: 'Style Lint'

 on:
  push:
+    branches-ignore:
+      - 'production'
+      - 'docs'
    paths:
-      - '_sass/**.scss'
+      - '_sass/**/*.scss'
  pull_request:
    paths:
-      - '_sass/**.scss'
+      - '_sass/**/*.scss'

 jobs:
  stylelint:
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@
 !.git*
 !.editorconfig
 !.nojekyll
-!.travis.yml
 !.husky
 !.commitlintrc.json
 !.versionrc.json
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -11,12 +11,6 @@
    "alpha-value-notation": "number",
    "selector-not-notation": "simple",
    "color-hex-length": "long",
-    "declaration-block-single-line-max-declarations": 3,
-    "font-family-no-missing-generic-family-keyword": [
-      true,
-      {
-        "ignoreFontFamilies": ["Font Awesome 5 Free"]
-      }
-    ]
+    "declaration-block-single-line-max-declarations": 3
  }
 }
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,51 +0,0 @@
-os: linux
-dist: bionic
-language: ruby
-rvm: 2.7.0
-
-addons:
-  apt:
-    packages:
-      - libcurl4-openssl-dev  # to avoid SSL error (for htmlproofer)
-
-# Overriding to drop the `--development` flag which requires the Gemfile.lock at build
-install: bundle install --jobs=3 --retry=3 --path=vendor/bundle
-
-before_script: git -C "$HOME" clone "$BUILDER_REPO" --depth=1 -q
-
-jobs:
-  include:
-    - stage: Upgrade
-      cache: bundler
-      git:
-        depth: false  # for posts' lastmod
-      script: eval "$BUILD_CMD"
-
-    - 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"
-
-stages:
-  - name: Upgrade
-    if: branch = production
-  - name: Starter
-    if: branch = production
-  - name: Docs
-    if: branch = docs
-
-notifications:
-  email:
-    recipients:
-      - secure: "fFLqX7uOzFA8RE2AUFlU1mmxMw+rdV6DnODJ/1Gl+3ecNtrv5LeH3c5a4a5ShQqYTrx9BPfD40VRN7UB+lzOdXiWLI9yDGRPPxGG26/WfrKpdQPZilc8zAOEeDnLAJeGZLsUvgmNb3KCXW6S8NPqqh34CfWcTIzjCARhRgO33wcs8X5wP5cugtNqO5Ew/pUcfWcmiuXNX0GNT6l+nL5A7yN+IO5mRHqSRmlfYd5EHhGMTIL4La+Cd1CNv1m4Dl0Ah2cDeJwi5wLnVbqAgunLhAYmDtxIOCVYMTBrP37UiNe/7QeFelyJfODsmMg1mx3WCykbXydC753WVoAlTg6nNoeeI9fmK+/tuLK+sx/KnYfTVGBXQYq39DyV/2o/IfCzEAKImlzFKGD8R13+ddu4B5UML+cby5KBvhTKIGaC5tKoe39z/31UPpy11/EHMCof2BUOzIgu5Hsv4OSNJlw3oRE31oOPn8xP4e7uWR8bRUhAgzN0Cn0ht+UfpemfGAXrp0M3IXQdc9L4azEFqxRhivMTLK/P6INay7IM+DJ30Ht2dWylGw/sxcRTqyNm3YomJQnXIO4xeqTSLulWr80FFHTys3JEDJYrcKvJmpwLFEAOZtwKsZ6ZShrOIA4LE5fgQtakH3ZLJG9a7jVSlMcNIfaSKgjdDQOe6CoRQL7KouA="
-    on_success: never
-
-env:
-  global:
-    - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,49 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+## [5.5.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.4.0...v5.5.0) (2023-01-29)
+
+
+### Features
+
+* **i18n:** add Arabic translation ([#857](https://github.com/cotes2020/jekyll-theme-chirpy/issues/857)) ([765af53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/765af53b77e5c63804784d5728f5970ae274c2c7))
+* **i18n:** add Czech language ([#833](https://github.com/cotes2020/jekyll-theme-chirpy/issues/833)) ([98d48f5](https://github.com/cotes2020/jekyll-theme-chirpy/commit/98d48f5da412276d4a0c99cd01a87b19349bc6bc))
+* **i18n:** add Finnish translations ([#843](https://github.com/cotes2020/jekyll-theme-chirpy/issues/843)) ([d6d0318](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d6d03183eaf94b44e037cc48b6e1c47cee183f6e))
+* **i18n:** add Italian translation ([#850](https://github.com/cotes2020/jekyll-theme-chirpy/issues/850)) ([9a011e1](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9a011e14d66195d8b2fb9ec62f3e60a3e56cd032))
+
+
+### Bug Fixes
+
+*  copy command line incomplete(`.gp` part) ([41ed331](https://github.com/cotes2020/jekyll-theme-chirpy/commit/41ed33145639415148aec8e85edc7a6fd0de0ca3))
+* correct encoding of spaces in share URLs ([#835](https://github.com/cotes2020/jekyll-theme-chirpy/issues/835)) ([f2d2858](https://github.com/cotes2020/jekyll-theme-chirpy/commit/f2d285844e6e2979f2b0eec1d20073d3c05b6c0c))
+* post's image would cover the PWA update alert ([bd374dd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bd374dd383c50f89c8f018ecb4e25772eeb8f6d8))
+* prompt with nested blockquotes renders incorrectly ([#846](https://github.com/cotes2020/jekyll-theme-chirpy/issues/846)) ([babb4a0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/babb4a0c5a58ceb2e4093bc465670accdd526c18))
+
+## [5.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.2...v5.4.0) (2022-12-27)
+
+
+### Features
+
+* add `rel="me"` to Mastodon sidebar contact links for verification ([#807](https://github.com/cotes2020/jekyll-theme-chirpy/issues/807)) ([d2190c7](https://github.com/cotes2020/jekyll-theme-chirpy/commit/d2190c726f61c8c9732b88b4aecf699dc8bc7deb))
+* add embed video support ([ed6dc53](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ed6dc539eff7003a3765bcd8c31ae5e91a863d65))
+* add shimmer background when image loads ([ab16fdc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ab16fdc7fc26811130b98a1773beb62bff6182e8))
+* set preview image ratio to 1.91 : 1 ([4b6ccbc](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4b6ccbcbccce27b9fcb035812efefe4eb69301cf))
+* support dark and light mode images ([#481](https://github.com/cotes2020/jekyll-theme-chirpy/issues/481)) ([9306c7b](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9306c7b39ecf9d9146bc1a25eebedc38eb2c3dd6))
+* support LQIP for images ([bffaf63](https://github.com/cotes2020/jekyll-theme-chirpy/commit/bffaf6374f265cec96ef743d42b46fbec3b59797))
+
+
+### Bug Fixes
+
+* `hreflang` tag attribute of feed misses `site.alt_lang` ([7651d28](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7651d2851b4bb7d8f0d068b62c036c89a1089bbc))
+* `og:image` will be incorrect if the image uses a cross-domain URL ([8de1abd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/8de1abda6be3633982392178731431b0ddb1b52b))
+* refactoring error when the image URL contains parameters ([ec98f07](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ec98f07aca0b80a9c07fbcdc8e0d7d66dba98ed2))
+* spaces in post title are encoded when sharing ([7efd2f8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7efd2f8aa2ea1c3aeb7d740bf9a018881c26fe65))
+
+
+### Improvements
+
+* **cdn:** optimize cache policy for static assets ([7fb0ee0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/7fb0ee0bedb63eee3f90a49c6d7fb8b5d78c9830))
+
 ## [5.3.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v5.3.1...v5.3.2) (2022-11-22)


--- a/16
+++ b/16
@@ -10,13 +10,19 @@ end

 # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
 # and associated library.
-install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
-  gem "tzinfo", "~> 1.2"
+platforms :mingw, :x64_mingw, :mswin, :jruby do
+  gem "tzinfo", ">= 1", "< 3"
  gem "tzinfo-data"
 end

 # Performance-booster for watching directories on Windows
-gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?
+gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]

-# Jekyll <= 4.2.0 compatibility with Ruby 3.0
-gem "webrick", "~> 1.7"
+# Lock `http_parser.rb` gem to `v0.6.x` on JRuby builds since newer versions of the gem
+# do not have a Java counterpart.
+gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]
+
+# Lock jekyll-sass-converter to 2.x on Linux-musl
+if RUBY_PLATFORM =~ /linux-musl/
+  gem "jekyll-sass-converter", "~> 2.0"
+end
--- a/README.md
+++ b/README.md
@@ -12,30 +12,31 @@

  [**Live Demo →**](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)
+  [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)](https://cotes2020.github.io/chirpy-demo)

 </div>

 ## Features

- Localized Layout
 - Dark/Light Theme Mode
+- Localized UI language
 - Pinned Posts
 - Hierarchical Categories
- Last Modified Date for Posts
+- Trending Tags
 - Table of Contents
- Auto-generated Related Posts
+- Last Modified Date of Posts
 - Syntax Highlighting
 - Mathematical Expressions
 - Mermaid Diagram & Flowchart
+- Dark/Light Mode Images
+- Embed Videos
 - Disqus/Utterances/Giscus Comments
 - Search
 - Atom Feeds
 - Google Analytics
- GA Pageviews Reporting
+- Page Views Reporting
 - SEO & Performance Optimization

-
 ## 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`. In addition, [Git](https://git-scm.com/) is also required to be installed.
--- a/_config.yml
+++ b/_config.yml
@@ -78,7 +78,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://demo-img.cotes.page'
+img_cdn: 'https://chirpy-img.netlify.app'

 # the avatar on sidebar, support local or CORS resources
 avatar: '/commons/avatar.jpg'
--- a/_data/assets/cross_origin.yml
+++ b/_data/assets/cross_origin.yml
@@ -16,47 +16,47 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:w
 # Libraries

 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/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
+  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/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@6/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/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@9/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/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
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/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
+  css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
+  js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js

-lozad:
-  js: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+lazysizes:
+  js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js

 clipboard:
-  js: https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js
+  js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/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
+  js: https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js
--- a/_data/assets/self_host.yml
+++ b/_data/assets/self_host.yml
@@ -38,8 +38,8 @@ 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
+lazysizes:
+  js: /assets/lib/lazysizes-5.3.2/lazysizes.min.js

 clipboard:
  js: /assets/lib/clipboard-2.0.9/clipboard.min.js
--- a/_data/contact.yml
+++ b/_data/contact.yml
@@ -19,7 +19,7 @@
 # -
 #   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
-#   url:  ''                  # Fill with your mastodon account page
+#   url:  ''                  # Fill with your Mastodon account page, rel="me" will be applied for verification
 # -
 #   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
--- a/_data/locales/ar.yml
+++ b/_data/locales/ar.yml
@@ -0,0 +1,93 @@
+# 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: باستخدام :PLATFORM السمة :THEME.
+
+not_found:
+  statment: عذرا, الرابط التالي غير صالح أو انه يشير إلى صفحة غير موجودة.
+
+notification:
+  update_found: يتوفر اصدار جديد للمحتوى.
+  update: تحديث
+
+# ----- 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: مثبت
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure:
+    singular: فئة
+    plural: فئات
+  post_measure:
+    singular: منشور
+    plural: منشورات
--- a/_data/locales/bg-BG.yml
+++ b/_data/locales/bg-BG.yml
@@ -5,7 +5,7 @@
 layout:
  post: Публикация
  category: Категория
-  tag: Тагове
+  tag: Таг

 # The tabs of sidebar
 tabs:
@@ -43,7 +43,7 @@ copyright:
 meta: Създадено чрез :PLATFORM и :THEME тема.

 not_found:
-  statment: Съжалявам, но този на този URL адрес няма налично съдържание.
+  statment: Съжалявам, но на този URL адрес няма налично съдържание.

 notification:
  update_found: Налична е нова версия на съдържанието.
@@ -71,7 +71,7 @@ post:
      title: Копирай линк
      succeed: Линкът е копиран успешно!
  # pinned prompt of posts list on homepage
-  pin_prompt: Прикрепен
+  pin_prompt: Прикрепенa

 # categories page
 categories:
--- a/_data/locales/cs-CZ.yml
+++ b/_data/locales/cs-CZ.yml
@@ -0,0 +1,91 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Příspěvek
+  category: Kategorie
+  tag: Štítek
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Domů
+  categories: Kategorie
+  tags: Štítky
+  archives: Archivy
+  about: O mně
+
+# the text displayed in the search bar & search results
+search:
+  hint: hledat
+  cancel: Zrušit
+  no_results: Ups! Žádný výsledek nenalezen.
+
+panel:
+  lastmod: Nedávno aktualizováno
+  trending_tags: Trendy štítky
+  toc: Obsah
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tento příspěvek je licencován pod :LICENSE_NAME autorem.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Některá práva vyhrazena.
+  verbose: >-
+    Pokud není uvedeno jinak, jsou příspěvky na tomto webu licencovány
+    pod licencí Creative Commons Attribution 4.0 International (CC BY 4.0) Licence autora.
+
+meta: Použití :PLATFORM s motivem :THEME.
+
+not_found:
+  statment: Omlouváme se, adresu URL jsme špatně umístili nebo odkazuje na něco, co neexistuje.
+
+notification:
+  update_found: Je k dispozici nová verze obsahu.
+  update: Aktualizace
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Od
+  posted: Zveřejněno
+  updated: Aktualizováno
+  words: slova
+  pageview_measure: zhlednutí
+  read_time:
+    unit: minut
+    prompt: čtení
+  relate_posts: Další čtení
+  share: Sdílet
+  button:
+    next: Novější
+    previous: Starší
+    copy_code:
+      succeed: Zkopírováno!
+    share_link:
+      title: Kopírovat odkaz
+      succeed: Zkopírováno!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Připnuto
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure: kategorie
+  post_measure:
+    singular: příspěvěk
+    plural: příspěvky
--- a/_data/locales/en.yml
+++ b/_data/locales/en.yml
@@ -40,7 +40,7 @@ copyright:
    Except where otherwise noted, the blog posts on this site are licensed
    under the Creative Commons Attribution 4.0 International (CC BY 4.0) License by the author.

-meta: Powered by :PLATFORM with :THEME theme.
+meta: Using the :PLATFORM theme :THEME.

 not_found:
  statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.
--- a/_data/locales/fi-FI.yml
+++ b/_data/locales/fi-FI.yml
@@ -0,0 +1,92 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Julkaisu
+  category: Kateogoria
+  tag: Tagi
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Koti
+  categories: Kateogoriat
+  tags: Tagit
+  archives: Arkistot
+  about: Minusta
+
+# the text displayed in the search bar & search results
+search:
+  hint: etsi
+  cancel: Peruuta
+  no_results: Hups! Ei tuloksia.
+
+panel:
+  lastmod: Viimeksi päivitetty
+  trending_tags: Trendaavat tagit
+  toc: Sisältö
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Tämä julkaisu on lisenssoitu :LICENSE_NAME julkaisijan toimesta.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Jotkut oikeudet pidätetään.
+  verbose: >-
+    Paitsi jos erikseen mainitaan on kaikki sisältö Creative Commons Attribution 4.0 International (CC BY 4.0) Lisensoitu kirjoittajan toimesta.
+
+meta: Käytetään :PLATFORM iä Teema :THEME.
+
+not_found:
+  statment: Valitettavasti tällä URL-osoitteella ei ole saatavilla sisältöä.
+
+notification:
+  update_found: Uusi versio sisällöstä on saatavilla.
+  update: Päivitä
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Kirjoittaja
+  posted: Julkaistu
+  updated: Päivitetty
+  words: sanaa
+  pageview_measure: katselukertoja
+  read_time:
+    unit: minuuttia
+    prompt: lukea
+  relate_posts: Jatka lukemista
+  share: Jaa
+  button:
+    next: Uudempi
+    previous: Vanhempi
+    copy_code:
+      succeed: Kopiotu!
+    share_link:
+      title: Kopioi linkki
+      succeed: Linkki kopioitu onnistuneesti!
+  # pinned prompt of posts list on homepage
+  pin_prompt: Kiinnitetty
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure:
+    singular: kategoria
+    plural: kategoriat
+  post_measure:
+    singular: julkaisu
+    plural: julkaisut
--- a/_data/locales/it-IT.yml
+++ b/_data/locales/it-IT.yml
@@ -0,0 +1,93 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: Post
+  category: Categoria
+  tag: Tag
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: Pagina principale
+  categories: Categorie
+  tags: Tags
+  archives: Archivio
+  about: Informazioni
+
+# the text displayed in the search bar & search results
+search:
+  hint: ricerca
+  cancel: Cancella
+  no_results: Oops! La ricerca non ha fornito risultati.
+
+panel:
+  lastmod: Aggiornati recentemente
+  trending_tags: Tags più cliccati
+  toc: Contenuti
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: Questo post è sotto licenza :LICENSE_NAME a nome dell'autore.
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: Alcuni diritti riservati.
+  verbose: >-
+    Eccetto quando esplicitamente menzionato, i post di questo blog sono da ritenersi sotto
+    i termini di licenza Creative Commons Attribution 4.0 International (CC BY 4.0).
+
+
+meta: Servizio offerto da :PLATFORM con tema :THEME.                                       
+not_found:
+  statment: Ci scusiamo, non è stato possibile trovare l'URL in questione. Potrebbe puntare ad una pagina non esistente.
+
+notification:
+  update_found: Nuova versione del contenuto disponibile.
+  update: Aggiornamento
+
+# ----- Posts related labels -----
+
+post:
+  written_by: Da
+  posted: Postato
+  updated: Aggiornato
+  words: parole
+  pageview_measure: visioni
+  read_time:
+    unit: min
+    prompt: lettura
+  relate_posts: Continua a leggere
+  share: Condividi
+  button:
+    next: Più recenti
+    previous: Meno recenti
+    copy_code:
+      succeed: Copiato!
+    share_link:
+      title: Copia link
+      succeed: Link copiato con successo!
+  # pinned prompt of posts list on homepage
+  pin_prompt: In alto
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: '%b %e, %Y'
+    dayjs: 'll'
+  archives:
+    strftime: '%b'
+    dayjs: 'MMM'
+
+# categories page
+categories:
+  category_measure:
+    singular: categoria
+    plural: categorie
+  post_measure:
+    singular: post
+    plural: posts
--- a/_includes/embed/twitch.html
+++ b/_includes/embed/twitch.html
@@ -0,0 +1,4 @@
+<iframe class="embed-video twitch lazyload"
+  src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
+  frameborder="0" allowfullscreen="true"
+  scrolling="no"></iframe>
--- a/_includes/embed/youtube.html
+++ b/_includes/embed/youtube.html
@@ -0,0 +1,6 @@
+<iframe class="embed-video youtube lazyload"
+  src="https://www.youtube.com/embed/{{ include.id }}"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+  allowfullscreen></iframe>
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -17,16 +17,16 @@
      <div class="footer-right">
        <p class="mb-0">

-          {% capture _platform %}
+          {%- capture _platform -%}
          <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-          {% endcapture %}
+          {%- endcapture -%}

-          {% capture _theme %}
+          {%- capture _theme -%}
          <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-          {% endcapture %}
+          {%- endcapture -%}

          {{ site.data.locales[site.lang].meta
-            | default: 'Powered by :PLATFORM with :THEME theme.'
+            | default: 'Using the :PLATFORM theme :THEME.'
            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
          }}
        </p>
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -24,20 +24,25 @@

  {% if page.image %}
    {% assign img = page.image.path | default: page.image %}
-    {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
-    {% capture target %}"{{ img | absolute_url }}"{% endcapture %}

-    {% if site.img_cdn contains '//' %}
-      <!-- it's a cross-origin URL -->
-      {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
-    {% else %}
-      <!-- it's a local file path -->
-      {%- capture replacement -%}
-        "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
-      {%- endcapture -%}
-    {% endif %}
+    {% unless img contains '://' %}
+      {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
+      {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
+
+      {% if site.img_cdn contains '//' %}
+        <!-- it's a cross-origin URL -->
+        {% capture replacement %}"{{ site.img_cdn }}{{ img_path }}"{% endcapture %}
+      {% else %}
+        <!-- it's a local file path -->
+        {%- capture replacement -%}
+          "{{ site.img_cdn | append: '/' | append: img_path | replace: '//', '/' | absolute_url }}"
+        {%- endcapture -%}
+      {% endif %}
+
+      {% assign seo_tags = seo_tags | replace: target, replacement %}
+
+    {% endunless %}

-    {% assign seo_tags = seo_tags | replace: target, replacement %}
  {% endif %}

  {{ seo_tags }}
--- a/_includes/js-selector.html
+++ b/_includes/js-selector.html
@@ -15,12 +15,11 @@
 {% if page.layout == 'post' or page.layout == 'page' %}
  <!-- image lazy-loading & popup & clipboard -->
  {% assign _urls = site.data.assets[origin].magnific-popup.js
-      | append: ',' | append: site.data.assets[origin].lozad.js
+      | append: ',' | append: site.data.assets[origin].lazysizes.js
      | append: ',' | append: site.data.assets[origin].clipboard.js
  %}

  {% include jsdelivr-combine.html urls=_urls %}
-
 {% endif %}

 {% if page.layout == 'home'
--- a/_includes/post-sharing.html
+++ b/_includes/post-sharing.html
@@ -6,7 +6,7 @@
  <span class="share-label text-muted mr-1">{{ site.data.locales[site.lang].post.share }}</span>
  <span class="share-icons">
    {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
-    {% assign title = title | url_encode %}
+    {% assign title = title | uri_escape %}
    {% assign url = page.url | absolute_url | url_encode %}

    {% for share in site.data.share.platforms %}
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -51,31 +51,52 @@
  {% assign _img_content = nil %}
  {% assign _img_snippets = _content | split: IMG_TAG %}

+  <!-- CDN URL -->
+  {% if site.img_cdn %}
+    {% if site.img_cdn contains '//' %}
+      {% assign _path_prefix = site.img_cdn %}
+    {% else %}
+      {% assign _path_prefix = site.img_cdn | relative_url %}
+    {% endif %}
+  {% else %}
+    {% assign _path_prefix = site.baseurl %}
+  {% endif %}
+
+  <!-- Add image path -->
+  {% if page.img_path %}
+    {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
+    {% assign _path_prefix = _path_prefix | append: _path %}
+  {% endif %}
+
  {% for _img_snippet in _img_snippets %}
    {% if forloop.first %}
      {% assign _img_content = _img_snippet %}
      {% continue %}
    {% endif %}

-    {% assign _width = nil %}
-    {% assign _height = nil %}
-    {% assign _src = nil %}
-
    {% assign _left = _img_snippet | split: '>' | first %}
    {% assign _right = _img_snippet | remove: _left %}

-    {% assign _left = _left | remove: ' /' %}
-    {% assign _left = _left | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
-    {% assign _attrs = _left | split: ' ' %}
+    {% unless _left contains 'src=' %}
+      {% continue %}
+    {% endunless %}
+
+    {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
+    {% assign _attrs = _left | split: '" ' %}
+
+    {% assign _width = nil %}
+    {% assign _height = nil %}
+    {% assign _lqip = nil %}
+    {% assign _class = nil %}

    {% for _attr in _attrs %}
-      {% assign _pair = _attr | split: '=' %}
-      {% if _pair.size < 2 %}
+      {% unless _attr contains '=' %}
        {% continue %}
-      {% endif %}
+      {% endunless %}

+      {% assign _pair = _attr | remove: '"' | split: '=' %}
      {% capture _key %}{{ _pair | first }}{% endcapture %}
-      {% capture _value %}{{ _pair | last | replace: '"', '' }}{% endcapture %}
+      {% capture _value %}{{ _pair | last }}{% endcapture %}

      {% case _key %}
        {% when 'width' %}
@@ -84,62 +105,91 @@
          {% assign _height = _value %}
        {% when 'src' %}
          {% assign _src = _value %}
+        {% when 'lqip' %}
+          {% assign _lqip = _value %}
+        {% when 'class' %}
+          {% assign _class = _value %}
      {% endcase %}

-      {% if _width and _height and _src %}
-        {% break %}
-      {% endif %}
    {% endfor %}

-    {% if _src %}
-      {% unless _src contains '://' %}
-
-        <!-- Add CDN URL -->
-        {% if site.img_cdn %}
-          {% if site.img_cdn contains '//' %}
-            {% assign _src_prefix = site.img_cdn %}
-          {% else %}
-            {% assign _src_prefix = site.img_cdn | relative_url %}
-          {% endif %}
-        {% else %}
-          {% assign _src_prefix = site.baseurl %}
-        {% endif %}
-
-        <!-- Add image path -->
-        {% if page.img_path %}
-          {% assign _path = page.img_path | append: '/' | replace: '//', '/' %}
-          {% assign _src_prefix = _src_prefix | append: _path %}
-        {% endif %}
-
-        {% assign _final_src = _src_prefix | append: _src %}
-        {% assign _left = _left | replace: _src, _final_src %}
-
-      {% endunless %}
-
-      <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-
-      {% assign _left = _left | replace: 'src=', 'data-src=' %}
-
+    <!-- take out classes -->
+    {% if _class %}
+      {% capture _old_class %}class="{{ _class }}"{% endcapture %}
+      {% assign _left = _left | remove: _old_class %}
    {% endif %}

-    <!-- Add SVG placehoder to prevent layout reflow -->
+    {% assign _final_src = nil %}

-    {% if _width and _height %}
-      {%- capture _svg -%}
-        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
-      {%- endcapture -%}
+    {% unless _src contains '//' %}
+      {% assign _final_src = _path_prefix | append: _src %}
+      {% capture _src_from %}"{{ _src }}"{% endcapture %}
+      {% capture _src_to %}"{{ _final_src }}"{% endcapture %}
+      {% assign _left = _left | replace: _src_from, _src_to %}
+    {% endunless %}

-      {% assign _left =  _svg | append: ' ' | append: _left %}
+    {% if _lqip %}
+      {% unless _lqip contains ':' %}
+        {% assign _final_lqip = _path_prefix | append: _lqip %}
+        {% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
+        {% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
+        {% assign _left = _left | replace: _lqip_from, _lqip_to %}
+      {% endunless %}
+    {% endif %}
+
+    <!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
+    {% assign _left = _left | replace: 'src=', 'data-src=' %}
+    {% if _left contains 'class=' %}
+      {% assign _left = _left | replace: 'class="', 'class="lazyload '%}
+    {% else %}
+      {% assign _left = _left | append: ' class="lazyload"' %}
+    {% endif %}
+
+    <!-- add image placeholder -->
+    {% if _lqip %}
+      {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
+    {% else %}
+      {% if _width and _height %}
+        <!-- add SVG placehoder -->
+        {%- capture _svg -%}
+          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width  }} {{ _height }}'%3E%3C/svg%3E"
+        {%- endcapture -%}
+        {% assign _left =  _svg | append: ' ' | append: _left %}
+        {% assign _class = _class | append: ' shimmer' %}
+      {% endif %}
    {% endif %}

    <!-- Bypass the HTML-proofer test -->
    {% assign _left = _left | append: ' data-proofer-ignore' %}

+    <!-- make sure the `<img>` is wrapped by `<a>` -->
+    {% assign _parent = _right | slice: 1, 4 %}
+
+    {% if _parent == '</a>' %}
+      <!-- add class to exist <a> tag -->
+      {% assign _size = _img_content | size | minus: 1 %}
+      {% capture _class %}
+        class="img-link{% unless _lqip %} shimmer{% endunless %}"
+      {% endcapture %}
+      {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>'  %}
+
+    {% else %}
+      <!-- create the image wrapper -->
+      {%- capture _wrapper_start -%}
+        <a href="{{ _final_src | default: _src  }}" class="popup img-link {{ _class }}">
+      {%- endcapture -%}
+      {% assign _img_content = _img_content | append: _wrapper_start %}
+      {% assign _right = _right | prepend: '></a' %}
+    {% endif %}
+
+    <!-- combine -->
    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}

  {% endfor %}

-  {% assign _content = _img_content %}
+  {% if _img_content %}
+    {% assign _content = _img_content %}
+  {% endif %}

 {% endif %}

@@ -227,54 +277,6 @@

 {% 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 }}
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -81,7 +81,17 @@

      {% if url %}
      <a href="{{ url }}" aria-label="{{ entry.type }}"
-        {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+        {% assign link_types = nil %}
+        {% unless entry.noblank %}
+          {% assign link_types = link_types | append: " noopener" %}
+          target="_blank"
+        {% endunless %}
+
+        {% if entry.type == 'mastodon' %}
+          {% assign link_types = link_types | append: " me" %}
+        {% endif %}
+
+        {% if link_types %}rel="{{ link_types | lstrip }}"{% endif %}>
        <i class="{{ entry.icon }}"></i>
      </a>
      {% endif %}
--- a/_javascript/copyright
+++ b/_javascript/copyright
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/_javascript/utils/img-extra.js
+++ b/_javascript/utils/img-extra.js
@@ -1,33 +1,13 @@
 /**
- Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
- and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+ * Set up image stuff
 */

-$(function () {
-    const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
-
-    if ($(`${IMG_SCOPE} img`).length <= 0) {
+(function() {
+    if ($('#core-wrapper img[data-src]') <= 0) {
        return;
    }

-    /* lazy loading */
-
-    const imgList = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
-    const observer = lozad(imgList);
-    observer.observe();
-
-    /* popup */
-
-    $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each(
-        function () {
-            let nextTag = $(this).next();
-            const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
-            const src = $(this).attr('data-src'); // created by lozad.js
-
-            $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
-        }
-    );
-
+    /* See: <https://github.com/dimsemenov/Magnific-Popup> */
    $('.popup').magnificPopup({
        type: 'image',
        closeOnContentClick: true,
@@ -39,8 +19,10 @@ $(function () {
        }
    });

-    /* markup the image links */
+    /* Stop shimmer when image loaded */
+    document.addEventListener('lazyloaded', function(e) {
+        const $img = $(e.target);
+        $img.parent().removeClass('shimmer');
+    });

-    $(`${IMG_SCOPE} a`).has('img').addClass('img-link');
-
-});
+})();
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -27,30 +27,21 @@ tail_includes:
    {% endif %}

  {% if page.image %}
-    {% capture bg %}
-      {% unless page.image.no_bg %}{{ 'bg' }}{% endunless %}
+    {% capture src %}src="{{ page.image.path | default: page.image }}"{% endcapture %}
+    {% capture class %}class="preview-img{% if page.image.no_bg %}{{ ' no-bg' }}{% endif %}"{% endcapture %}
+    {% capture alt %}alt="{{ page.image.alt | default: "Preview Image" }}"{% endcapture %}
+
+    {% capture lqip %}
+      {% if page.image.lqip %}
+        lqip="{{ page.image.lqip }}"
+      {% endif %}
    {% endcapture %}

    <div class="mt-3 mb-3">
-      <img src="{{ page.image.path | default: page.image }}" class="preview-img {{ bg | strip }}"
-        alt="{{ page.image.alt | default: "Preview Image" }}"
-
-      {% if page.image.width %}
-        width="{{ page.image.width }}"
-      {% elsif page.image.w %}
-        width="{{ page.image.w }}"
-      {% endif %}
-
-      {% if page.image.height %}
-        height="{{ page.image.height }}"
-      {% elsif page.image.h %}
-        height="{{ page.image.h }}"
-      {% endif %}>
-
-      {% if page.image.alt %}
+      <img {{ src }} {{ class }} {{ alt }} w="1200" h="630" {{ lqip | strip }}>
+      {%- if page.image.alt -%}
        <figcaption class="text-center pt-2 pb-2">{{ page.image.alt }}</figcaption>
-      {% endif %}
-
+      {%- endif -%}
    </div>
  {% endif %}

--- a/_posts/2019-08-08-text-and-typography.md
+++ b/_posts/2019-08-08-text-and-typography.md
@@ -8,14 +8,12 @@ math: true
 mermaid: true
 image:
  path: /commons/devices-mockup.png
-  width: 800
-  height: 500
+  lqip: data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA
  alt: Responsive rendering of Chirpy theme on multiple devices.
 ---

 This post is to show Markdown syntax rendering on [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), you can also use it as an example of writing. Now, let's start looking at text and typography.

-
 ## Titles
 ---
 # H1 - heading
@@ -26,7 +24,6 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co

 <h4>H4 - heading</h4>
 ---
-<br>

 ## Paragraph

@@ -95,56 +92,6 @@ Moon

 Click the hook will locate the footnote[^footnote], and here is another footnote[^fn-nth-2].

-## Images
-
- Default (with caption)
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
-_Full screen width and center alignment_
-
-<br>
-
- Shadow
-
-![Window shadow](/posts/20190808/window.png){: .shadow width="1548" height="864" .w-75 }
-_shadow effect (visible in light mode)_
-
-<br>
-
- Left aligned
-
-![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
-
- Float to left
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
-  Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
-
- Float to right
-
-  ![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
-  Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum. Phasellus a tortor aliquam, tristique felis sit amet, elementum enim. Integer vestibulum vitae nulla nec pretium.
-
-## Mermaid SVG
-
-```mermaid
- gantt
-  title  Adding GANTT diagram functionality to mermaid
-  apple :a, 2017-07-20, 1w
-  banana :crit, b, 2017-07-23, 1d
-  cherry :active, c, after b a, 1d
-```
-
-## Mathematics
-
-The mathematics powered by [**MathJax**](https://www.mathjax.org/):
-
-$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
-
-When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
-
-$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
-
 ## Inline code

 This is an example of `Inline Code`.
@@ -153,7 +100,7 @@ This is an example of `Inline Code`.

 Here is the `/path/to/the/file.extend`{: .filepath}.

-## Code block
+## Code blocks

 ### Common

@@ -161,22 +108,12 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 This is a common code snippet, without syntax highlight and line number.
 ```

-### Specific Languages
-
-#### Console
-
-```console
-$ env |grep SHELL
-SHELL=/usr/local/bin/bash
-PYENV_SHELL=bash
-```
-
-#### Shell
+### Specific Language

 ```bash
 if [ $? -ne 0 ]; then
-    echo "The command was not successful.";
-    #do the needful / exit
+  echo "The command was not successful.";
+  #do the needful / exit
 fi;
 ```

@@ -189,6 +126,58 @@ fi;
 ```
 {: file='_sass/jekyll-theme-chirpy.scss'}

+## Mathematics
+
+The mathematics powered by [**MathJax**](https://www.mathjax.org/):
+
+$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+
+When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
+
+$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
+
+## Mermaid SVG
+
+```mermaid
+ gantt
+  title  Adding GANTT diagram functionality to mermaid
+  apple :a, 2017-07-20, 1w
+  banana :crit, b, 2017-07-23, 1d
+  cherry :active, c, after b a, 1d
+```
+
+## Images
+
+### Default (with caption)
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" }
+_Full screen width and center alignment_
+
+### Left aligned
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-75 .normal}
+
+### Float to left
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .left}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Float to right
+
+![Desktop View](/posts/20190808/mockup.png){: width="972" height="589" .w-50 .right}
+Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
+
+### Dark/Light mode & Shadow
+
+The image below will toggle dark/light mode based on theme preference, notice it has shadows.
+
+![light mode only](/posts/20190808/devtools-light.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
+![dark mode only](/posts/20190808/devtools-dark.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
+
+## Video
+
+{% include embed/youtube.html id='Balreaj8Yqs' %}
+
 ## Reverse Footnote

 [^footnote]: The footnote source
--- a/_posts/2019-08-08-write-a-new-post.md
+++ b/_posts/2019-08-08-write-a-new-post.md
@@ -7,7 +7,7 @@ tags: [writing]
 render_with_liquid: false
 ---

-This post will guide you how to write a post on _Chirpy_ theme. Even if you have previous experience with Jekyll, this article is worth reading, because many features require specific variables to be set.
+This tutorial will guide you how to write a post in the _Chirpy_ template, and it's worth reading even if you've used Jekyll before, as many features require specific variables to be set.

 ## Naming and Path

@@ -177,9 +177,18 @@ By default, the image is centered, but you can specify the position by using one
  ```
  {: .nolineno}

+### Dark/Light mode
+
+You can make images follow theme preferences in dark/light mode. This requires you to prepare two images, one for dark mode and one for light mode, and then assign them a specific class (`dark` or `light`):
+
+```markdown
+![Light mode only](/path/to/light-mode.png){: .light }
+![Dark mode only](/path/to/dark-mode.png){: .dark }
+```
+
 ### 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:
+The screenshots of the program window can be considered to show the shadow effect:

 ```markdown
 ![Desktop View](/assets/img/sample/mockup.png){: .shadow }
@@ -209,7 +218,7 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```html
 <img src="https://cdn.com/path/to/flower.png" alt="The flower">
 ```
-{: .nolineno}
+{: .nolineno }

 ### Image Path

@@ -220,7 +229,6 @@ When a post contains many images, it will be a time-consuming task to repeatedly
 img_path: /img/path/
 ---
 ```
-{: .nolineno }

 And then, the image source of Markdown can write the file name directly:

@@ -238,28 +246,49 @@ The output will be:

 ### Preview Image

-If you want to add an image to the top of the post contents, specify the attribute `path`, `width`, `height`, and `alt` for the image:
+If you want to add an image at the top of the post, please provide an image with a resolution of `1200 x 630`. Please note that if the image aspect ratio does not meet `1.91 : 1`, the image will be scaled and cropped.
+
+Knowing these prerequisites, you can start setting the image's attribute:

 ```yaml
 ---
 image:
  path: /path/to/image
-  width: 1000   # in pixels
-  height: 400   # in pixels
  alt: image alternative text
 ---
 ```

-Except for `alt`, all other options are necessary, especially the `width` and `height`, which are related to user experience and web page loading performance. The above section "[Size](#size)" also mentions this.
-
-Starting from _Chirpy v5.0.0_, the attributes `height` and `width` can be abbreviated: `height` → `h`, `width` → `w`. In addition, the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.
+Note that the [`img_path`](#image-path) can also be passed to the preview image, that is, when it has been set, the  attribute `path` only needs the image file name.

 For simple use, you can also just use `image` to define the path.

 ```yml
+---
 image: /path/to/image
+---
 ```

+### LQIP
+
+For preview images:
+
+```yaml
+---
+image:
+  lqip: /path/to/lqip-file # or base64 URI
+---
+```
+
+> You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
+
+
+For normal images:
+
+```markdown
+![Image description](/path/to/image){: lqip="/path/to/lqip-file" }
+```
+{: .nolineno }
+
 ## Pinned Posts

 You can pin one or more posts to the top of the home page, and the fixed posts are sorted in reverse order according to their release date. Enable by:
@@ -357,6 +386,24 @@ If you want to display the **Liquid** snippet, surround the liquid code with `{%

 Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the post's YAML block.

+## Videos
+
+You can embed a video with the following syntax:
+
+```liquid
+{% include embed/{Platform}.html id='{ID}' %}
+```
+Where `Platform` is the lowercase of the platform name, and `ID` is the video ID.
+
+The following table shows how to get the two parameters we need in a given video URL, and you can also know the currently supported video platforms.
+
+| Video URL                                                                                          | Platform  | ID            |
+|----------------------------------------------------------------------------------------------------|-----------|:--------------|
+| [https://www.**youtube**.com/watch?v=**H-B46URT4mg**](https://www.youtube.com/watch?v=H-B46URT4mg) | `youtube` | `H-B46URT4mg` |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`  | `1634779211`  |
+
+
+
 ## Learn More

 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).
--- a/_posts/2019-08-09-getting-started.md
+++ b/_posts/2019-08-09-getting-started.md
@@ -31,7 +31,7 @@ Create a new repository from the [**Chirpy Starter**][use-starter] and name it `
 And then execute:

 ```console
-$ bash tools/init.sh
+$ bash tools/init
 ```

 > If you don't want to deploy your site on GitHub Pages, append option `--no-gh` at the end of the above command.
@@ -39,15 +39,11 @@ $ bash tools/init.sh

 The above command will:

-1. Removes some files or directories from your repository:
-    - `.travis.yml`{: .filepath}
-    - files under `_posts`{: .filepath}
+1. Remove the files in `_posts`{: .filepath} from your repository.

 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`{: .filepath}.
-
-4. Creates a new commit to save the changes automatically.
+3. Create a new commit to save the changes automatically.

 ### Installing Dependencies

@@ -70,9 +66,9 @@ Update the variables of `_config.yml`{: .filepath} as needed. Some of them are t

 ### Customizing Stylesheet

-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.
+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 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.
+Starting with version `4.1.0`, if you want to overwrite the SASS variables defined in `_sass/addon/variables.scss`{: .filepath}, copy the main sass file `_sass/jekyll-theme-chirpy.scss`{: .filepath} into the `_sass`{: .filepath} directory in your site's source, then create a new file `_sass/variables-hook.scss`{: .filepath} and assign new value.

 ### Customing Static Assets

@@ -171,6 +167,5 @@ The merge is likely to conflict with your local modifications. Please be patient
 [starter]: https://github.com/cotes2020/chirpy-starter
 [use-starter]: https://github.com/cotes2020/chirpy-starter/generate
 [workflow]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/.github/workflows/pages-deploy.yml.hook
-[chirpy-4.1.0]: https://github.com/cotes2020/jekyll-theme-chirpy/releases/tag/v4.1.0
 [pages-workflow-src]: https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow
 [latest-tag]: https://github.com/cotes2020/jekyll-theme-chirpy/tags
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -83,6 +83,46 @@ a {
 img {
  max-width: 100%;
  height: auto;
+
+  &[data-src] {
+    &.lazyloaded {
+      -webkit-animation: fade-in 0.4s ease-in;
+      animation: fade-in 0.4s ease-in;
+    }
+
+    &[data-lqip="true"] {
+      &.lazyload,
+      &.lazyloading {
+        -webkit-filter: blur(20px);
+        filter: blur(20px);
+      }
+    }
+
+    &:not([data-lqip="true"]) {
+      &.lazyload,
+      &.lazyloading {
+        background: var(--img-bg);
+      }
+    }
+
+    &.shadow {
+      -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+      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;
+  }
+
+  @-webkit-keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
 }

 blockquote {
@@ -91,29 +131,28 @@ blockquote {
  color: var(--blockquote-text-color);

  &[class^="prompt-"] {
-    display: flex;
    border-left: 0;
-    border-radius: 6px;
-    padding: 1rem;
+    padding: 1rem 1rem 1rem 3rem;
    color: var(--prompt-text-color);

+    @extend %rounded;
+
    &::before {
-      font-family: "Font Awesome 5 Free";
      text-align: center;
      width: 1.25rem;
-      margin-right: 0.75rem;
+      position: absolute;
+      left: 2.5rem;
+      margin-top: 0.4rem;
+      text-rendering: auto;
+      -webkit-font-smoothing: antialiased;
    }

-    > div {
-      max-width: calc(100% - 2rem);
-
-      > :last-child {
-        margin-bottom: 0;
-      }
+    > p:last-child {
+      margin-bottom: 0;
    }
  }

-  @include prompt("tip", "\f0eb", 400);
+  @include prompt("tip", "\f0eb", "regular");
  @include prompt("info", "\f06a");
  @include prompt("warning", "\f06a");
  @include prompt("danger", "\f071");
@@ -180,43 +219,6 @@ i { /* fontawesome icons */
  }
 }

-@-webkit-keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-img[data-src] {
-  margin: 0.5rem 0;
-
-  &[data-loaded="true"] {
-    -webkit-animation: fade-in linear 0.5s;
-    animation: fade-in linear 0.5s;
-  }
-
-  &.left {
-    float: left;
-    margin: 0.75rem 1rem 1rem 0;
-  }
-
-  &.right {
-    float: right;
-    margin: 0.75rem 0 1rem 1rem;
-  }
-
-  &.shadow {
-    -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-    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 --- */

 .access {
@@ -397,26 +399,14 @@ img[data-src] {
    margin-bottom: 1.5rem;
  }

-  a {
-    &.img-link {
-      @extend %no-cursor;
-    }
-
-    /* created by `_includes/img-extra.html` */
-    &.popup {
-      cursor: zoom-in;
-
-      > img[data-src]:not(.normal):not(.left):not(.right) {
+  p {
+    > img[data-src],
+    > a.popup {
+      &:not(.normal):not(.left):not(.right) {
        @include align-center;
      }
    }
-
-    &:hover {
-      code {
-        @extend %link-hover;
-      }
-    }
-  } /* a */
+  }
 }

 .pageviews .fa-spinner {
@@ -448,6 +438,14 @@ img[data-src] {
  overflow-wrap: break-word;

  a {
+    &.popup {
+      @extend %no-cursor;
+      @extend %img-caption;
+      @include mt-mb(0.5rem);
+
+      cursor: zoom-in;
+    }
+
    &:not(.img-link) {
      @extend %link-underline;

@@ -455,10 +453,6 @@ img[data-src] {
        @extend %link-hover;
      }
    }
-
-    &.img-link {
-      @extend %img-caption;
-    }
  }

  ol,
@@ -544,6 +538,58 @@ img[data-src] {
  }
 }

+.rounded-10 {
+  border-radius: 10px !important;
+}
+
+.img-link {
+  color: transparent;
+  display: inline-flex;
+  overflow: hidden;
+}
+
+.shimmer {
+  overflow: hidden;
+  position: relative;
+  background: var(--img-bg);
+
+  &::before {
+    content: "";
+    position: absolute;
+    background: var(--shimmer-bg);
+    height: 100%;
+    width: 100%;
+    -webkit-animation: shimmer 1s infinite;
+    animation: shimmer 1s infinite;
+  }
+
+  @-webkit-keyframes shimmer {
+    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+  }
+
+  @keyframes shimmer {
+    0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
+    100% { -webkit-transform: translateX(100%); transform: translateX(100%); }
+  }
+}
+
+.embed-video {
+  width: 100%;
+  height: 100%;
+  margin-bottom: 1rem;
+
+  @extend %rounded;
+
+  &.youtube {
+    aspect-ratio: 16 / 9;
+  }
+
+  &.twitch {
+    aspect-ratio: 310 / 189;
+  }
+}
+
 /* --- buttons --- */
 .btn-lang {
  border: 1px solid !important;
@@ -613,6 +659,16 @@ img[data-src] {
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }

+.left {
+  float: left;
+  margin: 0.75rem 1rem 1rem 0 !important;
+}
+
+.right {
+  float: right;
+  margin: 0.75rem 0 1rem 1rem !important;
+}
+
 /* --- Overriding --- */

 /* magnific-popup */
@@ -754,7 +810,7 @@ $sidebar-display: "sidebar-display";
      &:last-child {
        a {
          position: relative;
-          left: $cursor-width / 2;
+          left: calc($cursor-width / 2);
          width: 100%;
        }

@@ -780,7 +836,7 @@ $sidebar-display: "sidebar-display";

    @for $i from 1 through $tab-count {
      $offset: $tab-count - $i;
-      $top: -$offset * $tab-height + ($tab-height - $tab-cursor-height) / 2;
+      $top: (-$offset * $tab-height) + (($tab-height - $tab-cursor-height) * 0.5);

      @if $i < $tab-count {
        > li.active:nth-child(#{$i}),
@@ -1193,6 +1249,7 @@ $sidebar-display: "sidebar-display";

    div.d-flex {
      padding: 1.5rem 0;
+      line-height: 1.65;
      flex-wrap: wrap;
      justify-content: space-around !important;
    }
@@ -1217,11 +1274,14 @@ $sidebar-display: "sidebar-display";

    .post-content {
      > blockquote[class^="prompt-"] {
-        @include pl-pr(1.25rem);
        @include ml-mr(-1.25rem);

        border-radius: 0;
        max-width: none;
+
+        &::before {
+          left: 1rem;
+        }
      }
    }
  }
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -90,6 +90,10 @@
  font-style: normal;
 }

+%rounded {
+  border-radius: 6px;
+}
+
 %img-caption {
  + em {
    display: block;
@@ -114,6 +118,11 @@
  text-decoration: none;
 }

+@mixin mt-mb($value) {
+  margin-top: $value;
+  margin-bottom: $value;
+}
+
@mixin ml-mr($value) {
  margin-left: $value;
  margin-right: $value;
@@ -141,14 +150,14 @@
  transform: translateX(-50%);
 }

-@mixin prompt($type, $fw-icon, $icon-weight: 900) {
+@mixin prompt($type, $fa-content, $fa-style: "solid") {
  &.prompt-#{$type} {
    background-color: var(--prompt-#{$type}-bg);

    &::before {
-      content: $fw-icon;
+      content: $fa-content;
      color: var(--prompt-#{$type}-icon-color);
-      font-weight: $icon-weight;
+      font: var(--fa-font-#{$fa-style});
    }
  }
 }
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -29,18 +29,12 @@ html {
  }
 }

-/* -- Codes Snippet -- */
-
-$code-radius: 6px;
+/* -- code snippets -- */

 %code-snippet-bg {
  background: var(--highlight-bg-color);
 }

-%code-snippet-radius {
-  border-radius: $code-radius;
-}
-
 %code-snippet-padding {
  padding-left: 1rem;
  padding-right: 1.5rem;
@@ -48,7 +42,7 @@ $code-radius: 6px;

 .highlighter-rouge {
  @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
+  @extend %rounded;

  color: var(--highlighter-rouge-color);
  margin-top: 0.5rem;
@@ -56,7 +50,7 @@ $code-radius: 6px;
 }

 .highlight {
-  @extend %code-snippet-radius;
+  @extend %rounded;
  @extend %code-snippet-bg;

  @at-root figure#{&} {
@@ -72,6 +66,13 @@ $code-radius: 6px;
    font-size: $code-font-size;
    line-height: 1.4rem;
    word-wrap: normal; /* Fixed Safari overflow-x */
+
+    /* set the dollar sign to non-selectable */
+    >.gp:first-child {
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      user-select: none;
+    }
  }

  table {
@@ -91,13 +92,6 @@ $code-radius: 6px;
    -o-user-select: none;
    user-select: none;
  }
-
-  /* set the dollar sign to non-selectable */
-  .gp {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-  }
 } /* .highlight */

 code {
@@ -173,8 +167,6 @@ div {

  $code-header-height: 2.25rem;

-  border-top-left-radius: $code-radius;
-  border-top-right-radius: $code-radius;
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -226,9 +218,9 @@ div {
  /* clipboard */
  button {
    @extend %cursor-pointer;
+    @extend %rounded;

    border: 1px solid transparent;
-    border-radius: $code-radius;
    height: $code-header-height;
    width: $code-header-height;
    padding: 0;
--- a/_sass/colors/dark-typography.scss
+++ b/_sass/colors/dark-typography.scss
@@ -26,6 +26,14 @@
  --label-color: rgb(108, 117, 125);
  --checkbox-color: rgb(118, 120, 121);
  --checkbox-checked-color: var(--link-color);
+  --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
+  --shimmer-bg:
+    linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(58, 55, 55, 0.4) 50%,
+      rgba(255, 255, 255, 0) 100%
+    );

  /* Sidebar */
  --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%);
@@ -65,7 +73,6 @@
  --card-bg: rgb(39, 40, 43);
  --card-border-color: rgb(53, 53, 60);
  --card-box-shadow: var(--main-bg);
-  --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%);
  --kbd-wrap-color: #6a6a6a;
  --kbd-text-color: #d3d3d3;
  --kbd-bg-color: #242424;
@@ -96,8 +103,14 @@
  --timeline-year-dot-color: var(--timeline-color);

  .post img[data-src] {
-    -webkit-filter: brightness(95%);
-    filter: brightness(95%);
+    &.lazyloaded {
+      -webkit-filter: brightness(95%);
+      filter: brightness(95%);
+    }
+  }
+
+  .light {
+    display: none;
  }

  hr {
--- a/_sass/colors/light-typography.scss
+++ b/_sass/colors/light-typography.scss
@@ -24,6 +24,14 @@
  --btn-box-shadow: #eaeaea;
  --checkbox-color: #c5c5c5;
  --checkbox-checked-color: #07a8f7;
+  --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
+  --shimmer-bg:
+    linear-gradient(
+      90deg,
+      rgba(250, 250, 250, 0) 0%,
+      rgba(232, 230, 230, 1) 50%,
+      rgba(250, 250, 250, 0) 100%
+    );

  /* Sidebar */
  --sidebar-bg: #eeeeee;
@@ -64,7 +72,6 @@
  --tb-odd-bg: #fbfcfd;
  --tb-border-color: #eaeaea;
  --dash-color: silver;
-  --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%);
  --kbd-wrap-color: #bdbdbd;
  --kbd-text-color: var(--text-color);
  --kbd-bg-color: white;
@@ -82,6 +89,10 @@
    --link-underline-color: rgb(219, 216, 216);
  }

+  .dark {
+    display: none;
+  }
+
  /* Categories */
  --categories-hover-bg: var(--btn-border-color);
  --categories-icon-hover-color: darkslategray;
--- a/_sass/jekyll-theme-chirpy.scss
+++ b/_sass/jekyll-theme-chirpy.scss
@@ -1,7 +1,7 @@
 /*!
 * The styles for Jekyll theme Chirpy
 *
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -26,12 +26,30 @@
  color: var(--text-color);
 }

-img.preview-img {
+%preview-margin {
  margin: 0;
-  border-radius: 6px;
+}

-  &.bg[data-loaded="true"] {
-    background: var(--preview-img-bg);
+.preview-img {
+  @include align-center;
+  @extend %preview-margin;
+  @extend %rounded;
+
+  max-width: 100%;
+
+  &:not(.no-bg) {
+    img.lazyloaded {
+      background: var(--img-bg);
+    }
+  }
+
+  img {
+    aspect-ratio: 40 / 21;
+    -o-object-fit: cover;
+    object-fit: cover;
+
+    @extend %preview-margin;
+    @extend %rounded;
  }
 }

--- a/assets/feed.xml
+++ b/assets/feed.xml
@@ -15,7 +15,7 @@ permalink: /feed.xml
    <uri>{{ "/" | absolute_url }}</uri>
  </author>
  <link rel="self" type="application/atom+xml" href="{{ page.url | absolute_url }}"/>
-  <link rel="alternate" type="text/html" hreflang="{{ site.lang }}"
+  <link rel="alternate" type="text/html" hreflang="{{ site.alt_lang | default: site.lang }}"
    href="{{ '/' | absolute_url }}"/>
  <generator uri="https://jekyllrb.com/" version="{{ jekyll.version }}">Jekyll</generator>
  <rights> © {{ 'now' | date: '%Y' }} {{ site.social.name }} </rights>
--- a/assets/js/dist/categories.min.js
+++ b/assets/js/dist/categories.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/commons.min.js
+++ b/assets/js/dist/commons.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/home.min.js
+++ b/assets/js/dist/home.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/misc.min.js
+++ b/assets/js/dist/misc.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/js/dist/page.min.js
+++ b/assets/js/dist/page.min.js
--- a/assets/js/dist/post.min.js
+++ b/assets/js/dist/post.min.js
--- a/assets/js/dist/pvreport.min.js
+++ b/assets/js/dist/pvreport.min.js
@@ -1,5 +1,5 @@
 /*!
- * Chirpy v5.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * Chirpy v5.5.0 (https://github.com/cotes2020/jekyll-theme-chirpy/)
 * © 2019 Cotes Chung
 * MIT Licensed
 */
--- a/assets/lib
+++ b/assets/lib
--- a/jekyll-theme-chirpy.gemspec
+++ b/jekyll-theme-chirpy.gemspec
@@ -2,7 +2,7 @@

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

@@ -23,9 +23,9 @@ Gem::Specification.new do |spec|
    "plugin_type"       => "theme"
  }

-  spec.required_ruby_version = ">= 2.5"
+  spec.required_ruby_version = ">= 2.6"

-  spec.add_runtime_dependency "jekyll", "~> 4.1"
+  spec.add_runtime_dependency "jekyll", "~> 4.3"
  spec.add_runtime_dependency "jekyll-paginate", "~> 1.1"
  spec.add_runtime_dependency "jekyll-redirect-from", "~> 0.16"
  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.7"
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jekyll-theme-chirpy",
-  "version": "5.3.2",
+  "version": "5.5.0",
  "description": "A minimal, responsive, and powerful Jekyll theme for presenting professional writing.",
  "repository": {
    "type": "git",
--- a/tools/init.sh
+++ b/tools/init.sh
@@ -20,7 +20,7 @@ help() {

 check_status() {
  if [[ -n $(git status . -s) ]]; then
-    echo "Error: Commit unstaged files first, and then run this tool againt."
+    echo "Error: Commit unstaged files first, and then run this tool again."
    exit -1
  fi
 }
@@ -46,43 +46,32 @@ check_init() {
  fi
 }

+checkout_latest_tag() {
+  tag=$(git describe --tags $(git rev-list --tags --max-count=1))
+  git reset --hard "$tag"
+}
+
 init_files() {
  if $_no_gh; then
    rm -rf .github
  else
    ## Change the files of `.github`
-
    mv .github/workflows/$ACTIONS_WORKFLOW.hook .
    rm -rf .github
    mkdir -p .github/workflows
    mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}

-    ## Ensure the gh-actions trigger branch
-
-    _workflow=".github/workflows/${ACTIONS_WORKFLOW}"
-    _default_branch="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
-    _lineno="$(sed -n "/branches:/=" "$_workflow")"
-
-    sed -i.$TEMP_SUFFIX "$((_lineno + 1))s/- .*/- ${_default_branch}/" "$_workflow"
-    rm -f "$_workflow.$TEMP_SUFFIX"
-
    ## Cleanup image settings in site config
    sed -i.$TEMP_SUFFIX "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
    rm -f _config.yml.$TEMP_SUFFIX
-
  fi

-  # trace the gem lockfile on user-end
-  sed -i.$TEMP_SUFFIX "/Gemfile.lock/d" .gitignore
-  rm -f ".gitignore.$TEMP_SUFFIX"
-
  # remove the other fies
-  rm -f .travis.yml
  rm -rf _posts/*

  # save changes
  git add -A
-  git commit -m "[Automation] Initialize the environment." -q
+  git commit -m "chore: initialize the environment" -q

  echo "[INFO] Initialization successful!"
 }
@@ -112,4 +101,6 @@ while (($#)); do
  esac
 done

+checkout_latest_tag
+
 init_files
--- a/tools/release.sh
+++ b/tools/release.sh
--- a/tools/run.sh
+++ b/tools/run.sh
--- a/tools/test.sh
+++ b/tools/test.sh
Author	SHA1	Message	Date
Cotes Chung	54ba8befbe	Merge branch 'master' into production	2023-01-30 05:04:12 +08:00
Cotes Chung	4b6722124d	chore(release): 5.5.0	2023-01-30 05:04:10 +08:00
Cotes Chung	babb4a0c5a	fix: prompt with nested blockquotes renders incorrectly (#846 ) Resolves #846	2023-01-30 04:58:30 +08:00
Cotes Chung	511df11546	refactor: optimize tab cursor position calculation	2023-01-30 03:08:35 +08:00
Cotes Chung	dd339aea2b	chore: ignore gem lock file in user-end	2023-01-30 03:01:02 +08:00
Cotes Chung	269506b647	chore(deps): liquid(v4.0.4) is compatible with ruby 3.2 (#854 ) See: https://github.com/jekyll/jekyll/issues/9231	2023-01-18 23:13:06 +08:00
Abdullah Alattas	765af53b77	feat(i18n): add Arabic translation (#857 )	2023-01-18 22:24:13 +08:00
Cotes Chung	41ed331456	fix: copy command line incomplete(`.gp` part)	2023-01-13 03:52:32 +08:00
Eduardo	9a011e14d6	feat(i18n): add Italian translation (#850 )	2023-01-13 03:52:29 +08:00
Cotes Chung	5f628767e0	chore(bundler): deprecate `:install_if` option in Gemfile	2023-01-13 02:34:38 +08:00
Cotes Chung	808d3743e5	chore(deps): lock `jekyll-sass-converter` to `v2.x` on Linux-musl (#829 ) Also, make the division formula backward compatible with `jekyll-sass-converter 2.x` (#848, #849) Ref: https://github.com/jekyll/jekyll-sass-converter#migrate-from-2x-to-3x	2023-01-12 05:30:24 +08:00
Cotes Chung	e8d20bf7b0	docs: update tutorials - remove outdated content - append instructions for SASS overrides (#827)	2023-01-12 05:12:04 +08:00
Kalle Lahtinen	d6d03183ea	feat(i18n): add Finnish translations (#843 )	2023-01-12 05:12:03 +08:00
Cotes Chung	bd374dd383	fix: post's image would cover the PWA update alert	2023-01-12 05:12:03 +08:00
Cotes Chung	f2d285844e	fix: correct encoding of spaces in share URLs (#835 ) Resolves #835	2023-01-06 21:26:43 +08:00
MatyIRG	98d48f5da4	feat(i18n): add Czech language (#833 )	2023-01-03 00:54:43 +08:00
Jarda Beran	7754a71ff9	chore(editorconfig): keep trailing spaces in Markdown (#830 )	2023-01-03 00:53:09 +08:00
Cotes Chung	5ea3d0f496	Merge branch 'master' into production	2022-12-28 01:28:12 +08:00
Cotes Chung	7887b5ab62	chore(release): 5.4.0	2022-12-28 01:28:09 +08:00
Cotes Chung	937b22316a	docs(readme): update feature list	2022-12-28 01:24:55 +08:00
Cotes Chung	8440d42984	docs: add tutorial and example for new features	2022-12-28 01:24:31 +08:00
Cotes Chung	6fa1777eb0	chore(tools): checkout latest tag on initialization	2022-12-28 01:13:35 +08:00
Cotes Chung	5a191e79af	chore: remove extension from tools	2022-12-28 01:10:27 +08:00
Cotes Chung	72700be7dd	chore(ci): fix workflow trigger conditions	2022-12-27 23:58:17 +08:00
Cotes Chung	d7bcb40cde	refactor: update deprecated syntax for SASS division	2022-12-27 21:50:21 +08:00
Cotes Chung	09e4ad245b	chore(deps): update gem spec list - Jekyll 4.3.0 introduced `webrick` for Ruby 3.x - Jekyll's dependency `nokogiri` does not yet support Ruby 3.2. See: https://github.com/sparklemotion/nokogiri/issues/2740/	2022-12-27 21:47:09 +08:00
Cotes Chung	09f9305d4c	chore: hide blur edge of LQIP images	2022-12-27 21:41:45 +08:00
Cotes Chung	7a3d743419	chore: update footer meta information	2022-12-25 23:48:37 +08:00
Ken Dale	d2190c726f	feat: add `rel="me"` to Mastodon sidebar contact links for verification (#807 ) This will enable verification with Mastodon by including the `rel="me"` attribute. https://docs.joinmastodon.org/user/profile/#verification Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com>	2022-12-25 03:31:11 +08:00
Cotes Chung	8e73a91d25	test(ci): drop some old ruby versions	2022-12-25 00:10:15 +08:00
Cotes Chung	8f2b42b1b3	test(ci): correct the patterns to match the SCSS files	2022-12-25 00:00:54 +08:00
Cotes Chung	e01eb8af14	refactor: unify the border radius of blocks scope: code blocks, prompts, images, and videos	2022-12-25 00:00:08 +08:00
Cotes Chung	9306c7b39e	feat: support dark and light mode images (#481 )	2022-12-25 00:00:08 +08:00
Cotes Chung	ed6dc539ef	feat: add embed video support	2022-12-25 00:00:07 +08:00
Cotes Chung	8de1abda6b	fix: `og:image` will be incorrect if the image uses a cross-domain URL	2022-12-25 00:00:07 +08:00
Cotes Chung	4b6ccbcbcc	feat: set preview image ratio to 1.91 : 1	2022-12-25 00:00:07 +08:00
Cotes Chung	ab16fdc7fc	feat: add shimmer background when image loads	2022-12-24 23:51:47 +08:00
Cotes Chung	bffaf6374f	feat: support LQIP for images	2022-12-15 02:27:12 +08:00
Cotes Chung	ca41c7ebff	chore(deps): use `lazysizes` to load images	2022-12-09 07:36:06 +08:00
Cotes Chung	7651d2851b	fix: `hreflang` tag attribute of feed misses `site.alt_lang`	2022-12-08 07:01:51 +08:00
Cotes Chung	5561cd86b5	refactor(icons): upgrade font-awesome syntax to version 6	2022-12-08 06:16:22 +08:00
Cotes Chung	7fb0ee0bed	perf(cdn): optimize cache policy for static assets	2022-12-08 06:16:20 +08:00
Cotes Chung	7efd2f8aa2	fix: spaces in post title are encoded when sharing Reproducible on iOS Safari	2022-12-08 01:05:17 +08:00
Cotes Chung	ec98f07aca	fix: refactoring error when the image URL contains parameters	2022-12-08 00:40:12 +08:00
Cotes Chung	e7426ec67e	chore: update image source	2022-12-05 03:50:51 +08:00
Cotes Chung	5fc428353c	build(cd): migrate CD to GitHub	2022-12-05 00:51:38 +08:00
Cotes Chung	9de95bf089	build: reduce unnecessary builds	2022-12-05 00:41:13 +08:00
Cotes Chung	fa9879b5f1	chore: improve init-tool - cleanup unused code of init-tool - use conventional commits	2022-12-05 00:41:13 +08:00
MrEddX	7fd15a285f	chore(i18n): update Bulgarian translation (#777 )	2022-12-02 22:54:52 +08:00
Bornunique911	8734d1c1a3	chore: correct typo in `tools/init.sh` (#773 )	2022-12-02 22:50:38 +08:00