Merge remote-tracking branch 'origin/master' into astro

* Regenerate lockfile

Author: john-kurkowski

.github/workflows/vrt.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20.12.0
+          node-version: 20.17.0
 
       - name: Install dependencies
         run: npm install

README.md

@@ -11,3 +11,18 @@ Source for [johnkurkowski.com](https://johnkurkowski.com).
 ### Running
 
     npm start
+
+### Tests
+
+    npm test
+
+Tests are run in CI and must pass prior to deployment.
+
+[Lost Pixel](https://app.lost-pixel.com/) visual regression review is run during
+CI, but does not block deployment. If there are visual differences in your
+build, they require manual, asynchronous review. Before push, you can preview
+Lost Pixel's snapshots against your running local server in production mode.
+
+    npm run build
+    npm run serve &
+    npx lost-pixel local

lostpixel.config.ts

@@ -1,7 +1,30 @@
+import type { Page } from 'playwright-core'
 import type { CustomProjectConfig } from 'lost-pixel'
-import { readFileSync } from 'fs'
 import { join } from 'path'
+import { readFileSync } from 'fs'
+
+/**
+ * Hide 3rd party embeds.
+ *
+ * They're a distraction from 1st party diffs.
+ */
+async function hide3rdPartyEmbeds(page: Page) {
+  await page.addStyleTag({
+    content: `
+        .embed iframe,
+        .twitter-tweet-rendered {
+          display: none !important;
+        }
+      `,
+  })
+}
 
+/**
+ * Parse the sitemap for all pages for visual regression testing to visit.
+ *
+ * The sitemap is an updated yet static list of all pages. "Parse" its XML with
+ * vanilla Node.js for the page URLs.
+ */
 function pagePaths(): string[] {
   const siteUrl = 'https://johnkurkowski.com'
   const sitemapXml = readFileSync(
@@ -14,6 +37,9 @@ function pagePaths(): string[] {
   })
 }
 
+/**
+ * Id the pages by a friendlier, more uniform slug.
+ */
 function slugify(str: string): string {
   const replaced = str.replaceAll('/', '-')
   const stripped = replaced.replaceAll(/(^-+|-+$)/g, '')
@@ -22,6 +48,9 @@ function slugify(str: string): string {
 
 export const config: CustomProjectConfig = {
   apiKey: process.env.LOST_PIXEL_API_KEY,
+  beforeScreenshot: async (page) => {
+    await hide3rdPartyEmbeds(page)
+  },
   breakpoints: [414, 1280],
   lostPixelProjectId: 'clud602ae10romo0e861bvpv2',
   pageShots: {

netlify.toml

@@ -3,5 +3,5 @@
   publish = "dist/"
 
 [build.environment]
-  NODE_VERSION = "20.12.0"
-  NPM_VERSION = "10.5.0"
+  NODE_VERSION = "20.17.0"
+  NPM_VERSION = "10.8.3"