feat(docs): add og:image social card for link previews#44
Open
iliassjabali wants to merge 4 commits intomainfrom
Open
feat(docs): add og:image social card for link previews#44iliassjabali wants to merge 4 commits intomainfrom
iliassjabali wants to merge 4 commits intomainfrom
Conversation
Closes #31. - Add scripts/generate-og-card.ts using satori + resvg to render a 1280x640 PNG from a plain-object tree (no JSX config needed). Output: docs/public/og-card.png. Run with `pnpm og-card`. - Add a vitest spec that asserts PNG magic bytes and dimensions. Wired into root `pnpm test` via a new `test:scripts` target. - Wire og:* and twitter:* meta tags in docs/.vitepress/config.mts pointing at https://agents-oss.github.io/agentspec/og-card.png. Manual follow-up (cannot be scripted): upload the same PNG to Settings -> Social preview on the GitHub repo.
Swap the placeholder `{ }` tile for the transparent logomark at
logo/agentspec.png and shift the accent palette from indigo/cyan
to the brand purple family (#A855F7 -> #5A2387) to match.
Validated locally with Playwright MCP against a vitepress preview
build: all og:* and twitter:* meta tags render correctly and the
PNG loads at 1280x640.
The vitest.config.ts file was moved to scripts/ in 91c4b0f so that vitest's upward config search from packages/* would not inherit the `include: ['scripts/**/*.test.ts']` pattern and override the default include used by config-less packages (adapter-claude, cli, mcp-server). That move fixed the inheritance, but the root `test:scripts` npm script was still pointing at the old path, so `pnpm test:scripts` in CI failed to find the moved config. Update the script to reference the new location. Add a docblock on the config explaining why it lives under scripts/ so the layout does not regress.
Collaborator
Author
|
@skokaina once this merges, could you upload Steps:
After that, pasting the repo URL into a Slack DM or a draft tweet should show the branded card. The docs site will get the same card automatically via the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #31.
Summary
scripts/generate-og-card.tsthat usessatori+@resvg/resvg-jsto render a 1280x640 PNG from a plain-object tree. No JSX config needed. Run withpnpm og-card. Output goes todocs/public/og-card.pngso VitePress serves it at/agentspec/og-card.png.pnpm testvia a newtest:scriptstarget so CI catches regressions.og:*andtwitter:*meta tags indocs/.vitepress/config.mtspointing athttps://agents-oss.github.io/agentspec/og-card.png. A comment in the config calls out that the absolute URLs should be updated once theagentspec.iocustom domain goes live.Visual
The card is text-only for v1 (no logo asset exists yet): a rounded
{ }logomark tile with the brand gradient, theAgentSpecwordmark, the tagline "The universal manifest for AI agents", four feature pills (validate/health-check/audit/generate), and the docs URL as a footer. Dark background so it reads on both light and dark chat surfaces.Manual follow-up (cannot be scripted)
After this merges, a repo admin needs to upload the same PNG through the GitHub dashboard so the
github.com/agents-oss/agentspeclink previews get the branded card:Test plan
pnpm test:scriptsgreen (asserts PNG validity + 1280x640 dimensions)pnpm og-cardregenerates the PNG deterministicallynpx vitepress build docscopies the PNG intodist/og-card.pngand includes the meta tags in the rendered HTML (verified locally)