---
import "@styles/global.scss";
import "@styles/fonts.scss";
import { ViewTransitions } from "astro:transitions";

interface Props {
  title?: string;
  build_revision?: string;
}

const { title: titleProp, build_revision } = Astro.props;
const title =
  titleProp != undefined
    ? `${titleProp} | undefined.behavio.rs`
    : "undefined.behavio.rs";
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width" name="viewport" />
    <meta name="build-commit-id" content={build_revision} />
    <title>{title}</title>
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
    <link as="font" crossorigin href="/fonts/-cmunrm.woff2" rel="preload" />
    <link as="font" crossorigin href="/fonts/-cmuntt.woff2" rel="preload" />
    <link as="font" crossorigin href="/fonts/-cmunti.woff2" rel="preload" />
    <link as="sitemap" type="application/xml" href="/sitemap-index  .xml" />
    <link rel="alternate" type="application/xml" href="/feed.xml" />
    <ViewTransitions />
  </head>
  <body class="flex flex-col w-full max-w-full min-h-screen">
    <slot />
  </body><!-- <script type="text/javascript"> 
        Is all of this too much effort to make the animation play in just the right way?
        window.onbeforeunload = function() {
            Remember the origin so it can be checked for page reloads
            sessionStorage.setItem("origin", window.location.href);
        }
    
        window.onload = function() {
            Display the glitch effect on new page loads or reloads.
            let glitch_seen = sessionStorage.getItem('glitch')
            if (glitch_seen !== 'true' || window.location.href === sessionStorage.getItem("origin")) {
                sessionStorage.setItem('glitch', 'true')
                document.getElementById('header').firstElementChild.classList.add('glitch')
            }
            
        }
     </script>
    -->
</html>
