updates

astro.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
   integrations: [starlight({
     title: '@vtbag',
     components: {
-      Head: "./src/components/Head.astro",
+      Head: "./src/components/NHead.astro",
       PageTitle: "./src/components/PageTitle.astro"
     },
     plugins: [starlightImageZoom()],
@@ -69,7 +69,7 @@ export default defineConfig({
     sidebar: sidebar(),
   }), d2({
     skipGeneration: process.env.GITHUB_ACTIONS === "true"
-  }), vtbot()],
+  }), vtbot({ autoLint: false, loadingIndicator: false })],
   vite: {
     server: {
       fs: {

package.json

@@ -17,6 +17,7 @@
     "@vtbag/element-crossing": "^1.0.1",
     "@vtbag/inspection-chamber": "^1.0.15",
     "@vtbag/turn-signal": "^1.0.1",
+    "@vtbag/cam-shaft": "^1.0.0",
     "astro": "^4.15.11",
     "astro-breadcrumbs": "^3.2.0",
     "astro-d2": "^0.5.2",

src/components/NHead.astro

@@ -0,0 +1,86 @@
+---
+import type { Props } from "@astrojs/starlight/props";
+import StarlightHead from "@astrojs/starlight/components/Head.astro";
+import turnSignal from "@vtbag/turn-signal?url";
+import camShaft from "@vtbag/cam-shaft?url";
+---
+
+<StarlightHead {...Astro.props}><slot /></StarlightHead>
+<script is:inline>
+  ["pageswap", "pagereveal"].forEach((event) =>
+    addEventListener(
+      event,
+      (e) =>
+        e.viewTransition &&
+        document
+          .querySelectorAll("h2")
+          .forEach((h2, idx) => (h2.style.viewTransitionName = `h2-${idx}`))
+    )
+  );
+</script>
+{/* Decent transitions for scrolled down pages */}
+<script is:inline src={camShaft}/>
+
+{/* Make animation direction based on the order of the pages in the sidebar */}
+<script is:inline src={turnSignal} data-selector="nav.sidebar li a" />
+
+{
+  /* Without further configuration, make headings stand out during view transitions.
+    Can be used to declaratively add view transition names which open a door to all kinds of funny thing. */
+}
+
+<style is:global>
+  @view-transition {
+    navigation: auto;
+  }
+  main {
+    view-transition-name: main;
+  }
+  ::view-transition-old(main) {
+    animation: forwardsSwingOut 150ms ease-in-out;
+  }
+  ::view-transition-new(main) {
+    animation: forwardsSwingIn 150ms ease-in-out;
+  }
+  :active-view-transition-type(backward)::view-transition-old(main) {
+    animation: backwardsSwingOut 150ms ease-in-out;
+  }
+  :active-view-transition-type(backward)::view-transition-new(main) {
+    animation: backwardsSwingIn 150ms ease-in-out;
+  }
+  @keyframes forwardsSwingOut {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes forwardsSwingIn {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  @keyframes backwardsSwingOut {
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes backwardsSwingIn {
+    0% {
+      transform: translateX(-100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+  ::view-transition-image-pair(main) {
+    overflow: hidden;
+  }
+</style>

src/content/docs/tools/turn-signal.mdx

@@ -164,7 +164,7 @@ Just changing the direction of the animations would lead to something best named
       animation-name: slideOutToLeft;
       animation-direction: reverse;
     }
-  }  }
+  }
 ```
 … or even explicitly define keyframes for slideOutToRight and slideInFromLeft if you feel that is clearer.
 

src/pages/chamber.js.ts

@@ -1,6 +1,4 @@
-import { readFileSync } from 'node:fs';
-
-const inspectionChamber = readFileSync('node_modules/@vtbag/inspection-chamber/lib/index.js');
+import inspectionChamber from "@vtbag/inspection-chamber?raw"
 
 export async function GET() {
 	return new Response(`

src/pages/demo/Fail2.astro

@@ -3,7 +3,7 @@ import Demo from "@/layouts/DemoLayout.astro";
 ---
 
 <Demo
-  title="View Transition Example: Inline to Block Text Morph"
+  title="View Transition Example: Unintended Ratio Differences"
   backlink="/basics/examples/#fail2"
   prev="/demo/Fail1/"
   next=""

src/pages/signal-demo/_Layout.astro

@@ -4,6 +4,7 @@ import bag from "../../assets/bag.png";
 import chamber from "../../assets/chamber.png";
 import crossing from "../../assets/crossing.png";
 import signal from "../../assets/signal.png";
+import shaft from "../../assets/shaft.png";
 import turnSignal from "@vtbag/turn-signal?url";
 
 export interface Props {
@@ -13,8 +14,8 @@ const { title } = Astro.props;
 const script =
   'const _=document.documentElement;_.dataset.theme=_.style.colorScheme=localStorage.getItem("starlight-theme")||(window.matchMedia("(prefers-color-scheme: dark)").matches? "dark":"light")';
 const pathname = Astro.url.pathname;
-const pages = ["bag", "chamber", "crossing", "signal"];
-const images = [bag, chamber, crossing, signal];
+const pages = ["bag", "chamber", "crossing", "signal", "shaft"];
+const images = [bag, chamber, crossing, signal, shaft];
 ---
 
 <html lang="en">

src/pages/signal-demo/bag.astro

@@ -5,5 +5,5 @@ import bag from "../../assets/cards/bag.png";
 ---
 
 <Layout title="The Bag of Tricks">
-  <Image src={bag} alt="The Bafg of Tricks" />
+  <a href="/vtbag/"><Image src={bag} alt="The Bafg of Tricks" /></a>
 </Layout>

src/pages/signal-demo/chamber.astro

@@ -5,5 +5,5 @@ import chamber from "../../assets/cards/chamber.png";
 ---
 
 <Layout title="The Inspection Chamber">
-  <Image src={chamber} alt="The Bag's Inspection Chamber" />
+  <a href="/tools/inspection-chamber/"><Image src={chamber} alt="The Bag's Inspection Chamber" /></a>
 </Layout>

src/pages/signal-demo/crossing.astro

@@ -5,5 +5,5 @@ import crossing from "../../assets/cards/crossing.png";
 ---
 
 <Layout title="The Element Crossing">
-  <Image src={crossing} alt="The Bag's Element Crossing" />
+  <a href="/tools/element-crossing/"><Image src={crossing} alt="The Bag's Element Crossing" /></a>
 </Layout>

src/pages/signal-demo/shaft.astro

@@ -0,0 +1,9 @@
+---
+import Layout from "./_Layout.astro";
+import { Image } from "astro:assets";
+import shaft from "../../assets/cards/shaft.png";
+---
+
+<Layout title="The Cam-Shaft">
+  <a href="/tools/cam-shaft/"><Image src={shaft} alt="The Bag's Cam-Shaft" /></a>
+</Layout>

src/pages/signal-demo/signal.astro

@@ -5,5 +5,5 @@ import signal from "../../assets/cards/signal.png";
 ---
 
 <Layout title="The Turn-Signal">
-  <Image src={signal} alt="The Bag's Turn-Signal" />
+  <a href="/tools/turn-signal/"><Image src={signal} alt="The Bag's Turn-Signal" /></a>
 </Layout>