feat(website): add OG hero preview image for link sharing

Replace the raw logo OG image with a designed 1200×630 hero card
generated at build time using satori + @resvg/resvg-js.

- Add generate-og.ts script with branded dark card design (gradient
  orbs, geometric rings, logo, title, tagline)
- Wire generation into build pipeline (runs before astro build)
- Update meta tags with absolute URLs, dimensions, and twitter:image
- Configure site URL (https://aryx.app) in astro.config.mjs

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-30 16:01:09 +01:00
co-authored by Copilot
parent 01b3949557
commit c01a427d8a
6 changed files with 397 additions and 2 deletions
+5 -1
View File
@@ -23,11 +23,15 @@ const {
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content="/images/logo.png" />
<meta property="og:image" content={`${Astro.site}images/og.png`} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content={Astro.url.href} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${Astro.site}images/og.png`} />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />