awesome-copilot/website/src/components/Head.astro

---
import Default from '@astrojs/starlight/components/Head.astro';
const { head, entry } = Astro.locals.starlightRoute;
const basePath = import.meta.env.BASE_URL;

const getMetaContent = (key: string, attribute: 'name' | 'property' = 'name') =>
  head.find((tag) => tag.tag === 'meta' && tag.attrs?.[attribute] === key)?.attrs?.content;

const getLinkHref = (rel: string) =>
  head.find((tag) => tag.tag === 'link' && tag.attrs?.rel === rel)?.attrs?.href;

const twitterTitle = entry.data.title;
const description =
  entry.data.description ??
  getMetaContent('description') ??
  getMetaContent('og:description', 'property');
const canonicalUrl =
  getLinkHref('canonical') ?? getMetaContent('og:url', 'property');
const socialImageUrl =
  getMetaContent('twitter:image') ?? getMetaContent('og:image', 'property');
const socialImageAlt =
  getMetaContent('twitter:image:alt') ??
  getMetaContent('og:image:alt', 'property') ??
  description;
const socialImageType = socialImageUrl?.endsWith('.png')
  ? 'image/png'
  : socialImageUrl?.endsWith('.jpg') || socialImageUrl?.endsWith('.jpeg')
    ? 'image/jpeg'
    : socialImageUrl?.endsWith('.webp')
      ? 'image/webp'
      : undefined;

const twitterDomain =
  canonicalUrl && URL.canParse(canonicalUrl)
    ? new URL(canonicalUrl).hostname
    : undefined;
---

<Default><slot /></Default>
{twitterTitle && <meta name="twitter:title" content={twitterTitle} />}
{description && <meta name="twitter:description" content={description} />}
{canonicalUrl && <meta property="twitter:url" content={canonicalUrl} />}
{twitterDomain && <meta property="twitter:domain" content={twitterDomain} />}
{socialImageUrl && <meta property="og:image:secure_url" content={socialImageUrl} />}
{socialImageType && <meta property="og:image:type" content={socialImageType} />}
{socialImageAlt && <meta name="twitter:image:alt" content={socialImageAlt} />}

<!-- Theme initialization script (runs early to prevent flash) -->
<script is:inline>
  (function() {
    const STORAGE_KEY = 'awesome-copilot-theme';
    const stored = localStorage.getItem(STORAGE_KEY);

    // Theme handling:
    // - 'dark' or 'light' → set data-theme attribute to that value
    // - 'auto' or unset → don't set data-theme (CSS media query handles system preference)
    if (stored === 'dark' || stored === 'light') {
      document.documentElement.setAttribute('data-theme', stored);
    }
    // For 'auto' or unset, no attribute means CSS media query controls theme
  })();
</script>

<script is:inline define:vars={{ basePath }}>
  // basePath setup for runtime use
  document.addEventListener('DOMContentLoaded', () => {
    document.body.dataset.basePath = basePath;
  });

  document.addEventListener('DOMContentLoaded', () => {
    document.body.dataset.basePath = basePath;
  });
</script>
{import.meta.env.PROD && (
  <>
    <meta
      name="ha-url"
      content="https://collector.githubapp.com/awesome-copilot-web/collect"
    />
    <script
      async
      defer
      src="https://analytics.githubassets.com/hydro-marketing.min.js"
    ></script>
  </>
)}