docs: adding more share images

packages/web/astro.config.mjs

@@ -8,12 +8,11 @@ import config from "./config.mjs"
 import { rehypeHeadingIds } from "@astrojs/markdown-remark"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
 
-const url = "https://opencode.ai"
 const github = "https://github.com/sst/opencode"
 
 // https://astro.build/config
 export default defineConfig({
-  site: url,
+  site: config.url,
   output: "server",
   adapter: cloudflare({
     imageService: "passthrough",
@@ -41,20 +40,6 @@ export default defineConfig({
             href: "/favicon.svg",
           },
         },
-        {
-          tag: "meta",
-          attrs: {
-            property: "og:image",
-            content: `${url}/social-share.png`,
-          },
-        },
-        {
-          tag: "meta",
-          attrs: {
-            property: "twitter:image",
-            content: `${url}/social-share.png`,
-          },
-        },
       ],
       editLink: {
         baseUrl: `${github}/edit/master/www/`,
@@ -80,6 +65,7 @@ export default defineConfig({
       ],
       components: {
         Hero: "./src/components/Hero.astro",
+        Head: "./src/components/Head.astro",
         Header: "./src/components/Header.astro",
       },
       plugins: [

packages/web/config.mjs

@@ -1,4 +1,6 @@
 export default {
+  url: "https://opencode.ai",
+  socialCard: "https://social-cards.sst.dev",
   github: "https://github.com/sst/opencode",
   headerLinks: [
     { name: "Home", url: "/" },

packages/web/src/components/Head.astro

@@ -0,0 +1,38 @@
+---
+import { Base64 } from "js-base64";
+import type { Props } from '@astrojs/starlight/props'
+import Default from '@astrojs/starlight/components/Head.astro'
+import config from '../../config.mjs'
+
+const slug = Astro.url.pathname.replace(/^\//, "").replace(/\/$/, "");
+const {
+  entry: {
+    data: { title },
+  },
+} = Astro.locals.starlightRoute;
+const isDocs = slug.startsWith("docs")
+
+let encodedTitle = '';
+let ogImage = `${config.url}/social-share.png`;
+
+if (isDocs) {
+  // Truncate to fit S3's max key size
+  encodedTitle = encodeURIComponent(
+    Base64.encode(
+      // Convert to ASCII
+      encodeURIComponent(
+        // Truncate to fit S3's max key size
+        title.substring(0, 700)
+      )
+    )
+  );
+  ogImage = `${config.socialCard}/opencode-docs/${encodedTitle}.png`;
+}
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+{ (isDocs || !slug.startsWith("s")) && (
+  <meta property="og:image" content={ogImage} />
+  <meta property="twitter:image" content={ogImage} />
+)}

packages/web/src/pages/s/[id].astro

@@ -2,6 +2,7 @@
 import { Base64 } from "js-base64";
 import config from "virtual:starlight/user-config";
 
+import config from '../../../config.mjs'
 import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import Share from "../../components/Share.tsx";
 
@@ -38,7 +39,7 @@ const encodedTitle = encodeURIComponent(
   )
 );
 
-const ogImage = `https://social-cards.sst.dev/opencode-share/${encodedTitle}.png?model=${Array.from(models).join(",")}&version=${version}&id=${id}`;
+const ogImage = `${config.socialCard}/opencode-share/${encodedTitle}.png?model=${Array.from(models).join(",")}&version=${version}&id=${id}`;
 
 ---
 <StarlightPage