feat: contents integration (artalk) + cleanup

closes #8

src/components/Comments.tsx

@@ -0,0 +1,71 @@
+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