feat(changelogs): add embeddable PNG cards with dark/light themes and…

[castrojo]

… embed button

Generates 6 PNG cards (3 streams × 2 themes) during CI via Satori + resvg-js. Cards match the OsReleaseCard visual style on /changelogs, with version bump highlights (gold chip + ↑ arrow) for packages that changed vs the previous release.

• scripts/generate-card-images.mjs: reads bluefin/lts feed JSON, renders PNGs
• scripts/lib/card-template.mjs: Satori element tree matching OsReleaseCard
• OsReleaseCard.tsx: adds "Embed ↗" button that copies GitHub-flavored markdown ( + dark variant) to clipboard
• OsReleaseCard.module.css: .embedButton style matching .viewLink aesthetic
• .github/workflows/pages.yml: generate-card-images step before build
• .gitignore: static/img/cards/ (generated, not committed)
• package.json: satori, @resvg/resvg-js, @fontsource/inter devDeps + script
• docs/images.md: documents markdown embed snippets for all 3 cards
• static/img/characters/*.png: PNG copies of mascots (Satori needs PNG/JPEG)

[gemini-code-assist]

Code Review

This pull request implements automated generation of embeddable PNG cards for OS releases using Satori and resvg-js. It adds a generation script, a card template, and a new "Embed" button in the OsReleaseCard component for copying Markdown snippets. Feedback recommends adding error handling to the clipboard API call and using Docusaurus site configuration for the base URL to ensure link reliability across environments.

[gemini-code-assist]

The navigator.clipboard.writeText(snippet) promise can reject if, for example, the user denies clipboard permission. This will cause an unhandled promise rejection in the browser. You should add a .catch() to handle this case gracefully, for instance by logging the error.

Suggested change

	navigator.clipboard.writeText(snippet).then(() => {
	setCopied(true);
	setTimeout(() => setCopied(false), 2000);
	});
	navigator.clipboard.writeText(snippet).then(() => {
	setCopied(true);
	setTimeout(() => setCopied(false), 2000);
	}).catch(err => console.error("Failed to copy snippet:", err));

[gemini-code-assist]

Hardcoding the base URL is not robust and can lead to broken links in different environments (e.g., staging, previews). It's better to retrieve the URL from Docusaurus's context via useDocusaurusContext.

You'll also need to add import { useDocusaurusContext } from "@docusaurus/useDocusaurusContext"; at the top of the file.

Suggested change

	const BASE_URL = "https://docs.projectbluefin.io";
	const embedSnippet = [
	`[](${BASE_URL}/changelogs)`,
	`[](${BASE_URL}/changelogs)`,
	].join("\n");
	const { siteConfig } = useDocusaurusContext();
	const embedSnippet = [
	"[![" + cardAlt + "](" + siteConfig.url + "/img/cards/" + cardSlug + "-light.png#gh-light-mode-only)](" + siteConfig.url + "/changelogs)",
	"[![" + cardAlt + "](" + siteConfig.url + "/img/cards/" + cardSlug + "-dark.png#gh-dark-mode-only)](" + siteConfig.url + "/changelogs)",
	].join("\n");