updates & improvements

astro.config.ts

@@ -36,7 +36,7 @@ export default defineConfig({
   integrations: [starlight({
     title: '@vtbag',
     components: {
-      Head: "./src/components/NHead.astro",
+      Head: "./src/components/Head.astro",
       PageTitle: "./src/components/PageTitle.astro"
     },
     plugins: [starlightImageZoom()],
@@ -54,9 +54,9 @@ export default defineConfig({
     customCss: ["./src/styles/custom.css"],
     lastUpdated: true,
     pagination: true,
-    favicon: "/bag3.png",
+    favicon: "/bag4.png",
     logo: {
-      src: "./src/assets/bag.png"
+      src: "./src/assets/bag.webp"
     },
     social: {
       github: 'https://github.com/vtbag/website'

package.json

@@ -10,24 +10,24 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.28.2",
-    "@playwright/test": "^1.47.2",
+    "@astrojs/starlight": "^0.28.3",
+    "@playwright/test": "^1.48.0",
     "@splidejs/splide": "^4.1.4",
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.7.5",
+    "@vtbag/cam-shaft": "^1.0.0",
     "@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": "^4.16.2",
     "astro-breadcrumbs": "^3.2.0",
-    "astro-d2": "^0.5.2",
+    "astro-d2": "^0.6.0",
     "astro-vtbot": "^1.10.3",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "sharp": "^0.33.5",
     "starlight-image-zoom": "^0.8.0",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }

public/bag.webp

@@ -0,0 +1 @@
+../src/assets/bag.webp

src/content/docs/basics/pseudos.mdx

@@ -3,6 +3,8 @@ title: "Pseudo-Elements of the View Transition API"
 description: "What are those pseudo-elements of the View Transition API and how can I style and animate them?"
 ---
 
+What are those pseudo-elements of the View Transition API and how can I style and animate them?
+
 The key feature of the View Transition API is that it generates images for parts of your DOM and operates solely on those images. This enables the API to display sections of the old page exactly as they appeared before the transition began.
 
 None of your actual DOM elements are directly visible during the transition. Everything is covered by the generated images, which are moved around in their own layer above your web page.

src/content/docs/index.mdx

@@ -1,5 +1,5 @@
 ---
-title: "@vtbag      "
+title: "@vtbag"
 description: Bag of Tricks for View Transitions.
 hero:
   tagline: Website for the @vtbag umbrella
@@ -19,10 +19,22 @@ head:
     attrs:
       name: robots
       content: "index, follow"
+  - tag: meta
+    attrs:
+      property: "og:type"
+      content: "website"
+  - tag: script
+    attrs:
+      type: "application/ld+json"
+      data-vtbot-linter: "ignore"
+    content: '{"@context": "https://schema.org", "@type": "WebSite", "name": "@vtbag", "url": "https://vtbag.pages.dev/"}'
 ---
 
 <style>{`
   .hero h1 {
+    text-align: left;
     font-size: var(--sl-text-h1);
+    width: 8.25em;
   }
-`}</style>
+
+`}</style>

src/content/docs/tips/pointer.mdx

@@ -1,5 +1,5 @@
 ---
-title: Avoid Pointer Flickering during View Transitions
+title: Pointer Flickering
 ---
 When I was asked how to avoid changing pointers on view transition navigation, I was first puzzled: I have to admit, I never really considered that effect before. But once you notice it, it's hard to unsee — and it definitely becomes a bit irritating every time you encounter it.
 

src/content/docs/tips/pseudo-smooth-scrolling.mdx

@@ -70,7 +70,7 @@ If possible, resist the temptation to apply a view transition name to large cont
 If using the root transition group doesn't meet your design objectives, you can turn to the [`@vtbag/cam-shaft`](/tools/cam-shaft/) script to adjust the images into their proper positions, compensating for the scroll delta. This approach eliminates sliding viewports and the pseudo-smooth-scroll effect. Just identify the transition groups that need adjustments, and let the script take care of the rest.
 
 <style>{`
-svg {
-  margin: 0 auto;
+main svg {
+  margin-inline: auto;
 }
 `}</style>

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

@@ -168,6 +168,8 @@ Just changing the direction of the animations would lead to something best named
 ```
 … or even explicitly define keyframes for slideOutToRight and slideInFromLeft if you feel that is clearer.
 
+… and you can also define different animations for `:active-view-transition-type(same)`, i.e. for links to the current page, e.g. in a navigation bar.
+
 ### Config Options
 |Config option|Type|Effect|
 |--|--|--|

src/pages/demo-explainer/Fail2.mdx

@@ -47,7 +47,7 @@ The issue is resolved by applying consistent styling to both headings. To avoid
   padding-bottom: 2px;
  }
 ```
-I also made the `@vtbag` string on the hero page and the `@vtbag: Overview` string on the overview page the same length. How? By adding "      " to the shorter one.
+I also made the `@vtbag` string on the hero page and the `@vtbag: Overview` string on the overview page the same length by setting the width on the hero page to `8.25em`.
 
 Did it work? Visit the [home page](/), click the "Open the Bag" button, and see for yourself!
 

src/pages/demo/Fail2.astro

@@ -6,7 +6,7 @@ import Demo from "@/layouts/DemoLayout.astro";
   title="View Transition Example: Unintended Ratio Differences"
   backlink="/basics/examples/#fail2"
   prev="/demo/Fail1/"
-  next=""
+  next="/demo/Improved1/"
 >
 
 

src/pages/demo/Improved1.astro

@@ -5,15 +5,15 @@ import Demo from "@/layouts/DemoLayout.astro";
 <Demo
   title="View Transition Example: Inline to Block Text Morph"
   backlink="/basics/examples/#improved1"
-  prev="/demo/Fail1/"
+  prev="/demo/Fail2/"
   next=""
 >
   <div style="height: 16rem">
     <div id="DOM1" class="active">
       <p>
         This example shows <a>an improved effect</a> for <a href="/demo/Fail1/"
           >this strange transition</a
-        >]. Click the first link to start the transition with the improved
+        >. Click the first link to start the transition with the improved
         version.
       </p>
     </div>

src/styles/custom.css

@@ -12,9 +12,7 @@
 :root {
   transition: --sl-color-text 2s;
 }
-:root[loading] * {
-  cursor: progress;
-}
+
 body {
   text-align: left;
   hyphens: auto;

tests/02_chamber.spec.ts

@@ -252,6 +252,8 @@ test.describe("Full control", () => {
   test('can fast forward', async ({ page }) => {
     await start(page);
 
+    await page.waitForTimeout(100);
+
     await page.evaluate(() => {
       const input = top!.document.querySelector<HTMLInputElement>('#vtbag-ui-controller2')!;
       input.value = "125";