Merge pull request #24 from amzrk2/dev

v2 pre-release

1 files changed, 26 insertions, 9 deletions

diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html
index 3e56201..f8683b6 100644
--- a/layouts/partials/comment-utterances.html
+++ b/layouts/partials/comment-utterances.html
@@ -1,9 +1,26 @@
-{{ with .Site.Params.utterancesRepo }}
-<div class="post-loading">
-    <i class="fas fa-circle-notch fa-spin"></i>
-    <p>{{ i18n "postCommentLoading" }}</p>
-</div>
-<div class="post-comment">
-    <script src="https://utteranc.es/client.js" repo="{{ . }}" issue-term="{{ $.Site.Params.utterancesIssueTerm }}" theme="{{ $.Site.Params.utterancesTheme }}" crossorigin="anonymous" async></script>
-</div>
-{{ end }}
\ No newline at end of file
+<div class="post-comment" data-comment="utterances">
+    <span class="post-comment-notloaded">
+        <ion-icon name="chatbox-ellipses"></ion-icon>&nbsp;{{ i18n "postComment" }}
+    </span>
+    <script>
+        function loadComment() {
+            var commentArea = document.querySelector('.post-comment');
+            var utterancesTheme = document.body.getAttribute('data-theme');
+            if (utterancesTheme === 'auto') {
+                utterancesTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'photon-dark' :
+                    'github-light';
+            } else {
+                utterancesTheme = utterancesTheme === 'dark' ? 'photon-dark' : 'github-light';
+            }
+            var s = document.createElement('script');
+            s.src = 'https://utteranc.es/client.js';
+            s.setAttribute('repo', '{{ .Site.Params.utterancesRepo }}');
+            s.setAttribute('issue-term', '{{ .Site.Params.utterancesIssueTerm }}');
+            s.setAttribute('theme', utterancesTheme);
+            s.setAttribute('crossorigin', 'anonymous');
+            s.setAttribute('async', '');
+            document.querySelector('.post-comment').appendChild(s);
+            document.querySelector('span.post-comment-notloaded').setAttribute('style', 'display: none;');
+        }
+    </script>
+</div>
\ No newline at end of file