mirror of
https://github.com/4gray/iptvnator.git
synced 2026-10-08 09:01:03 -08:00
4grayandClaude Opus 5
61ac15372c
Every page pulled its three typefaces from fonts.googleapis.com and fonts.gstatic.com, each blog post fetched the author avatar from githubusercontent.com, and the giscus client script ran on page load. That is four outside origins contacted before a reader does anything, each costing a DNS lookup and a TLS handshake on the critical path. Fonts now come from the @fontsource packages the app already uses and are emitted as .woff2 beside the site; the avatar is a 3 KB file in public/; and the giscus embed is created by a "Show comments" button that carries the configuration as data attributes, so the script is only built when a reader asks for it. A delivered page now makes no third-party request at all, verified across the whole build. The variable Bricolage package names itself "Bricolage Grotesque Variable", so that exact name leads the display stack in the Tailwind config. The giscus test now checks the button configuration and asserts the client script is absent from the delivered HTML. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
56 lines
1.6 KiB
Plaintext
56 lines
1.6 KiB
Plaintext
---
|
|
import BaseHead from '../components/BaseHead.astro';
|
|
import Header from '../components/Header.astro';
|
|
import Footer from '../components/Footer.astro';
|
|
// Fonts ship with the site instead of being fetched from a font CDN, so a
|
|
// page load makes no third-party request and the faces are already cached
|
|
// with the rest of the assets.
|
|
import '@fontsource-variable/bricolage-grotesque/wght.css';
|
|
import '@fontsource/dm-sans/400.css';
|
|
import '@fontsource/dm-sans/400-italic.css';
|
|
import '@fontsource/dm-sans/500.css';
|
|
import '@fontsource/dm-sans/600.css';
|
|
import '@fontsource/dm-sans/700.css';
|
|
import '@fontsource/ibm-plex-mono/400.css';
|
|
import '@fontsource/ibm-plex-mono/500.css';
|
|
import '../styles/global.css';
|
|
|
|
interface Props {
|
|
title: string;
|
|
description: string;
|
|
image?: string;
|
|
type?: 'website' | 'article';
|
|
noindex?: boolean;
|
|
keywords?: string[];
|
|
publishedTime?: string;
|
|
modifiedTime?: string;
|
|
jsonLd?: Record<string, unknown> | Array<Record<string, unknown>>;
|
|
}
|
|
|
|
const { title, description, image, type, noindex, keywords, publishedTime, modifiedTime, jsonLd } = Astro.props;
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<BaseHead
|
|
title={title}
|
|
description={description}
|
|
image={image}
|
|
type={type}
|
|
noindex={noindex}
|
|
keywords={keywords}
|
|
publishedTime={publishedTime}
|
|
modifiedTime={modifiedTime}
|
|
jsonLd={jsonLd}
|
|
/>
|
|
</head>
|
|
<body class="min-h-screen bg-surface-950 font-body text-surface-200">
|
|
<Header />
|
|
<main class="overflow-x-hidden">
|
|
<slot />
|
|
</main>
|
|
<Footer />
|
|
</body>
|
|
</html>
|