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

const repository_url = `https://github.com/${import.meta.env.PUBLIC_VERCEL_GIT_REPO_SLUG}/${import.meta.env.PUBLIC_VERCEL_GIT_REPO_OWNER}/`
const build_revision = import.meta.env.PUBLIC_VERCEL_GIT_COMMIT_SHA;

interface Props {
	title?: string;
}

const { title } = Astro.props;
const titleTag = title != undefined ? `${title} | xevion.blog` : 'xevion.blog';
---
<!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>
      		{titleTag}
        </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 href="/feed.xml" rel="alternate" type="application/atom+xml">
        <ViewTransitions />
        <!-- {page._preview_description and page.title or page.name == "index.html"} -->
        <!--     <meta content="website" property="og:type"> -->
        <!--     <meta property="og:url" content="{{ page.url | absolute_url }}"> -->
        <!--     <meta property="og:title" content="{{ page.title | default: "Xevion.dev" }}"> -->
        <!--     <meta name="twitter:title" content="{{ page.title | default: "Xevion.dev" }}"> -->
        <!--     {% if page._preview_description -%} -->
        <!--         <meta property="og:description" content="{{ page._preview_description }}"> -->
        <!--         <meta property="twitter:description" content="{{ page._preview_description }}"> -->
        <!--     {% endif -%} -->
        <!--     {%- if page._preview_image -%} -->
        <!--         <meta property="og:image" content="{{ page._preview_image | absolute_url }}"> -->
        <!--         <meta name="twitter:image" content="{{ page._preview_image | absolute_url }}"> -->
        <!--         <meta content="summary_large_image" name="twitter:card"> -->
        <!--     {%- else -%} -->
        <!--         <meta content="summary" name="twitter:card"> -->
        <!--     {%- endif -%} -->
        <!-- {%- endif %} -->
        <!--  Prevent FireFox from displaying FOUC with fake script tag.  -->
        <!-- <script>0</script> -->
        <!-- {% if page.layout == "default" or page.layout == "posts" %} -->
        <!--     <script src="/assets/js/custom.js"></script> -->
        <!-- {% endif %} -->
    </head>
    <body class="flex-col align-middle w-full max-w-full">
        <slot name="header">
            <header id="header">
                <div class="stack" style="--stacks: 3;">
                    <span style="--index: 0;">ryan walters</span>
                    <span style="--index: 1;">ryan walters</span>
                    <span style="--index: 2;">ryan walters</span>
                </div>
            </header>
        </slot>
        <nav class="text-center text-xl text-[#808080] [&>a]:text-white [&>a]:underline [&>span]:select-none">
            <a href="/">~/</a>
            <span>:</span>
            <a href="https://xevion.dev">~/about/</a>
            <span>:</span>
            <a href="https://xevion.dev/projects">~/projects/</a>
            <span>:</span>
            <a href="https://xevion.dev/resume">~/resume/</a>
        </nav>
        <div class="max-w-screen-lg">
            <article>
                <slot name="default" />
            </article>
        </div>
        <p class="text-center">
            <a href="/feed.xml">Atom</a>
            |
            <a href={`${repository_url}/commit/${build_revision}`}>
              <span id="commit-id" class="build-revision" style={{color: '#' + build_revision.slice(0, 6)}}>#{build_revision.slice(0, 7)}
                </span>
            </a>
        </p>
    </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>
