Use Bluesky to power comments! 🦋

kutyel · Nov 26, 2024 · 1b21e4a · 1b21e4a
1 parent 3f74c46
commit 1b21e4a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 28 deletions.
diff --git a/src/css/article.css b/src/css/article.css
@@ -119,12 +119,6 @@ article > header small {
   }
 }
 
-.giscus,
-.giscus-frame {
-  max-width: 600px;
-  margin: 0 auto;
-}
-
 /* FOOTER */
 
 footer {

diff --git a/src/posts/2024-09-17-japanese-n3.md b/src/posts/2024-09-17-japanese-n3.md
@@ -7,6 +7,7 @@ keywords: 'japanese,english,noken,languages,polyglot'
 lang: 'en'
 title: 'My Journey to Japanese N3 Level'
 date: '2024-09-18T15:00:00Z'
+postId: 'at://did:plc:dvrocvv5szl2evqiafsx4iyw/app.bsky.feed.post/3lbu2ym72422p'
 ---
 
 <img src="./images/n3.png" alt="logo" width="650px">

diff --git a/src/templates/default.html b/src/templates/default.html
@@ -50,11 +50,6 @@
             localStorage.setItem('theme', name);
             window.site.theme = name;
             window.site.refreshThemeSwitch();
-
-            document.querySelector('iframe.giscus-frame')?.contentWindow.postMessage(
-              { giscus: { setConfig: { theme: name === 'dark' ? 'dark_dimmed' : 'light' } } },
-              'https://giscus.app'
-            );
           },
           refreshThemeSwitch: () => {
             const isLight = window.site.theme === 'light';

diff --git a/src/templates/post.html b/src/templates/post.html
@@ -1,5 +1,20 @@
 $partial("templates/nav.html")$
 
+<style>
+  bsky-comments {
+    --background-color: var(--bgColor);
+    --text-color: var(--textColor);
+    --link-color: var(--textLinkColor);
+    --link-hover-color: var(--textLinkHoverColor);
+    --comment-meta-color: #888;
+    --error-color: #ff4d4d;
+    --reply-border-color: var(--separatorColor);
+    --button-background-color: var(--btnBgColor);
+    --button-hover-background-color: rgba(var(--btnBgColor), 0.2);
+    --author-avatar-border-radius: 50%;
+}
+</style>
+
 <main id="content" tabindex="-1">
   <article>
     <header>
@@ -16,7 +31,9 @@ <h1>$title$</h1>
   </article>
 </main>
 
-<div class="giscus" style="max-width: 600px; margin: 0 auto;"></div>
+$if(postId)$
+<bsky-comments post="$postId$"></bsky-comments>
+$endif$
 
 <footer class="section--padded">
   <div class="layout--constrained">
@@ -41,19 +58,4 @@ <h1>$title$</h1>
 </footer>
 
 <script async src="./js/time.js"></script>
-
-<script src="https://giscus.app/client.js"
-  data-repo="kutyel/kutyel-hakyll"
-  data-repo-id="R_kgDOJAKzeQ"
-  data-category="Announcements"
-  data-category-id="DIC_kwDOJAKzec4CZFzP"
-  data-mapping="pathname"
-  data-strict="0"
-  data-reactions-enabled="1"
-  data-emit-metadata="0"
-  data-input-position="top"
-  data-theme="dark_dimmed"
-  data-lang="en"
-  crossorigin="anonymous"
-  async>
-</script>
+<script src="https://gistcdn.githack.com/kutyel/41d12e099484fd390fb67168271fcdd9/raw/9be26e500525a2e4edacc53d3a8006aaddec0e15/bsky-comments.js"></script>