Merge branch 'master' into production

.github/codeql/codeql-config.yml

@@ -0,0 +1,2 @@
+paths-ignore:
+  - "assets/js"

.github/dependabot.yml

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

.github/workflows/codeql.yml

@@ -2,11 +2,9 @@ name: "CodeQL"
 
 on:
   push:
-    paths: ["**.js"]
+    paths: ["_javascript/**/*.js"]
   pull_request:
-    paths: ["**.js"]
-  schedule:
-    - cron: "0 0 * * 5"
+    paths: ["_javascript/**/*.js"]
 
 jobs:
   analyze:
@@ -32,6 +30,7 @@ jobs:
         uses: github/codeql-action/init@v3
         with:
           languages: "${{ matrix.language }}"
+          config-file: .github/codeql/codeql-config.yml
 
       # 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)

.github/workflows/stale.yml

@@ -22,8 +22,8 @@ jobs:
     steps:
       - uses: actions/stale@v9
         with:
-          days-before-stale: 30
-          days-before-close: 1
+          # 60 days before marking issues/PRs stale
+          days-before-close: -1 # does not close automatically
           stale-issue-label: ${{ env.STALE_LABEL }}
           exempt-issue-labels: ${{ env.EXEMPT_LABELS }}
           stale-issue-message: ${{ env.MESSAGE }}

.gitignore

@@ -16,7 +16,6 @@ package-lock.json
 
 # IDE configurations
 .idea
-.vscode
 
 # Misc
 assets/js/dist

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no -- commitlint -x $(npm root -g)/@commitlint/config-conventional --edit
+npx --no -- commitlint --edit ${1}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    // Liquid tags auto-complete
+    "killalau.vscode-liquid-snippets",
+    // Liquid syntax highlighting and formatting
+    "Shopify.theme-check-vscode",
+    // Common formatter
+    "esbenp.prettier-vscode",
+    "foxundermoon.shell-format",
+    "stylelint.vscode-stylelint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  // Prettier
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "prettier.trailingComma": "none",
+  // Shopify Liquid
+  "files.associations": {
+    "*.html": "liquid"
+  },
+  // Formatter
+  "[html][liquid]": {
+    "editor.defaultFormatter": "Shopify.theme-check-vscode"
+  },
+  "[shellscript]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
+  },
+  // Disable vscode built-in stylelint
+  "css.validate": false,
+  "scss.validate": false,
+  "less.validate": false,
+  // Stylint extension settings
+  "stylelint.snippet": ["css", "less", "postcss", "scss"],
+  "stylelint.validate": ["css", "less", "postcss", "scss"]
+}

README.md

@@ -34,7 +34,7 @@
 - Built-in Search
 - Atom Feeds
 - PWA
-- Google Analytics
+- Google Analytics / GoatCounter
 - SEO & Performance Optimization
 
 ## Documentation

_config.yml

@@ -52,6 +52,9 @@ google_site_verification: # fill in to your verification string
 google_analytics:
   id: # fill in your Google Analytics ID
 
+goatcounter:
+  id: # fill in your Goatcounter ID
+
 # Prefer color scheme setting.
 #
 # Note: Keep empty will follow the system prefer color by default,
@@ -63,7 +66,7 @@ google_analytics:
 #     light  - Use the light color scheme
 #     dark   - Use the dark color scheme
 #
-theme_mode: # [light|dark]
+theme_mode: # [light | dark]
 
 # The CDN endpoint for images.
 # Notice that once it is assigned, the CDN url
@@ -108,10 +111,17 @@ assets:
     enabled: # boolean, keep empty means false
     # specify the Jekyll environment, empty means both
     # only works if `assets.self_host.enabled` is 'true'
-    env: # [development|production]
+    env: # [development | production]
 
 pwa:
-  enabled: true # the option for PWA feature
+  enabled: true # the option for PWA feature (installable)
+  cache:
+    enabled: true # the option for PWA offline cache
+    # Paths defined here will be excluded from the PWA cache.
+    # Usually its value is the `baseurl` of another website that
+    # shares the same domain name as the current website.
+    deny_paths:
+      # - "/example"  # URLs match `<SITE_URL>/example/*` will not be cached by the PWA
 
 paginate: 10
 
@@ -157,10 +167,6 @@ defaults:
     values:
       layout: page
       permalink: /:title/
-  - scope:
-      path: assets/img/favicons
-    values:
-      swcache: true
   - scope:
       path: assets/js/dist
     values:

_data/origin/cors.yml

@@ -8,6 +8,8 @@ cdns:
   - url: https://fonts.googleapis.com
   # jsDelivr CDN
   - url: https://cdn.jsdelivr.net
+  # polyfill.io for math
+  - url: https://polyfill.io
 
 # fonts
 
@@ -33,7 +35,7 @@ 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.1/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@10.8.0/dist/mermaid.min.js
 
 dayjs:
   js:

_includes/favicons.html

@@ -8,7 +8,9 @@
 <link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
-<link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+{% if site.pwa.enabled %}
+  <link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
+{% endif %}
 <link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
 <meta name="apple-mobile-web-app-title" content="{{ site.title }}">
 <meta name="application-name" content="{{ site.title }}">

_includes/footer.html

@@ -8,9 +8,15 @@
   "
 >
   <p>
-    {{ '©' }}
+    {{- '©' }}
     <time>{{ 'now' | date: '%Y' }}</time>
-    <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+
+    {% if site.social.links %}
+      <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+    {% else %}
+      <em class="fst-normal">{{ site.social.name }}</em>.
+    {% endif %}
+
     {% if site.data.locales[include.lang].copyright.brief %}
       <span
         data-bs-toggle="tooltip"

_includes/goatcounter.html

@@ -0,0 +1,8 @@
+<!-- GoatCounter -->
+
+<script
+  data-goatcounter="https://{{ site.goatcounter.id }}.goatcounter.com/count"
+  async
+  src="https://gc.zgo.at/count.js"
+></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 %}
+        {% include img-url.html src=src img_path=page.img_path absolute=true %}
       {%- endcapture -%}
 
       {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
@@ -31,15 +31,20 @@
 
   {% elsif site.social_preview_image %}
     {%- capture img_url -%}
-      {% include img-url.html src=site.social_preview_image %}
+      {% include img-url.html src=site.social_preview_image absolute=true %}
     {%- 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 %}
+    {%- capture twitter_image -%}
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:image" content="{{ img_url }}" />
+    {%- endcapture -%}
+
+    {% assign old_meta_clip = '<meta name="twitter:card" content="summary" />' %}
+    {% assign new_meta_clip = og_image | append: twitter_image %}
     {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
   {% endif %}
 
@@ -76,7 +81,7 @@
   {% endif %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
 
   <!-- Font Awesome -->
   <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">

_includes/img-url.html

@@ -2,8 +2,9 @@
   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
+    src - required, basic image path
+    img_path - optional, relative path of image
+    absolute - optional, boolean, if true, generate absolute URL
 
   Return:
     image URL
@@ -14,7 +15,7 @@
 {%- if url -%}
   {% unless url contains ':' %}
     {%- comment -%} CND URL {%- endcomment -%}
-    {% assign prefix = site.img_cdn | default: '' | relative_url %}
+    {% assign prefix = site.img_cdn | default: '' %}
 
     {%- comment -%} Add page image path prefix {%- endcomment -%}
     {% assign url = include.img_path | default: '' | append: '/' | append: url %}
@@ -26,6 +27,12 @@
       | replace: '//', '/'
       | replace: ':', ':/'
     %}
+
+    {% if include.absolute %}
+      {% assign url = url | absolute_url %}
+    {% else %}
+      {% assign url = url | relative_url %}
+    {% endif %}
   {% endunless %}
 {%- endif -%}
 

_includes/js-selector.html

@@ -11,6 +11,8 @@
 
 <!-- layout specified -->
 
+{% assign js_dist = '/assets/js/dist/' %}
+
 {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
   {% assign urls = urls | append: ',' | append: site.data.origin[type]['lazy-polyfill'].js %}
 
@@ -65,7 +67,7 @@
     {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
+{% capture script %}{{ js_dist }}{{ js }}.min.js{% endcapture %}
 <script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
@@ -83,7 +85,9 @@
         displayMath: [
           ['$$', '$$'],
           ['\\[', '\\]']
-        ]
+        ],
+        /* equation numbering */
+        tags: 'ams'
       }
     };
   </script>
@@ -94,13 +98,16 @@
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}
-    <script defer src="{{ '/app.js' | relative_url }}"></script>
-  {% else %}
-    <script defer src="{{ '/unregister.js' | relative_url }}"></script>
+    <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 %}
 {% endif %}

_includes/topbar.html

@@ -17,7 +17,7 @@
           {% if forloop.first %}
             <span>
               <a href="{{ '/' | relative_url }}">
-                {{ site.data.locales[include.lang].tabs.home | capitalize }}
+                {{- site.data.locales[include.lang].tabs.home | capitalize -}}
               </a>
             </span>
 
@@ -30,8 +30,8 @@
 
           {% elsif page.layout == 'category' or page.layout == 'tag' %}
             <span>
-              <a href="{{ item | relative_url }}">
-                {{ site.data.locales[include.lang].tabs[item] | default: page.title }}
+              <a href="{{ item | append: '/' | relative_url }}">
+                {{- site.data.locales[include.lang].tabs[item] | default: page.title -}}
               </a>
             </span>
           {% endif %}

_javascript/modules/components/toc.js

@@ -1,5 +1,5 @@
 export function toc() {
-  if (document.querySelector('main h2')) {
+  if (document.querySelector('main h2, main h3')) {
     // see: https://github.com/tscanlin/tocbot#usage
     tocbot.init({
       tocSelector: '#toc',

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

@@ -134,7 +134,14 @@ fi;
 
 The mathematics powered by [**MathJax**](https://www.mathjax.org/):
 
-$$ \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} $$
+$$
+\begin{equation}
+  \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
+  \label{eq:series}
+\end{equation}
+$$
+
+We can reference the equation as \eqref{eq:series}.
 
 When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are