[aharvard]

Problem

Every page on the site, blog posts included, shares one link-preview image: the GAP wordmark. A shared blog link doesn't show which post it is until someone opens it.

Changes

• Add a local Docusaurus plugin (documentation/plugins/social-cards/) that renders a 1200×630 PNG for each blog post with Satori and resvg. Each card shows the post's title in Bungee on the site's paper and grain, "Governed Artifact Protocol" above a 2px rule, and the authors and date below. It uses only ink and gray. Long titles step down in size and stop at four lines.
• Generate the cards into static/img/og/ when content loads, so the dev server and the build both serve them. Git ignores that directory, and editing a title regenerates its card.
• Override BlogPostPage/Metadata so a post without its own image front matter links its card as og:image and twitter:image, with alt text built from the post's title. A post that sets image keeps it, and every other page keeps the default card.
• Add satori and @resvg/resvg-js as dev dependencies of the documentation site.

This is a documentation-site-only change. It changes nothing in the protocol, the schemas, the examples, or the demo.

Verification

• pnpm docs:test: 19 tests pass, including new ones for the card path and the PNG dimensions.
• pnpm --dir documentation typecheck
• pnpm docs:build and DOCS_BASE_URL=/governed-artifact-protocol/ pnpm docs:build: in both, /blog/hello-world has an og:image that points at its card under the base URL and replaces the site default rather than appearing alongside it. Other pages still use img/social-card.png.
• Rendered cards for both current posts and for a long title with three authors, and checked them by eye.

🤖 Generated with Claude Code