share og image

bun.lock

@@ -64,6 +64,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",
@@ -938,6 +939,8 @@
 
     "joycon": ["joycon@3.1.1", "", {}, "sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw=="],
 
+    "js-base64": ["js-base64@3.7.7", "", {}, "sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw=="],
+
     "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
 
     "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],

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" />