feat: add a feature that only works on March 32nd

app/[locale]/components/AprilFools/AprilFools.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+
+function replaceInNode(root: Node) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT)
+  let node: Node | null
+  while ((node = walker.nextNode())) {
+    if (node.textContent?.includes('WebGAL'))
+      node.textContent = node.textContent.replace(/WebGAL/g, 'WebG@L')
+  }
+}
+
+const AprilFools = () => {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    const now = new Date()
+    if (now.getMonth() !== 3 || now.getDate() !== 1) return
+
+    if (document.title.includes('WebGAL'))
+      document.title = document.title.replace(/WebGAL/g, 'WebG@L')
+
+    replaceInNode(document.body)
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach(({ addedNodes }) =>
+        addedNodes.forEach(node => replaceInNode(node))
+      )
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
+  }, [pathname])
+
+  return null
+}
+
+export default AprilFools
+

app/[locale]/layout.tsx

@@ -5,6 +5,7 @@ import { i18n } from '../../i18n'
 import Footer from './components/Footer/Footer'
 import Navbar from './components/Navbar/Navbar'
 import { GoogleAnalytics } from '@next/third-parties/google'
+import AprilFools from './components/AprilFools/AprilFools'
 
 const notoSansSC = Noto_Sans_SC({
   subsets: ['latin'],
@@ -29,6 +30,7 @@ export default async function LangLayout({ children, params: { locale } }
     <html lang={locale} className={notoSansSC.className}>
       <body>
         <NextIntlClientProvider locale={locale} messages={locales}>
+          <AprilFools />
           <Navbar />
           {children}
           <Footer />