Merge branch 'master' into production

.github/workflows/ci.yml

@@ -19,6 +19,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
 
+    strategy:
+      matrix:
+        ruby: ["3.0", "3.1", "3.2"]
+
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -28,7 +32,7 @@ jobs:
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: 3
+          ruby-version: ${{ matrix.ruby }}
           bundler-cache: true
 
       - name: Setup Node

.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.

README.md

@@ -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 was built primarily with the [Jekyll][jekyllrb] ecosystem,
+### Contributors
-[Bootstrap][bootstrap], [Font Awesome][icons], and some other [wonderful tools][lib].
-The avatar and favicon design 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/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.3/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.3/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.6.0/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js
 
 dayjs:
   js:

_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/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/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');
@@ -551,7 +552,8 @@ main {
 
   @extend %rounded;
 
-  &.youtube {
+  &.youtube,
+  &.bilibili {
     aspect-ratio: 16 / 9;
   }
 
@@ -640,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 --- */

assets/lib

@@ -1 +1 @@
-Subproject commit 97d95fdb5ed9c445a372d110776fc354beff6128
+Subproject commit c57724981c36d839881f89540d34d205db06a86f

package.json

@@ -21,16 +21,16 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-env": "^7.23.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "rimraf": "^5.0.5",
-    "rollup": "^4.3.0",
+    "rollup": "^4.9.2",
     "rollup-plugin-license": "^3.2.0",
-    "stylelint": "^15.11.0",
+    "stylelint": "^16.1.0",
-    "stylelint-config-standard-scss": "^11.1.0"
+    "stylelint-config-standard-scss": "^12.0.0"
   },
   "prettier": {
     "trailingComma": "none"