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

---
import { Base64 } from "js-base64";
import config from "virtual:starlight/user-config";

import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
import Share from "../../components/Share.tsx";

const apiUrl = import.meta.env.VITE_API_URL;

const id = Astro.url.searchParams.get('id')
const res = await fetch(`${apiUrl}/share_data?id=${id}`);
const data = await res.json();

const title = data.info.title;

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: 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} info={data.info} messages={data.messages} client:only="solid" />
</StarlightPage>

<style is:global>
body > .page > .main-frame .main-pane > main > .content-panel:first-of-type {
  display: none;
}
body > .page > .main-frame .main-pane > main > .content-panel + .content-panel {
  border-top: none !important;
}
</style>