55 lines
2.0 KiB
Plaintext
55 lines
2.0 KiB
Plaintext
---
|
|
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>
|