<script>
    import {page} from "$app/state";
    import Footer from "$lib/components/Footer.svelte";
    import Navbar from "$lib/components/Navbar.svelte";
    import "./inter.css";
    import "./style.css";
    /**
     * @typedef {Object} Props
     * @property {import('svelte').Snippet} [children]
     */

    /** @type {Props} */
    let {children} = $props();
</script>

<svelte:head>
    <title>
        {page.data.title ? page.data.title + " | pancakes" : "pancakes"}
    </title>
    <meta name="description" content={page.data.description || "🐈‍⬛"}/>
    <meta property="og:site_name" content="pancakes"/>
    <meta
            property="og:url"
            content={"https://pancakes.gay" + page.url.pathname}
    />
    <meta property="og:title" content={page.data.title || "pancakes"}/>
    {#if page.data.header}
        <meta property="og:type" content="article"/>
    {:else}
        <meta property="og:type" content="website"/>
        <meta property="og:image" content="/favicon.png"/>
        <meta property="og:image:alt" content="a black cat with large eyes"/>
    {/if}
</svelte:head>

{#if page.url.pathname !== "/"}
    <Navbar/>
{/if}

{@render children?.()}

<Footer/>
