feat: open graph cards and playwright updates

.github/workflows/playwright.yml

@@ -16,20 +16,23 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 24.16.0
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
       - name: Install Playwright Browsers
-        run: npx playwright install --with-deps
+        run: pnpm exec playwright install --with-deps
 
       - name: Run Playwright tests
-        run: npx playwright test
+        run: pnpm run test:a11y
 
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: playwright-report
-          path: playwright-report/
+          path: |
+            full-report.json
+            test-results/
+            playwright-report/
           retention-days: 7

.gitignore

@@ -1,10 +1,12 @@
 # build output
 dist/
+public/og/
 # generated types
 .astro/
 
 # dependencies
 node_modules/
+.pnpm-store/
 
 # logs
 npm-debug.log*
@@ -22,5 +24,6 @@ pnpm-debug.log*
 
 # test artifacts
 playwright-report/
+reports/
 test-results/
 **/full-report.json

AGENTS.md

@@ -46,7 +46,7 @@ This is an Astro-based personal blog and website with the following key architec
 ### Testing & Quality
 
 - **Playwright Tests**: Accessibility-focused testing with custom axe-core integration
-- **Custom Reporter**: `tests/reporter/axe-aggregate-reporter.ts` for accessibility test results
+- **Accessibility Reporter**: `@schalkneethling/axe-aggregate-reporter` aggregates Playwright axe results
 - **Test Configuration**: Only runs on Chromium, focuses on a11y compliance
 
 ### Key Patterns

CLAUDE.md

@@ -46,7 +46,7 @@ This is an Astro-based personal blog and website with the following key architec
 ### Testing & Quality
 
 - **Playwright Tests**: Accessibility-focused testing with custom axe-core integration
-- **Custom Reporter**: `tests/reporter/axe-aggregate-reporter.ts` for accessibility test results
+- **Accessibility Reporter**: `@schalkneethling/axe-aggregate-reporter` aggregates Playwright axe results
 - **Test Configuration**: Only runs on Chromium, focuses on a11y compliance
 
 ### Key Patterns

README.md

@@ -10,12 +10,41 @@ All commands are run from the root of the project, from a terminal:
 
 | Command                   | Action                                           |
 | :------------------------ | :----------------------------------------------- |
-| `npm install`             | Installs dependencies                            |
-| `npm run dev`             | Starts local dev server at `localhost:4321`      |
-| `npm run build`           | Build your production site to `./dist/`          |
-| `npm run preview`         | Preview your build locally, before deploying     |
-| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
-| `npm run astro -- --help` | Get help using the Astro CLI                     |
+| `pnpm install`            | Installs dependencies                            |
+| `pnpm dev`                | Starts local dev server at `localhost:4321`      |
+| `pnpm run generate:og`    | Generates per-post Open Graph card images        |
+| `pnpm run build`          | Generates Open Graph cards and builds to `dist/` |
+| `pnpm preview`            | Preview your build locally, before deploying     |
+| `pnpm run typecheck`      | Typecheck the project with `astro check`         |
+| `pnpm run test:a11y`      | Run Playwright axe accessibility tests           |
+| `pnpm run a11y:viewer`    | Open the generated axe aggregate report viewer   |
+| `pnpm astro ...`          | Run CLI commands like `astro add`, `astro check` |
+| `pnpm astro -- --help`    | Get help using the Astro CLI                     |
+
+## Open Graph cards
+
+Blog post social cards are generated at build time with
+[`@schalkneethling/opengraph-cards-maker`](https://github.com/schalkneethling/opengraph-cards-maker).
+
+- Generator script: [`scripts/generate-og-cards.mjs`](scripts/generate-og-cards.mjs)
+- Card background artwork: [`src/assets/open-graph/post-card-template.png`](src/assets/open-graph/post-card-template.png)
+- Generated source output: `public/og/posts/`
+- Built output: `dist/og/posts/`
+- Metadata wiring:
+  - [`src/pages/posts/[...slug].astro`](src/pages/posts/[...slug].astro)
+  - [`src/layouts/MarkdownPostLayout.astro`](src/layouts/MarkdownPostLayout.astro)
+  - [`src/layouts/BaseLayout.astro`](src/layouts/BaseLayout.astro)
+
+`public/og/` is ignored because the cards are reproducible build output. Run
+`pnpm run generate:og` after changing post frontmatter, the generator script, or
+the card template. The full `pnpm run build` command runs this automatically.
+
+If the card design needs tuning, the current blog-specific layout is the
+`image-panel` layout in
+[`@schalkneethling/opengraph-cards-maker`](https://github.com/schalkneethling/opengraph-cards-maker/blob/main/docs/data-model.md#layout-image-panel).
+The generator uses `background.src` for the template image and
+`contentAlign: "align-end"` so the post text sits on the right while the
+background graphic remains on the left.
 
 ## 👀 Want to learn more?
 

package.json

@@ -2,12 +2,20 @@
   "name": "schalkneethling.com",
   "type": "module",
   "version": "0.0.1",
+  "engines": {
+    "node": ">=24"
+  },
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build",
+    "build": "pnpm run generate:og && astro build",
+    "generate:og": "node scripts/generate-og-cards.mjs",
     "preview": "astro preview",
     "astro": "astro",
+    "typecheck": "astro check",
+    "test:a11y": "playwright test",
+    "a11y:viewer": "axe-aggregate-viewer ./full-report.json",
+    "a11y:viewer:standalone": "axe-aggregate-viewer ./full-report.json --standalone",
     "test:unit": "vitest run"
   },
   "dependencies": {
@@ -17,13 +25,14 @@
     "@schalkneethling/masonry-gridlanes-wc": "^0.1.0",
     "astro": "^6.3.1",
     "astro-embed": "^0.13.0",
-    "sharp": "^0.34.5",
     "typescript": "^6.0.3",
     "varlock": "^1.1.0"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.59.1",
+    "@schalkneethling/axe-aggregate-reporter": "0.6.0",
+    "@schalkneethling/opengraph-cards-maker": "^0.1.0",
     "@varlock/1password-plugin": "^1.1.0",
     "axe-core": "^4.11.4",
     "vitest": "^4.1.5"

playwright.config.ts

@@ -14,6 +14,7 @@ import { defineConfig, devices } from "@playwright/test";
 export default defineConfig({
   outputDir: "./test-results",
   testDir: "./tests",
+  testMatch: "**/*.spec.ts",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -23,11 +24,11 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "./tests/reporter/axe-aggregate-reporter.ts",
+  reporter: [["list"], ["@schalkneethling/axe-aggregate-reporter/reporter"]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:3000',
+    baseURL: "http://localhost:4321",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -72,9 +73,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://localhost:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: "pnpm run dev -- --host 127.0.0.1",
+    url: "http://localhost:4321",
+    reuseExistingServer: !process.env.CI,
+  },
 });