chore(release): 6.4.0

- Add configuration field `social_preview_image` that sets the site-wide default social preview image.  

   For pages that do not have `page.image` set in font matter, the seo tag will use the image specified by `site.social_preview_image` as the Open Graph image.

- Refactored the generation of image URLs to reduce redundant code and enhance fault tolerance for missing or repeated slash `/` when defining image paths.

.browserslistrc

@@ -1,5 +0,0 @@
-# https://github.com/browserslist/browserslist#browserslistrc
-
-last 2 versions
-> 0.2%
-not dead

.commitlintrc.json

@@ -1,8 +0,0 @@
-{
-  "rules": {
-    "body-max-line-length": [
-      0,
-      "always"
-    ]
-  }
-}

.github/dependabot.yml

@@ -7,7 +7,7 @@ updates:
       bundler:
         dependency-type: "production"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
   - package-ecosystem: "npm"
     directory: "/"
     versioning-strategy: increase
@@ -15,7 +15,7 @@ updates:
       npm:
         dependency-type: "development"
     schedule:
-      interval: "weekly"
+      interval: "monthly"
   - package-ecosystem: "github-actions"
     directory: "/"
     groups:
@@ -23,4 +23,4 @@ updates:
         update-types:
           - "major"
     schedule:
-      interval: "weekly"
+      interval: "monthly"

.github/workflows/ci.yml

@@ -21,7 +21,7 @@ jobs:
 
     strategy:
       matrix:
-        ruby: [2.7, 3]
+        ruby: ["3.0", "3.1", "3.2"]
 
     steps:
       - name: Checkout
@@ -36,7 +36,7 @@ jobs:
           bundler-cache: true
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
 
       - name: Build Assets
         run: npm i && npm run build

.github/workflows/codeql.yml

@@ -29,16 +29,16 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
         with:
           languages: "${{ matrix.language }}"
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
         with:
           category: "/language:${{ matrix.language }}"

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

@@ -42,7 +42,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3
+          ruby-version: 3.2
           bundler-cache: true
 
       - name: Build site

.github/workflows/stale.yml

@@ -8,23 +8,25 @@ permissions:
   issues: write
   pull-requests: write
 
+env:
+  STALE_LABEL: stale
+  EXEMPT_LABELS: "pending,planning,in progress"
+  MESSAGE: >
+    This conversation has been automatically marked as stale because it has not had recent activity.
+    It will be closed if no further activity occurs.
+    Thank you for your contributions.
+
 jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/stale@v8
+      - uses: actions/stale@v9
         with:
           days-before-stale: 30
           days-before-close: 1
-          stale-issue-label: stale
+          stale-issue-label: ${{ env.STALE_LABEL }}
-          exempt-issue-labels: pending
+          exempt-issue-labels: ${{ env.EXEMPT_LABELS }}
-          stale-issue-message: >
+          stale-issue-message: ${{ env.MESSAGE }}
-            This issue has been automatically marked as stale because it has not had recent activity.
+          stale-pr-label: ${{ env.STALE_LABEL }}
-            It will be closed if no further activity occurs.
+          exempt-pr-labels: ${{ env.EXEMPT_LABELS }}
-            Thank you for your contributions.
+          stale-pr-message: ${{ env.MESSAGE }}
-          stale-pr-label: stale
-          exempt-pr-labels: pending
-          stale-pr-message: >
-            This PR has been automatically marked as stale because it has not had recent activity.
-            It will be closed if no further activity occurs.
-            Thank you for your contributions.

.github/workflows/style-lint.yml

@@ -20,6 +20,6 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
       - run: npm i
       - run: npm test

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "trailingComma": "none"
-}

.stylelintrc.json

@@ -1,23 +0,0 @@
-{
-  "extends": "stylelint-config-standard-scss",
-  "rules": {
-    "no-descending-specificity": null,
-    "shorthand-property-no-redundant-values": null,
-    "at-rule-no-vendor-prefix": null,
-    "property-no-vendor-prefix": null,
-    "selector-no-vendor-prefix": null,
-    "value-no-vendor-prefix": null,
-    "color-function-notation": "legacy",
-    "alpha-value-notation": "number",
-    "selector-not-notation": "simple",
-    "color-hex-length": "long",
-    "declaration-block-single-line-max-declarations": 3,
-    "scss/operator-no-newline-after": null,
-    "rule-empty-line-before": [
-      "always",
-      { "ignore": ["after-comment", "first-nested"] }
-    ],
-    "value-keyword-case": ["lower", { "ignoreProperties": ["/^\\$/"] }],
-    "media-feature-range-notation": "prefix"
-  }
-}

.versionrc.json

@@ -1,20 +0,0 @@
-{
-  "skip": {
-    "commit": true,
-    "tag": true
-  },
-  "types": [
-    {
-      "type": "feat",
-      "section": "Features"
-    },
-    {
-      "type": "fix",
-      "section": "Bug Fixes"
-    },
-    {
-      "type": "perf",
-      "section": "Improvements"
-    }
-  ]
-}

README.md

@@ -2,7 +2,7 @@
 
   # Chirpy Jekyll Theme
 
-  A minimal, responsive and feature-rich Jekyll theme for technical writing.
+  A minimal, responsive, and feature-rich Jekyll theme for technical writing.
 
   [![Gem Version](https://img.shields.io/gem/v/jekyll-theme-chirpy?color=brightgreen)][gem] 
   [![CI](https://github.com/cotes2020/jekyll-theme-chirpy/actions/workflows/ci.yml/badge.svg?branch=master&event=push)][ci] 
@@ -10,7 +10,7 @@
   [![GitHub license](https://img.shields.io/github/license/cotes2020/jekyll-theme-chirpy.svg)][license] 
   [![996.icu](https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg)](https://996.icu)
 
-  [**Live Demo →**][demo]
+  [**Live Demo** →][demo]
 
   [![Devices Mockup](https://chirpy-img.netlify.app/commons/devices-mockup.png)][demo]
 
@@ -18,10 +18,6 @@
 
 ## Features
 
-<details>
-  <summary>Click to expand/close details</summary>
-  &nbsp;
-
 - Dark / Light Theme Mode
 - Localized UI language
 - Pinned Posts on Home Page
@@ -41,8 +37,6 @@
 - Google Analytics
 - SEO & Performance Optimization
 
-</details>
-
 ## Documentation
 
 To learn how to use, develop, and upgrade the project, please refer to the [Wiki][wiki].
@@ -55,22 +49,18 @@ For details, see the "[Contributing Guidelines][contribute-guide]".
 
 ## Credits
 
-This project is mainly built with [Jekyll][jekyllrb] ecosystem,
+### Contributors
-[Bootstrap][bootstrap], [Font Awesome][icons], and some other [wonderful tools][lib].
-The avatar and favicon design come from [Clipart Max][image].
 
-Many thanks to the [contributors][contributors] who participated in the development
+Thanks to [all the contributors][contributors] involved in the development of the project!
-and to the folks who reported bugs or shared ideas.
 
-Last but not least, thanks to [JetBrains][jetbrains] for providing the _Open Source License_.
+[![all-contributors](https://contrib.rocks/image?repo=cotes2020/jekyll-theme-chirpy&columns=16)][contributors]
+<sub> —— Made with [contrib.rocks](https://contrib.rocks)</sub>
 
-## Sponsoring
+### Third-Party Assets
 
-If you like this project or have built something through it, please consider sponsoring it, and your support would be greatly appreciated.
+This project is built on the [Jekyll][jekyllrb] ecosystem and some [great libraries][lib], and is developed using [VS Code][vscode] as well as tools provided by [JetBrains][jetbrains] under a non-commercial open-source software license.
 
-[![Ko-fi](https://img.shields.io/badge/Support_Me_on_Ko--fi-ff5e5b?logo=ko-fi&logoColor=white)][ko-fi]&nbsp;
+The avatar and favicon for the project's website are from [ClipartMAX][clipartmax].
-[![Wechat Pay](https://img.shields.io/badge/Support_Me_on_WeChat-brightgreen?logo=wechat&logoColor=white)][donation]&nbsp;
-[![Alipay](https://img.shields.io/badge/Support_Me_on_Alipay-blue?logo=alipay&logoColor=white)][donation]
 
 ## License
 
@@ -81,14 +71,11 @@ This project is published under [MIT License][license].
 [codacy]: https://app.codacy.com/gh/cotes2020/jekyll-theme-chirpy/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade
 [license]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/LICENSE
 [jekyllrb]: https://jekyllrb.com/
-[bootstrap]: https://getbootstrap.com/
+[clipartmax]: https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/
-[icons]: https://fontawesome.com/
-[image]: https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/
 [demo]: https://cotes2020.github.io/chirpy-demo/
 [wiki]: https://github.com/cotes2020/jekyll-theme-chirpy/wiki
 [contribute-guide]: https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/docs/CONTRIBUTING.md
 [contributors]: https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors
 [lib]: https://github.com/cotes2020/chirpy-static-assets
+[vscode]: https://code.visualstudio.com/
 [jetbrains]: https://www.jetbrains.com/?from=jekyll-theme-chirpy
-[ko-fi]: https://ko-fi.com/coteschung/
-[donation]: https://sponsor.cotes.page/

_config.yml

@@ -75,6 +75,10 @@ img_cdn: "https://chirpy-img.netlify.app"
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"
 
+# The URL of the site-wide social preview image used in SEO `og:image` meta tag.
+# It can be overridden by a customized `page.image` in front matter.
+social_preview_image: # string, local or CORS resources
+
 # boolean type, the global switch for TOC in posts.
 toc: true
 

_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: Using the :THEME theme for :PLATFORM
+meta: Using the :THEME theme for :PLATFORM.
 
 not_found:
   statment: Sorry, we've misplaced that URL or it's pointing to something that doesn't exist.

_data/origin/cors.yml

@@ -23,17 +23,17 @@ bootstrap:
   js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.2/dist/tocbot.min.css
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.2/dist/tocbot.min.js
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.2/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.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@10.5.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js
 
 dayjs:
   js:

_data/share.yml

@@ -23,3 +23,16 @@ platforms:
   # - type: Weibo
   #   icon: "fab fa-weibo"
   #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #
+  # - type: Mastodon
+  #   icon: "fa-brands fa-mastodon"
+  #   # See: https://github.com/justinribeiro/share-to-mastodon#properties
+  #   instances:
+  #     - label: mastodon.social
+  #       link: "https://mastodon.social/"
+  #     - label: mastodon.online
+  #       link: "https://mastodon.online/"
+  #     - label: fosstodon.org
+  #       link: "https://fosstodon.org/"
+  #     - label: photog.social
+  #       link: "https://photog.social/"

_includes/embed/bilibili.html

@@ -0,0 +1,10 @@
+<iframe
+  class="embed-video bilibili"
+  loading="lazy"
+  src="https://player.bilibili.com/player.html?bvid={{ include.id }}"
+  scrolling="no"
+  border="0"
+  frameborder="no"
+  framespacing="0"
+  allowfullscreen="true"
+></iframe>

_includes/embed/twitch.html

@@ -1,5 +1,6 @@
 <iframe
   class="embed-video twitch"
+  loading="lazy"
   src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
   frameborder="0"
   allowfullscreen="true"

_includes/head.html

@@ -1,5 +1,3 @@
-<!-- The Head -->
-
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
@@ -11,29 +9,38 @@
     content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
   >
 
-  {% capture seo_tags %}
+  {%- capture seo_tags -%}
     {% seo title=false %}
-  {% endcapture %}
+  {%- endcapture -%}
+
+  <!-- Setup Open Graph image -->
 
   {% if page.image %}
-    {% assign img = page.image.path | default: page.image %}
+    {% assign src = page.image.path | default: page.image %}
 
-    {% unless img contains '://' %}
+    {% unless src contains '://' %}
-      {% assign img_path = page.img_path | append: '/' | append: img | replace: '//', '/' %}
+      {%- capture img_url -%}
-      {% capture target %}"{{ img | absolute_url }}"{% endcapture %}
+        {% include img-url.html src=src img_path=page.img_path %}
+      {%- endcapture -%}
 
-      {% if site.img_cdn contains '//' %}
+      {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
-        <!-- it's a cross-origin URL -->
+      {%- capture new_url -%}{{ img_url }}{%- endcapture -%}
-        {% 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 %}
+      {% assign seo_tags = seo_tags | replace: old, new %}
     {% endunless %}
+
+  {% elsif site.social_preview_image %}
+    {%- capture img_url -%}
+      {% include img-url.html src=site.social_preview_image %}
+    {%- endcapture -%}
+
+    {%- capture og_image -%}
+      <meta property="og:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {% assign old_meta_clip = '<meta name="twitter:card"' %}
+    {% assign new_meta_clip = og_image | append: old_meta_clip %}
+    {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
   {% endif %}
 
   {{ seo_tags }}

_includes/img-url.html

@@ -0,0 +1,24 @@
+{%- comment -%}
+  Generate image final URL based on `site.img_cdn`, `page.img_path`
+
+  Arguments:
+    src - basic image path, required
+    img_path - relative path of image, optional
+
+  Return:
+    image URL
+{%- endcomment -%}
+
+{% assign url = include.src %}
+
+{%- if url -%}
+  {%- comment -%} CND URL {%- endcomment -%}
+  {% assign prefix = site.img_cdn | default: '' | relative_url %}
+
+  {%- comment -%} Add page image path prefix {%- endcomment -%}
+  {% assign url = include.img_path | default: '' | append: '/' | append: url %}
+
+  {% assign url = prefix | append: '/' | append: url | replace: '///', '/' | replace: '//', '/' | replace: ':', ':/' %}
+{%- endif -%}
+
+{{- url -}}

_includes/post-sharing.html

@@ -1,23 +1,38 @@
 <!-- Post sharing snippet -->
 
 <div class="share-wrapper d-flex align-items-center">
-  <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
+  <span class="share-label text-muted">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign title = title | uri_escape %}
     {% assign url = page.url | absolute_url | url_encode %}
 
-    {% for share in site.data.share.platforms %}
+    {% for share in site.data.share.platforms -%}
+      {%- capture tooltip -%}
+        data-bs-toggle="tooltip" data-bs-placement="top" title="{{ share.type }}" aria-label="{{ share.type }}"
+      {%- endcapture -%}
+
+      {% if share.type == 'Mastodon' %}
+        <script defer type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/share-to-mastodon/+esm"></script>
+        <button class="btn text-start" {{ tooltip }}>
+          <share-to-mastodon
+            class="share-mastodon"
+            message="{{ title }}"
+            url="{{ url }}"
+            {%- if share.instances -%}
+              customInstanceList="{{ share.instances | jsonify | xml_escape }}"
+            {%- endif %}
+          >
+            <i class="fa-fw {{ share.icon }}"></i>
+          </share-to-mastodon>
+        </button>
+
+        {% continue %}
+      {% endif %}
+
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
-      <a
+
-        href="{{ link }}"
+      <a href="{{ link }}" target="_blank" rel="noopener" {{ tooltip }}>
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        title="{{ share.type }}"
-        target="_blank"
-        rel="noopener"
-        aria-label="{{ share.type }}"
-      >
         <i class="fa-fw {{ share.icon }}"></i>
       </a>
     {% endfor %}
@@ -31,7 +46,7 @@
       title="{{ site.data.locales[include.lang].post.button.share_link.title }}"
       data-title-succeed="{{ site.data.locales[include.lang].post.button.share_link.succeed }}"
     >
-      <i class="fa-fw fas fa-link pe-none"></i>
+      <i class="fa-fw fas fa-link pe-none fs-6"></i>
     </button>
   </span>
 </div>

_includes/refactor-content.html

@@ -48,23 +48,6 @@
   {% assign _img_content = null %}
   {% 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 %}
@@ -113,6 +96,12 @@
     {% assign _final_src = null %}
     {% assign _lazyload = true %}
 
+    {%- capture _img_url -%}
+      {% include img-url.html src=_src img_path=page.img_path %}
+    {%- endcapture -%}
+
+    {% assign _path_prefix = _img_url | remove: _src %}
+
     {% unless _src contains '//' %}
       {% assign _final_src = _path_prefix | append: _src %}
       {% assign _src_alt = 'src="' | append: _path_prefix %}

_includes/sidebar.html

@@ -3,18 +3,12 @@
 <aside aria-label="Sidebar" id="sidebar" class="d-flex flex-column align-items-end">
   <header class="profile-wrapper">
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
-      {% if site.avatar != empty and site.avatar %}
+      {%- if site.avatar != empty and site.avatar -%}
-        {% capture avatar_url %}
+        {%- capture avatar_url -%}
-            {% if site.avatar contains '://' %}
+          {% include img-url.html src=site.avatar %}
-              {{ site.avatar }}
+        {%- endcapture -%}
-            {% elsif site.img_cdn != empty and site.img_cdn %}
+        <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
-              {{ site.avatar | prepend: site.img_cdn }}
+      {%- endif -%}
-            {% else %}
-              {{ site.avatar | relative_url }}
-            {% endif %}
-          {% endcapture %}
-        <img src="{{ avatar_url | strip }}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
-      {% endif %}
     </a>
 
     <h1 class="site-title">

_includes/update-list.html

@@ -1,16 +1,17 @@
-<!-- Get the last 5 posts from lastmod list. -->
+<!-- Get 5 last posted/updated posts -->
 
 {% assign MAX_SIZE = 5 %}
 
 {% assign all_list = '' | split: '' %}
 
 {% for post in site.posts %}
-  {% if post.last_modified_at and post.last_modified_at != post.date %}
+  {% assign datetime = post.last_modified_at | default: post.date %}
-    {% capture elem %}
+
-      {{- post.last_modified_at | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
+  {% capture elem %}
-    {% endcapture %}
+    {{- datetime | date: "%Y%m%d%H%M%S" -}}::{{- forloop.index0 -}}
-    {% assign all_list = all_list | push: elem %}
+  {% endcapture %}
-  {% endif %}
+
+  {% assign all_list = all_list | push: elem %}
 {% endfor %}
 
 {% assign all_list = all_list | sort | reverse %}

_layouts/post.html

@@ -61,7 +61,11 @@ tail_includes:
           <em>
             {% if authors %}
               {% for author in authors %}
-                <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+                {% if site.data.authors[author].url -%}
+                  <a href="{{ site.data.authors[author].url }}">{{ site.data.authors[author].name }}</a>
+                {%- else -%}
+                  {{ site.data.authors[author].name }}
+                {%- endif %}
                 {% unless forloop.last %}{{ '</em>, <em>' }}{% endunless %}
               {% endfor %}
             {% else %}

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

@@ -424,12 +424,11 @@ 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            |
+| 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.**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`  |
+| [https://www.**twitch**.tv/videos/**1634779211**](https://www.twitch.tv/videos/1634779211)         | `twitch`   | `1634779211`   |
-
+| [https://www.**bilibili**.com/video/**BV1Q44y1B7Wf**](https://www.bilibili.com/video/BV1Q44y1B7Wf) | `bilibili` | `BV1Q44y1B7Wf` |
-
 
 ## Learn More
 

_sass/addon/commons.scss

@@ -85,6 +85,11 @@ blockquote {
   border-left: 5px solid var(--blockquote-border-color);
   padding-left: 1rem;
   color: var(--blockquote-text-color);
+  display: flex;
+
+  > p:last-child {
+    margin-bottom: 0;
+  }
 
   &[class^='prompt-'] {
     border-left: 0;
@@ -103,10 +108,6 @@ blockquote {
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
     }
-
-    > p:last-child {
-      margin-bottom: 0;
-    }
   }
 
   @include prompt('tip', '\f0eb', 'regular');
@@ -324,6 +325,10 @@ sup {
     object-fit: cover;
 
     @extend %rounded;
+
+    @at-root #post-list & {
+      width: 100%;
+    }
   }
 }
 
@@ -547,7 +552,8 @@ main {
 
   @extend %rounded;
 
-  &.youtube {
+  &.youtube,
+  &.bilibili {
     aspect-ratio: 16 / 9;
   }
 
@@ -636,12 +642,12 @@ main {
 
 .left {
   float: left;
-  margin: 0.75rem 1rem 1rem 0 !important;
+  margin: 0.75rem 1rem 1rem 0;
 }
 
 .right {
   float: right;
-  margin: 0.75rem 0 1rem 1rem !important;
+  margin: 0.75rem 0 1rem 1rem;
 }
 
 /* --- Overriding --- */

_sass/colors/typography-light.scss

@@ -63,7 +63,8 @@
 
   /* Posts */
   --toc-highlight: #0550ae;
-  --btn-share-hover-color: var(--link-color);
+  --btn-share-color: gray;
+  --btn-share-hover-color: #0d6efd;
   --card-bg: white;
   --card-hovor-bg: #e2e2e2;
   --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,

_sass/layout/post.scss

@@ -2,14 +2,6 @@
   Post-specific style
 */
 
-@mixin btn-sharing-color($light-color, $important: false) {
-  @if $important {
-    color: var(--btn-share-color, $light-color) !important;
-  } @else {
-    color: var(--btn-share-color, $light-color);
-  }
-}
-
 %btn-post-nav {
   width: 50%;
   position: relative;
@@ -72,11 +64,23 @@ h1 + .post-meta {
     -ms-user-select: none;
     user-select: none;
 
+    %icon-size {
+      font-size: 1.125rem;
+    }
+
     .share-icons {
-      font-size: 1.2rem;
+      display: flex;
+
+      i {
+        color: var(--btn-share-color);
+
+        @extend %icon-size;
+      }
 
       > * {
-        margin-left: 0.25rem;
+        @extend %icon-size;
+
+        margin-left: 0.5rem;
 
         &:hover {
           i {
@@ -86,44 +90,29 @@ h1 + .post-meta {
       }
 
       button {
-        position: relative;
-        bottom: 2px;
         padding: 0;
+        border: none;
+        line-height: inherit;
 
         @extend %cursor-pointer;
       }
-
-      a :hover {
-        text-decoration: none;
-      }
-
-      .fa-square-x-twitter {
-        @include btn-sharing-color(black);
-      }
-
-      .fa-facebook-square {
-        @include btn-sharing-color(rgb(66, 95, 156));
-      }
-
-      .fa-telegram {
-        @include btn-sharing-color(rgb(39, 159, 217));
-      }
-
-      .fa-linkedin {
-        @include btn-sharing-color(rgb(0, 119, 181));
-      }
-
-      .fa-weibo {
-        @include btn-sharing-color(rgb(229, 20, 43));
-      }
     } /* .share-icons */
-
-    .fas.fa-link {
-      @include btn-sharing-color(rgb(171, 171, 171));
-    }
   } /* .share-wrapper */
 }
 
+.share-mastodon {
+  /* See: https://github.com/justinribeiro/share-to-mastodon#properties */
+  --wc-stm-font-family: $font-family-base;
+  --wc-stm-dialog-background-color: var(--card-bg);
+  --wc-stm-form-button-border: 1px solid var(--btn-border-color);
+  --wc-stm-form-submit-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg);
+  --wc-stm-form-button-background-color-hover: #007bff;
+  --wc-stm-form-button-color-hover: white;
+
+  font-size: 1rem;
+}
+
 .post-tags {
   line-height: 2rem;
 

docs/CHANGELOG.md

@@ -2,6 +2,39 @@
 
 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.
 
+## [6.4.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.3.1...v6.4.0) (2024-01-10)
+
+### Features
+
+* add bilibili embed video support ([#1406](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1406)) ([4a2b89d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/4a2b89d0b698d672486349131a89025fa47afcb6))
+* add site-wide social preview image settings ([#1463](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1463)) ([241bb4d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/241bb4df7878cff7f82014df660874a1dcddba76))
+
+### Bug Fixes
+
+*  image float breaks quotes and prompts ([#1449](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1449)) ([ea2d238](https://github.com/cotes2020/jekyll-theme-chirpy/commit/ea2d238bd8adc018256862e05a5092311c87a671)), closes [#1441](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1441)
+* url-less authors should not have empty links ([#1410](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1410)) ([2a4fbf6](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2a4fbf6a7925da610a75c498116da7cf9ba857d7)), closes [#1403](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1403)
+
+### Improvements
+
+* include the latest posts in the "Recently Updated" list ([#1456](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1456)) ([82d8f2d](https://github.com/cotes2020/jekyll-theme-chirpy/commit/82d8f2db984711f334f55b6af5098ec16770e824))
+
+## [6.3.1](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.3.0...v6.3.1) (2023-11-12)
+
+### Bug Fixes
+
+* **home:** responsive gap at the bottom of preview image ([1a977a8](https://github.com/cotes2020/jekyll-theme-chirpy/commit/1a977a87a0da1cff35d0896cf9265c31034841a6))
+
+## [6.3.0](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.3...v6.3.0) (2023-11-10)
+
+### Features
+
+* add Mastodon sharing link ([#1344](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1344)) ([2bf87e0](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2bf87e0de7928f325811e1bb96cfcaefdf6cf66a)), closes [#1324](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1324)
+
+### Bug Fixes
+
+* **home:** crop the preview image that doesn't match 1.91:1 ([#1325](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1325)) ([5810bcd](https://github.com/cotes2020/jekyll-theme-chirpy/commit/5810bcd1d7b83e111017831fa82c368a6b15c7cd))
+* resume lazy loading for Twitch videos ([#1326](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1326)) ([9f174d9](https://github.com/cotes2020/jekyll-theme-chirpy/commit/9f174d9088e5c83a5e0c4630336cea65e199c553)), closes [#1267](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1267)
+
 ## [6.2.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.2.2...v6.2.3) (2023-10-10)
 
 ### Bug Fixes

jekyll-theme-chirpy.gemspec

@@ -2,11 +2,11 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "jekyll-theme-chirpy"
-  spec.version       = "6.2.3"
+  spec.version       = "6.4.0"
   spec.authors       = ["Cotes Chung"]
   spec.email         = ["cotes.chung@gmail.com"]
 
-  spec.summary       = "A minimal, responsive and feature-rich Jekyll theme for technical writing."
+  spec.summary       = "A minimal, responsive, and feature-rich Jekyll theme for technical writing."
   spec.homepage      = "https://github.com/cotes2020/jekyll-theme-chirpy"
   spec.license       = "MIT"
 
@@ -23,12 +23,12 @@ Gem::Specification.new do |spec|
     "plugin_type"       => "theme"
   }
 
-  spec.required_ruby_version = ">= 2.6"
+  spec.required_ruby_version = ">= 3.0"
 
   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"
+  spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.8"
   spec.add_runtime_dependency "jekyll-archives", "~> 2.2"
   spec.add_runtime_dependency "jekyll-sitemap", "~> 1.4"
   spec.add_runtime_dependency "jekyll-include-cache", "~> 0.2"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "6.2.3",
+  "version": "6.4.0",
-  "description": "A minimal, responsive and feature-rich Jekyll theme for technical writing.",
+  "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/cotes2020/jekyll-theme-chirpy.git"
@@ -21,15 +21,86 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/preset-env": "^7.23.7",
-    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "rimraf": "^5.0.5",
-    "rollup": "^3.29.4",
+    "rollup": "^4.9.2",
-    "rollup-plugin-license": "^3.1.0",
+    "rollup-plugin-license": "^3.2.0",
-    "stylelint": "^15.10.3",
+    "stylelint": "^16.1.0",
-    "stylelint-config-standard-scss": "^11.0.0"
+    "stylelint-config-standard-scss": "^12.0.0"
+  },
+  "prettier": {
+    "trailingComma": "none"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "> 0.2%",
+    "not dead"
+  ],
+  "commitlint": {
+    "rules": {
+      "body-max-line-length": [
+        0,
+        "always"
+      ]
+    }
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard-scss",
+    "rules": {
+      "no-descending-specificity": null,
+      "shorthand-property-no-redundant-values": null,
+      "at-rule-no-vendor-prefix": null,
+      "property-no-vendor-prefix": null,
+      "selector-no-vendor-prefix": null,
+      "value-no-vendor-prefix": null,
+      "color-function-notation": "legacy",
+      "alpha-value-notation": "number",
+      "selector-not-notation": "simple",
+      "color-hex-length": "long",
+      "declaration-block-single-line-max-declarations": 3,
+      "scss/operator-no-newline-after": null,
+      "rule-empty-line-before": [
+        "always",
+        {
+          "ignore": [
+            "after-comment",
+            "first-nested"
+          ]
+        }
+      ],
+      "value-keyword-case": [
+        "lower",
+        {
+          "ignoreProperties": [
+            "/^\\$/"
+          ]
+        }
+      ],
+      "media-feature-range-notation": "prefix"
+    }
+  },
+  "standard-version": {
+    "skip": {
+      "commit": true,
+      "tag": true
+    },
+    "types": [
+      {
+        "type": "feat",
+        "section": "Features"
+      },
+      {
+        "type": "fix",
+        "section": "Bug Fixes"
+      },
+      {
+        "type": "perf",
+        "section": "Improvements"
+      }
+    ]
   }
 }

tools/release

@@ -8,7 +8,7 @@
 # and production branch.
 #
 #
-# Usage: run on main branch or the patch branch
+# Usage: run on the default, release or the patch branch
 #
 # Requires: Git, NPM and RubyGems
 
@@ -18,8 +18,7 @@ opt_pre=false # preview mode option
 
 working_branch="$(git branch --show-current)"
 
-# AKA the default branch, main/master branch
+DEFAULT_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
-STAGING_BRANCH="$(git symbolic-ref refs/remotes/origin/HEAD | sed 's@^refs/remotes/origin/@@')"
 
 PROD_BRANCH="production"
 
@@ -65,15 +64,16 @@ _check_cli() {
 }
 
 _check_git() {
-  # ensure nothing is uncommitted
+  # ensure that changes have been committed
   if [[ -n $(git status . -s) ]]; then
     echo "> Abort: Commit the staged files first, and then run this tool again."
     exit 1
   fi
 
-  # ensure the working branch is the default/patch branch
+  if [[ $working_branch != "$DEFAULT_BRANCH" &&
-  if [[ $working_branch != "$STAGING_BRANCH" && $working_branch != hotfix/* ]]; then
+    $working_branch != hotfix/* &&
-    echo "> Abort: Please run on the $STAGING_BRANCH branch or a patch branche."
+    $working_branch != "$PROD_BRANCH" ]]; then
+    echo "> Abort: Please run on the default, release or patch branch."
     exit 1
   fi
 }
@@ -101,14 +101,16 @@ check() {
   _check_node_packages
 }
 
-# auto-generate a new version number to the file 'package.json' and
+# Auto-generate a new version number to the file 'package.json'
 bump_node() {
+  bump="standard-version -i $CHANGE_LOG"
+
   if $opt_pre; then
-    standard-version -i "$CHANGE_LOG" -p rc
+    bump="$bump -p rc"
-  else
-    standard-version -i "$CHANGE_LOG"
   fi
 
+  eval "$bump"
+
   # Change heading of Patch version to heading level 2 (a bug from `standard-version`)
   sed -i "s/^### \[/## \[/g" "$CHANGE_LOG"
   # Replace multiple empty lines with a single empty line
@@ -117,29 +119,34 @@ bump_node() {
 
 ## Bump new version to gem config file
 bump_gem() {
-  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$1/" "$GEM_SPEC"
+  _ver="$1"
+
+  if $opt_pre; then
+    _ver="${1/-/.}"
+  fi
+
+  sed -i "s/[[:digit:]]\+\.[[:digit:]]\+\.[[:digit:]]\+/$_ver/" "$GEM_SPEC"
 }
 
-# Update the git branches, create a new tag, and then build the gem package.
+# Creates a new tag on the production branch with the given version number.
-release() {
+# Also commits the changes and merges the production branch into the default branch.
+branch() {
   _version="$1" # X.Y.Z
-  _latest_commit="$(git rev-parse HEAD)"
+
+  git add .
+  git commit -m "chore(release): $_version"
 
   # Create a new tag on production branch
   echo -e "> Create tag v$_version\n"
   git tag "v$_version"
 
-  git checkout "$STAGING_BRANCH"
+  git checkout "$DEFAULT_BRANCH"
+  git merge --no-ff --no-edit "$PROD_BRANCH"
 
   if [[ $working_branch == hotfix/* ]]; then
-    git merge --no-ff --no-edit "$working_branch"
     # delete the patch branch
     git branch -D "$working_branch"
   fi
-
-  # cherry-pick the latest commit from production branch to default branch
-  git cherry-pick "$_latest_commit"
-
 }
 
 ## Build a gem package
@@ -164,7 +171,7 @@ build_gem() {
 main() {
   check
 
-  if [[ $opt_pre = false ]]; then
+  if [[ $opt_pre = false && $working_branch != "$PROD_BRANCH" ]]; then
     git checkout "$PROD_BRANCH"
     git merge --no-ff --no-edit "$working_branch"
   fi
@@ -175,16 +182,12 @@ main() {
 
   bump_gem "$_version"
 
-  echo -e "> Build the gem package for v$_version\n"
-
   if [[ $opt_pre = false ]]; then
-    echo -e "> Bumped version number to $_version\n"
+    branch "$_version"
-    git add .
-    git commit -m "chore(release): $_version"
-
-    release "$_version"
   fi
 
+  echo -e "> Build the gem package for v$_version\n"
+
   build_gem
 }