site update

make the comment system theme dynamic
xy-241 · Jan 24, 2024 · 807afda · 807afda
1 parent 632a32d
commit 807afda
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 24 deletions.
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
@@ -1,26 +1,30 @@
-import { QuartzComponentConstructor } from "./types"
+// @ts-ignore: this is safe, we don't want to actually make darkmode.inline.ts a module as
+// modules are automatically deferred and we don't want that to happen for critical beforeDOMLoads
+// see: https://v8.dev/features/modules#defer
+import commentsScript from "./scripts/comments.inline"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
-export default (() => {
-  function Footer() {
-    return (
-      <script src="https://giscus.app/client.js"
-        data-repo="xy-241/CS-Notes"
-        data-repo-id="R_kgDOK0yNDg"
-        data-category="General"
-        data-category-id="DIC_kwDOK0yNDs4CbdOh"
-        data-mapping="pathname"
-        data-strict="0"
-        data-reactions-enabled="1"
-        data-emit-metadata="0"
-        data-input-position="top"
-        data-theme="preferred_color_scheme"
-        data-lang="en"
-        data-loading="lazy"
-        crossOrigin="anonymous"
-        async>
-      </script>
-    )
-  }
+function Footer(props: QuartzComponentProps) {
+  return (
+    <script src="https://giscus.app/client.js"
+      data-repo="xy-241/CS-Notes"
+      data-repo-id="R_kgDOK0yNDg"
+      data-category="General"
+      data-category-id="DIC_kwDOK0yNDs4CbdOh"
+      data-mapping="pathname"
+      data-strict="0"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      data-input-position="top"
+      data-theme="preferred_color_scheme"
+      data-lang="en"
+      data-loading="lazy"
+      crossOrigin="anonymous"
+      async>
+    </script>
+  )
+}
 
-  return Footer
-}) satisfies QuartzComponentConstructor
+Footer.beforeDOMLoaded = commentsScript
+
+export default (() => Footer) satisfies QuartzComponentConstructor
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
@@ -0,0 +1,53 @@
+document.addEventListener("themechange", (e) => {
+  const theme = e.detail.theme === 'light' ?  'light_protanopia' : 'dark_protanopia'
+
+  function sendMessage(message: { setConfig: { theme: string } }) {
+    const iframe = document.querySelector('iframe.giscus-frame') as HTMLIFrameElement;
+    if (!iframe) return;
+    iframe.contentWindow?.postMessage({ giscus: message }, 'https://giscus.app');
+  }
+
+  sendMessage({
+    setConfig: {
+      theme: theme
+    }
+  });
+})
+
+
+document.addEventListener("DOMContentLoaded", () => {
+  const theme = localStorage.getItem("theme") === "light" ? "light_protanopia" : "dark_protanopia"
+
+  const existingGiscusContainer = document.getElementById('giscus-container');
+
+  if (existingGiscusContainer) {
+    // Remove the existing Giscus instance
+    existingGiscusContainer.innerHTML = '';
+  }
+
+  // Create a new container element for Giscus
+  const newGiscusContainer = document.createElement('div');
+  newGiscusContainer.id = 'giscus-container';
+  document.body.appendChild(newGiscusContainer);
+
+  // Create a new script element with the updated data-theme attribute
+  const newScript = document.createElement('script');
+  newScript.src = 'https://giscus.app/client.js';
+  newScript.setAttribute('data-repo', 'xy-241/CS-Notes');
+  newScript.setAttribute('data-repo-id', 'R_kgDOK0yNDg');
+  newScript.setAttribute('data-category', 'General');
+  newScript.setAttribute('data-category-id', 'DIC_kwDOK0yNDs4CbdOh');
+  newScript.setAttribute('data-mapping', 'pathname');
+  newScript.setAttribute('data-strict', '0');
+  newScript.setAttribute('data-reactions-enabled', '1');
+  newScript.setAttribute('data-emit-metadata', '0');
+  newScript.setAttribute('data-input-position', 'top');
+  newScript.setAttribute('data-theme', theme);
+  newScript.setAttribute('data-lang', 'en');
+  newScript.setAttribute('data-loading', 'lazy');
+  newScript.setAttribute('crossOrigin', 'anonymous');
+  newScript.async = true;
+
+  // Append the new script to the Giscus container
+  newGiscusContainer.appendChild(newScript);
+})