---
import DefaultHead from '@astrojs/starlight/components/Head.astro';

// A 404 is not a translated document. Starlight would otherwise advertise
// nonexistent /zh-cn/404/ and /en/404/ alternates for this custom page.
if (Astro.locals.starlightRoute.id === '404' || Astro.response.status === 404) {
  Astro.locals.starlightRoute.head = Astro.locals.starlightRoute.head.filter(
    ({ tag, attrs }) => tag !== 'link' || !['canonical', 'alternate'].includes(String(attrs?.rel)),
  );
}

/**
 * Google Fonts CN API, loaded without blocking first paint.
 *
 * `font-display=optional` is deliberate: if a webfont is not cached the page
 * renders immediately with the local fallback stacks in `fonts.generated.css`
 * and never swaps, so there is no reflow. A slow or blocked fonts.googleapis.cn
 * therefore costs nothing but the webfont itself.
 *
 * `Manrope` is the heading face behind `--sl-font-display` for the site title in
 * the top-left corner. A variable font, so one request spans 600..800.
 * `Archivo Black` is the heavy fallback; the title's Greek `Σ` needs a face with
 * a greek subset, which is why these two were chosen.
 */
const WEBFONT_CSS =
  'https://fonts.googleapis.cn/css2?family=Archivo+Black&family=Manrope:wght@600..800&family=Noto+Sans+SC:wght@400..700&display=optional';
---

<DefaultHead />

<!--
  Warm the connection while the HTML is still parsing. `crossorigin` is required
  for the font file host because fonts are fetched in CORS mode.
-->
<link rel="preconnect" href="https://fonts.googleapis.cn" />
<link rel="preconnect" href="https://fonts.gstatic.cn" crossorigin />

<!--
  Non-blocking stylesheet load: `media=print` keeps it off the critical path,
  and the `onload` handler promotes it to `all`. The inline `onerror` prevents
  it from staying in print mode if the request fails. Without JS the webfont is
  skipped entirely and the local stack is used.
-->
<link
  rel="stylesheet"
  href={WEBFONT_CSS}
  media="print"
  onload="this.media='all'"
  onerror="this.media='all'"
/>

<script>
  import '../scripts/mermaid';
</script>