<svelte:head>
  <title>Example TODO App</title>
  <meta name="description" content={description}>
  <meta name="author" content={author}>

  <meta property="og:title" content={title}>
  <meta property="og:type" content="website">
  <meta property="og:url" content={`${$page.url}`}>
  <meta property="og:description" content={description}>
  <meta property="og:image" content={ogImageUrl}>
  <meta property="og:image:type" content="image/webp">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">

  <link rel="apple-touch-icon" sizes="180x180" href="/images/common/favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/common/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/common/favicon/favicon-16x16.png">
  <link rel="manifest" href="/images/common/favicon/site.webmanifest">
  <link rel="mask-icon" href="/images/common/favicon/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">
</svelte:head>

<script lang="ts">
  import { onMount } from 'svelte';
  import "../app.css";
  import { page } from '$app/stores';
  import { loadUserIntoStore } from '$lib/auth/session';
  import Navbar from '$lib/components/navbar/Navbar.svelte';

  export let title = import.meta.env.PUBLIC_TITLE;
  export let description = import.meta.env.PUBLIC_DESCRIPTION;
  export let author = import.meta.env.PUBLIC_AUTHOR;

  const ogImageUrl =  new URL('/images/common/og-image.webp', import.meta.url).href

  onMount(async () => {
    loadUserIntoStore();
  });
</script>

<Navbar />
<slot />
