feat: utterances support (#41)

* feat(comments): add Utterances support * docs: move document to github wiki
WingLim · Sep 25, 2021 · 0722c30 · 0722c30
1 parent d9e25c8
commit 0722c30
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 145 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,12 @@ A simple theme for bloggers.
 
 [Example Site](https://hugo-tania.netlify.app/)
 
+## Documentation
+
+[Documenttation](https://github.com/WingLim/hugo-tania/wiki)
+
 ## Introduction
+
 Most of the styles for this theme come from [taniarascia.com](https://github.com/taniarascia/taniarascia.com)
 
 I like it's style, so I transplant it to Hugo.
@@ -43,152 +48,8 @@ git submodule add https://github.com/WingLim/hugo-tania themes/hugo-tania
 
 Edit your site config following [exampleSite/config.yaml](https://github.com/WingLim/hugo-tania/blob/main/exampleSite/config.yaml).
 
-## Configuration
-
-### Menu
-
-You can custom header and footer menu.
-
-```yaml
-menu:
-  header:
-    - name: Articles
-      url: "/articles/"
-  footer:
-    - name: RSS
-      url: "/index.xml"
-```
-
-### Site Configuration
-
-There are a few configuration options that you can add to your `config.yaml` file.
-
-You can also see the `toml` example in [exampleSite/config.example.toml](https://github.com/WingLim/hugo-tania/blob/main/exampleSite/config.example.toml)
-
-Notice: if you want use disqus as comment system in this theme, you need to set `disqusShortname` in `config` root and `comments` in `params`.
-
-```yaml
-params:
-  # Emoji will show before the blog title on site navbar.
-  titleEmoji: '😎'
-
-  # Logo will show before the blog title on site navbar.
-  titleLogo:
-  
-  # Enable float footnotes.
-  # Default to true
-  enableFootnotes: true
-
-  # Limit how many categories filter show above search input.
-  # Default to 5
-  maxCategoryToShow: 10
-
-  # Show your socail information with icon on index bio with `_index.md` content.
-  socialOptions:
-    dev-to:
-    email:
-    facebook:
-    github:
-    instagram:
-    linkedin:
-    medium:
-    stack-overflow:
-    steam:
-    telegram:
-    twitter:
-    twitch:
-    whatsapp:
-
-  # Addtional option for meta SEO
-  siteName:
-  siteDesc: 
-  author: 
-
-  # Comments settings
-  comments:
-    enable: true
-    provider: disqus
-```
-
-## Custom
-
-### Custom font-family
-
-We have 5 variables to custom font-family in [_variables.scss](https://github.com/WingLim/hugo-tania/blob/main/assets/sass/base/_variables.scss):
-
-```css
-:root {
-    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
-    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
-    --base-font-family: var(--sys-font-family), var(--zh-font-family);
-    --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-    --article-font-family: var(--base-font-family);
-}
-```
-
-
-Create file `layouts/partials/head/custom.html` in your site root directory.
-
-```html
-<style>
-  :root {
-      --article-font-family: "Noto Serif SC", var(--base-font-family);
-  }
-</style>
-
-<!-->This script use to load font from outside<-->
-<script>
-  (function () {
-      const customFont = document.createElement('link');
-      customFont.href = "https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap";
-
-      customFont.type = "text/css";
-      customFont.rel = "stylesheet";
-
-      document.head.appendChild(customFont);
-  }());
-</script>
-```
-
-## Layout
-
-### Archives
-
-`archives` layout is for showing all articles you write.
-
-Add `articles.md` to site `content` dir, and write as below:
-
-If you want to show it on site header, see [#Menu](#menu)
-
-```markdown
----
-title: Articles
-subtitle: Posts, tutorials, snippets, musings, and everything else.
-date: 2020-11-26
-type: section
-layout: "archives"
----
-```
-
-## Article Params
-
-### Enable math formula render
-
-For enable math formula render, add `katex: true` or `mathjax: true` in your article head, like:
-
-Notice: You should enable only one `katex` or `mathjax` in a same time.
-
-```markdown
----
-title: Title
-katex: true
----
-
-Some content...
-
-```
-
 ## Thanks to
+
 - [hugo-theme-stack](https://github.com/CaiJimmy/hugo-theme-stack) for dark mode switch
 - [hugo-prose](https://github.com/yihui/hugo-prose) for float footnotes
 

diff --git a/layouts/partials/comments/provider/utterances.html b/layouts/partials/comments/provider/utterances.html
@@ -0,0 +1,40 @@
+<script src="https://utteranc.es/client.js" 
+        repo="{{ .Site.Params.comments.utterances.repo }}"
+        issue-term="{{ .Site.Params.comments.utterances.issueTerm }}"
+        {{ with .Site.Params.comments.utterances.label }}
+        label="{{ . }}"
+        {{ end }}
+        crossorigin="anonymous"
+        async
+        >
+</script>
+
+<style>
+    .utterances {
+        max-width: unset;
+    }
+</style>
+
+<script>
+    function setUtterancesTheme(theme) {
+        let utterances = document.querySelector('.utterances iframe');
+        if (utterances) {
+            utterances.contentWindow.postMessage(
+                {
+                    type: 'set-theme',
+                    theme: `github-${theme}`
+                },
+                'https://utteranc.es'
+            );
+        }
+    }
+
+    addEventListener('message', event => {
+        if (event.origin !== 'https://utteranc.es') return;
+        setUtterancesTheme(document.documentElement.dataset.scheme)
+    });
+
+    window.addEventListener('onColorSchemeChange', (e) => {
+        setUtterancesTheme(e.detail)
+    })
+</script>