update

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()],
@@ -101,7 +101,8 @@ function sidebar() {
       { label: 'View Transition API', link: "/basics/api/" },
       { label: 'View Transition Examples', link: "/basics/examples/" },
       { label: 'Structure of Pseudo-Elements', link: "/basics/pseudos/" },
-      { label: 'Mechanics of Default Animations', link: "/basics/default-animations/" }
+      { label: 'Mechanics of Default Animations', link: "/basics/default-animations/" },
+      { label: 'Styling View Transition', link: "/basics/styling/" }
     ]
   }, {
     label: 'CSS Tips & Tricks',

bin/build

@@ -10,4 +10,6 @@ fi
 [ -n "$GS" ] && echo -n "google-site-verification: ${GS}" > ./dist/${GS}
 
 find dist -type f -exec grep -l 'script src="/chamber.js/"' {} \; | xargs sed -i 's|script src="/chamber.js/"|script src="/chamber.js"|'
-find dist -type f -exec grep -l 'source src="/video.mp4"' {} \; | xargs sed -i 's|source src="/video.mp4"|source src="https://cdn.pixabay.com/video/2021/02/21/65860-515617507_tiny.mp4"|'
+find dist -type f -exec grep -l 'source src="/video.mp4"' {} \; | xargs sed -i 's|source src="/video.mp4"|source src="https://cdn.pixabay.com/video/2021/02/21/65860-515617507_tiny.mp4"|'
+
+echo "/*\n  cache-control: max-age=60, stale-while-revalidate=120, stale-if-error=86400\n  last-modified: `date -u +'%a, %d %b %Y %H:%M:%S GMT'`\n\n/\n  cache-control: max-age=60, stale-while-revalidate=120, stale-if-error=86400\n  last-modified: `date -u +'%a, %d %b %Y %H:%M:%S GMT'`" > dist/_header

package.json

@@ -13,15 +13,15 @@
     "@astrojs/starlight": "^0.28.3",
     "@playwright/test": "^1.48.1",
     "@splidejs/splide": "^4.1.4",
-    "@types/node": "^22.7.6",
+    "@types/node": "^22.7.9",
     "@vtbag/cam-shaft": "^1.0.1",
     "@vtbag/element-crossing": "^1.0.2",
-    "@vtbag/inspection-chamber": "^1.0.16",
-    "@vtbag/turn-signal": "^1.0.3",
-    "astro": "^4.16.6",
+    "@vtbag/inspection-chamber": "^1.0.17",
+    "@vtbag/turn-signal": "^1.1.0",
+    "astro": "^4.16.7",
     "astro-breadcrumbs": "^3.2.0",
     "astro-d2": "^0.6.0",
-    "astro-vtbot": "^1.10.4",
+    "astro-vtbot": "^1.10.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",

public/_headers

@@ -1,4 +1,4 @@
-/basics/pseudos/
-  Cache-Control: no-cache
-  Etag: W/"13d5c-c2EQ2YBn07GjDUKtkkQ7DaNzk70"
-  Rumpel: "Stielzchen"
+/*
+  cache-control: max-age=60, stale-while-revalidate=120, stale-if-error=86400
+  last-modified: Sat, 19 Oct 2024 11:07:00 GMT
+

src/components/Logo.astro

@@ -0,0 +1,41 @@
+---
+import {Image} from "astro:assets";
+export interface Props {
+  alt: string;
+  image: any;
+}
+---
+
+<div style="display:flex">
+  <div id="logo" style="flex:1; margin: 3ex">
+    <Image src={Astro.props.image} alt={Astro.props.alt} />
+  </div><div style="flex:3">
+    <slot />
+  </div>
+</div>
+<style is:global>
+  #logo img {
+    view-transition-name: logo;
+    mask-image: radial-gradient(
+        ellipse at center,
+        white 35%,
+        transparent 71%
+      );
+  }
+  ::view-transition-old(logo) {
+    animation: 250ms ease both logo-out;
+  }
+  ::view-transition-new(logo) {
+    animation: 250ms 250ms ease both logo-in;
+  }
+  @keyframes logo-out {
+    to {
+      transform: rotateY(90deg);
+    }
+  }
+  @keyframes logo-in {
+    from {
+      transform: rotateY(90deg);
+    }
+  }
+</style>

src/components/NHead.astro

@@ -8,11 +8,14 @@ import "./vtbag-bar.css";
 
 <StarlightHead {...Astro.props}><slot /></StarlightHead>
 
+{ // @ts-ignore
+<link rel="expect" href="#unexpected" blocking="render"/>}
+
 {/* Decent transitions for scrolled down pages */}
 <script is:inline src={camShaft}></script>
 
 {/* Make animation direction based on the order of the pages in the sidebar */}
-<script is:inline src={turnSignal} data-selector="nav.sidebar li a"></script>
+<script is:inline src={turnSignal} data-selector="header a, nav.sidebar li a"></script>
 
 {
   /* 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. */
@@ -37,24 +40,28 @@ import "./vtbag-bar.css";
   main {
     view-transition-name: main;
   }
+  :active-view-transition-type(same) main {
+    view-transition-name: none;
+  }
   ::view-transition-old(main) {
-    animation: forwardsSwingOut 400ms ease-in-out;
+    animation: forwardsSwingOut 500ms ease-in-out;
   }
   ::view-transition-new(main) {
-    animation: forwardsSwingIn 400ms ease-in-out;
+    animation: forwardsSwingIn 500ms ease-in-out;
   }
   :active-view-transition-type(backward)::view-transition-old(main) {
-    animation: backwardsSwingOut 400ms ease-in-out;
+    animation: backwardsSwingOut 500ms ease-in-out;
   }
   :active-view-transition-type(backward)::view-transition-new(main) {
-    animation: backwardsSwingIn 400ms ease-in-out;
+    animation: backwardsSwingIn 500ms ease-in-out;
   }
-  :active-view-transition-type(same)::view-transition-old(main) {
-    animation: shake-old 400ms ease-in-out;
+  :active-view-transition-type(same)::view-transition-old(root) {
+    animation: shake-old 500ms ease-in-out;
   }
-  :active-view-transition-type(same)::view-transition-new(main) {
-    animation: shake-new 400ms ease-in-out;
+  :active-view-transition-type(same)::view-transition-new(root) {
+    animation: shake-new 500ms ease-in-out;
   }
+
   @keyframes forwardsSwingOut {
     0% {
       transform: translateX(0);
@@ -96,28 +103,15 @@ import "./vtbag-bar.css";
     }
   }
   @keyframes shake-old {
-    25% {
-      transform: rotateZ(-2deg);
-    }
-    50% {
-      transform: rotateZ(0deg);
-      opacity: 0.5;
-    }
-    51%, 100% {
+    to {
+      transform: scale(25);
       opacity: 0;
     }
   }
   @keyframes shake-new {
-    0%, 49% {
+    from {
       opacity: 0;
-    }
-    50% {
-      transform: rotateZ(0deg);
-      opacity: 0.5;
-    }
-    75% {
-      transform: rotateZ(2deg);
-      opacity: 1;
+      transform: scale(0);
     }
   }
   ::view-transition-image-pair(main) {