fix: astro view transitions were blocked by global styles.

fix: theme reverted to default on route change, and toggle button would break until page was reloaded. feature: added about page for showcase
ocavue · Oct 6, 2024 · aaf0b61 · aaf0b61
1 parent 6c6bfa7
commit aaf0b61
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 8 deletions.
diff --git a/lib/handle-toggle-click.ts b/lib/handle-toggle-click.ts
@@ -11,8 +11,31 @@ async function startCircleAnimation(
     }
   }
 
+  const removeTemporaryStyles = () => {
+    const style = document.getElementById('temp-theme-transition-styles')
+    if (style) {
+      document.head.removeChild(style)
+    }
+  }
+
+  const injectTemporaryStyles = () => {
+    removeTemporaryStyles()
+    const style = document.createElement('style')
+    style.id = 'temp-theme-transition-styles'
+    style.textContent = `
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+            animation: none;
+            mix-blend-mode: normal;
+        }
+    `
+    document.head.appendChild(style)
+  }
+  injectTemporaryStyles()
+
   if (typeof doc.startViewTransition !== 'function') {
     callback()
+    removeTemporaryStyles()
     return
   }
 

diff --git a/lib/theme-script.astro b/lib/theme-script.astro
@@ -1,10 +1,34 @@
-<style is:global>
-  ::view-transition-old(root),
-  ::view-transition-new(root) {
-    animation: none;
-    mix-blend-mode: normal;
-  }
-</style>
 <script is:inline>
-"use strict";(()=>{(()=>{let t="theme-toggle";function o(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function l(){let e=localStorage.getItem(t);return e==="dark"||e==="light"?e:null}function n(){return l()||o()}function c(e){e===o()?localStorage.removeItem(t):localStorage.setItem(t,e)}function s(e){let m=document.documentElement;m.classList.toggle("dark",e==="dark"),m.style.colorScheme=e}function r(e){c(e),s(e)}r(n()),window.astroThemeToggle={setTheme:r,getTheme:n}})();})();
+  "use strict";
+  const themeToggle = () => {
+      (() => {
+          let t = "theme-toggle";
+          function o() {
+              return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+          }
+          function l() {
+              let e = localStorage.getItem(t);
+              return e === "dark" || e === "light" ? e : null;
+          }
+          function n() {
+              return l() || o();
+          }
+          function c(e) {
+              e === o() ? localStorage.removeItem(t) : localStorage.setItem(t, e);
+          }
+          function s(e) {
+              let m = document.documentElement;
+              m.classList.toggle("dark", e === "dark"), (m.style.colorScheme = e);
+          }
+          function r(e) {
+              c(e), s(e);
+          }
+          r(n()), (window.astroThemeToggle = { setTheme: r, getTheme: n });
+      })();
+  }
+  themeToggle();
+
+  document.addEventListener("astro:after-swap", () => {
+        themeToggle();
+    });
 </script>
diff --git a/website/components/theme-toggle-button.astro b/website/components/theme-toggle-button.astro
@@ -9,7 +9,11 @@
 
 <script>
   import { handleToggleClick } from 'astro-theme-toggle'
+
   document.getElementById('theme-toggle')?.addEventListener('click', handleToggleClick)
+  document.addEventListener("astro:after-swap", () => {
+        document.getElementById("theme-toggle")?.addEventListener("click", handleToggleClick);
+    });
 </script>
 
 <style is:global>

diff --git a/website/layouts/Layout.astro b/website/layouts/Layout.astro
@@ -1,5 +1,6 @@
 ---
 import { ThemeScript } from 'astro-theme-toggle'
+import { ViewTransitions } from 'astro:transitions'
 
 interface Props {
   title: string
@@ -18,6 +19,7 @@ const { title } = Astro.props
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ThemeScript />
+    <ViewTransitions />
   </head>
   <body>
     <slot />

diff --git a/website/pages/about.astro b/website/pages/about.astro
@@ -0,0 +1,49 @@
+---
+import AstroLogoBackground from '../components/astro-logo-background.astro'
+import GithubCorner from '../components/github-corner.astro'
+import ThemeToggleButton from '../components/theme-toggle-button.astro'
+import Layout from '../layouts/Layout.astro'
+---
+
+<Layout title="About page">
+  <main>
+    <AstroLogoBackground />
+    <h1>about page</h1>
+    <div class="instructions">
+      <span
+        >Add a ripple-style theme toggle animation to your Astro project with
+        ease</span
+      >
+      <a href="/">home</a>
+    </div>
+    <div class="instructions">
+      <ThemeToggleButton />
+    </div>
+    <GithubCorner />
+  </main>
+</Layout>
+
+<style>
+  main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: var(--text-color);
+    font-size: 20px;
+    line-height: 1.6;
+  }
+
+  h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+  }
+
+  .instructions {
+    margin-bottom: 5rem;
+    text-align: center;
+  }
+</style>
diff --git a/website/pages/index.astro b/website/pages/index.astro
@@ -14,6 +14,7 @@ import Layout from '../layouts/Layout.astro'
         >Add a ripple-style theme toggle animation to your Astro project with
         ease</span
       >
+      <a href="/about">about</a>
     </div>
     <div class="instructions">
       <ThemeToggleButton />