Update build workflows and improve documentation

Author: martrapp

.github/workflows/build.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "24"
           cache: npm
           cache-dependency-path: ./package-lock.json
 

.github/workflows/cf_pages.yml

@@ -21,14 +21,14 @@ jobs:
       npm_config_legacy_peer_deps: "true"
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
         with:
           fetch-depth: 0
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: "22"
+          node-version: "24"
           cache: npm
           cache-dependency-path: ./package-lock.json
 

src/content/docs/404.md

@@ -0,0 +1,9 @@
+---
+title: "404"
+pagefind: false
+editUrl: false
+---
+
+The page you requested was not found.
+
+Return to the [overview](/vtbag/).

src/content/docs/tips/css.mdx

@@ -189,5 +189,5 @@ Same hold for the auto-generated view transition name example: it works for all
 ## Conclusion
 I'm still exploring paths and alternatives but this would be my current recommendations:
 1. For complex pages, ensuring the uniqueness of view transition names might be easier if you assign them dynamically in the browser using JavaScript, or in a page global action on the server.
-2. Placing your view transition animation definitions in a global CSS file can be a good approach. This ensures that both the old and new pages use the same definitions, so you do not have to worry about where to put them. Just make sure your keyframe and view transition names are either globally unique or intentionally the same.
+2. Placing your view transition animation definitions in a global CSS file can be a good approach. This ensures that both the old and new pages use the same definitions, so you do not have to worry about where to put them. Just make sure your keyframe and view transition names are either globally unique or intentionally the same. Just make sure that the @view-transition at-rule occurs in the first few bytes of the CSS file. Otherwise the browser might ignore it.
 3. Utilizing [view transition classes and types](/basics/styling/#with-classes) can help decouple usage from definitions, making your code more flexible."

src/pages/auto/Auto1.astro

@@ -101,7 +101,8 @@ test.describe("vtbot", () => {
     await page.reload();
     expect(await page.locator("#p").getAttribute("style")).toBe("color: red");
   });
-  test("astro integration (ott)", async ({ page }) => {
+  test("astro integration (ott)", async ({ page, browserName }) => {
+    test.skip(browserName === 'firefox', 'Skipped in Firefox');
     await page.goto('http://localhost:4321/tests/x/');
     expect(await page.locator("iframe").contentFrame().locator("head title").textContent()).toBe("Test X");
   });

src/pages/auto/Auto2.astro

@@ -3,25 +3,25 @@ import { test, expect, type Page } from '@playwright/test';
 test.skip(({ browserName }) => browserName === 'firefox', 'Skip on Firefox');
 
 
+async function openClose(page: Page) {
+  const app = page.locator('#bar-container > button[data-app-id="vtbot"]');
+  await expect(app).toBeVisible();
+  await app.click();
+}
+async function toolbarAction(page: Page, status: string) {
+  await openClose(page);
+  const button = page.locator('#inspection-chamber-button button');
+  await expect(button).toBeVisible();
+  await expect(page.locator("#inspection-chamber-status")).toContainText(status);
+  return button;
+}
+
 test('has title', async ({ page }) => {
   await page.goto('http://localhost:4321/inspection-chamber-demo/first-page/');
   await expect(page).toHaveTitle('🔬 Inspection Chamber Demo | @vtbag');
 });
 
 test.describe("devToolbar", () => {
-  async function openClose(page: Page) {
-    const app = page.locator('#bar-container > button[data-app-id="vtbot"]');
-    await expect(app).toBeVisible();
-    await app.click();
-  }
-  async function toolbarAction(page: Page, status: string) {
-    await openClose(page);
-    const button = page.locator('#inspection-chamber-button button');
-    await expect(button).toBeVisible();
-    await expect(page.locator("#inspection-chamber-status")).toContainText(status);
-    return button;
-  }
-
   test('can open and close', async ({ page }) => {
     await page.goto('http://localhost:4321/');
     await expect(page.locator('#inspection-chamber-button')).toBeHidden();
@@ -69,6 +69,11 @@ test.describe("controls", () => {
   test('can close', async ({ page }) => {
     await page.goto('http://localhost:4321/demo/BasicS/');
 
+    let button = await toolbarAction(page, "There is an Inspection Chamber here");
+    await button.click();
+    await expect(page.locator('#vtbag-ui-panel')).toBeVisible();
+    await page.click('#vtbag-ui-standby');
+
     await expect(page.locator('#vtbag-ui-reopen')).toBeVisible();
     await page.click('#vtbag-ui-reopen');
     await expect(page.locator('#vtbag-ui-reopen')).toBeHidden();
@@ -80,6 +85,11 @@ test.describe("controls", () => {
   test('can reopen', async ({ page }) => {
     await page.goto('http://localhost:4321/demo/BasicS/');
 
+    let button = await toolbarAction(page, "There is an Inspection Chamber here");
+    await button.click();
+    await expect(page.locator('#vtbag-ui-panel')).toBeVisible();
+    await page.click('#vtbag-ui-standby');
+
     await expect(page.locator('#vtbag-ui-panel')).toBeHidden();
     await page.click('#vtbag-ui-reopen');
     await expect(page.locator('#vtbag-ui-reopen')).toBeHidden();
@@ -89,6 +99,11 @@ test.describe("controls", () => {
 
   test('can really reopen', async ({ page }) => {
     await page.goto('http://localhost:4321/demo/BasicC1/');
+    
+    let button = await toolbarAction(page, "There is an Inspection Chamber here");
+    await button.click();
+    await expect(page.locator('#vtbag-ui-panel')).toBeVisible();
+    await page.click('#vtbag-ui-standby');
 
     await expect(page.locator('#vtbag-ui-panel')).toBeHidden();
     await page.click(".right");