feat: add Support Me button

components/Ko-fi.tsx

@@ -0,0 +1,28 @@
+import { useEffect } from 'react'
+import { siteMetadata } from '~/data/siteMetadata'
+
+export default function Kofi() {
+  useEffect(() => {
+    if (!siteMetadata.kofiName) return () => {}
+    const script = document.createElement('script')
+    script.src = 'https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'
+    script.onload = () => {
+      if ((window as any).kofiWidgetOverlay) {
+        ;(window as any).kofiWidgetOverlay.draw(siteMetadata.kofiName, {
+          type: 'floating-chat',
+          'floating-chat.donateButton.text': 'Support me',
+          'floating-chat.donateButton.background-color': '#00b9fe',
+          'floating-chat.donateButton.text-color': '#fff',
+        })
+      }
+    }
+    document.body.appendChild(script)
+
+    // Clean up the script if the component is unmounted
+    return () => {
+      document.body.removeChild(script)
+    }
+  }, [])
+
+  return <></>
+}

components/LayoutWrapper.tsx

@@ -4,6 +4,7 @@ import { Footer } from './Footer'
 import { Header } from './Header'
 import { MobileNav } from './MobileNav'
 import { SpeedInsights } from '@vercel/speed-insights/next'
+import Kofi from './Ko-fi'
 
 export function LayoutWrapper({ children }) {
   let [navShow, setNavShow] = useState(false)
@@ -20,6 +21,7 @@ export function LayoutWrapper({ children }) {
         </div>
       </div>
       <SpeedInsights />
+      <Kofi />
     </>
   )
 }

data/siteMetadata.ts

@@ -35,6 +35,7 @@ export let siteMetadata = {
     linkedin: 'mengke',
     instagram: '_mk965',
   },
+  kofiName: 'mengke',
 }
 
 /**