floter.design/src/routes/+layout.svelte
2026-01-07 20:41:01 +13:00

40 lines
No EOL
1.4 KiB
Svelte

<script lang='ts'>
import '$lib/styles/global.scss';
import Header from '$lib/components/Header.svelte';
import Loader from '$lib/components/Loader.svelte';
import { navigating, page } from '$app/stores';
import { onMount } from 'svelte';
import type { Snippet } from 'svelte';
interface LayoutData {
pathname: string;
}
let { data, children }: { data: LayoutData, children: Snippet } = $props();
// Track pathname changes - if pathname changes but navigating is still true,
// navigation might be stuck (though this shouldn't happen normally)
let lastPathname = $state(data.pathname);
$effect(() => {
if (data.pathname !== lastPathname) {
lastPathname = data.pathname;
}
});
</script>
<svelte:head>
<meta property="og:type" content="website" />
<meta property="og:url" content={`https://floter.design`+data.pathname} />
<meta property="og:image" content="https://floter.design/ogimage.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="description" content={$page.data.description ? $page.data.description : 'Simon Flöter is a designer and creative developer'} />
<title>{$page.data.title ? $page.data.title : 'Simon Flöter, Designer and Creative Developer'}</title>
</svelte:head>
<Header />
{#key data.pathname}
<div class="content">
{#if $navigating}
<Loader />
{/if}
{@render children()}
</div>
{/key}