Merge branch 'main' into main

Author: martrapp

.github/workflows/build.yml

@@ -11,12 +11,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Setup Node
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: "18"
+          node-version: "24"
           cache: npm
           cache-dependency-path: ./package-lock.json
 

.github/workflows/cf_pages.yml

@@ -17,16 +17,18 @@ jobs:
     name: Build
     if: ${{ github.repository_owner == 'vtbag' }}
     runs-on: ubuntu-latest
+    env:
+      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: "18"
+          node-version: "24"
           cache: npm
           cache-dependency-path: ./package-lock.json
 
@@ -38,7 +40,7 @@ jobs:
           restore-keys: astro-cache
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci
 
       - name: Build with Astro
         run: npm run build

astro.config.ts

@@ -13,22 +13,13 @@ import d2 from "astro-d2";
 import inoxToolsPortalGun from "@inox-tools/portal-gun";
 import type { Badge } from "node_modules/@astrojs/starlight/schemas/badge";
 import sitemap from '@astrojs/sitemap';
-import og from "astro-og";
 
 export default defineConfig({
   image: { remotePatterns: [{ protocol: "https" }] },
   devToolbar: { enabled: true },
   site: "https://vtbag.dev",
   compressHTML: false,
 
-  redirects: {
-    "/inspection-chamber/": "/tools/inspection-chamber/",
-  },
-
-  experimental: {
-    preserveScriptOrder: true,
-    headingIdCompat: true,
-  },
   prefetch: false,
 
   markdown: {
@@ -83,12 +74,12 @@ export default defineConfig({
       },
       head: [
         {
-          tag: "meta",
-          attrs: {
-            property: "og:image",
-            content: "https://vtbag.dev/social.png",
-          },
+          tag: "meta", attrs: { property: "og:image", content: "https://vtbag.dev/social.png", }
         },
+        { tag: "meta", attrs: { property: "article:publisher", content: "https://bsky.app/profile/vtbag.dev" } },
+        { tag: "meta", attrs: { property: "article:author", content: "https://bsky.app/profile/martr.app" } },
+        { tag: "meta", attrs: { property: "article:tag", content: "view transitions" } },
+        { tag: "meta", attrs: { property: "article:section", content: "Articles" } },
         {
           tag: "meta",
           attrs: {
@@ -128,12 +119,18 @@ export default defineConfig({
       ],
       lastUpdated: true,
       pagination: true,
-      favicon: "/bag4.png",
+      favicon: "/bag4.ico",
       logo: {
         src: "./src/assets/mini-bag.webp",
+        alt: "vtbag logo",
       },
 
       social: [
+        {
+          icon: "rss",
+          label: "RSS",
+          href: "/rss.xml",
+        },
         {
           icon: "github",
           label: "GitHub",
@@ -153,10 +150,12 @@ export default defineConfig({
     }),
     d2({
       skipGeneration: process.env.GITHUB_ACTIONS === "true",
+      theme: {
+        default: "0",
+      },
     }),
     vtbot({ autoLint: false, loadingIndicator: false }),
     inoxToolsPortalGun(),
-    og(),
     sitemap({
       filter: (page) =>
         /**/!page.startsWith('https://vtbag.dev/auto/')
@@ -199,7 +198,7 @@ function sidebar() {
       link: "/vtbag/",
     },
     {
-      label: "Basics",
+      label: "Basic Information",
       items: [
         { label: "Test Your Browser", link: "/basics/test-page/" },
         { label: "View Transition API", link: "/basics/api/" },
@@ -214,17 +213,17 @@ function sidebar() {
         },
         { label: "Styling View Transitions", link: "/basics/styling/" },
         { label: "JavaScript API", link: "/basics/javascript/" },
-        { label: "Playing Hide & Seek", link: "/basics/hide-and-seek/" },
+        { label: "Playing Hide & Seek", link: "/basics/hide-and-seek/",
+          badge: { text: "Updated!", variant: "success" } as Badge },
         {
           label: "API Levels and Implications",
-          link: "/basics/levels/",
-          badge: { text: "New!", variant: "success" } as Badge,
+          link: "/basics/levels/"
         },
         { label: "Web Framework Support", link: "/basics/frameworks/" },
       ],
     },
     {
-      label: "Tools",
+      label: "Tools & Libraries",
       items: [
         { label: "Inspection Chamber", link: "/tools/inspection-chamber/" },
         { label: "Element Crossing", link: "/tools/element-crossing/" },
@@ -233,8 +232,7 @@ function sidebar() {
         {
           label: "Utensil Drawer",
           link: "/tools/utensil-drawer/",
-          badge: { text: "Updated!", variant: "success" } as Badge,
-        },
+          },
       ],
     },
     {
@@ -250,7 +248,6 @@ function sidebar() {
         {
           label: "Playing",
           link: "/fwvt/playing/",
-          badge: { text: "New!", variant: "success" } as Badge,
         },
       ],
     },
@@ -275,13 +272,12 @@ function sidebar() {
         {
           label: "Why View Transitions Might Fail",
           link: "tips/view-transition-fails-and-fixes/",
-          badge: { text: "Updated!", variant: "success" } as Badge
         },
       ],
     },
     { label: "BagLog", link: "/baglog" },
     {
-      label: "All Demos",
+      label: "All Tech Demos",
       collapsed: false,
       items: [
         {

bin/rss-update.ts

@@ -0,0 +1,128 @@
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { parse } from 'node-html-parser';
+
+const SITE_URL = 'https://vtbag.dev/';
+const OUTPUT = 'public/rss.xml';
+
+const CONTENT_DIRS = [
+  'dist/basics',
+  'dist/fwvt',
+  'dist/tips',
+  'dist/tools',
+  'dist/vtbag',
+];
+
+type FeedItem = {
+  title: string;
+  link: string;
+  guid: string;
+  author: string | undefined;
+  lastModifiedStr: string | undefined;
+  lastModified: Date | null;
+  description?: string;
+  image?: string;
+};
+
+function walk(dir: string): string[] {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap(entry => {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) return walk(fullPath);
+    if (entry.isFile() && entry.name.endsWith('.html')) {
+      return [fullPath];
+    }
+    return [];
+  });
+}
+
+function readHtml(file: string) {
+  return parse(fs.readFileSync(file, 'utf8'));
+}
+
+function meta(root: ReturnType<typeof parse>, prop: string): string | undefined {
+  return root
+    .querySelector(`meta[property="${prop}"]`)
+    ?.getAttribute('content');
+}
+
+function toUrl(file: string): string {
+  const rel = file.replace(/^dist/, '');
+  return SITE_URL + rel.replace(/index\.html$/, '');
+}
+
+function cdata(value: string): string {
+  return `<![CDATA[${value.replaceAll(']]>', ']]]]><![CDATA[>')}]]>`;
+}
+
+function rfc822(date: Date): string {
+  return date.toUTCString();
+}
+
+const files = CONTENT_DIRS.flatMap(dir => walk(dir));
+
+const items: FeedItem[] = [];
+
+for (const file of files) {
+  const root = readHtml(file);
+
+  const draft = meta(root, 'draft');
+  if (draft) continue;
+
+  const title = meta(root, 'og:title') ?? root.querySelector('title')?.text;
+  const link = toUrl(file);
+  const author = meta(root, 'author');
+
+  const lastModifiedStr = meta(root, 'og:updated_time') || meta(root, 'article:modified_time');
+  const lastModified = lastModifiedStr ? new Date(lastModifiedStr) : null;
+
+  if (!title || !lastModified) continue;
+
+  items.push({
+    title,
+    link,
+    guid: link,
+    author,
+    lastModifiedStr,
+    lastModified,
+    description: meta(root, 'og:description') ?? "Missing Description",
+    image: meta(root, 'og:image') ?? "/social.png",
+  });
+}
+
+items.sort((a, b) => b.lastModified!.getTime() - a.lastModified!.getTime());
+
+const rssItems = items.map(item => `
+  <item>
+    <title>${cdata(item.title)}</title>
+    <link>${item.link}</link>
+    <guid isPermaLink="true">${item.guid}</guid>
+    ${item.author ? `<dc:creator>${cdata(item.author)}</dc:creator>` : ''}
+    <pubDate>${rfc822(item.lastModified!)}</pubDate>
+    ${item.description ? `<description>${cdata(item.description)}</description>` : ''}
+    ${item.image ? `<enclosure
+        url="${item.image}"
+        type="image/jpeg"
+      />` : ''}
+  </item>
+`).join('');
+
+const rss = `<?xml version="1.0" encoding="UTF-8"?>
+<rss 
+  version="2.0"
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  >
+  <channel>
+    <title>@vtbag: The Bag of Tricks for View Transitions</title>
+    <link>${SITE_URL}</link>
+    <description>Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!</description>
+    <language>en-us</language>
+    <lastBuildDate>${rfc822(new Date())}</lastBuildDate>
+    ${rssItems}
+  </channel>
+</rss>
+`;
+
+fs.writeFileSync(OUTPUT, rss.trim() + '\n');
+
+console.log(`RSS written to ${OUTPUT}`);