feat: integrate giscus

Author: oxwazz

src/components/BaseHead.astro

@@ -16,6 +16,7 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 ---
 
 <meta charset="utf-8" />
+<meta name="viewport" content="width=device-width" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title>{siteTitle}</title>
@@ -74,3 +75,56 @@ const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url
 	href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
 	rel="stylesheet"
 />
+
+<!-- Giscus -->
+<script>
+	document.addEventListener("DOMContentLoaded", function () {
+		function getGiscusTheme() {
+			const bodyThemeIsDark = document.documentElement.classList.contains("dark");
+			return bodyThemeIsDark ? "dark" : "light";
+		}
+
+		function setGiscusTheme() {
+			function sendMessage(message) {
+				const iframe = document.querySelector("iframe.giscus-frame");
+				if (!iframe) return;
+				iframe.contentWindow.postMessage({ giscus: message }, "https://giscus.app");
+			}
+			sendMessage({
+				setConfig: {
+					theme: getGiscusTheme(),
+				},
+			});
+		}
+
+		const giscusAttributes = {
+			src: "https://giscus.app/client.js",
+			"data-repo": "oxwazz/oxwazz.github.io",
+			"data-repo-id": "R_kgDOKOXRsQ",
+			"data-category": "Announcements",
+			"data-category-id": "DIC_kwDOKOXRsc4CeZDU",
+			"data-mapping": "pathname",
+			"data-strict": "0",
+			"data-reactions-enabled": "1",
+			"data-emit-metadata": "0",
+			"data-input-position": "top",
+			"data-theme": getGiscusTheme(),
+			"data-lang": "en",
+			crossorigin: "anonymous",
+			async: "",
+		};
+
+		// Dynamically create script tag
+		const giscusScript = document.createElement("script");
+		Object.entries(giscusAttributes).forEach(([key, value]) =>
+			giscusScript.setAttribute(key, value),
+		);
+		document.querySelector("head").appendChild(giscusScript);
+
+		// Update giscus theme when theme switcher is clicked
+		const toggle = document.querySelector("theme-toggle");
+		if (toggle) {
+			toggle.addEventListener("click", setGiscusTheme);
+		}
+	});
+</script>

src/layouts/Base.astro

@@ -29,6 +29,7 @@ const {
 		<Header />
 		<main id="main" class="w-full max-w-2xl">
 			<slot />
+			<div class="giscus mt-8"></div>
 			<Footer />
 		</main>
 	</body>