feat: add utterances support

6 files changed, 76 insertions, 9 deletions

diff --git a/assets/js/eureka.js b/assets/js/eureka.js
index 9fa18a1..4f9778a 100644
--- a/assets/js/eureka.js
+++ b/assets/js/eureka.js
@@ -147,6 +147,19 @@ function getcolorscheme() {
 
 }
 
+{{/*  Utterances  */}}
+{{ $enableUtterances := and (eq .Site.Params.comment.platform "utterances") (eq .Site.Params.comment.utterances.theme "eureka") }}
+{{- if $enableUtterances }}
+function switchUtterancesTheme(theme) {
+    const message = {
+        type: 'set-theme',
+        theme: theme,
+      };
+    const utterances = document.querySelector('iframe').contentWindow; // try event.source instead
+    utterances.postMessage(message, 'https://utteranc.es');
+}
+{{- end }}
+
 function switchMode(mode) {
     let icon = ''
     switch (mode) {
@@ -154,11 +167,19 @@ function switchMode(mode) {
             window.matchMedia("(prefers-color-scheme: dark)").removeEventListener('change', switchDarkMode)
             icon = 'sun'
             document.getElementsByTagName('html')[0].classList.remove('dark')
+            {{/*  Utterances  */}}
+            {{- if $enableUtterances }}
+            switchUtterancesTheme('github-light')
+            {{- end }}
             break
         case 'Dark':
             window.matchMedia("(prefers-color-scheme: dark)").removeEventListener('change', switchDarkMode)
             icon = 'moon'
             document.getElementsByTagName('html')[0].classList.add('dark')
+            {{/*  Utterances  */}}
+            {{- if $enableUtterances }}
+            switchUtterancesTheme('github-dark')
+            {{- end }}
             break
         case 'Auto':
             icon = 'adjust'
@@ -173,8 +194,16 @@ function switchMode(mode) {
 function switchDarkMode(e) {
     if (e.matches) {
         document.getElementsByTagName('html')[0].classList.add('dark')
+        {{/*  Utterances  */}}
+        {{- if $enableUtterances }}
+        switchUtterancesTheme('github-dark')
+        {{- end }}
     } else {
         document.getElementsByTagName('html')[0].classList.remove('dark')
+        {{/*  Utterances  */}}
+        {{- if $enableUtterances }}
+        switchUtterancesTheme('github-light')
+        {{- end }}
     }
 }
 
diff --git a/exampleSite/config/_default/params.yaml b/exampleSite/config/_default/params.yaml
index d7771f1..f930a4d 100644
--- a/exampleSite/config/_default/params.yaml
+++ b/exampleSite/config/_default/params.yaml
@@ -40,7 +40,7 @@ math:
   #   leqno:
 
 comment:
-  # Options: disqus and commento.
+  # Options: disqus, commento and utterances.
   platform:
 
   disqus:
@@ -50,6 +50,13 @@ comment:
     # If self-hosting, please enter the url (e.g. https://commento.example.com) here. Otherwise leave empty.
     url:
 
+  utterances:
+    # Browse https://utteranc.es/ to see the options available.
+    # If you want the color scheme of utterances to follow eureka's, you can set `theme: eureka'.
+    repo:
+    issue-term:
+    theme:
+
 diagram:
   handler: mermaid
 
diff --git a/layouts/partials/comment.html b/layouts/partials/comment.html
index 96e8a9d..c2161c3 100644
--- a/layouts/partials/comment.html
+++ b/layouts/partials/comment.html
@@ -1,5 +1,3 @@
-{{ if eq .Site.Params.comment.platform "disqus" }}
-{{ partial "comment/disqus" . }}
-{{ else if eq .Site.Params.comment.platform "commento" }}
-{{ partial "comment/commento" . }}
+{{ if .Site.Params.comment.platform }}
+  {{ partial (printf "comment/%s" .Site.Params.comment.platform) . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/comment/utterances.html b/layouts/partials/comment/utterances.html
new file mode 100644
index 0000000..e2f0471
--- /dev/null
+++ b/layouts/partials/comment/utterances.html
@@ -0,0 +1,32 @@
+<script id="utterances" src="https://utteranc.es/client.js"
+        {{- range $key, $value := .Site.Params.comment.utterances }}
+          {{- if and (eq $key "theme") (eq $value "eureka") }}
+            {{- if eq $.Site.Params.colorScheme "light" }}
+              {{ printf "%s=%v" $key "github-light" | safeHTMLAttr }}
+            {{- else if eq $.Site.Params.colorScheme "dark" }}
+              {{ printf "%s=%v" $key "github-dark" | safeHTMLAttr }}
+            {{- else }}
+              {{ printf "%s=%v" $key "preferred-color-scheme" | safeHTMLAttr }}
+            {{- end }}
+          {{- else if or $value (eq $value false) }}
+            {{ printf "%s=%v" $key $value | safeHTMLAttr }}
+          {{- end }}
+        {{- end }}
+        crossorigin="anonymous"
+        async>
+</script>
+<script>
+  {{- if eq .Site.Params.colorScheme "light" }}
+    if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
+      document.getElementById('utterances').setAttribute('theme', 'github-dark')
+    }
+  {{- else if eq .Site.Params.colorScheme "dark" }}
+    if ((storageColorScheme == 'Auto' && window.matchMedia("(prefers-color-scheme: light)").matches) || storageColorScheme == "Light") {
+      document.getElementById('utterances').setAttribute('theme', 'github-light')
+    }
+  {{- else }}
+    if (((storageColorScheme == 'Auto' || storageColorScheme == null) && window.matchMedia("(prefers-color-scheme: dark)").matches) || storageColorScheme == "Dark") {
+      document.getElementById('utterances').setAttribute('theme', 'github-dark')
+    }
+  {{- end }}
+</script>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fb3d569..cc0b21f 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -58,7 +58,7 @@
 {{- $eurekaCSS := $eurekaCSS | minify }}
 <link rel="stylesheet" href="{{ $eurekaCSS.Permalink }}">
 
-{{- $eurekaJS := resources.Get "js/eureka.js" | minify }}
+{{- $eurekaJS := resources.Get "js/eureka.js" | resources.ExecuteAsTemplate "js/eureka.js" . | minify }}
 <script defer src="{{ $eurekaJS.Permalink }}"></script>
 
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c782397..a5d4497 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -76,6 +76,7 @@
 
 </nav>
 <script>
+    // change icon and add listener if auto
     let element = document.getElementById('lightDarkMode')
     {{- if eq .Site.Params.colorScheme "light" }}
     if (storageColorScheme == 'Auto') {
@@ -83,7 +84,7 @@
         element.firstElementChild.setAttribute("data-icon", 'adjust')
         element.firstElementChild.classList.add('fa-adjust')
         document.addEventListener('DOMContentLoaded', () => {
-            switchMode('Auto')
+            window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
         })
     } else if (storageColorScheme == "Dark") {
         element.firstElementChild.classList.remove('fa-sun')
@@ -96,7 +97,7 @@
         element.firstElementChild.setAttribute("data-icon", 'adjust')
         element.firstElementChild.classList.add('fa-adjust')
         document.addEventListener('DOMContentLoaded', () => {
-            switchMode('Auto')
+            window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
         })
     } else if (storageColorScheme == "Light") {
         element.firstElementChild.classList.remove('fa-moon')
@@ -106,7 +107,7 @@
     {{- else }}
     if (storageColorScheme == null || storageColorScheme == 'Auto') {
         document.addEventListener('DOMContentLoaded', () => {
-            switchMode('Auto')
+            window.matchMedia("(prefers-color-scheme: dark)").addEventListener('change', switchDarkMode)
         })
     } else if (storageColorScheme == "Light") {
         element.firstElementChild.classList.remove('fa-adjust')