Skip to content

feat: open graph cards and playwright updates#1276

Merged
schalkneethling merged 4 commits into
mainfrom
open-graph-cards
May 23, 2026
Merged

feat: open graph cards and playwright updates#1276
schalkneethling merged 4 commits into
mainfrom
open-graph-cards

Conversation

@schalkneethling

@schalkneethling schalkneethling commented May 23, 2026

Copy link
Copy Markdown
Owner

Adds both opengraph-cards-maker and axe-aggregate-reporter and makes updates based on the new libraries.

Summary by CodeRabbit

  • New Features

    • Added Open Graph card generation for improved social media sharing.
    • Enhanced accessibility testing with expanded WCAG coverage.
  • Documentation

    • Updated project commands documentation to reflect current tooling.
    • Simplified blog post titles for better clarity.
  • Bug Fixes

    • Improved code block contrast for better readability in dark themes.

Review Change Stack

@coderabbitai

coderabbitai Bot commented May 23, 2026

Copy link
Copy Markdown
Contributor

Warning

Review limit reached

@schalkneethling, we couldn't start this review because you've used your available PR reviews for now.

Your plan currently allows 1 review/hour. Refill in 35 minutes and 49 seconds.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more review capacity refills, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 43165ba8-2321-424e-9d11-ce1180d46058

📥 Commits

Reviewing files that changed from the base of the PR and between ce80e97 and 77f8284.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (10)
  • .claude-toolkit/skills/more-secure-dependabot-config/SKILL.md
  • .claude-toolkit/skills/more-secure-dependabot-config/references/ecosystem.md
  • .claude-toolkit/skills/npm-publishing-best-practices/SKILL.md
  • .claude/skills/more-secure-dependabot-config
  • .claude/skills/npm-publishing-best-practices
  • .claude/toolkit-manifest.json
  • .github/dependabot.yml
  • .github/workflows/playwright.yml
  • netlify.toml
  • package.json
📝 Walkthrough

Walkthrough

This pull request enhances site quality and development experience by introducing Open Graph card generation for posts, migrating to a maintained accessibility testing framework, and modernizing the development infrastructure to Node.js 24 with pnpm.

Changes

Site Quality and Developer Experience Improvements

Layer / File(s) Summary
Infrastructure and Tooling Foundation
.github/workflows/playwright.yml, package.json, pnpm-workspace.yaml, tsconfig.json, .gitignore
Node.js pinned to 24.16.0, pnpm configured as package manager in CI and workspace, esbuild/sharp builds enabled, and TypeScript path aliases updated to ./src/... form.
Open Graph Post Card Generation System
scripts/generate-og-cards.mjs, src/layouts/BaseLayout.astro, src/layouts/MarkdownPostLayout.astro, src/pages/posts/[...slug].astro, src/content/posts/*, package.json, .gitignore, README.md
Build-time generation script creates branded social cards from post metadata; layouts dynamically render per-post social images via computed socialImage URLs; post titles simplified by removing part numbers; generator script customizes card appearance (background template, colors, alignment).
Accessibility Testing Framework Modernization
playwright.config.ts, tests/a11y.spec.ts, tests/fixtures/axe-test-fixture.ts, tests/urls.json, .github/workflows/playwright.yml
Replaces custom AxeAggregateReporter with external @schalkneethling/axe-aggregate-reporter package; test discovery restricted to **/*.spec.ts; web server config enabled with conditional reuse; fixture updated to v2 reporter format and expanded WCAG coverage (2.0, 2.1, 2.2); test URLs converted to relative paths; CI artifacts expanded to include full-report.json and test-results/.
Documentation Updates and Code Styling
README.md, AGENTS.md, CLAUDE.md, src/styles/global.css
README documents OG generation process and command table updated to pnpm; guidance files reference external accessibility reporter; Dracula theme comment token contrast improved in Shiki code blocks.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

Poem

🐰 Cards bloom at build time, each post gets its glow,
Tests now run faster with tools we all know,
Node twenty-four steady, pnpm flows clean,
The finest site garden we've ever seen! 🌱✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the two main changes: adding Open Graph cards functionality and updating Playwright configuration and related tooling.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch open-graph-cards

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@socket-security

socket-security Bot commented May 23, 2026

Copy link
Copy Markdown

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff Package Supply Chain
Security
Vulnerability Quality Maintenance License
Added@​schalkneethling/​opengraph-cards-maker@​0.1.07510010086100
Added@​schalkneethling/​axe-aggregate-reporter@​0.6.07610010088100
Added@​playwright/​test@​1.60.010010010099100

View full report

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
pnpm-workspace.yaml (1)

1-9: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Finish pnpm v11 build-script allowlist migration

In pnpm v11, onlyBuiltDependencies was removed in favor of allowBuilds; packages not listed in allowBuilds are disallowed by default, so @google/genai, koffi, and protobufjs won’t be allowed for build scripts with the current config.

Suggested migration update
 allowBuilds:
+  '`@google/genai`': true
   esbuild: true
+  koffi: true
+  protobufjs: true
   sharp: true
-onlyBuiltDependencies:
-  - '`@google/genai`'
-  - esbuild
-  - koffi
-  - protobufjs
-  - sharp
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@pnpm-workspace.yaml` around lines 1 - 9, The pnpm v11 config currently uses
allowBuilds for esbuild and sharp but leaves `@google/genai`, koffi, and
protobufjs only in the removed onlyBuiltDependencies list, which means those
packages are disallowed for build scripts; update pnpm-workspace.yaml by adding
entries for '`@google/genai`', 'koffi', and 'protobufjs' under allowBuilds
(similar to esbuild and sharp) so all four packages are allowed to run build
scripts.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/playwright.yml:
- Line 30: Replace floating action tags with immutable commit SHAs for each
GitHub Action reference: update the three uses entries (actions/checkout,
actions/setup-node, actions/upload-artifact) by replacing their `@v4` tags with
the corresponding full commit SHA (e.g., actions/checkout@<commit-sha>,
actions/setup-node@<commit-sha>, actions/upload-artifact@<commit-sha>); fetch
the current recommended commit SHAs from each action's official repository and
replace the tags throughout the workflow to prevent drift and strengthen
supply-chain guarantees.

---

Outside diff comments:
In `@pnpm-workspace.yaml`:
- Around line 1-9: The pnpm v11 config currently uses allowBuilds for esbuild
and sharp but leaves `@google/genai`, koffi, and protobufjs only in the removed
onlyBuiltDependencies list, which means those packages are disallowed for build
scripts; update pnpm-workspace.yaml by adding entries for '`@google/genai`',
'koffi', and 'protobufjs' under allowBuilds (similar to esbuild and sharp) so
all four packages are allowed to run build scripts.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: c28cb8f8-1523-4c5c-8a79-3a9f70cfaee2

📥 Commits

Reviewing files that changed from the base of the PR and between 5f198ed and ce80e97.

⛔ Files ignored due to path filters (2)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • src/assets/open-graph/post-card-template.png is excluded by !**/*.png
📒 Files selected for processing (25)
  • .github/workflows/playwright.yml
  • .gitignore
  • AGENTS.md
  • CLAUDE.md
  • README.md
  • package.json
  • playwright.config.ts
  • pnpm-workspace.yaml
  • scripts/generate-og-cards.mjs
  • src/content/posts/build-a-profile-page-html-css-part2-impl.mdx
  • src/content/posts/build-a-profile-page-html-css-part3-wrap-up.mdx
  • src/content/posts/build-a-profile-page-html-css-part4-refactor-linktree.mdx
  • src/content/posts/build-a-profile-page-html-css-part5-final-page.mdx
  • src/content/posts/build-a-profile-page-html-css-part6-dialog-form-netlify.mdx
  • src/content/posts/build-a-profile-page-html-css-planning.mdx
  • src/content/posts/cutting-across-the-what-and-the-how-what-building-a-polyfill-is-teaching-me-about-web-standards.md
  • src/layouts/BaseLayout.astro
  • src/layouts/MarkdownPostLayout.astro
  • src/pages/posts/[...slug].astro
  • src/styles/global.css
  • tests/a11y.spec.ts
  • tests/fixtures/axe-test-fixture.ts
  • tests/reporter/axe-aggregate-reporter.ts
  • tests/urls.json
  • tsconfig.json
💤 Files with no reviewable changes (1)
  • tests/reporter/axe-aggregate-reporter.ts

Comment thread .github/workflows/playwright.yml Outdated
@schalkneethling schalkneethling merged commit d775fa5 into main May 23, 2026
9 checks passed
@schalkneethling schalkneethling deleted the open-graph-cards branch May 23, 2026 22:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant