packages/web/src/components/Head.astro

---
import { Base64 } from "js-base64";
import Default from '@astrojs/starlight/components/Head.astro'
import config from '../../config.mjs'

const base = import.meta.env.BASE_URL.replace(/^\//, "").replace(/\/$/, "")

const slug = Astro.url.pathname.replace(/^\//, "").replace(/\/$/, "");
const {
  entry: {
    data: { title , description },
  },
} = Astro.locals.starlightRoute;
const isDocs = base === "" ? true : slug === base || slug.startsWith(`${base}/`)
const t = Astro.locals.t as (key: string) => string
const titleSuffix = t("app.head.titleSuffix")
const shareSlug = base === "" ? "s" : `${base}/s`
const isShare = slug === shareSlug || slug.startsWith(`${shareSlug}/`)
const isHome = slug === "" || slug === base

let encodedTitle = '';
let ogImage = `${config.url}/social-share.png`;
let truncatedDesc = '';

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)
      )
    )
  );

  if (description) {
    truncatedDesc = encodeURIComponent(description.substring(0, 400))
  }

  ogImage = `${config.socialCard}/opencode-docs/${encodedTitle}.png?desc=${truncatedDesc}`;
}
---

{ isHome && (
<title>{title} | {titleSuffix}</title>
)}

<Default {...Astro.props}><slot /></Default>

{ !isShare && (
  <meta property="og:image" content={ogImage} />
  <meta property="twitter:image" content={ogImage} />
)}