init...

themes/butterfly/layout/includes/third-party/comments/utterances.pug

@@ -0,0 +1,39 @@
+- const { use, lazyload } = theme.comments
+- const { repo, issue_term, light_theme, dark_theme } = theme.utterances
+
+script.
+  (() => {
+    const loadUtterances = () => {
+      let ele = document.createElement('script')
+      ele.id = 'utterances_comment'
+      ele.src = 'https://utteranc.es/client.js'
+      ele.setAttribute('repo', '!{repo}')
+      ele.setAttribute('issue-term', '!{issue_term}')
+      const nowTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{dark_theme}' : '#{light_theme}'
+      ele.setAttribute('theme', nowTheme)
+      ele.crossOrigin = 'anonymous'
+      ele.async = true
+      document.getElementById('utterances-wrap').appendChild(ele)
+    }
+
+    const utterancesTheme = theme => {
+      const iframe = document.querySelector('.utterances-frame')
+      if (iframe) {
+        const theme = theme === 'dark' ? '#{dark_theme}' : '#{light_theme}'
+        const message = {
+          type: 'set-theme',
+          theme: theme
+        };
+        iframe.contentWindow.postMessage(message, 'https://utteranc.es');
+      }
+    }
+
+    btf.addGlobalFn('themeChange', utterancesTheme, 'utterances')
+
+    if ('!{use[0]}' === 'Utterances' || !!{lazyload}) {
+      if (!{lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
+      else loadUtterances()
+    } else {
+      window.loadOtherComment = loadUtterances
+    }
+  })()