landing/src/routes/+layout.svelte

<script lang="ts">
    import { page } from '$app/state';
    import { mergeMeta, SEO_DEFAULTS } from '$lib/seo';
    import { homeMeta } from '$lib/data/home-meta';

    import '../app.css';

    let { children } = $props();

    const meta = $derived(page.data?.meta ?? homeMeta);
    const path = $derived(page.url?.pathname ?? '/');
    const merged = $derived(mergeMeta(meta, path));

    const jsonLdScript = $derived(
        merged.jsonLdGraph.length > 0
            ? JSON.stringify({
                  '@context': 'https://schema.org',
                  '@graph': merged.jsonLdGraph,
              })
            : '',
    );
    const jsonLdHtml = $derived(
        jsonLdScript
            ? '<script type="application/ld+json">' + jsonLdScript + '</scr' + 'ipt>'
            : '',
    );
</script>

<svelte:head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-36F29PDKRT"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-36F29PDKRT');
    </script>

    <title>{merged.title}</title>
    <meta name="description" content={merged.description ?? ''} />
    <link rel="canonical" href={merged.canonical} />

    <link
        rel="preload"
        href="/assets/fonts/fraunces-v38-latin-600.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        href="/assets/fonts/fraunces-v38-latin-700.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        href="/assets/fonts/inter-v20-latin-regular.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        href="/assets/fonts/inter-v20-latin-italic.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        href="/assets/fonts/inter-v20-latin-500.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        href="/assets/fonts/inter-v20-latin-600.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />
    <link
        rel="preload"
        href="/assets/fonts/inter-v20-latin-700.woff2"
        as="font"
        type="font/woff2"
        crossorigin="anonymous"
    />

    <meta
        name="robots"
        content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1"
    />
    <meta name="author" content="Mike Fitzpatrick" />
    <meta name="geo.region" content="US-MA" />
    <meta name="geo.placename" content="Boston" />
    <meta name="geo.position" content="42.360082;-71.058880" />
    <meta name="ICBM" content="42.360082, -71.058880" />

    <meta
        name="theme-color"
        content={SEO_DEFAULTS.themeColorLight}
        media="(prefers-color-scheme: light)"
    />
    <meta
        name="theme-color"
        content={SEO_DEFAULTS.themeColorDark}
        media="(prefers-color-scheme: dark)"
    />

    <meta property="og:type" content={merged.ogType ?? 'website'} />
    <meta property="og:url" content={merged.canonical} />
    <meta property="og:site_name" content={SEO_DEFAULTS.siteName} />
    <meta property="og:title" content={merged.twitterTitle ?? merged.title} />
    <meta
        property="og:description"
        content={merged.twitterDescription ?? merged.description ?? ''}
    />
    <meta property="og:image" content={merged.ogImage} />
    <meta property="og:image:width" content={String(SEO_DEFAULTS.ogImageWidth)} />
    <meta property="og:image:height" content={String(SEO_DEFAULTS.ogImageHeight)} />
    <meta property="og:image:alt" content={merged.ogImageAlt} />
    <meta property="og:locale" content={SEO_DEFAULTS.locale} />

    <meta name="twitter:card" content={SEO_DEFAULTS.twitterCard} />
    <meta name="twitter:url" content={merged.canonical} />
    <meta name="twitter:title" content={merged.twitterTitle ?? merged.title} />
    <meta
        name="twitter:description"
        content={merged.twitterDescription ?? merged.description ?? ''}
    />
    <meta name="twitter:image" content={merged.ogImage} />
    <meta name="twitter:image:alt" content={merged.ogImageAlt} />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/favicon.svg" />

    {#if jsonLdHtml}
        <!-- eslint-disable-next-line svelte/no-at-html-tags -- static trusted JSON-LD -->
        {@html jsonLdHtml}
    {/if}

    <script src="/assets/scripts/copyright-year.js" defer></script>
</svelte:head>

<a href="#main" class="skip-link">Skip to main content</a>
{@render children()}