104 lines
3.2 KiB
Svelte
104 lines
3.2 KiB
Svelte
<!--
|
|
Component: Layout
|
|
Application shell with providers and page wrapper
|
|
-->
|
|
<script lang="ts">
|
|
/**
|
|
* Layout Component
|
|
*
|
|
* Root layout wrapper that provides the application shell structure. Handles favicon,
|
|
* toolbar provider initialization, and renders child routes with consistent structure.
|
|
*
|
|
* Layout structure:
|
|
* - Header area (currently empty, reserved for future use)
|
|
*
|
|
* - Footer area (currently empty, reserved for future use)
|
|
*/
|
|
import { BreadcrumbHeader } from '$entities/Breadcrumb';
|
|
import { themeManager } from '$features/ChangeAppTheme';
|
|
import GD from '$shared/assets/GD.svg';
|
|
import { ResponsiveProvider } from '$shared/lib';
|
|
import { Provider as TooltipProvider } from '$shared/shadcn/ui/tooltip';
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
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={GD} />
|
|
|
|
<link rel="preconnect" href="https://api.fontshare.com" />
|
|
<link
|
|
rel="preconnect"
|
|
href="https://cdn.fontshare.com"
|
|
crossorigin="anonymous"
|
|
/>
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link
|
|
rel="preconnect"
|
|
href="https://fonts.gstatic.com"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
as="style"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
media="print"
|
|
onload={(e => ((e.currentTarget as HTMLLinkElement).media = 'all'))}
|
|
/>
|
|
<noscript>
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@800&display=swap"
|
|
/>
|
|
</noscript>
|
|
<title>GlyphDiff | Typography & Typefaces</title>
|
|
</svelte:head>
|
|
|
|
<ResponsiveProvider>
|
|
<div
|
|
id="app-root"
|
|
class={cn(
|
|
'min-h-screen w-auto flex flex-col bg-surface dark:bg-dark-bg',
|
|
theme === 'dark' ? 'dark' : '',
|
|
)}
|
|
>
|
|
<header>
|
|
<BreadcrumbHeader />
|
|
</header>
|
|
|
|
<!-- <ScrollArea class="h-screen w-screen"> -->
|
|
<!-- <main class="flex-1 w-full mx-auto relative"> -->
|
|
<TooltipProvider>
|
|
{#if fontsReady}
|
|
{@render children?.()}
|
|
{/if}
|
|
</TooltipProvider>
|
|
<!-- </main> -->
|
|
<!-- </ScrollArea> -->
|
|
<footer></footer>
|
|
</div>
|
|
</ResponsiveProvider>
|