100% support of utterances

assets/js/theme.js

@@ -1,17 +1,40 @@
-const light = '{{ index .Site.Params.switch 1 }}',
-  dark = '{{ index .Site.Params.switch 0 }}';
-const LIGHT = 'light', DARK = 'dark';
-const themeSwitcher = document.getElementById('theme-switcher');
+const light = '{{ index .Site.Params.switch 1 }}'
+const dark = '{{ index .Site.Params.switch 0 }}'
+const comment = '{{ .Site.Params.comment }}'
+const LIGHT = 'light', DARK = 'dark'
 
-themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark;
+const themeSwitcher = document.getElementById('theme-switcher')
+
+// set switcher
+themeSwitcher.innerHTML = localStorage.theme === LIGHT ? light : dark
 
 themeSwitcher.addEventListener('click', function () {
-  const currentTheme = localStorage.theme,
-    newTheme = currentTheme === LIGHT ? DARK : LIGHT,
-    { classList } = document.documentElement,
-    text = newTheme === LIGHT ? light : dark;
-  classList.remove(currentTheme);
+  const currentTheme = localStorage.theme
+  const newTheme = currentTheme === LIGHT ? DARK : LIGHT
+  
+  // switch global theme
+  switchMinimaTheme(currentTheme, newTheme)
+
+  // switch utterance theme if necessary
+
+  if (comment === 'utterances')
+    switchUtteranceTheme(`github-${newTheme}`)
+});
+
+function switchMinimaTheme(oldTheme, newTheme) {
+  const { classList } = document.documentElement
+  const text = newTheme === LIGHT ? light : dark;
+  
+  classList.remove(oldTheme);
   classList.add(newTheme);
   localStorage.theme = newTheme;
   themeSwitcher.innerHTML = text;
-});
+}
+
+const utteranceClassName = '.utterances-frame'
+let utterance;
+
+function switchUtteranceTheme(theme) {
+  if (!utterance) utterance = document.querySelector(utteranceClassName)
+  utterance.contentWindow.postMessage({type: 'set-theme', theme}, 'https://utteranc.es')
+}

assets/sass/main.scss

@@ -15,8 +15,8 @@
 }
 
 html.dark {
-  --bg: #262d33;
-  --ft: #c5c4c4;
+  --bg: #181818;
+  --ft: silver;
   --bd: #555;
   --tag: #999;
 

exampleSite/config.toml

@@ -4,7 +4,6 @@ title = "Hi Folks"
 copyright = "© XJJ 2021"
 paginate = 6
 googleAnalytics = ""
-disqusShortname = "hugo-minima"
 
 # theme is the name of the hugo theme you choose,
 # `hugo-theme-minima` is put here only for debuging,
@@ -26,8 +25,8 @@ iam = "I am"
 # e.g. "title - subtitle".
 subtitle = ""
 # Comment decides the comment plugin to be used on your blog site, 
-# e.g. disqus, ovo.
-comment = "disqus"
+# e.g. disqus, utterances, ovo.
+comment = "utterances"
 # timeformat 
 timeformat = "Jan 02, 2006"
 # switch for turning on/off lights.
@@ -36,15 +35,24 @@ switch = ["🌚", "🌝"]
 displayDate = true
 # if true, users can select text from your post.
 selectable = true
-# custom global font. notice:  `globalFontFamily` won't be working
-# on texts in some special positions. e.g. title 
+# custom global font. notice: `globalFontFamily` won't be working
+# on texts in some special positions like on titles
 globalFontFamily = 'Helvatica, sans-serif'
 
+# Disqus configuration
+[params.disqus]
+shortname = "hugo-minima"
 
-# OvO is a comment plugin written by the author of Minima. 
+# Utterance configuration
+# Full doc's at https://utteranc.es
+[params.utterances]
+repo = "mivinci/minima-comments"
+issueTerm = "pathname"
+
+# OvO is a comment plugin written by the author of Minima.
 # It is enabled when params.comment is set "ovo". You can
 # find its documentation on https://github.com/ovojs/ovo.
-# If you are using disqus, just ignore this field.
+# If you are using disqus or utterance, just ignore this field.
 [params.ovo]
 server = ""
 placeholder = ""

exampleSite/content/instruction.md

@@ -4,6 +4,7 @@ title: Instruction
 date: 2021-07-19T10:52:59+08:00
 description: A Clean and minimal Hugo theme porting from Minima on Hexo. [Click me](https://h.xjj.pub/) to take a look at the demo site.
 math: true
+comment: true
 ---
 
 

layouts/_default/single.html

@@ -44,4 +44,8 @@
 {{ partial "ovo.html" . }}
 {{ end }}
 
+{{ if and .Params.comment (eq .Site.Params.comment "utterances")}}
+{{ partial "utterances.html" . }}
+{{ end }}
+
 {{ end }}

layouts/partials/disqus.html

@@ -7,7 +7,7 @@
       return;
 
     const dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-    const disqus_shortname = '{{ .Site.DisqusShortname }}';
+    const disqus_shortname = '{{ .Site.Params.shortname }}';
     dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
   })();

layouts/partials/head.html

@@ -25,7 +25,8 @@
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 
   {{ $options = (dict "targetPath" (printf `minima.%d.js` $hash) "minify" true) }}
-  {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) . }}
+  {{ $js := resources.Get "js/main.js" | js.Build $options | resources.ExecuteAsTemplate (printf `minima.%d.js` $hash) .
+  }}
   <script defer type="text/javascript" src="{{ $js.RelPermalink }}"></script>
 </head>
 <script>
@@ -37,4 +38,4 @@
   } catch (e) {
     console.error(e);
   }
-</script>
+</script>

layouts/partials/utterances.html

@@ -0,0 +1,16 @@
+<script>
+  const repo = '{{ .Site.Params.utterances.repo }}'
+  const issueTerm = '{{ .Site.Params.utterances.issueTerm }}'
+  const theme = localStorage.theme ? `github-${localStorage.theme}` : 'preferred-color-scheme';
+
+  const script = document.createElement('script')
+  script.src = 'https://utteranc.es/client.js'
+  script.async = true
+  script.crossOrigin = 'anonymous'
+
+  script.setAttribute('repo', repo)
+  script.setAttribute('issue-term', issueTerm)
+  script.setAttribute('theme', theme)
+
+  document.querySelector('main').appendChild(script)
+</script>