53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
"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" />;
|
|
}
|