fix demos

vtbag · Nov 13, 2024 · 4b46e79 · 4b46e79
1 parent b4e8bac
commit 4b46e79
Show file tree

Hide file tree

Showing 7 changed files with 254 additions and 295 deletions.
diff --git a/src/components/LightDark.astro b/src/components/LightDark.astro
@@ -9,4 +9,5 @@
     (window.matchMedia("(prefers-color-scheme: dark)").matches
       ? "dark"
       : "light");
+      _.classList.add(_.dataset.theme);
 </script>
diff --git a/src/pages/shaft-demo/1.astro b/src/pages/shaft-demo/1.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from "./_Layout.astro";
 import Description from "./_Description1.astro";
+import Bsky from "../../components/Bsky.astro";
 ---
 
 <Layout title="Pseudo-Smooth-Scrolling Demo 1/2 | @vtbag">
   <h1>Pseudo-Smooth-Scrolling Demo 1/2</h1>
+  <Bsky />
   <Description />
 </Layout>
diff --git a/src/pages/shaft-demo/2.astro b/src/pages/shaft-demo/2.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from "./_Layout.astro";
 import Description from "./_Description2.astro";
+import Bsky from "@/components/Bsky.astro";
 ---
 
 <Layout title="Pseud-Smooth-Scrolling Demo 2/2 | @vtbag">
   <h1>Pseud-Smooth-Scrolling Demo 2/2</h1>
+  <Bsky />
   <Description />
 </Layout>
diff --git a/src/pages/shaft-demo/_Layout.astro b/src/pages/shaft-demo/_Layout.astro
@@ -1,4 +1,5 @@
 ---
+import LightDark from "@/components/LightDark.astro";
 import TurnSignal from "@vtbag/turn-signal?url";
 
 export interface Props {
@@ -13,23 +14,8 @@ const { title } = Astro.props;
     <title>{title}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="/bag3.png" type="image/png" />
-    <script is:inline>
-      if ("onpagereveal" in window) {
-        addEventListener("pagereveal", () => {});
-      }
-    </script>
+    <LightDark />
     <script is:inline src={TurnSignal}></script>
-    <script is:inline>
-      if ("onpagereveal" in window) {
-        const _ = document.documentElement;
-        _.dataset.theme = _.style.colorScheme =
-          localStorage.getItem("starlight-theme") ||
-          (window.matchMedia("(prefers-color-scheme: dark)").matches
-            ? "dark"
-            : "light");
-        _.classList.add(_.dataset.theme);
-      }
-    </script>
   </head>
   <body>
     <div style="height: 6.66rem"></div>
@@ -41,7 +27,6 @@ const { title } = Astro.props;
         href="/tips/pseudo-smooth-scrolling/#interactive-demo"
         id="back">Exit</a
       >
-      <button id="dl">Light/Dark</button>
     </header>
     <nav>
       <a href="/shaft-demo/2/#bot">Step 1</a>
@@ -55,17 +40,6 @@ const { title } = Astro.props;
       <div>Footer</div>
     </footer>
   </body>
-  <script>
-    document.getElementById("dl")!.addEventListener("click", () => {
-      const root = document.documentElement;
-      root.classList.toggle("dark");
-      let theme = root.classList.contains("dark") ? "dark" : "light";
-      localStorage.setItem(
-        "starlight-theme",
-        (root.dataset.theme = root.style.colorScheme = theme)
-      );
-    });
-  </script>
 </html>
 <style is:global>
   * {

diff --git a/src/pages/shaft-demo2/1.astro b/src/pages/shaft-demo2/1.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from "./_Layout.astro";
 import Description from "./_Description1.astro";
+import Bsky from "@/components/Bsky.astro";
 ---
 
 <Layout title="Cam-Shaft Demo 1/2 | @vtbag">
   <h1>Cam-Shaft Demo 1/2</h1>
+  <Bsky />
   <Description />
 </Layout>
diff --git a/src/pages/shaft-demo2/2.astro b/src/pages/shaft-demo2/2.astro
@@ -1,9 +1,11 @@
 ---
 import Layout from "./_Layout.astro";
 import Description from "./_Description2.astro";
+import Bsky from "@/components/Bsky.astro";
 ---
 
 <Layout title="Cam-Shaft Demo 2/2 | @vtbag">
   <h1>Cam-Shaft Demo 2/2</h1>
+  <Bsky />
   <Description />
 </Layout>