docs: adding more share images

2 files changed, 40 insertions, 1 deletions

diff --git a/packages/web/src/components/Head.astro b/packages/web/src/components/Head.astro
new file mode 100644
index 000000000..36f11c955
--- /dev/null
+++ b/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} />
+)}
diff --git a/packages/web/src/pages/s/[id].astro b/packages/web/src/pages/s/[id].astro
index 7e8c7238f..a81d2e786 100644
--- a/packages/web/src/pages/s/[id].astro
+++ b/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