71 lines
1.8 KiB
TypeScript
71 lines
1.8 KiB
TypeScript
import { useCallback, useRef, useEffect } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
import 'artalk/dist/Artalk.css'
|
|
import Artalk from 'artalk'
|
|
|
|
interface CommentsProps {
|
|
title?: string;
|
|
}
|
|
|
|
const Comments = ({ title }: CommentsProps) => {
|
|
const { pathname } = useLocation()
|
|
const artalkRef = useRef<Artalk>()
|
|
const containerRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
if (!containerRef.current) return
|
|
|
|
// Clean up previous instance
|
|
if (artalkRef.current) {
|
|
artalkRef.current.destroy()
|
|
artalkRef.current = undefined
|
|
}
|
|
|
|
// Initialize new instance
|
|
artalkRef.current = Artalk.init({
|
|
el: containerRef.current,
|
|
pageKey: pathname,
|
|
pageTitle: title || document.title,
|
|
server: 'https://comments.owu.one',
|
|
site: 'STARSET Mirror Homepage',
|
|
darkMode: document.documentElement.classList.contains('dark'),
|
|
useBackendConf: true,
|
|
pagination: {
|
|
pageSize: 15,
|
|
readMore: true,
|
|
},
|
|
emoticons: true,
|
|
})
|
|
|
|
// Handle dark mode changes
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
if (mutation.attributeName === 'class') {
|
|
const isDark = document.documentElement.classList.contains('dark')
|
|
artalkRef.current?.setDarkMode(isDark)
|
|
}
|
|
})
|
|
})
|
|
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['class'],
|
|
})
|
|
|
|
return () => {
|
|
observer.disconnect()
|
|
artalkRef.current?.destroy()
|
|
}
|
|
}, [pathname, title])
|
|
|
|
return (
|
|
<div
|
|
ref={containerRef}
|
|
className="mt-12 p-4 bg-white dark:bg-gray-800 rounded-lg shadow"
|
|
aria-label="Comments section"
|
|
role="complementary"
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default Comments
|