feat(blog): revamp detail ui, add dynamic table of contents, and integrate giscus comments

2026-03-30 11:30:13 +03:00
parent 87f6585a78
commit d3c13ed25d
3 changed files with 405 additions and 106 deletions
@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+type GiscusCommentsProps = {
+  repo: string;
+  repoId: string;
+  category: string;
+  categoryId: string;
+  term?: string;
+};
+
+export function GiscusComments({
+  repo,
+  repoId,
+  category,
+  categoryId,
+  term,
+}: GiscusCommentsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const script = document.createElement("script");
+    script.src = "https://giscus.app/client.js";
+    script.setAttribute("data-repo", repo);
+    script.setAttribute("data-repo-id", repoId);
+    script.setAttribute("data-category", category);
+    script.setAttribute("data-category-id", categoryId);
+    script.setAttribute("data-mapping", term ? "specific" : "pathname");
+    if (term) script.setAttribute("data-term", term);
+    script.setAttribute("data-strict", "0");
+    script.setAttribute("data-reactions-enabled", "1");
+    script.setAttribute("data-emit-metadata", "0");
+    script.setAttribute("data-input-position", "top");
+    script.setAttribute("data-theme", "light");
+    script.setAttribute("data-lang", "tr");
+    script.setAttribute("data-loading", "lazy");
+    script.crossOrigin = "anonymous";
+    script.async = true;
+
+    container.appendChild(script);
+
+    return () => {
+      container.innerHTML = "";
+    };
+  }, [repo, repoId, category, categoryId, term]);
+
+  return <div ref={containerRef} className="mt-6" />;
+}