feat(site,demo): OG share cards + demo page meta ahead of the HN post

Demo (web/standalone): retitle "KiCad Web" -> "PCBJam - KiCad demo", add
description + OG/Twitter tags (absolute URLs pinned to demo.pcbjam.com),
ship favicons (page had none), add the og-demo.png share card, and show an
"Early-access alpha" badge next to the home-page heading.

Site: add the missing og/og-home.png (BaseLayout referenced it but the
asset never existed -> og:image 404ed in prod) and set astro `site` so
canonical/OG URLs resolve absolutely (prerendered pages shipped
canonical=http://localhost:4321/ to production).

Cards are 1200x630, generated from the favicon.svg logo mark on a pure
white background.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Viktor Vaczi 2026-07-04 09:07:49 +02:00
commit e86be160a6
9 changed files with 45 additions and 5 deletions

View file

@ -8,6 +8,9 @@ import mdx from '@astrojs/mdx';
// per-request SSR later with `export const prerender = false;`.
// See README.md ("SSR per route") for how.
export default defineConfig({
// Canonical origin (apex 308s to www). Without this, prerendered Astro.url
// is localhost, which leaked into canonical/OG tags on production.
site: 'https://www.pcbjam.com',
output: 'static',
adapter: vercel(),
// MDX lets the Gerber-viewer blog post embed the <GerberDemo /> component

BIN
site/public/og/og-home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

View file

@ -25,7 +25,10 @@ const {
// Pages may pass a complete title (containing "PCBJam"); otherwise append the suffix.
const fullTitle = title.includes('PCBJam') ? title : `${title} — PCBJam`;
const canonical = Astro.url.href;
// Resolve against `site` — prerendered Astro.url is localhost, and OG crawlers
// require absolute URLs anyway.
const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url).href;
const ogImageAbs = new URL(ogImage, Astro.site ?? Astro.url).href;
---
<!doctype html>
@ -49,11 +52,11 @@ const canonical = Astro.url.href;
<meta property="og:title" content={fullTitle} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta property="og:image" content={ogImage} />
<meta property="og:image" content={ogImageAbs} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={fullTitle} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={ogImage} />
<meta name="twitter:image" content={ogImageAbs} />
{/* Per-page extras (e.g. JSON-LD) */}
<slot name="head" />