From 807afda45fb5d0a359526a4717c5352c484cd4ed Mon Sep 17 00:00:00 2001
From: Xinyang YU <47915643+xy-241@users.noreply.github.com>
Date: Wed, 24 Jan 2024 15:28:08 +0800
Subject: [PATCH] site update
make the comment system theme dynamic
---
quartz/components/Comments.tsx | 52 ++++++++++---------
quartz/components/scripts/comments.inline.ts | 53 ++++++++++++++++++++
2 files changed, 81 insertions(+), 24 deletions(-)
create mode 100644 quartz/components/scripts/comments.inline.ts
diff --git a/quartz/components/Comments.tsx b/quartz/components/Comments.tsx
index d657c425c..c7b4674d9 100644
--- 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 (
-
- )
- }
+function Footer(props: QuartzComponentProps) {
+ return (
+
+ )
+}
- return Footer
-}) satisfies QuartzComponentConstructor
\ No newline at end of file
+Footer.beforeDOMLoaded = commentsScript
+
+export default (() => Footer) satisfies QuartzComponentConstructor
\ No newline at end of file
diff --git a/quartz/components/scripts/comments.inline.ts b/quartz/components/scripts/comments.inline.ts
new file mode 100644
index 000000000..c83d3d06b
--- /dev/null
+++ 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);
+})
\ No newline at end of file