feat: support utterances and a couple of bug fixes

assets/js/dark-mode.js

@@ -1,110 +1,98 @@
-// Note: Original code from https://derekkedziora.com/blog/dark-mode
+// Back to Previous Mode & Respect System Preferences
+// `userPrefers`, `darkModeMediaQuery`, `lightModeMediaQuery` is defined in layouts/partials/head.html
 
-{{ $themeColor := .Site.Params.themeColor }}
-{{ $themeColorDark := .Site.Params.themeColorDark }}
-
-// `content` is defined in assets/scss/main.scss via CSS media query `prefers-color-scheme`
-const userPrefers = getComputedStyle(document.documentElement).getPropertyValue('content');
-
-// `theme` is defined in layouts/partials/head.html
-if (theme === "dark") {
-    goDark();
-} else if (theme === "light") {
-    goLight();
-} else if (userPrefers === "dark") {
-    goDarkMeta();
-    setDark();
-    goDark();
+if (userPrefers === "dark") {
+    changeMode("🌙", "chroma", "chroma-dark");
 } else if (userPrefers === "light") {
-    goLightMeta();
-    setLight();
-    goLight();
-}
-
-function modeSwitcher() {
-    const currentMode = document.documentElement.getAttribute('data-theme');
-    if (currentMode === "dark") {
-        goLightMeta();
-        setLight();
-        goLight();
-    } else {
-        goDarkMeta();
-        setDark();
-        goDark();
-    }
+    changeMode("🌞", "chroma-dark", "chroma");
+} else if (darkModeMediaQuery.matches) {
+    changeMode("🌙", "chroma", "chroma-dark");
+} else if (lightModeMediaQuery.matches) {
+    changeMode("🌞", "chroma-dark", "chroma");
 }
 
 // Reactive Dark Mode
 // https://web.dev/prefers-color-scheme/#reacting-on-dark-mode-changes
 // https://twitter.com/ChromeDevTools/status/1197175265643745282
 
-const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
 darkModeMediaQuery.addListener((e) => {
     const darkModeOn = e.matches;
     if (darkModeOn) {
-        goDarkMeta();
-        setDark();
-        goDark();
+        changeModeMeta("dark");
+        changeMode("🌙", "chroma", "chroma-dark");
+        setMode("dark");
     }
 });
 
-const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
 lightModeMediaQuery.addListener((e) => {
     const lightModeOn = e.matches;
     if (lightModeOn) {
-        goLightMeta();
-        setLight();
-        goLight();
+        changeModeMeta("light");
+        changeMode("🌞", "chroma-dark", "chroma");
+        setMode("light");
     }
 });
 
+// Mode Switcher
+// https://derekkedziora.com/blog/dark-mode
+
+function modeSwitcher() {
+    const currentMode = document.documentElement.getAttribute('data-theme');
+    if (currentMode === "dark") {
+        changeModeMeta("light");
+        changeMode("🌞", "chroma-dark", "chroma");
+        setMode("light");
+    } else {
+        changeModeMeta("dark");
+        changeMode("🌙", "chroma", "chroma-dark");
+        setMode("dark");
+    }
+}
+
 // Sync Across Tabs
 // https://codepen.io/tevko/pen/GgWYpg
 
 window.addEventListener('storage', function (event) {
     if (event.newValue === "dark") {
-        goDarkMeta();
-        goDark();
+        changeModeMeta("dark");
+        changeMode("🌙", "chroma", "chroma-dark");
     } else {
-        goLightMeta();
-        goLight();
+        changeModeMeta("light");
+        changeMode("🌞", "chroma-dark", "chroma");
     }
 });
 
 // Functions
 
-function goDarkMeta() {
-    document.documentElement.setAttribute('data-theme', 'dark');
-    document.querySelector('meta[name="theme-color"]').setAttribute('content', '{{ $themeColorDark }}');
-}
-
-function goLightMeta() {
-    document.documentElement.setAttribute('data-theme', 'light');
-    document.querySelector('meta[name="theme-color"]').setAttribute('content', '{{ $themeColor }}');
-}
-
-function setDark() {
-    window.localStorage.setItem('theme', 'dark');
-}
-
-function setLight() {
-    window.localStorage.setItem('theme', 'light');
-}
-
-function goDark() {
-    document.getElementById("theme-toggle").innerHTML = "🌙";
+function changeMode() {
+    document.getElementById("theme-toggle").innerHTML = arguments[0];
 
-    var els = [].slice.apply(document.getElementsByClassName("chroma"));
+    var els = [].slice.apply(document.getElementsByClassName(arguments[1]));
     for (var i = 0; i < els.length; i++) {
-        els[i].className = els[i].className.replace(/ *\bchroma\b/g, "chroma-dark");
+        els[i].className = els[i].className.replace(/ *\bchroma\b/g, arguments[2]);
     }
-}
 
-function goLight() {
-    document.getElementById("theme-toggle").innerHTML = "🌞";
+    // Utterances
+    // https://github.com/utterance/utterances/issues/229
+    {{ if .Site.Params.enableUtterances }}
+        if (arguments[0] === "🌙") {
+            changeUtterancesTheme("{{ .Site.Params.utterancesThemeDark }}");
+        } else {
+            changeUtterancesTheme("{{ .Site.Params.utterancesTheme }}");
+        }
+        function changeUtterancesTheme() {
+            const iframe = document.querySelector('.utterances-frame');
+            if (iframe !== null) {
+                const message = {
+                    type: 'set-theme',
+                    theme: arguments[0]
+                };
+                iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+            }
+        }
+    {{ end }}
+}
 
-    var els = [].slice.apply(document.getElementsByClassName("chroma-dark"));
-    for (var i = 0; i < els.length; i++) {
-        els[i].className = els[i].className.replace(/ *\bchroma-dark\b/g, "chroma");
-    }
+function setMode() {
+    window.localStorage.setItem('theme', arguments[0]);
 }

assets/scss/main.scss

@@ -89,16 +89,6 @@
         {{ end }}
     {{ end }}
     @import "_variables/dark.scss";
-    @media (prefers-color-scheme: dark) {
-        html {
-            content: "dark";
-        }
-    }
-    @media (prefers-color-scheme: light) {
-        html {
-            content: "light";
-        }
-    }
     #theme-toggle {
         padding: 1em;
         cursor: pointer;

config-examples/en-us/config.toml

@@ -605,6 +605,15 @@ uglyURLs = false
     valineServerURLs = ""
     # Note: https://valine.js.org/
 
+    ## Utterances
+    enableUtterances = false
+    utterancesRepo = ""
+    utterancesIssueTerm = "pathname"
+    utterancesTheme = "github-light"
+    utterancesThemeDark = "photon-dark"
+    utterancesLabel = ""
+    # Note: https://utteranc.es/
+
 
     ######################################
     # Google Analytics

config-examples/zh-cn/config.toml

@@ -556,6 +556,15 @@ uglyURLs = false
     valineServerURLs = ""
     # 说明：https://valine.js.org/
 
+    ## Utterances
+    enableUtterances = false
+    utterancesRepo = ""
+    utterancesIssueTerm = "pathname"
+    utterancesTheme = "github-light"
+    utterancesThemeDark = "photon-dark"
+    utterancesLabel = ""
+    # 说明：https://utteranc.es/
+
 
     ######################################
     # Google Analytics

exampleSite/resources/_gen/assets/scss/scss/main.scss_b04c21e44835e7dcdc8cb03d103b5ef1.json

@@ -1 +1 @@
-{"Target":"css/meme.min.a5649675db287fb9b9f916eb55a8dbe6dc2117280fd99742d2bbfa6deecb6363.css","MediaType":"text/css","Data":{"Integrity":"sha256-pWSWddsof7m5+RbrVajb5twhFygP2ZdC0rv6be7LY2M="}}
+{"Target":"css/meme.min.23a3789aeb10501ab7dabd657d79b9001b7f3a007c7198a5f54cd9a513185b03.css","MediaType":"text/css","Data":{"Integrity":"sha256-I6N4musQUBq32r1lfXm5ABt/OgB8cZil9UzZpRMYWwM="}}

layouts/partials/comments.html

@@ -13,5 +13,9 @@
             <div id="vcomments"></div>
         {{ end }}
 
+        {{ if .Site.Params.enableUtterances }}
+            <div id="utterances"></div>
+        {{ end }}
+
     {{ end }}
 {{ end }}

layouts/partials/components/content.html

@@ -199,6 +199,17 @@
     {{- end -}}
 {{- end -}}
 
+<!-- Dark Mode -->
+{{- if .Site.Params.enableHighlight -}}
+    {{- if and .Site.Params.enableDarkMode (eq .Site.Params.defaultTheme "dark") -}}
+        {{- $Content := .Scratch.Get "Content" -}}
+        {{- $regexPatternDarkmode := `(<pre class=")(chroma)(">)` -}}
+        {{- $regexReplacementDarkmode := `${1}chroma-dark${3}` -}}
+        {{- $Content := $Content | replaceRE $regexPatternDarkmode $regexReplacementDarkmode | safeHTML -}}
+        {{- .Scratch.Set "Content" $Content -}}
+    {{- end -}}
+{{- end -}}
+
 <!-- Final Content -->
 {{- $Content := .Scratch.Get "Content" -}}
 {{- .Scratch.Set "Content" $Content -}}

layouts/partials/head.html

@@ -1,26 +1,39 @@
 <head{{ if .Site.Params.openGraph }} prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#"{{ end }}>
     <meta charset="UTF-8" />
 
-    {{ $themeColor := .Site.Params.themeColor -}}
-    {{- $themeColorDark := .Site.Params.themeColorDark -}}
     {{- with .Site.Params.defaultTheme | default "light" -}}
         {{- if eq . "light" -}}
-            <meta name="theme-color" content="{{ $themeColor }}" />
-        {{- end -}}
-        {{- if eq . "dark" -}}
-            <meta name="theme-color" content="{{ $themeColorDark }}" />
+            <meta name="theme-color" content="{{ $.Site.Params.themeColor }}" />
+        {{- else -}}
+            <meta name="theme-color" content="{{ $.Site.Params.themeColorDark }}" />
         {{- end -}}
     {{- end -}}
+
     <!-- Dark Mode -->
     {{- if .Site.Params.enableDarkMode }}
         <script>
-            const theme = localStorage.getItem('theme');
-            if (theme === "dark") {
-                document.documentElement.setAttribute('data-theme', 'dark');
-                document.querySelector('meta[name="theme-color"]').setAttribute('content', '{{ $themeColorDark }}');
-            } else if (theme === "light") {
-                document.documentElement.setAttribute('data-theme', 'light');
-                document.querySelector('meta[name="theme-color"]').setAttribute('content', '{{ $themeColor }}');
+            const userPrefers = localStorage.getItem('theme');
+            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
+            if (userPrefers === "dark") {
+                changeModeMeta("dark");
+            } else if (userPrefers === "light") {
+                changeModeMeta("light");
+            } else if (darkModeMediaQuery.matches) {
+                changeModeMeta("dark");
+            } else if (lightModeMediaQuery.matches) {
+                changeModeMeta("light");
+            }
+            function changeModeMeta() {
+                document.documentElement.setAttribute('data-theme', arguments[0]);
+                if (arguments[0] === "dark") {
+                    changeThemeColor("{{ .Site.Params.themeColorDark }}");
+                } else {
+                    changeThemeColor("{{ .Site.Params.themeColor }}");
+                }
+            }
+            function changeThemeColor() {
+                document.querySelector('meta[name="theme-color"]').setAttribute('content', arguments[0]);
             }
         </script>
     {{- end }}

layouts/partials/script.html

@@ -54,6 +54,10 @@
             {{ partial "third-party/valine.html" . }}
         {{ end }}
 
+        {{ if .Site.Params.enableUtterances }}
+            {{ partial "third-party/utterances.html" . }}
+        {{ end }}
+
     {{ end }}
 {{ end }}
 

layouts/partials/third-party/instantclick.html

@@ -3,13 +3,21 @@
 {{ if .Site.Params.enableDarkMode }}
     <script data-no-instant>
         InstantClick.on('change', function () {
-            const theme = localStorage.getItem('theme');
-            if (theme === "dark") {
-                goDarkMeta();
-                goDark();
-            } else if (theme === "light") {
-                goLightMeta();
-                goLight();
+            const userPrefers = localStorage.getItem('theme');
+            const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            const lightModeMediaQuery = window.matchMedia('(prefers-color-scheme: light)');
+            if (userPrefers === "dark") {
+                changeModeMeta("dark");
+                changeMode("🌙", "chroma", "chroma-dark");
+            } else if (userPrefers === "light") {
+                changeModeMeta("light");
+                changeMode("🌞", "chroma-dark", "chroma");
+            } else if (darkModeMediaQuery.matches) {
+                changeModeMeta("dark");
+                changeMode("🌙", "chroma", "chroma-dark");
+            } else if (lightModeMediaQuery.matches) {
+                changeModeMeta("light");
+                changeMode("🌞", "chroma-dark", "chroma");
             }
         });
     </script>
@@ -33,4 +41,4 @@
             });
         </script>
     {{ end -}}
-{{ end -}}
+{{ end -}}

layouts/partials/third-party/katex.html

@@ -5,7 +5,6 @@
             var script = document.createElement('script');
             script.defer = true;
             script.crossOrigin = 'anonymous';
-            script['data-no-instant'] = true;
             Object.keys(options).forEach((key) => {
                 script[key] = options[key];
             });
@@ -23,24 +22,17 @@
                             src: 'https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/contrib/auto-render.min.js',
                             integrity: 'sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI',
                             onload: () => {
-                                renderMathInElement(
-                                    document.body,
-                                    {
-                                        delimiters: [
-                                            {left: "$$", right: "$$", display: true},
-                                            {left: "\\[", right: "\\]", display: true},
-                                            {left: "$", right: "$", display: false},
-                                            {left: "\\(", right: "\\)", display: false}
-                                        ]
-                                    }
-                                );
+                                renderKaTex();
                             }
                         });
                     }
                 });
             }
         });
     } else {
+        renderKaTex();
+    }
+    function renderKaTex() {
         renderMathInElement(
             document.body,
             {