refactor(components): optimize theme handling and cleanup unused code

- Removed unnecessary useEffect in Markdown component for theme setting
- Introduced useRef in Sakana component for better widget management
- Updated theme setting logic in Index page to use useEffect for improved performance

Author: z0ffy

components/markdown.tsx

@@ -1,5 +1,5 @@
 import {useTheme} from 'next-themes'
-import React, {useEffect, useState} from 'react'
+import React, {useState} from 'react'
 import ReactMarkdown from 'react-markdown'
 import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
 import {a11yDark as dark, prism as light} from 'react-syntax-highlighter/dist/cjs/styles/prism'
@@ -66,15 +66,11 @@ const Code: CodeComponent = ({
   children = '',
   ...properties
 }) => {
-  const {theme, setTheme} = useTheme()
+  const {theme} = useTheme()
   const [copied, setCopied] = useState(false)
   const match = /language-(\w+)/.exec(className || '')
   const isCodeBlock = Boolean(match) || String(children).includes('\n')
 
-  useEffect(() => {
-    setTheme(theme!)
-  }, [setTheme, theme])
-
   const handleCopy = async () => {
     const text = String(children).replace(/\n$/, '')
     try {

components/sakana.tsx

@@ -1,17 +1,27 @@
 import { useTheme } from 'next-themes';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import SakanaWidget from 'sakana-widget';
 import 'sakana-widget/lib/index.css';
 
 const Sakana = () => {
   const { theme } = useTheme();
+  const widgetRef = useRef<SakanaWidget | null>(null);
 
   useEffect(() => {
-    new SakanaWidget({
+    widgetRef.current?.unmount();
+
+    const widget = new SakanaWidget({
       character: Math.random() < 0.6 ? 'takina' : 'chisato',
       controls: false,
       stroke: { color: theme === 'dark' ? '#333333' : '#e6e6e6' },
     }).setState({ i: 0.001, d: 1 }).mount('#sakana-widget');
+
+    widgetRef.current = widget;
+
+    return () => {
+      widget.unmount();
+      widgetRef.current = null;
+    };
   }, [theme]);
 
   return (

pages/index.tsx

@@ -5,6 +5,7 @@ import { fetchPosts, fetchUser } from '../lib';
 import genRSS from '../lib/rss';
 
 import { useTheme } from 'next-themes';
+import { useEffect } from 'react';
 
 import Image from 'next/image';
 
@@ -27,7 +28,9 @@ export const getStaticProps: GetStaticProps = async () => {
 const Index: NextPageWithLayout<{ posts: Post[]; user: User }> = ({ posts, user }) => {
   const { setTheme } = useTheme();
 
-  if (process.env.theme !== 'both') setTheme(process.env.theme || 'dark');
+  useEffect(() => {
+    if (process.env.theme !== 'both') setTheme(process.env.theme || 'dark');
+  }, [setTheme]);
 
   return (
     <div>