<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>

<Navbar />

{@render children?.()}

<Footer />
