Fix sample page og:image to use stable, hash-free URLs

[IEvangelist]

Problem

Sample detail pages emitted og:image pointing at the optimized _astro/<name>.<contentHash>.webp thumbnail. Because og:image is an absolute URL against the canonical site (https://aspire.dev), the per-build content hash baked into that path 404s on any deployment whose build hash differs from production's — e.g. staging serves a hash production never built (and vice versa). Result: invalid social-card images on the new samples pages.

Reported on staging: https://aspiredev-klciommkyhpvc-vnext-release.azurewebsites.net/reference/samples/node-express-redis/ — the og:image resolved to https://aspire.dev/_astro/node-express-redis-primary-page-light.<hash>.webp, which aspire.dev never served.

Fix

Serve each sample's social card at a stable, hash-free URL /og/reference/samples/<sample>.png via a new prerendered endpoint, mirroring the existing dynamic /og/<slug>.png docs cards.

• Samples with a primary thumbnail -> that thumbnail, resized (sharp, cover/center) to the canonical 1200x630 social dimensions that page-metadata.ts declares in og:image:width/og:image:height.
• Samples without a thumbnail -> the same branded fallback card the docs endpoint renders (renderOgImagePng), so every sample resolves to a real PNG instead of 404ing.

The detail page now points og:image at this endpoint for all samples.

Changes

• Add src/pages/og/reference/samples/[sample].png.ts — prerendered per-sample OG endpoint (thumbnail or branded-card fallback), immutable cache headers.
• Edit src/pages/reference/samples/[sample]/index.astro — og:image now references the stable endpoint URL instead of the hashed _astro asset.
• Test tests/e2e/og-metadata.spec.ts — regression coverage asserting sample pages emit a stable, hash-free og:image (no _astro), 1200x630 dims, matching twitter:image, and that the PNG resolves — for both a thumbnail sample (node-express-redis) and a thumbnail-less one (aspire-with-node).

Verification

• pnpm lint passed.
• Full static build succeeded — all 26 sample OG PNGs generated under dist/og/reference/samples/.
• Built HTML for both a thumbnail sample and a thumbnail-less sample emits og:image = https://aspire.dev/og/reference/samples/<sample>.png with no _astro references; dims 1200x630; twitter:image matches.

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

[Copilot]

Pull request overview

This PR fixes broken og:image links on sample detail pages by switching from build-hashed _astro/...<hash>... asset URLs to stable, prerendered PNG URLs under /og/reference/samples/<sample>.png, ensuring social preview images don’t 404 across different deployments/build hashes.

Changes:

• Added a prerendered per-sample OG image endpoint that serves either a resized thumbnail or a branded fallback PNG.
• Updated sample detail pages to always use the stable /og/reference/samples/<sample>.png URL for og:image.
• Added E2E regression tests ensuring sample pages emit hash-free OG image URLs and that the PNG endpoints resolve.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/frontend/src/pages/og/reference/samples/[sample].png.ts	New prerendered OG image endpoint for stable per-sample social cards.
src/frontend/src/pages/reference/samples/[sample]/index.astro	Switches sample pages’ og:image to the stable /og/reference/samples/<sample>.png URL.
src/frontend/tests/e2e/og-metadata.spec.ts	Adds E2E coverage for stable sample OG metadata and resolvable PNG endpoints.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[aspire-repo-bot]

Frontend HTML artifact ready

The latest frontend build uploaded the frontend-dist artifact for PR #1251. Use the VS Code button below to open this PR with GitHub Artifacts Explorer and browse the built HTML locally.

This comment updates automatically when a new frontend build artifact is uploaded.