From 388d2c2ba7a5f19a01ee3d22d170ec34dae62c60 Mon Sep 17 00:00:00 2001
From: Guoqi Sun <sun412926@gmail.com>
Date: Fri, 20 Dec 2024 21:48:03 +0800
Subject: [PATCH] fix: add viewTransitions to avoid flickering when switching

---
 astro.config.mjs                              |  1 +
 src/components/astro/head/root.astro          | 14 ++++++
 src/components/astro/header.astro             |  4 +-
 .../{noise-bg.tsx => noise-background.tsx}    |  2 +-
 .../theme-toggle.tsx}                         | 23 ++++-----
 src/layouts/base.astro                        | 49 +++++++++----------
 6 files changed, 50 insertions(+), 43 deletions(-)
 create mode 100644 src/components/astro/head/root.astro
 rename src/components/react/{noise-bg.tsx => noise-background.tsx} (85%)
 rename src/components/{astro/theme-toggle.astro => react/theme-toggle.tsx} (65%)

diff --git a/astro.config.mjs b/astro.config.mjs
index 80a3623..371ea6c 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -12,4 +12,5 @@ export default defineConfig({
     },
   },
   integrations: [react(), tailwind(), mdx()],
+  viewTransitions: true,
 })
diff --git a/src/components/astro/head/root.astro b/src/components/astro/head/root.astro
new file mode 100644
index 0000000..e045c17
--- /dev/null
+++ b/src/components/astro/head/root.astro
@@ -0,0 +1,14 @@
+---
+import { en, zh } from "~/config"
+import { getLangFromUrl } from "~/i18n/utils"
+
+const lang = getLangFromUrl(Astro.url)
+const config = lang === "zh" ? zh.meta : en.meta
+---
+
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/svg+xml" href={config.favicon} />
+<meta name="generator" content={Astro.generator} />
+<title>{config.title} - {config.slogan}</title>
+<meta name="description" content={config.description} />
diff --git a/src/components/astro/header.astro b/src/components/astro/header.astro
index e2f8779..b78200a 100644
--- a/src/components/astro/header.astro
+++ b/src/components/astro/header.astro
@@ -1,7 +1,7 @@
 ---
 import { Rss } from "lucide-react"
-import ThemeToggle from "~/components/astro/theme-toggle.astro"
 import { LanguageToggle } from "~/components/react/language-toggle"
+import { ThemeToggle } from "~/components/react/theme-toggle"
 import { en, zh } from "~/config"
 import { getLangFromUrl } from "~/i18n/utils"
 
@@ -31,6 +31,6 @@ const config = lang === "zh" ? zh : en
     }
 
     <LanguageToggle client:load />
-    <ThemeToggle />
+    <ThemeToggle client:load />
   </div>
 </header>
diff --git a/src/components/react/noise-bg.tsx b/src/components/react/noise-background.tsx
similarity index 85%
rename from src/components/react/noise-bg.tsx
rename to src/components/react/noise-background.tsx
index 5967108..93a9547 100644
--- a/src/components/react/noise-bg.tsx
+++ b/src/components/react/noise-background.tsx
@@ -1,4 +1,4 @@
-export function NoiseBg() {
+export function NoiseBackground() {
   return (
     <div className="fixed inset-0 -z-10 h-full w-full bg-[url('https://framerusercontent.com/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png')] bg-[length:128px_128px] bg-repeat opacity-[0.06]"></div>
   )
diff --git a/src/components/astro/theme-toggle.astro b/src/components/react/theme-toggle.tsx
similarity index 65%
rename from src/components/astro/theme-toggle.astro
rename to src/components/react/theme-toggle.tsx
index c62b80d..00419aa 100644
--- a/src/components/astro/theme-toggle.astro
+++ b/src/components/react/theme-toggle.tsx
@@ -1,23 +1,15 @@
----
 import { Moon, Sun } from "lucide-react"
----
 
-<button id="themeToggle">
-  <Sun className="dark:hidden" />
-  <Moon className="hidden dark:block" />
-</button>
-
-<script>
-  // update theme
+export function ThemeToggle() {
   const updateTheme = () => {
     const isDark = document.documentElement.classList.contains("dark")
     localStorage.setItem("theme", isDark ? "dark" : "light")
   }
 
-  // toggle theme
   const handleToggleClick = () => {
     const element = document.documentElement
 
+    // if not supported, just toggle the theme
     if (!document.startViewTransition) {
       element.classList.toggle("dark")
       updateTheme()
@@ -30,7 +22,10 @@ import { Moon, Sun } from "lucide-react"
     })
   }
 
-  document
-    .getElementById("themeToggle")!
-    .addEventListener("click", handleToggleClick)
-</script>
+  return (
+    <button onClick={handleToggleClick}>
+      <Sun className="dark:hidden" />
+      <Moon className="hidden dark:block" />
+    </button>
+  )
+}
diff --git a/src/layouts/base.astro b/src/layouts/base.astro
index 967874d..48650d2 100644
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -1,47 +1,44 @@
 ---
 import "~/styles/globals.css"
-import { NoiseBg } from "~/components/react/noise-bg"
-import { en, zh } from "~/config"
+import { NoiseBackground } from "~/components/react/noise-background"
+import { ClientRouter } from "astro:transitions"
 import { getLangFromUrl } from "~/i18n/utils"
+import Head from "~/components/astro/head/root.astro"
 
 const lang = getLangFromUrl(Astro.url)
-const config = lang === "zh" ? zh.meta : en.meta
 ---
 
 <!doctype html>
 <html lang={lang}>
   <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href={config.favicon} />
-    <meta name="generator" content={Astro.generator} />
-    <title>{config.title} - {config.slogan}</title>
-    <meta name="description" content={config.description} />
-    <link rel="sitemap" href="/sitemap-index.xml" />
+    <Head />
+    <ClientRouter />
     <script is:inline>
-      // set theme before page load
-      const theme = (() => {
-        if (
-          typeof localStorage !== "undefined" &&
-          localStorage.getItem("theme")
-        ) {
-          return localStorage.getItem("theme")
-        }
-        if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
-          return "dark"
-        }
-        return "light"
-      })()
+      const setTheme = () => {
+        const theme =
+          localStorage.getItem("theme") ??
+          (window.matchMedia("(prefers-color-scheme: dark)").matches
+            ? "dark"
+            : "light")
 
-      if (theme === "dark") {
-        document.documentElement.classList.add("dark")
+        if (theme === "dark") {
+          document.documentElement.classList.add("dark")
+        } else {
+          document.documentElement.classList.remove("dark")
+        }
       }
+
+      setTheme()
+
+      document.addEventListener("astro:page-load", () => {
+        setTheme()
+      })
     </script>
   </head>
   <body class="dark:bg-[#121212] dark:text-white">
     <div class="flex min-h-screen w-full justify-center px-6 md:p-0">
       <slot />
-      <NoiseBg />
+      <NoiseBackground />
     </div>
   </body>
 </html>