<meta charset="UTF-8">

<title>{{#if (ne page.title config.user.title)}}{{ page.title }} · {{/if}}{{ config.user.title }}</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="preload" href="{{ asset 'font/recursive-title.woff2' }}" as="font" type="font/woff2" crossorigin fetchpriority="high">
<link rel="preload" href="{{ asset 'font/recursive-crit.woff2' }}" as="font" type="font/woff2" crossorigin>

<style>
    @font-face {
        font-family: "RecVar-Full";
        src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
        font-display: swap;

        unicode-range: U+0-10FFFF;
    }

    @font-face {
        font-family: "RecVar-Crit";
        src: url("{{{ asset 'font/recursive-crit.woff2' }}}");
        font-display: swap;

        font-weight: 400 900;
        font-style: normal;
        unicode-range: U+20-7E, U+2000-206F;
    }

    @font-face {
        font-family: "RecVar-Crit";
        src: url("{{{ asset 'font/recursive-casl0.woff2' }}}");
        font-display: swap;

        font-style: normal;
        unicode-range: U+80-1FFF, U+2070-10FFFF;
    }

    @font-face {
        font-family: "RecVar-Title";
        src: url("{{{ asset 'font/recursive-title.woff2' }}}");
        font-display: block;

        font-weight: 800 900;
        font-style: normal;
        unicode-range: U+20, U+27, U+65, U+66, U+68, U+69, U+6B, U+6C, U+6F, U+72, U+73, U+74, U+75, U+79;
    }
</style>
<style>{{{ include_static 'css/base.css' }}}</style>
<style>{{{ include_static 'css/critical.css' }}}</style>

{{!--
Import maps currently don't support the src="" attribute. Unless we come up with something
clever to do while browser vendors figure that out, we'll just have to do a cache-busting string substitution.
--}}
<script type="importmap">{{{ import_map }}}</script>

<script>
    const TREEHOUSE_DEV = {{ dev }};
    const TREEHOUSE_SITE = `{{ config.site }}`;

    {{!-- Yeah, this should probably be solved in a better way somehow.
    For now this is used to allow literate-programming.js to refer to syntax files with the ?v attribute,
    so that they don't need to be redownloaded every single time. --}}
    const TREEHOUSE_SYNTAX_URLS = {
        javascript: `{{{ asset 'syntax/javascript.json' }}}`,
        haku: `{{{ asset 'syntax/haku.json' }}}`,
    };
</script>

<meta property="og:site_name" content="{{ config.user.title }}">
<meta property="og:title" content="{{ page.title }}">
{{#if page.thumbnail}}
<meta property="og:image" content="{{ page.thumbnail.url }}">
<meta property="og:image:alt" content="{{ page.thumbnail.alt }}">
{{/if}}

<link rel="icon" sizes="16x16" href="{{ asset (cat (cat 'favicon/' season) '@1x.png') }}">
<link rel="icon" sizes="32x32" href="{{ asset (cat (cat 'favicon/' season) '@2x.png') }}">
<link rel="icon" sizes="64x64" href="{{ asset (cat (cat 'favicon/' season) '@4x.png') }}">
<link rel="icon" sizes="128x128" href="{{ asset (cat (cat 'favicon/' season) '@8x.png') }}">
<link rel="icon" sizes="256x256" href="{{ asset (cat (cat 'favicon/' season) '@16x.png') }}">
<link rel="icon" sizes="512x512" href="{{ asset (cat (cat 'favicon/' season) '@32x.png') }}">
<link rel="apple-touch-icon" sizes="16x16" href="{{ asset (cat (cat 'favicon/' season) '@1x.png') }}">
<link rel="apple-touch-icon" sizes="32x32" href="{{ asset (cat (cat 'favicon/' season) '@2x.png') }}">
<link rel="apple-touch-icon" sizes="64x64" href="{{ asset (cat (cat 'favicon/' season) '@4x.png') }}">
<link rel="apple-touch-icon" sizes="128x128" href="{{ asset (cat (cat 'favicon/' season) '@8x.png') }}">
<link rel="apple-touch-icon" sizes="256x256" href="{{ asset (cat (cat 'favicon/' season) '@16x.png') }}">
<link rel="apple-touch-icon" sizes="512x512" href="{{ asset (cat (cat 'favicon/' season) '@32x.png') }}">

<link rel="canonical" href="{{ config.site }}/{{#if (ne page.tree_path 'index')}}{{ page.tree_path }}{{/if}}">
<link rel="alternate" type="application/atom+xml" title="{{ feed_name }}" href="{{ config.site }}/feed/all.atom">

<meta name="fediverse:creator" content="@riki@furry.engineer">
