refactor!: rename media-url file and related parameters (#1651)

- Changed variable `img_cdn` to `cdn` in site configuration file.
- Changed the variable defining the relative path of the image in the post from `img_url` to `media_subpath`

.github/workflows/commitlint.yml

@@ -8,4 +8,4 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v5
+      - uses: wagoid/commitlint-github-action@v6

.markdownlint.json

@@ -0,0 +1,8 @@
+{
+  "commands-show-output": false,
+  "blanks-around-fences": false,
+  "line-length": false,
+  "no-inline-html": {
+    "allowed_elements": ["kbd", "sub"]
+  }
+}

.vscode/extensions.json

@@ -7,6 +7,7 @@
     // Common formatter
     "esbenp.prettier-vscode",
     "foxundermoon.shell-format",
-    "stylelint.vscode-stylelint"
+    "stylelint.vscode-stylelint",
+    "yzhang.markdown-all-in-one"
   ]
 }

.vscode/settings.json

@@ -7,6 +7,9 @@
   "files.associations": {
     "*.html": "liquid"
   },
+  "[markdown]": {
+    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
+  },
   // Formatter
   "[html][liquid]": {
     "editor.defaultFormatter": "Shopify.theme-check-vscode"

README.md

@@ -1,5 +1,7 @@
+<!-- markdownlint-disable-next-line -->
 <div align="center">
 
+  <!-- markdownlint-disable-next-line -->
   # Chirpy Jekyll Theme
 
   A minimal, responsive, and feature-rich Jekyll theme for technical writing.
@@ -34,7 +36,7 @@
 - Built-in Search
 - Atom Feeds
 - PWA
-- Google Analytics / GoatCounter
+- Web Analytics
 - SEO & Performance Optimization
 
 ## Documentation

_config.yml

@@ -44,16 +44,34 @@ social:
     # - https://www.facebook.com/username
     # - https://www.linkedin.com/in/username
 
-google_site_verification: # fill in to your verification string
+# Site Verification Settings
+webmaster_verifications:
+  google: # fill in your Google verification code
+  bing: # fill in your Bing verification code
+  alexa: # fill in your Alexa verification code
+  yandex: # fill in your Yandex verification code
+  baidu: # fill in your Baidu verification code
+  facebook: # fill in your Facebook verification code
 
 # ↑ --------------------------
 # The end of `jekyll-seo-tag` settings
 
-google_analytics:
-  id: # fill in your Google Analytics ID
+# Web Analytics Settings
+analytics:
+  google:
+    id: # fill in your Google Analytics ID
+  goatcounter:
+    id: # fill in your GoatCounter ID
+  umami:
+    id: # fill in your Umami ID
+    domain: # fill in your Umami domain
+  matomo:
+    id: # fill in your Matomo ID
+    domain: # fill in your Matomo domain
 
-goatcounter:
-  id: # fill in your Goatcounter ID
+# Pageviews settings
+pageviews:
+  provider: # now only supports 'goatcounter'
 
 # Prefer color scheme setting.
 #
@@ -68,12 +86,12 @@ goatcounter:
 #
 theme_mode: # [light | dark]
 
-# The CDN endpoint for images.
+# The CDN endpoint for media resources.
 # Notice that once it is assigned, the CDN url
-# will be added to all image (site avatar & posts' images) paths starting with '/'
+# will be added to all media resources (site avatar, posts' images, audio and video files) paths starting with '/'
 #
 # e.g. 'https://cdn.com'
-img_cdn: "https://chirpy-img.netlify.app"
+cdn: "https://chirpy-img.netlify.app"
 
 # the avatar on sidebar, support local or CORS resources
 avatar: "/commons/avatar.jpg"
@@ -86,8 +104,9 @@ social_preview_image: # string, local or CORS resources
 toc: true
 
 comments:
-  active: # The global switch for posts comments, e.g., 'disqus'.  Keep it empty means disable
-  # The active options are as follows:
+  # Global switch for the post comment system. Keeping it empty means disabled.
+  provider: # [disqus | utterances | giscus]
+  # The provider options are as follows:
   disqus:
     shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
   # utterances settings › https://utteranc.es/
@@ -101,6 +120,7 @@ comments:
     category:
     category_id:
     mapping: # optional, default to 'pathname'
+    strict: # optional, default to '0'
     input_position: # optional, default to 'bottom'
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`

_data/media.yml

@@ -0,0 +1,18 @@
+- extension: mp3
+  mime_type: mpeg
+- extension: mov
+  mime_type: quicktime
+- extension: avi
+  mime_type: x-msvideo
+- extension: mkv
+  mime_type: x-matroska
+- extension: ogv
+  mime_type: ogg
+- extension: weba
+  mime_type: webm
+- extension: 3gp
+  mime_type: 3gpp
+- extension: 3g2
+  mime_type: 3gpp2
+- extension: mid
+  mime_type: midi

_data/origin/cors.yml

@@ -13,7 +13,7 @@ cdns:
 
 # fonts
 
-webfonts: https://fonts.googleapis.com/css2?family=Lato&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
+webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap
 
 # Libraries
 

_data/share.yml

@@ -22,7 +22,7 @@ platforms:
   #
   # - type: Weibo
   #   icon: "fab fa-weibo"
-  #   link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL"
+  #   link: "https://service.weibo.com/share/share.php?title=TITLE&url=URL"
   #
   # - type: Mastodon
   #   icon: "fa-brands fa-mastodon"

_includes/analytics/goatcounter.html

@@ -0,0 +1,6 @@
+<!-- GoatCounter -->
+<script
+  async
+  src="https://gc.zgo.at/count.js"
+  data-goatcounter="https://{{ site.analytics.goatcounter.id }}.goatcounter.com/count"
+></script>

_includes/analytics/google.html

@@ -0,0 +1,13 @@
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google.id }}"></script>
+<script>
+  document.addEventListener('DOMContentLoaded', function (event) {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+
+    gtag('js', new Date());
+    gtag('config', '{{ site.analytics.google.id }}');
+  });
+</script>

_includes/analytics/matomo.html

@@ -0,0 +1,14 @@
+<!-- Matomo -->
+<script type="text/javascript">
+  var _paq = window._paq = window._paq || [];
+  _paq.push(['trackPageView']);
+  _paq.push(['enableLinkTracking']);
+  (function() {
+    var u="//{{ site.analytics.matomo.domain }}/";
+    _paq.push(['setTrackerUrl', u+'matomo.php']);
+    _paq.push(['setSiteId', {{ site.analytics.matomo.id }}]);
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+    g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  })();
+</script>
+<!-- End Matomo Code -->

_includes/analytics/umami.html

@@ -0,0 +1,6 @@
+<!-- Umami -->
+<script
+  defer
+  src="{{ site.analytics.umami.domain }}/script.js"
+  data-website-id="{{ site.analytics.umami.id }}"
+></script>

_includes/comments.html

@@ -1,5 +1,5 @@
-<!--  The comments switcher -->
-{% if page.comments and site.comments.active %}
-  {% capture path %}comments/{{ site.comments.active }}.html{% endcapture %}
+<!-- The comments switcher -->
+{% if page.comments and site.comments.provider %}
+  {% capture path %}comments/{{ site.comments.provider }}.html{% endcapture %}
   {% include {{ path }} %}
 {% endif %}

_includes/comments/giscus.html

@@ -25,6 +25,7 @@
       'data-category': '{{ site.comments.giscus.category }}',
       'data-category-id': '{{ site.comments.giscus.category_id }}',
       'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-strict' : '{{ site.comments.giscus.strict | default: '0' }}',
       'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
       'data-emit-metadata': '0',
       'data-theme': initTheme,

_includes/embed/audio.html

@@ -0,0 +1,35 @@
+{% assign src = include.src | strip %}
+{% assign title = include.title | strip %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless src contains '://' %}
+  {%- capture src -%}
+    {% include media-url.html src=src %}
+  {%- endcapture -%}
+{% endunless %}
+
+<p>
+  <audio class="embed-audio" controls>
+    {% assign extension = src | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = src | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = src | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="audio/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the audio tag. Here is a
+    <a href="{{ src | strip }}">link to the audio file</a> instead.
+  </audio>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>

_includes/embed/bilibili.html

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

_includes/embed/video.html

@@ -0,0 +1,59 @@
+{% assign video_url = include.src %}
+{% assign title = include.title %}
+{% assign poster_url = include.poster %}
+{% assign types = include.types | default: '' | strip | split: '|' %}
+
+{% unless video_url contains '://' %}
+  {%- capture video_url -%}
+    {% include media-url.html src=video_url %}
+  {%- endcapture -%}
+{% endunless %}
+
+{% if poster_url %}
+  {% unless poster_url contains '://' %}
+    {%- capture poster_url -%}
+      {% include media-url.html src=poster_url subpath=page.media_subpath %}
+    {%- endcapture -%}
+  {% endunless %}
+  {% assign poster = 'poster="' | append: poster_url | append: '"' %}
+{% endif %}
+
+{% assign attributes = 'controls' %}
+
+{% if include.autoplay %}
+  {% assign attributes = attributes | append: ' ' | append: 'autoplay' %}
+{% endif %}
+
+{% if include.loop %}
+  {% assign attributes = attributes | append: ' ' | append: 'loop' %}
+{% endif %}
+
+{% if include.muted %}
+  {% assign attributes = attributes | append: ' ' | append: 'muted' %}
+{% endif %}
+
+<p>
+  <video class="embed-video file" {{ poster }} {{ attributes }}>
+    {% assign extension = video_url | split: '.' | last %}
+    {% assign types = extension | concat: types %}
+
+    {% assign ext_size = extension | size %}
+    {% assign src_size = video_url | size %}
+    {% assign slice_size = src_size | minus: ext_size %}
+
+    {% assign filepath = video_url | slice: 0, slice_size %}
+
+    {% for type in types %}
+      {% assign src = filepath | append: type %}
+      {% assign media_item = site.data.media | find: 'extension', type %}
+      {% assign mime_type = media_item.mime_type | default: type %}
+      <source src="{{ src }}" type="video/{{ mime_type }}">
+    {% endfor %}
+
+    Your browser does not support the video tag. Here is a
+    <a href="{{ video_url | strip }}">link to the video file</a> instead.
+  </video>
+  {% if title %}
+    <em>{{ title }}</em>
+  {% endif %}
+</p>

_includes/embed/youtube.html

@@ -1,5 +1,5 @@
 <iframe
-  class="embed-video youtube"
+  class="embed-video"
   loading="lazy"
   src="https://www.youtube.com/embed/{{ include.id }}"
   title="YouTube video player"

_includes/footer.html

@@ -34,7 +34,14 @@
     {%- endcapture -%}
 
     {%- capture _theme -%}
-      <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
+      <a
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        title="v{{ theme.version }}"
+        href="https://github.com/cotes2020/jekyll-theme-chirpy"
+        target="_blank"
+        rel="noopener"
+      >Chirpy</a>
     {%- endcapture -%}
 
     {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}

_includes/goatcounter.html

@@ -1,8 +0,0 @@
-<!-- GoatCounter -->
-
-<script
-  data-goatcounter="https://{{ site.goatcounter.id }}.goatcounter.com/count"
-  async
-  src="https://gc.zgo.at/count.js"
-></script>
-

_includes/google-analytics.html

@@ -1,14 +0,0 @@
-<!--
-  The GA snippet
--->
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script defer src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.id }}"></script>
-<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    window.dataLayer = window.dataLayer || [];
-    function gtag(){dataLayer.push(arguments);}
-
-    gtag('js', new Date());
-    gtag('config', '{{ site.google_analytics.id }}');
-  });
-</script>

_includes/head.html

@@ -20,7 +20,7 @@
 
     {% unless src contains '://' %}
       {%- capture img_url -%}
-        {% include img-url.html src=src img_path=page.img_path absolute=true %}
+        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
       {%- endcapture -%}
 
       {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
@@ -31,7 +31,7 @@
 
   {% elsif site.social_preview_image %}
     {%- capture img_url -%}
-      {% include img-url.html src=site.social_preview_image absolute=true %}
+      {% include media-url.html src=site.social_preview_image absolute=true %}
     {%- endcapture -%}
 
     {%- capture og_image -%}
@@ -72,7 +72,7 @@
   {% endif %}
 
   <!-- GA -->
-  {% if jekyll.environment == 'production' and site.google_analytics.id != empty and site.google_analytics.id %}
+  {% if jekyll.environment == 'production' and site.analytics.google.id != empty and site.analytics.google.id %}
     <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
     <link rel="dns-prefetch" href="https://www.google-analytics.com">
 

_includes/img-url.html

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

_includes/js-selector.html

@@ -33,7 +33,7 @@
   or page.layout == 'category'
   or page.layout == 'tag'
 %}
-  {% assign locale = site.lang | split: '-' | first %}
+  {% assign locale = include.lang | split: '-' | first %}
 
   {% assign urls = urls
     | append: ','
@@ -95,19 +95,32 @@
   <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
+<!-- Pageviews -->
+{% if page.layout == 'post' %}
+  {% assign provider = site.pageviews.provider %}
+
+  {% if provider and provider != empty %}
+    {% case provider %}
+      {% when 'goatcounter' %}
+        {% if site.analytics[provider].id != empty and site.analytics[provider].id %}
+          {% include pageviews/{{ provider }}.html %}
+        {% endif %}
+    {% endcase %}
+  {% endif %}
+{% endif %}
+
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
     <script defer src="{{ 'app.min.js' | prepend: js_dist | relative_url }}"></script>
   {% endif %}
 
-  <!-- GA -->
-  {% if site.google_analytics.id != empty and site.google_analytics.id %}
-    {% include google-analytics.html %}
-  {% endif %}
-
-  <!-- GoatCounter -->
-  {% if site.goatcounter.id != empty and site.goatcounter.id %}
-    {% include goatcounter.html %}
-  {% endif %}
+  <!-- Web Analytics -->
+  {% for analytics in site.analytics %}
+    {% capture str %}{{ analytics }}{% endcapture %}
+    {% assign type = str | split: '{' | first %}
+    {% if site.analytics[type].id and site.analytics[type].id != empty %}
+      {% include analytics/{{ type }}.html %}
+    {% endif %}
+  {% endfor %}
 {% endif %}

_includes/lang.html

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

_includes/media-url.html

@@ -0,0 +1,37 @@
+{%- comment -%}
+  Generate media resource final URL based on `site.cdn`, `page.media_subpath`
+
+  Arguments:
+    src - required, basic media resources path
+    subpath - optional, relative path of media resources
+    absolute - optional, boolean, if true, generate absolute URL
+
+  Return:
+    media resources URL
+{%- endcomment -%}
+
+{% assign url = include.src %}
+
+{%- if url -%}
+  {% unless url contains ':' %}
+    {%- comment -%} Add media resources subpath prefix {%- endcomment -%}
+    {% assign url = include.subpath | default: '' | append: '/' | append: url %}
+
+    {%- comment -%} Prepend CND URL {%- endcomment -%}
+    {% if site.cdn %}
+      {% assign url = site.cdn | append: '/' | append: url %}
+    {% endif %}
+
+    {% assign url = url | replace: '///', '/' | replace: '//', '/' | replace: ':/', '://' %}
+
+    {% unless url contains '://' %}
+      {% if include.absolute %}
+        {% assign url = site.url | append: site.baseurl | append: url %}
+      {% else %}
+        {% assign url = site.baseurl | append: url %}
+      {% endif %}
+    {% endunless %}
+  {% endunless %}
+{%- endif -%}
+
+{{- url -}}

_includes/pageviews/goatcounter.html

@@ -0,0 +1,18 @@
+<!-- Display GoatCounter pageviews -->
+<script>
+  let pv = document.getElementById('pageviews');
+
+  if (pv !== null) {
+    const uri = location.pathname.replace(/\/$/, '');
+    const url = `https://{{ site.analytics.goatcounter.id }}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`;
+
+    fetch(url)
+      .then((response) => response.json())
+      .then((data) => {
+        pv.innerText = new Intl.NumberFormat().format(data.count);
+      })
+      .catch((error) => {
+        pv.innerText = '1';
+      });
+  }
+</script>

_includes/post-description.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+  Get post description or generate it from the post content.
+{%- endcomment -%}
+
+{%- assign max_length = include.max_length | default: 200 -%}
+
+{%- capture description -%}
+{%- if post.description -%}
+  {{- post.description -}}
+{%- else -%}
+  {%- include no-linenos.html content=post.content -%}
+  {{- content | markdownify | strip_html -}}
+{%- endif -%}
+{%- endcapture -%}
+
+{{- description | strip | truncate: max_length | escape -}}

_includes/refactor-content.html

@@ -97,7 +97,7 @@
     {% assign _lazyload = true %}
 
     {%- capture _img_url -%}
-      {% include img-url.html src=_src img_path=page.img_path %}
+      {% include media-url.html src=_src subpath=page.media_subpath %}
     {%- endcapture -%}
 
     {% assign _path_prefix = _img_url | remove: _src %}

_includes/related-posts.html

@@ -81,10 +81,7 @@
               {% include datetime.html date=post.date lang=include.lang %}
               <h4 class="pt-0 my-2">{{ post.title }}</h4>
               <div class="text-muted">
-                <p>
-                  {% include no-linenos.html content=post.content %}
-                  {{ content | markdownify | strip_html | truncate: 200 | escape }}
-                </p>
+                <p>{% include post-description.html %}</p>
               </div>
             </div>
           </a>

_includes/sidebar.html

@@ -5,7 +5,7 @@
     <a href="{{ '/' | relative_url }}" id="avatar" class="rounded-circle">
       {%- if site.avatar != empty and site.avatar -%}
         {%- capture avatar_url -%}
-          {% include img-url.html src=site.avatar %}
+          {% include media-url.html src=site.avatar %}
         {%- endcapture -%}
         <img src="{{- avatar_url -}}" width="112" height="112" alt="avatar" onerror="this.style.display='none'">
       {%- endif -%}

_layouts/default.html

@@ -13,7 +13,7 @@ layout: compress
 {% endif %}
 
 <!-- `site.alt_lang` can specify a language different from the UI -->
-<html lang="{{ site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
+<html lang="{{ page.lang | default: site.alt_lang | default: site.lang }}" {{ prefer_mode }}>
   {% include head.html %}
 
   <body>
@@ -76,12 +76,12 @@ layout: compress
 
     <!-- JavaScripts -->
 
-    {% include js-selector.html %}
+    {% include js-selector.html lang=lang %}
 
     {% if page.mermaid %}
       {% include mermaid.html %}
     {% endif %}
 
-    {% include_cached search-loader.html %}
+    {% include_cached search-loader.html lang=lang %}
   </body>
 </html>

_layouts/home.html

@@ -49,7 +49,7 @@ refactor: true
         {% if post.image %}
           {% assign src = post.image.path | default: post.image %}
           {% unless src contains '//' %}
-            {% assign src = post.img_path | append: '/' | append: src | replace: '//', '/' %}
+            {% assign src = post.media_subpath | append: '/' | append: src | replace: '//', '/' %}
           {% endunless %}
 
           {% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
@@ -72,10 +72,7 @@ refactor: true
             <h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
 
             <div class="card-text content mt-0 mb-3">
-              <p>
-                {% include no-linenos.html content=post.content %}
-                {{ content | markdownify | strip_html | truncate: 200 | escape }}
-              </p>
+              <p>{% include post-description.html %}</p>
             </div>
 
             <div class="post-meta flex-grow-1 d-flex align-items-end">

_layouts/post.html

@@ -14,6 +14,9 @@ tail_includes:
 <article class="px-1">
   <header>
     <h1 data-toc-skip>{{ page.title }}</h1>
+    {% if page.description %}
+      <p class="post-desc fw-light mb-4">{{ page.description }}</p>
+    {% endif %}
 
     <div class="post-meta text-muted">
       <!-- published date -->
@@ -74,12 +77,22 @@ tail_includes:
           </em>
         </span>
 
-        <!-- read time -->
-        {% include read-time.html content=content prompt=true lang=lang %}
+        <div>
+          <!-- pageviews -->
+          {% if site.pageviews.provider and site.analytics[site.pageviews.provider].id %}
+            <span>
+              <em id="pageviews">
+                <i class="fas fa-spinner fa-spin small"></i>
+              </em>
+              {{ site.data.locales[lang].post.pageview_measure }}
+            </span>
+          {% endif %}
+
+          <!-- read time -->
+          {% include read-time.html content=content prompt=true lang=lang %}
+        </div>
       </div>
-      <!-- .d-flex -->
     </div>
-    <!-- .post-meta -->
   </header>
 
   <div class="content">

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

@@ -1,5 +1,6 @@
 ---
 title: Text and Typography
+description: Examples of text, typography, math equations, diagrams, flowcharts, pictures, videos, and more.
 author: cotes
 date: 2019-08-08 11:33:00 +0800
 categories: [Blogging, Demo]
@@ -13,10 +14,10 @@ image:
   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.
-
 ## Headings
 
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
 # H1 - heading
 {: .mt-4 .mb-0 }
 
@@ -28,6 +29,7 @@ This post is to show Markdown syntax rendering on [**Chirpy**](https://github.co
 
 #### H4 - heading
 {: data-toc-skip='' .mt-4 }
+<!-- markdownlint-restore -->
 
 ## Paragraph
 
@@ -44,15 +46,15 @@ Quisque egestas convallis ipsum, ut sollicitudin risus tincidunt a. Maecenas int
 ### Unordered list
 
 - Chapter
-  + Section
-    * Paragraph
+  - Section
+    - Paragraph
 
 ### ToDo list
 
 - [ ] Job
-  + [x] Step 1
-  + [x] Step 2
-  + [ ] Step 3
+  - [x] Step 1
+  - [x] Step 2
+  - [ ] Step 3
 
 ### Description list
 
@@ -68,6 +70,8 @@ Moon
 
 ## Prompts
 
+<!-- markdownlint-capture -->
+<!-- markdownlint-disable -->
 > An example showing the `tip` type prompt.
 {: .prompt-tip }
 
@@ -79,14 +83,15 @@ Moon
 
 > An example showing the `danger` type prompt.
 {: .prompt-danger }
+<!-- markdownlint-restore -->
 
 ## Tables
 
 | Company                      | Contact          | Country |
-|:-----------------------------|:-----------------|--------:|
+| :--------------------------- | :--------------- | ------: |
 | Alfreds Futterkiste          | Maria Anders     | Germany |
-| Island Trading               | Helen Bennett    | UK      |
-| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy   |
+| Island Trading               | Helen Bennett    |      UK |
+| Magazzini Alimentari Riuniti | Giovanni Rovelli |   Italy |
 
 ## Links
 
@@ -108,7 +113,7 @@ Here is the `/path/to/the/file.extend`{: .filepath}.
 
 ### Common
 
-```
+```text
 This is a common code snippet, without syntax highlight and line number.
 ```
 

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

@@ -58,7 +58,6 @@ Adding author information in `_data/authors.yml` (If your website doesn't have t
 ```
 {: file="_data/authors.yml" }
 
-
 And then use `author` to specify a single entry or `authors` to specify multiple entries:
 
 ```yaml
@@ -74,6 +73,18 @@ Having said that, the key `author` can also identify multiple entries.
 > The benefit of reading the author information from the file `_data/authors.yml`{: .filepath } is that the page will have the meta tag `twitter:creator`, which enriches the [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#card-and-content-attribution) and is good for SEO.
 {: .prompt-info }
 
+### Post Description
+
+By default, the first words of the post are used to display on the home page for a list of posts, in the _Further Reading_ section, and in the XML of the RSS feed. If you don't want to display the auto-generated description for the post, you can customize it using the `description` field in the _Front Matter_ as follows:
+
+```yaml
+---
+description: Short summary of the post.
+---
+```
+
+Additionally, the `description` text will also be displayed under the post title on the post's page.
+
 ## Table of Contents
 
 By default, the **T**able **o**f **C**ontents (TOC) is displayed on the right panel of the post. If you want to turn it off globally, go to `_config.yml`{: .filepath} and set the value of variable `toc` to `false`. If you want to turn off TOC for a specific post, add the following to the post's [Front Matter](https://jekyllrb.com/docs/front-matter/):
@@ -236,14 +247,14 @@ The screenshots of the program window can be considered to show the shadow effec
 
 ### CDN URL
 
-If you host the images on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `img_cdn` of `_config.yml`{: .filepath} file:
+If you host the media resources on the CDN, you can save the time of repeatedly writing the CDN URL by assigning the variable `cdn` of `_config.yml`{: .filepath} file:
 
 ```yaml
-img_cdn: https://cdn.com
+cdn: https://cdn.com
 ```
 {: file='_config.yml' .nolineno}
 
-Once `img_cdn` is assigned, the CDN URL will be added to the path of all images (images of site avatar and posts) starting with `/`.
+Once `cdn` is assigned, the CDN URL will be added to the path of all media resources (site avatar, posts' images, audio and video files) starting with `/`.
 
 For instance, when using images:
 
@@ -259,13 +270,13 @@ The parsing result will automatically add the CDN prefix `https://cdn.com` befor
 ```
 {: .nolineno }
 
-### Image Path
+### Media Subpath
 
-When a post contains many images, it will be a time-consuming task to repeatedly define the path of the images. To solve this, we can define this path in the YAML block of the post:
+When a post contains many images, it will be a time-consuming task to repeatedly define the path of the media resources. To solve this, we can define this path in the YAML block of the post:
 
 ```yml
 ---
-img_path: /img/path/
+media_subpath: /img/path/
 ---
 ```
 
@@ -297,7 +308,7 @@ image:
 ---
 ```
 
-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.
+Note that the [`media_subpath`](#media-subpath) 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.
 
@@ -320,7 +331,6 @@ image:
 
 > You can observe LQIP in the preview image of post [_Text and Typography_](/posts/text-and-typography/).
 
-
 For normal images:
 
 ```markdown
@@ -427,6 +437,8 @@ Or adding `render_with_liquid: false` (Requires Jekyll 4.0 or higher) to the pos
 
 ## Videos
 
+### Video Sharing Platform
+
 You can embed a video with the following syntax:
 
 ```liquid
@@ -443,6 +455,76 @@ The following table shows how to get the two parameters we need in a given video
 | [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` |
 
+### Video File
+
+If you want to embed a video file directly, use the following syntax:
+
+```liquid
+{% include embed/video.html src='{URL}' %}
+```
+
+Where `URL` is an URL to a video file e.g. `/assets/img/sample/video.mp4`.
+
+You can also specify additional attributes for the embedded video file. Here is a full list of attributes allowed.
+
+- `poster='/path/to/poster.png'` - poster image for a video that is shown while video is downloading
+- `title='Text'` - title for a video that appears below the video and looks same as for images
+- `autoplay=true` - video automatically begins to play back as soon as it can
+- `loop=true` - automatically seek back to the start upon reaching the end of the video
+- `muted=true` - audio will be initially silenced
+- `types` - specify the extensions of additional video formats separated by `|`. Ensure these files exist in the same directory as your primary video file.
+
+Consider an example utilizing all of the above:
+
+```liquid
+{%
+  include embed/video.html
+  src='/path/to/video/video.mp4'
+  types='ogg|mov'
+  poster='poster.png'
+  title='Demo video'
+  autoplay=true
+  loop=true
+  muted=true
+%}
+```
+
+> It's not recommended to host video files in `assets` folder as they cannot be cached by PWA and may cause issues.
+> Instead, use CDN to host video files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
+{: .prompt-warning }
+
+## Audios
+
+### Audio File
+
+If you want to embed an audio file directly, use the following syntax:
+
+```liquid
+{% include embed/audio.html src='{URL}' %}
+```
+
+Where `URL` is an URL to an audio file e.g. `/assets/img/sample/audio.mp3`.
+
+You can also specify additional attributes for the embedded audio file. Here is a full list of attributes allowed.
+
+- `title='Text'` - title for an audio that appears below the audio and looks same as for images
+- `types` - specify the extensions of additional audio formats separated by `|`. Ensure these files exist in the same directory as your primary audio file.
+
+Consider an example utilizing all of the above:
+
+```liquid
+{%
+  include embed/audio.html
+  src='/path/to/audio/audio.mp3'
+  types='ogg|wav|aac'
+  title='Demo audio'
+%}
+```
+
+> It's not recommended to host audio files in `assets` folder as they cannot be cached by PWA and may cause issues.
+> Instead, use CDN to host audio files. Alternatively, use a separate folder that is excluded from PWA (see `pwa.deny_paths` setting in `_config.yml`).
+{: .prompt-warning }
+
 ## Learn More
 
 For more knowledge about Jekyll posts, visit the [Jekyll Docs: Posts](https://jekyllrb.com/docs/posts/).

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

@@ -1,11 +1,14 @@
 ---
 title: Getting Started
+description: >-
+  Get started with Chirpy basics in this comprehensive overview.
+  You will learn how to install, configure, and use your first Chirpy-based website, as well as deploy it to a web server.
 author: cotes
 date: 2019-08-09 20:55:00 +0800
 categories: [Blogging, Tutorial]
 tags: [getting started]
 pin: true
-img_path: '/posts/20180809'
+media_subpath: '/posts/20180809'
 ---
 
 ## Prerequisites

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

@@ -30,6 +30,7 @@ The following table will help you understand the changes to the favicon files:
 | `*.PNG`             | ✓                                 | ✗           |
 | `*.ICO`             | ✓                                 | ✗           |
 
+<!-- markdownlint-disable-next-line -->
 >  ✓ means keep, ✗ means delete.
 {: .prompt-info }
 

_sass/addon/commons.scss

@@ -129,6 +129,11 @@ kbd {
   box-shadow: inset 0 -2px 0 var(--kbd-wrap-color);
 }
 
+hr {
+  border-color: var(--main-border-color);
+  opacity: 1;
+}
+
 footer {
   background-color: var(--main-bg);
   height: $footer-height;
@@ -364,7 +369,6 @@ main {
 
   h1 {
     margin-top: 2rem;
-    margin-bottom: 1.5rem;
   }
 
   p {
@@ -550,17 +554,32 @@ main {
   width: 100%;
   height: 100%;
   margin-bottom: 1rem;
+  aspect-ratio: 16 / 9;
 
   @extend %rounded;
 
-  &.youtube,
-  &.bilibili {
-    aspect-ratio: 16 / 9;
-  }
-
   &.twitch {
     aspect-ratio: 310 / 189;
   }
+
+  &.file {
+    display: block;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+    margin: auto;
+    margin-bottom: 0;
+  }
+
+  @extend %img-caption;
+}
+
+.embed-audio {
+  width: 100%;
+  display: block;
+
+  @extend %img-caption;
 }
 
 /* --- buttons --- */

_sass/colors/typography-dark.scss

@@ -104,10 +104,6 @@
     display: none;
   }
 
-  hr {
-    border-color: var(--main-border-color);
-  }
-
   /* categories */
   .categories.card,
   .list-group-item {

_sass/layout/post.scss

@@ -14,20 +14,33 @@
   padding-right: $pr;
 }
 
-h1 + .post-meta {
-  > span + span::before {
-    @include dot;
+header {
+  .post-desc {
+    @extend %heading;
+
+    font-size: 1.125rem;
+    line-height: 1.6;
   }
 
-  em,
-  time {
-    @extend %text-highlight;
-  }
-
-  em {
-    a {
-      color: inherit;
+  .post-meta {
+    span + span::before {
+      @include dot;
     }
+
+    em,
+    time {
+      @extend %text-highlight;
+    }
+
+    em {
+      a {
+        color: inherit;
+      }
+    }
+  }
+
+  h1 + .post-meta {
+    margin-top: 1.5rem;
   }
 }
 

assets/feed.xml

@@ -45,14 +45,7 @@ permalink: /feed.xml
     {% endfor %}
   {% endif %}
 
-  {% if post.summary %}
-    <summary>{{ post.summary | strip }}</summary>
-  {% else %}
-    <summary>
-      {% include no-linenos.html content=post.content %}
-      {{ content  | strip_html | truncate: 400 }}
-    </summary>
-  {% endif %}
+  <summary>{% include post-description.html max_length=400 %}</summary>
 
   </entry>
 {% endfor %}

assets/js/data/swconf.js

@@ -24,8 +24,8 @@ const swconf = {
 
     {%- comment -%} The request url with below domain will be cached. {%- endcomment -%}
     allowHosts: [
-      {% if site.img_cdn and site.img_cdn contains '//' %}
-        '{{ site.img_cdn | split: '//' | last | split: '/' | first }}',
+      {% if site.cdn and site.cdn contains '//' %}
+        '{{ site.cdn | split: '//' | last | split: '/' | first }}',
       {% endif %}
 
       {%- unless site.assets.self_host.enabled -%}

docs/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 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.5.5](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.4...v6.5.5) (2024-03-23)
+
+### Bug Fixes
+
+* **post:** correct the image URLs ([#1627](https://github.com/cotes2020/jekyll-theme-chirpy/issues/1627)) ([2d649aa](https://github.com/cotes2020/jekyll-theme-chirpy/commit/2d649aae0e40a24db1ab0d46fa474294e96cb135))
+
 ## [6.5.4](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.3...v6.5.4) (2024-03-22)
 
 ### Bug Fixes
@@ -11,6 +17,8 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## [6.5.3](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.2...v6.5.3) (2024-03-07)
 
+* replace `polyfill.io` with `cdnjs` hosted link ([#1598](https://github.com/cotes2020/jekyll-theme-chirpy/pull/1598)) ([75a3d73](https://github.com/cotes2020/jekyll-theme-chirpy/commit/75a3d7399b257256a09d602cbe01062fe1cdf68d))
+
 ## [6.5.2](https://github.com/cotes2020/jekyll-theme-chirpy/compare/v6.5.1...v6.5.2) (2024-02-29)
 
 ### Bug Fixes

jekyll-theme-chirpy.gemspec

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-theme-chirpy",
-  "version": "6.5.4",
+  "version": "6.5.5",
   "description": "A minimal, responsive, and feature-rich Jekyll theme for technical writing.",
   "repository": {
     "type": "git",
@@ -21,18 +21,18 @@
     "fixlint": "npm run test -- --fix"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.23.9",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
+    "@babel/core": "^7.24.3",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/preset-env": "^7.24.3",
+    "@commitlint/cli": "^19.2.1",
+    "@commitlint/config-conventional": "^19.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-terser": "^0.4.4",
     "husky": "^9.0.11",
     "rimraf": "^5.0.5",
-    "rollup": "^4.10.0",
-    "rollup-plugin-license": "^3.2.0",
-    "stylelint": "^16.2.1",
+    "rollup": "^4.13.2",
+    "rollup-plugin-license": "^3.3.1",
+    "stylelint": "^16.3.1",
     "stylelint-config-standard-scss": "^13.0.0"
   },
   "prettier": {

rollup.config.js

@@ -23,7 +23,7 @@ function build(filename) {
       babel({
         babelHelpers: 'bundled',
         presets: ['@babel/env'],
-        plugins: ['@babel/plugin-proposal-class-properties']
+        plugins: ['@babel/plugin-transform-class-properties']
       }),
       license({
         banner: {

tools/init

@@ -93,7 +93,7 @@ init_files() {
     mv ./${ACTIONS_WORKFLOW}.hook .github/workflows/${ACTIONS_WORKFLOW}
 
     ## Cleanup image settings in site config
-    _sedi "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+    _sedi "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
   fi
 
   # remove the other files

tools/release

@@ -156,7 +156,7 @@ build_gem() {
   git checkout "$PROD_BRANCH"
 
   # Remove unnecessary theme settings
-  sed -i "s/^img_cdn:.*/img_cdn:/;s/^avatar:.*/avatar:/" _config.yml
+  sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" _config.yml
   rm -f ./*.gem
 
   npm run build