jekyll-theme-chirpy 5.6.1 → 6.0.1

data/_data/locales/zh-CN.yml

@@ -39,7 +39,7 @@ copyright:
   verbose: >-
     除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。
 
-meta: 本站由 :PLATFORM 生成，采用 :THEME 主题。
+meta: 本站采用 :PLATFORM 主题 :THEME
 
 not_found:
   statment: 抱歉，我们放错了该 URL，或者它指向了不存在的内容。
@@ -69,15 +69,13 @@ post:
     share_link:
       title: 分享链接
       succeed: 链接已复制！
-  # pinned prompt of posts list on homepage
-  pin_prompt: 顶置
 
 # Date time format.
 # See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
 df:
   post:
-    strftime: '%Y/%m/%d'
-    dayjs: 'YYYY/MM/DD'
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
 
 # categories page
 categories:

data/_data/locales/zh-TW.yml

@@ -0,0 +1,83 @@
+# The layout text of site
+
+# ----- Commons label -----
+
+layout:
+  post: 文章
+  category: 分類
+  tag: 標籤
+
+# The tabs of sidebar
+tabs:
+  # format: <filename_without_extension>: <value>
+  home: 首頁
+  categories: 分類
+  tags: 標籤
+  archives: 封存
+  about: 關於
+
+# the text displayed in the search bar & search results
+search:
+  hint: 搜尋
+  cancel: 取消
+  no_results: 沒有搜尋結果
+
+panel:
+  lastmod: 最近更新
+  trending_tags: 熱門標籤
+  toc: 文章摘要
+
+copyright:
+  # Shown at the bottom of the post
+  license:
+    template: 本文章以 :LICENSE_NAME 授權
+    name: CC BY 4.0
+    link: https://creativecommons.org/licenses/by/4.0/
+
+  # Displayed in the footer
+  brief: 保留部份權利。
+  verbose: >-
+    除非另有說明，否則本網誌的文章均由作者按照姓名標示 4.0 國際 (CC BY 4.0) 授權條款進行授權。
+
+meta: 本網站使用 :PLATFORM 產生，採用 :THEME 主題
+
+not_found:
+  statment: 抱歉，您可能正在存取一個已被移動的 URL，或者它從未存在。
+
+notification:
+  update_found: 發現新版本更新。
+  update: 更新
+
+# ----- Posts related labels -----
+
+post:
+  written_by: 作者
+  posted: 發布於
+  updated: 更新於
+  words: 字
+  pageview_measure: 次瀏覽
+  read_time:
+    unit: 分鐘
+    prompt: 閱讀
+  relate_posts: 相關文章
+  share: 分享
+  button:
+    next: 下一篇
+    previous: 上一篇
+    copy_code:
+      succeed: 已複製！
+    share_link:
+      title: 分享連結
+      succeed: 已複製連結！
+
+# Date time format.
+# See: <http://strftime.net/>, <https://day.js.org/docs/en/display/format>
+df:
+  post:
+    strftime: "%Y/%m/%d"
+    dayjs: "YYYY/MM/DD"
+
+# categories page
+categories:
+  category_measure: 個分類
+  post_measure: 篇文章

data/_data/{assets/cross_origin.yml → origin/cors.yml}

@@ -11,36 +11,36 @@ 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&family=Source+Sans+Pro:wght@400;600;900&display=swap
 
 # Libraries
 
 jquery:
-  js: https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js
+  js: https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js
 
 bootstrap:
-  css: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css
-  js: https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js
+  css: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
+  js: https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js
 
 toc:
-  css: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.css
-  js: https://cdn.jsdelivr.net/npm/tocbot@4.20.1/dist/tocbot.min.js
+  css: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.css
+  js: https://cdn.jsdelivr.net/npm/tocbot@4.21.0/dist/tocbot.min.js
 
 fontawesome:
-  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css
+  css: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css
 
 search:
   js: https://cdn.jsdelivr.net/npm/simple-jekyll-search@1.10.0/dest/simple-jekyll-search.min.js
 
 mermaid:
-  js: https://cdn.jsdelivr.net/npm/mermaid@9.2.2/dist/mermaid.min.js
+  js: https://cdn.jsdelivr.net/npm/mermaid@9.4.3/dist/mermaid.min.js
 
 dayjs:
   js:
-    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/dayjs.min.js
-    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/locale/:LOCALE.min.js
-    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/relativeTime.min.js
-    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.6/plugin/localizedFormat.min.js
+    common: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js
+    locale: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/locale/:LOCALE.min.js
+    relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/relativeTime.min.js
+    localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.min.js
 
 countup:
   js: https://cdn.jsdelivr.net/npm/countup.js@1.9.3/dist/countUp.min.js

data/_includes/comments/giscus.html

@@ -1,44 +1,54 @@
 <!-- https://giscus.app/ -->
 <script type="text/javascript">
-  $(function () {
-    const origin = "https://giscus.app";
-    const iframe = "iframe.giscus-frame";
-    const lightTheme = "light";
-    const darkTheme = "dark_dimmed";
+  (function () {
+    const origin = 'https://giscus.app';
+    const iframe = 'iframe.giscus-frame';
+    const lightTheme = 'light';
+    const darkTheme = 'dark_dimmed';
+
     let initTheme = lightTheme;
+    const html = document.documentElement;
 
-    if ($("html[data-mode=dark]").length > 0
-        || ($("html[data-mode]").length == 0
-            && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
+    if (
+      (html.hasAttribute('data-mode') &&
+        html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
       initTheme = darkTheme;
     }
 
     let giscusAttributes = {
-      "src": "https://giscus.app/client.js",
-      "data-repo": "{{ site.comments.giscus.repo}}",
-      "data-repo-id": "{{ site.comments.giscus.repo_id }}",
-      "data-category": "{{ site.comments.giscus.category }}",
-      "data-category-id": "{{ site.comments.giscus.category_id }}",
-      "data-mapping": "{{ site.comments.giscus.mapping | default: 'pathname' }}",
-      "data-reactions-enabled": "{{ site.comments.giscus.reactions_enabled | default: '1' }}",
-      "data-emit-metadata": "0",
-      "data-theme": initTheme,
-      "data-input-position": "{{ site.comments.giscus.input_position | default: 'bottom' }}",
-      "data-lang": "{{ site.comments.giscus.lang | default: lang }}",
-      "crossorigin": "anonymous",
-      "async": ""
+      src: 'https://giscus.app/client.js',
+      'data-repo': '{{ site.comments.giscus.repo}}',
+      'data-repo-id': '{{ site.comments.giscus.repo_id }}',
+      'data-category': '{{ site.comments.giscus.category }}',
+      'data-category-id': '{{ site.comments.giscus.category_id }}',
+      'data-mapping': '{{ site.comments.giscus.mapping | default: 'pathname' }}',
+      'data-reactions-enabled': '{{ site.comments.giscus.reactions_enabled | default: '1' }}',
+      'data-emit-metadata': '0',
+      'data-theme': initTheme,
+      'data-input-position': '{{ site.comments.giscus.input_position | default: 'bottom' }}',
+      'data-lang': '{{ site.comments.giscus.lang | default: lang }}',
+      crossorigin: 'anonymous',
+      async: ''
     };
 
-    let giscusScript = document.createElement("script");
-    Object.entries(giscusAttributes).forEach(([key, value]) => giscusScript.setAttribute(key, value));
-    document.getElementById("tail-wrapper").appendChild(giscusScript);
+    let giscusScript = document.createElement('script');
+    Object.entries(giscusAttributes).forEach(([key, value]) =>
+      giscusScript.setAttribute(key, value)
+    );
+    document.getElementById('tail-wrapper').appendChild(giscusScript);
 
-    addEventListener("message", (event) => {
-      if (event.source === window && event.data &&
-            event.data.direction === ModeToggle.ID) {
+    addEventListener('message', (event) => {
+      if (
+        event.source === window &&
+        event.data &&
+        event.data.direction === ModeToggle.ID
+      ) {
         /* global theme mode changed */
         const mode = event.data.message;
-        const theme = (mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme);
+        const theme = mode === ModeToggle.DARK_MODE ? darkTheme : lightTheme;
 
         const message = {
           setConfig: {
@@ -49,8 +59,6 @@
         const giscus = document.querySelector(iframe).contentWindow;
         giscus.postMessage({ giscus: message }, origin);
       }
-
     });
-
-  });
+  })();
 </script>

data/_includes/datetime.html

@@ -4,12 +4,16 @@
 -->
 
 {% assign wrap_elem = include.wrap | default: 'em' %}
-{% assign df_strftime = site.data.locales[site.lang].df.post.strftime | default: '%d/%m/%Y' %}
-{% assign df_dayjs = site.data.locales[site.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
+{% assign df_strftime = site.data.locales[include.lang].df.post.strftime | default: '%d/%m/%Y' %}
+{% assign df_dayjs = site.data.locales[include.lang].df.post.dayjs | default: 'DD/MM/YYYY' %}
 
-<{{ wrap_elem }} class="{% if include.class %}{{ include.class }}{% endif %}"
-    data-ts="{{ include.date | date: '%s' }}"
-    data-df="{{ df_dayjs }}"
-    {% if include.tooltip %}data-toggle="tooltip" data-placement="bottom"{% endif %}>
+<{{ wrap_elem }}
+  class="{% if include.class %}{{ include.class }}{% endif %}"
+  data-ts="{{ include.date | date: '%s' }}"
+  data-df="{{ df_dayjs }}"
+  {% if include.tooltip %}
+    data-bs-toggle="tooltip" data-bs-placement="bottom"
+  {% endif %}
+>
   {{ include.date | date: df_strftime }}
 </{{ wrap_elem }}>

data/_includes/footer.html

@@ -1,36 +1,34 @@
 <!-- The Footer -->
 
 <footer>
-  <div class="container pl-lg-4 pr-lg-4">
-    <div class="d-flex justify-content-between align-items-center text-muted ml-md-3 mr-md-3">
-      <div class="footer-left">
-        <p class="mb-0">
-          © {{ 'now' | date: "%Y" }}
-          <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
-          {% if site.data.locales[site.lang].copyright.brief %}
-          <span data-toggle="tooltip" data-placement="top"
-            title="{{ site.data.locales[site.lang].copyright.verbose }}">{{ site.data.locales[site.lang].copyright.brief }}</span>
-          {% endif %}
-        </p>
-      </div>
-
-      <div class="footer-right">
-        <p class="mb-0">
-
-          {%- capture _platform -%}
+  <div class="container px-lg-4">
+    <div class="d-flex justify-content-center align-items-center text-muted mx-md-3">
+      <p>
+        {%- capture _platform -%}
           <a href="https://jekyllrb.com" target="_blank" rel="noopener">Jekyll</a>
-          {%- endcapture -%}
+        {%- endcapture -%}
 
-          {%- capture _theme -%}
+        {%- capture _theme -%}
           <a href="https://github.com/cotes2020/jekyll-theme-chirpy" target="_blank" rel="noopener">Chirpy</a>
-          {%- endcapture -%}
+        {%- endcapture -%}
+
+        {{ site.data.locales[include.lang].meta | replace: ':PLATFORM', _platform | replace: ':THEME', _theme }}
+      </p>
 
-          {{ site.data.locales[site.lang].meta
-            | default: 'Using the :PLATFORM theme :THEME.'
-            | replace: ':PLATFORM', _platform | replace: ':THEME', _theme
-          }}
-        </p>
-      </div>
+      <p>
+        {{- '©' }}
+        {{ 'now' | date: '%Y' }}
+        <a href="{{ site.social.links[0] }}">{{ site.social.name }}</a>.
+        {% if site.data.locales[include.lang].copyright.brief %}
+          <span
+            data-bs-toggle="tooltip"
+            data-bs-placement="top"
+            title="{{ site.data.locales[include.lang].copyright.verbose }}"
+          >
+            {{- site.data.locales[include.lang].copyright.brief -}}
+          </span>
+        {% endif %}
+      </p>
     </div>
   </div>
 </footer>

data/_includes/head.html

@@ -58,15 +58,15 @@
   {% include favicons.html %}
 
   {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
-    <link href="{{ site.data.assets[origin].webfonts | relative_url }}" rel="stylesheet">
+    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">
 
   {% else %}
-    {% for cdn in site.data.assets[origin].cdns %}
+    {% for cdn in site.data.origin[type].cdns %}
       <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
       <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
     {% endfor %}
 
-    <link rel="stylesheet" href="{{ site.data.assets[origin].webfonts | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
   {% endif %}
 
   <!-- GA -->
@@ -90,27 +90,27 @@
   {% endif %}
 
   <!-- Bootstrap -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].bootstrap.css | relative_url}}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url}}">
 
   <!-- Font Awesome -->
-  <link rel="stylesheet" href="{{ site.data.assets[origin].fontawesome.css | relative_url }}">
+  <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">
 
   <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
 
   {% if site.toc and page.toc %}
-    <link rel="stylesheet" href="{{ site.data.assets[origin].toc.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
   {% endif %}
 
   {% if page.layout == 'page' or page.layout == 'post' %}
     <!-- Manific Popup -->
-    <link rel="stylesheet" href="{{ site.data.assets[origin].magnific-popup.css | relative_url }}">
+    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
   {% endif %}
 
   <!-- JavaScript -->
 
-  <script src="{{ site.data.assets[origin].jquery.js | relative_url }}"></script>
-
   {% unless site.theme_mode %}
     {% include mode-toggle.html %}
   {% endunless %}
+
+  {% include metadata-hook.html %}
 </head>

data/_includes/js-selector.html

@@ -1,24 +1,35 @@
 <!-- JS selector for site. -->
 
+<!-- commons -->
+
+{% assign urls = site.data.origin[type].jquery.js
+  | append: ','
+  | append: site.data.origin[type].bootstrap.js
+  | append: ','
+  | append: site.data.origin[type].search.js
+%}
+
 <!-- layout specified -->
 
 {% if page.layout == 'post' %}
   {% if site.google_analytics.pv.proxy_endpoint or site.google_analytics.pv.cache_path %}
     <!-- pv-report needs countup.js -->
-    <script async src="{{ site.data.assets[origin].countup.js | relative_url }}"></script>
+    {% assign urls = urls | append: ',' | append: site.data.origin[type].countup.js %}
   {% endif %}
 {% endif %}
 
-{% if page.layout == 'post' or page.layout == 'page' %}
-  <!-- image lazy-loading & popup & clipboard -->
-  {% assign _urls = site.data.assets[origin]['magnific-popup'].js
-    | append: ','
-    | append: site.data.assets[origin].lazysizes.js
-    | append: ','
-    | append: site.data.assets[origin].clipboard.js
-  %}
+{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
 
-  {% include jsdelivr-combine.html urls=_urls %}
+  {% unless page.layout == 'home' %}
+    <!-- image lazy-loading & popup & clipboard -->
+    {% assign urls = urls
+      | append: ','
+      | append: site.data.origin[type]['magnific-popup'].js
+      | append: ','
+      | append: site.data.origin[type].clipboard.js
+    %}
+  {% endunless %}
 {% endif %}
 
 {% if page.layout == 'home'
@@ -29,29 +40,39 @@
 %}
   {% assign locale = site.lang | split: '-' | first %}
 
-  {% assign _urls = site.data.assets[origin].dayjs.js.common
+  {% assign urls = urls
+    | append: ','
+    | append: site.data.origin[type].dayjs.js.common
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.locale
+    | append: site.data.origin[type].dayjs.js.locale
     | replace: ':LOCALE', locale
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.relativeTime
+    | append: site.data.origin[type].dayjs.js.relativeTime
     | append: ','
-    | append: site.data.assets[origin].dayjs.js.localizedFormat
+    | append: site.data.origin[type].dayjs.js.localizedFormat
   %}
+{% endif %}
+
+{% if page.content contains '<h2' or page.content contains '<h3' and site.toc and page.toc %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].toc.js %}
+{% endif %}
 
-  {% include jsdelivr-combine.html urls=_urls %}
+{% if page.mermaid %}
+  {% assign urls = urls | append: ',' | append: site.data.origin[type].mermaid.js %}
 {% endif %}
 
+{% include jsdelivr-combine.html urls=urls %}
+
 {% case page.layout %}
-  {% when 'categories', 'post', 'page' %}
-    {% assign type = page.layout %}
-  {% when 'home', 'archives', 'category', 'tag' %}
-    {% assign type = 'misc' %}
+  {% when 'home', 'categories', 'post', 'page' %}
+    {% assign js = page.layout %}
+  {% when 'archives', 'category', 'tag' %}
+    {% assign js = 'misc' %}
   {% else %}
-    {% assign type = 'commons' %}
+    {% assign js = 'commons' %}
 {% endcase %}
 
-{% capture script %}/assets/js/dist/{{ type }}.min.js{% endcapture %}
+{% capture script %}/assets/js/dist/{{ js }}.min.js{% endcapture %}
 <script defer src="{{ script | relative_url }}"></script>
 
 {% if page.math %}
@@ -73,14 +94,10 @@
       }
     };
   </script>
-  <script src="{{ site.data.assets[origin].polyfill.js | relative_url }}"></script>
-  <script id="MathJax-script" async src="{{ site.data.assets[origin].mathjax.js | relative_url }}"></script>
+  <script src="{{ site.data.origin[type].polyfill.js | relative_url }}"></script>
+  <script id="MathJax-script" async src="{{ site.data.origin[type].mathjax.js | relative_url }}"></script>
 {% endif %}
 
-<!-- commons -->
-
-<script src="{{ site.data.assets[origin].bootstrap.js | relative_url }}"></script>
-
 {% if jekyll.environment == 'production' %}
   <!-- PWA -->
   {% if site.pwa.enabled %}

data/_includes/jsdelivr-combine.html

@@ -5,7 +5,6 @@
 {% assign domain = 'https://cdn.jsdelivr.net/' %}
 
 {% for url in urls %}
-
   {% if url contains domain %}
     {% assign url_snippet = url | slice: domain.size, url.size %}
 
@@ -16,15 +15,10 @@
     {% endif %}
 
   {% elsif url contains '//' %}
-
     <script src="{{ url }}"></script>
-
   {% else %}
-
     <script src="{{ url | relative_url }}"></script>
-
   {% endif %}
-
 {% endfor %}
 
 {% if combined_urls %}

data/_includes/lang.html

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

data/_includes/mermaid.html

@@ -1,59 +1,58 @@
-<!--
-  mermaid-js loader
--->
-
-<script src="{{ site.data.assets[origin].mermaid.js | relative_url }}"></script>
-
-<script>
+<!-- mermaid-js loader -->
+<script type="text/javascript">
   (function () {
-
     function updateMermaid(event) {
-      if (event.source === window && event.data &&
-        event.data.direction === ModeToggle.ID) {
-
+      if (event.source === window && event.data && event.data.direction === ModeToggle.ID) {
         const mode = event.data.message;
 
-        if (typeof mermaid === "undefined") {
+        if (typeof mermaid === 'undefined') {
           return;
         }
 
-        let expectedTheme = (mode === ModeToggle.DARK_MODE ? "dark" : "default");
-        let config = {theme: expectedTheme};
+        let expectedTheme = mode === ModeToggle.DARK_MODE ? 'dark' : 'default';
+        let config = { theme: expectedTheme };
 
         /* Re-render the SVG › <https://github.com/mermaid-js/mermaid/issues/311#issuecomment-332557344> */
-        $(".mermaid").each(function () {
+        $('.mermaid').each(function () {
           let svgCode = $(this).prev().children().html();
-          $(this).removeAttr("data-processed");
+          $(this).removeAttr('data-processed');
           $(this).html(svgCode);
         });
 
         mermaid.initialize(config);
-        mermaid.init(undefined, ".mermaid");
+        mermaid.init(undefined, '.mermaid');
       }
     }
 
-    let initTheme = "default";
+    let initTheme = 'default';
+    const html = document.documentElement;
 
-    if ($("html[data-mode=dark]").length > 0
-      || ($("html[data-mode]").length == 0
-        && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
-      initTheme = "dark";
+    if (
+      (html.hasAttribute('data-mode') && html.getAttribute('data-mode') === 'dark') ||
+      (!html.hasAttribute('data-mode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      initTheme = 'dark';
     }
 
     let mermaidConf = {
-      theme: initTheme  /* <default|dark|forest|neutral> */
+      theme: initTheme /* <default|dark|forest|neutral> */
     };
 
     /* Create mermaid tag */
-    $("pre").has("code.language-mermaid").each(function () {
-      let svgCode = $(this).children().html();
-      $(this).addClass("unloaded");
-      $(this).after(`<pre class=\"mermaid\">${svgCode}</pre>`);
+    document.querySelectorAll('pre>code.language-mermaid').forEach((elem) => {
+      const svgCode = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create mermaid node */
+      let mermaid = document.createElement('pre');
+      mermaid.classList.add('mermaid');
+      const text = document.createTextNode(svgCode);
+      mermaid.appendChild(text);
+      backup.after(mermaid);
     });
 
     mermaid.initialize(mermaidConf);
 
-    window.addEventListener("message", updateMermaid);
+    window.addEventListener('message', updateMermaid);
   })();
-
 </script>

data/_includes/metadata-hook.html

@@ -0,0 +1 @@
+<!-- A placeholder to allow defining custom metadata -->