share og image

packages/web/package.json

@@ -20,6 +20,7 @@
     "ai": "catalog:",
     "astro": "5.7.13",
     "diff": "8.0.2",
+    "js-base64": "3.7.7",
     "luxon": "3.6.1",
     "marked": "15.0.12",
     "rehype-autolink-headings": "7.1.0",

packages/web/src/pages/s/index.astro

@@ -1,4 +1,5 @@
 ---
+import { Base64 } from "js-base64";
 import config from "virtual:starlight/user-config";
 
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
@@ -12,15 +13,49 @@ const data = await res.json();
 
 console.log(data.info)
 
----
+const title = "Share";
 
+const encodedTitle = encodeURIComponent(
+  Base64.encode(
+    // Convert to ASCII
+    encodeURIComponent(
+      // Truncate to fit S3's max key size
+      title.substring(0, 700)
+    )
+  )
+)
+
+const cardService = "https://social-cards.sst.dev";
+const cost = "$0.12";
+const model = "claude-sonnet-4-20250514,claude-opus-4-20250514";
+const version = "v0.1.1";
+// ?cost=$0.12&model=claude-sonnet-4-20250514,claude-opus-4-20250514&version=v0.1.1&id=43120e6b
+const ogImageUrl = `${cardService}/opencode-share/${encodedTitle}.png?cost=${cost}&model=${model}&version=${version}&id=${id}`;
+
+---
 <StarlightPage
   hasSidebar={false}
   frontmatter={{
-    title: "Share",
+    title: title,
     pagefind: false,
     template: "splash",
     tableOfContents: false,
+    head: [
+      {
+        tag: "meta",
+        attrs: {
+          property: "og:image",
+          content: ogImageUrl,
+        },
+      },
+      {
+        tag: "meta",
+        attrs: {
+          name: "twitter:image",
+          content: ogImageUrl,
+        },
+      },
+    ],
   }}
 >
   <Share api={apiUrl} data={data.messages} client:only="solid" />