Ilia Mashkov
1e16330097
Remove the googleapis stylesheet, both google preconnects, and the two dead fontshare preconnects from the document head. Preload the two render-critical faces (Inter, Space Grotesk) via Vite ?url imports. Eliminates two third-party origins and the IP leak to Google.
81 lines
2.1 KiB
Svelte
81 lines
2.1 KiB
Svelte
<!--
|
|
Component: Layout
|
|
Application shell with providers and page wrapper
|
|
-->
|
|
<script lang="ts">
|
|
import { themeManager } from '$features/ChangeAppTheme';
|
|
import G from '$shared/assets/G.svg';
|
|
import { ResponsiveProvider } from '$shared/lib';
|
|
import { cn } from '$shared/lib';
|
|
import { Footer } from '$widgets/Footer';
|
|
|
|
/*
|
|
Preload the two render-critical interface faces (primary + secondary).
|
|
`?url` resolves to the content-hashed path Vite emits, so the binary is
|
|
fetched immediately rather than waiting for CSS @font-face discovery.
|
|
*/
|
|
import interWoff2 from '../assets/fonts/inter-latin-opsz-normal.woff2?url';
|
|
import spaceGroteskWoff2 from '../assets/fonts/space-grotesk-latin-wght-normal.woff2?url';
|
|
|
|
import {
|
|
type Snippet,
|
|
onDestroy,
|
|
onMount,
|
|
} from 'svelte';
|
|
|
|
interface Props {
|
|
/**
|
|
* Content snippet
|
|
*/
|
|
children: Snippet;
|
|
}
|
|
|
|
let { children }: Props = $props();
|
|
let fontsReady = $state(true);
|
|
const theme = $derived(themeManager.value);
|
|
|
|
onMount(() => themeManager.init());
|
|
onDestroy(() => themeManager.destroy());
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<link rel="icon" href={G} type="image/svg+xml" />
|
|
|
|
<!-- Self-hosted interface fonts (see src/app/styles/fonts/fonts.css). Preload the two critical faces. -->
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
type="font/woff2"
|
|
href={interWoff2}
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="font"
|
|
type="font/woff2"
|
|
href={spaceGroteskWoff2}
|
|
crossorigin="anonymous"
|
|
/>
|
|
<title>GlyphDiff | Typography & Typefaces</title>
|
|
<meta
|
|
name="description"
|
|
content="Compare typefaces side by side. Adjust size, weight, leading, and tracking to find the perfect typographic pairing."
|
|
/>
|
|
</svelte:head>
|
|
|
|
<ResponsiveProvider>
|
|
<div
|
|
id="app-root"
|
|
class={cn(
|
|
'min-h-dvh w-auto flex flex-col surface-canvas relative',
|
|
theme === 'dark' ? 'dark' : '',
|
|
)}
|
|
>
|
|
{#if fontsReady}
|
|
{@render children?.()}
|
|
{/if}
|
|
|
|
<Footer />
|
|
</div>
|
|
</ResponsiveProvider>
|