---
import { NEXT_PUBLIC_OPENPANEL_CLIENT_ID } from "astro:env/client";
import Default from "@astrojs/starlight/components/Head.astro";
import { OpenPanelComponent } from "@openpanel/astro";

const title = Astro.locals.starlightRoute.entry.data.title;
const { siteTitle } = Astro.locals.starlightRoute;

const url = `https://openstatus.dev/api/og?title=${encodeURIComponent(siteTitle)}&description=${encodeURIComponent(title)}`;
---
<Default><slot /></Default>

<meta property="og:image" content={url} />
<meta name="twitter:image" content={url} />


<script is:inline defer data-domain="docs.openstatus.dev" src="https://plausible.io/js/script.js" />

<!-- REMINDER: prevent unexpected font flashes for our 'OpenStatus' logo on each page load -->
<link rel="preload" href="/fonts/CalSans-SemiBold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/fonts/CommitMono-400-Regular.otf" as="font" type="font/otf" crossorigin>
<link rel="preload" href="/fonts/CommitMono-700-Regular.otf" as="font" type="font/otf" crossorigin>

<script is:inline defer async src="https://buttons.github.io/buttons.js" />

<OpenPanelComponent clientId={NEXT_PUBLIC_OPENPANEL_CLIENT_ID!} trackScreenViews trackOutgoingLinks trackAttributes  />