402md · breim · Apr 19, 2026 · Apr 19, 2026 · Apr 19, 2026
diff --git a/bun.lock b/bun.lock
diff --git a/packages/relay/package.json b/packages/relay/package.json
@@ -10,6 +10,7 @@
     "db:push": "drizzle-kit push",
     "db:migrate": "drizzle-kit migrate",
     "db:seed-dashboard": "bun run scripts/seed-dashboard.ts",
+    "og:generate": "bun run scripts/generate-og.ts",
     "lint": "eslint src/"
   },
   "dependencies": {
@@ -30,8 +31,9 @@
     "postgres": "^3"
   },
   "devDependencies": {
-    "drizzle-kit": "^0.30",
+    "@resvg/resvg-js": "^2.6.2",
     "@types/bun": "latest",
+    "drizzle-kit": "^0.30",
     "typescript": "^5"
   }
 }
diff --git a/packages/relay/public/og-image.png b/packages/relay/public/og-image.png
diff --git a/packages/relay/public/og-image.svg b/packages/relay/public/og-image.svg
diff --git a/packages/relay/scripts/fonts/BricolageGrotesque-Bold.ttf b/packages/relay/scripts/fonts/BricolageGrotesque-Bold.ttf
diff --git a/packages/relay/scripts/fonts/BricolageGrotesque-Medium.ttf b/packages/relay/scripts/fonts/BricolageGrotesque-Medium.ttf
diff --git a/packages/relay/scripts/fonts/BricolageGrotesque-Regular.ttf b/packages/relay/scripts/fonts/BricolageGrotesque-Regular.ttf
diff --git a/packages/relay/scripts/generate-og.ts b/packages/relay/scripts/generate-og.ts
@@ -0,0 +1,20 @@
+import { readFileSync, writeFileSync } from 'node:fs'
+import { Resvg } from '@resvg/resvg-js'
+
+const svg = readFileSync(new URL('../public/og-image.svg', import.meta.url), 'utf8')
+
+const fontDir = new URL('./fonts/', import.meta.url).pathname
+
+const resvg = new Resvg(svg, {
+  fitTo: { mode: 'width', value: 1200 },
+  font: {
+    loadSystemFonts: false,
+    fontDirs: [fontDir],
+    defaultFontFamily: 'Bricolage Grotesque',
+  },
+  background: '#f8f3e8',
+})
+
+const png = resvg.render().asPng()
+writeFileSync(new URL('../public/og-image.png', import.meta.url), png)
+console.log(`wrote public/og-image.png (${png.byteLength} bytes)`)
diff --git a/packages/relay/src/index.ts b/packages/relay/src/index.ts
@@ -90,6 +90,15 @@ export const app = new Elysia()
     { detail: { hide: true } },
   )
   .get('/cover.mp4', () => Bun.file(new URL('../public/cover.mp4', import.meta.url).pathname))
+  .get('/og-image.png', ({ set }) => {
+    set.headers['cache-control'] = 'public, max-age=86400'
+    return Bun.file(new URL('../public/og-image.png', import.meta.url).pathname)
+  })
+  .get('/og-image.svg', ({ set }) => {
+    set.headers['cache-control'] = 'public, max-age=86400'
+    set.headers['content-type'] = 'image/svg+xml'
+    return Bun.file(new URL('../public/og-image.svg', import.meta.url).pathname)
+  })
   .get('/health', async () => {
     const checks = {
       db: 'unknown' as string,

diff --git a/packages/relay/src/views/dashboard/page.tsx b/packages/relay/src/views/dashboard/page.tsx
@@ -14,6 +14,7 @@ export const DashboardPage = () => (
   <Layout
     title="402md Bazaar — Facilitator activity"
     description="Live activity for the 402md facilitator: chains, cross-chain routes, resources, sellers, transactions."
+    path="/dashboard"
     extraStyles={dashboardStyles}
   >
     <TestnetBanner />

diff --git a/packages/relay/src/views/landing/page.tsx b/packages/relay/src/views/landing/page.tsx
@@ -23,6 +23,7 @@ export const LandingPage = () => (
   <Layout
     title="402md Facilitator — Cross-chain USDC settlement for x402 and MPP"
     description="Accept USDC payments from any chain. Buyer pays on Solana, seller receives on Stellar. One HTTP request, zero custom code, 0% fee."
+    path="/"
     extraStyles={landingStyles}
   >
     <TestnetBanner />

diff --git a/packages/relay/src/views/landing/styles.css b/packages/relay/src/views/landing/styles.css
@@ -140,7 +140,7 @@ section h2 {
 }
 
 .hero h1 {
-  font-size: clamp(2.5rem, 5.5vw + 1rem, 4.5rem);
+  font-size: clamp(4.25rem, 6vw + 2.3rem, 5.5rem);
   margin-bottom: var(--space-md);
 }
 

diff --git a/packages/relay/src/views/layout.tsx b/packages/relay/src/views/layout.tsx
@@ -1,39 +1,67 @@
+import { PUBLIC_BASE_URL } from '@/agent-meta/routes'
 import { sharedStyles } from './shared-styles'
 
 interface LayoutProps {
   title: string
   description?: string
   themeColor?: string
   extraStyles?: string
+  path?: string
   children?: string | string[]
 }
 
+const OG_IMAGE_URL = `${PUBLIC_BASE_URL}/og-image.png`
+
 export const Layout = ({
   title,
   description,
   themeColor = '#1d35cf',
   extraStyles,
+  path = '/',
   children,
-}: LayoutProps) => (
-  <>
-    {'<!doctype html>'}
-    <html lang="en">
-      <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <meta name="theme-color" content={themeColor} />
-        <title>{title}</title>
-        {description && <meta name="description" content={description} />}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Red+Hat+Text:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap"
-        />
-        <style>{sharedStyles}</style>
-        {extraStyles && <style>{extraStyles}</style>}
-      </head>
-      <body>{children}</body>
-    </html>
-  </>
-)
+}: LayoutProps) => {
+  const canonicalUrl = `${PUBLIC_BASE_URL}${path}`
+  return (
+    <>
+      {'<!doctype html>'}
+      <html lang="en">
+        <head>
+          <meta charset="UTF-8" />
+          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+          <meta name="theme-color" content={themeColor} />
+          <title>{title}</title>
+          {description && <meta name="description" content={description} />}
+          <link rel="canonical" href={canonicalUrl} />
+
+          <meta property="og:type" content="website" />
+          <meta property="og:site_name" content="402md Facilitator" />
+          <meta property="og:title" content={title} />
+          {description && <meta property="og:description" content={description} />}
+          <meta property="og:url" content={canonicalUrl} />
+          <meta property="og:image" content={OG_IMAGE_URL} />
+          <meta property="og:image:width" content="1200" />
+          <meta property="og:image:height" content="630" />
+          <meta
+            property="og:image:alt"
+            content="402md Facilitator — Any chain in, your chain out."
+          />
+
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:title" content={title} />
+          {description && <meta name="twitter:description" content={description} />}
+          <meta name="twitter:image" content={OG_IMAGE_URL} />
+
+          <link rel="preconnect" href="https://fonts.googleapis.com" />
+          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Red+Hat+Text:wght@300..700&family=JetBrains+Mono:wght@400;500&display=swap"
+          />
+          <style>{sharedStyles}</style>
+          {extraStyles && <style>{extraStyles}</style>}
+        </head>
+        <body>{children}</body>
+      </html>
+    </>
+  )
+}