79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { useTheme } from 'next-themes';
|
|
|
|
import siteMetadata from '@/data/siteMetadata';
|
|
|
|
interface Props {
|
|
mapping: string;
|
|
}
|
|
|
|
const Giscus = ({ mapping }: Props) => {
|
|
const [enableLoadComments, setEnabledLoadComments] = useState(true);
|
|
const { theme, resolvedTheme } = useTheme();
|
|
const commentsTheme =
|
|
siteMetadata.comment.giscusConfig.themeURL === ''
|
|
? theme === 'dark' || resolvedTheme === 'dark'
|
|
? siteMetadata.comment.giscusConfig.darkTheme
|
|
: siteMetadata.comment.giscusConfig.theme
|
|
: siteMetadata.comment.giscusConfig.themeURL;
|
|
|
|
const COMMENTS_ID = 'comments-container';
|
|
|
|
const LoadComments = useCallback(() => {
|
|
setEnabledLoadComments(false);
|
|
const script = document.createElement('script');
|
|
script.src = 'https://giscus.app/client.js';
|
|
script.setAttribute('data-repo', siteMetadata.comment.giscusConfig.repo);
|
|
script.setAttribute(
|
|
'data-repo-id',
|
|
siteMetadata.comment.giscusConfig.repositoryId
|
|
);
|
|
script.setAttribute(
|
|
'data-category',
|
|
siteMetadata.comment.giscusConfig.category
|
|
);
|
|
script.setAttribute(
|
|
'data-category-id',
|
|
siteMetadata.comment.giscusConfig.categoryId
|
|
);
|
|
script.setAttribute('data-mapping', mapping);
|
|
script.setAttribute(
|
|
'data-reactions-enabled',
|
|
siteMetadata.comment.giscusConfig.reactions
|
|
);
|
|
script.setAttribute(
|
|
'data-emit-metadata',
|
|
siteMetadata.comment.giscusConfig.metadata
|
|
);
|
|
script.setAttribute('data-theme', commentsTheme);
|
|
script.setAttribute('crossorigin', 'anonymous');
|
|
script.async = true;
|
|
|
|
const comments = document.getElementById(COMMENTS_ID);
|
|
if (comments) comments.appendChild(script);
|
|
|
|
return () => {
|
|
const comments = document.getElementById(COMMENTS_ID);
|
|
if (comments) comments.innerHTML = '';
|
|
};
|
|
}, [commentsTheme, mapping]);
|
|
|
|
// Reload on theme change
|
|
useEffect(() => {
|
|
const iframe = document.querySelector('iframe.giscus-frame');
|
|
if (!iframe) return;
|
|
LoadComments();
|
|
}, [LoadComments]);
|
|
|
|
return (
|
|
<div className="pt-6 pb-6 text-center text-gray-700 dark:text-gray-300">
|
|
{enableLoadComments && (
|
|
<button onClick={LoadComments}>Load Comments</button>
|
|
)}
|
|
<div className="giscus" id={COMMENTS_ID} />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Giscus;
|