<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
    <meta name="description"
          content='{% if page.excerpt %}{{ page.excerpt | strip_html | strip | truncatewords: 75 }}{% elsif page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}'>

    <meta property="og:site_name" content="{{ site.title }}">
    {% if page.title %}
        <meta property="og:title" content="{{ page.title }}">
        <meta property="og:type" content="article">
        <meta property="og:description" content="{{ page.excerpt | strip_html }}"/>
    {% else %}
        <meta property="og:title" content="{{ site.title }}">
        <meta property="og:type" content="website">
        <meta property="og:description" content="{{ site.description }}">
    {% endif %}
    {% if page.date %}
        <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}">
    {% endif %}
    <meta property="og:url" content="{{ site.url }}{{ page.url }}" />
    {% if page.tags %}
        <meta itemprop="keywords" content="{{ page.tags | join: ',' }}" />
        {% for tag in page.tags %}
            <meta property="article:tag" content="{{ tag }}">
        {% endfor %}
    {% endif %}
    {% if author %}
        <meta property="article:author" content="{{ author.name }}" />
    {% endif %}

    <link rel="preload" href="/assets/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <script>
        /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
        (function( w ){
            "use strict";
            // rel=preload support test
            const loadCSS = function() {};
            // define on the loadCSS obj
            const rp = loadCSS.relpreload = {};
            // rel=preload feature support test
            // runs once and returns a function for compat purposes
            rp.support = (function(){
                let ret;
                try {
                    ret = w.document.createElement( "link" ).relList.supports( "preload" );
                } catch (e) {
                    ret = false;
                }
                return function(){
                    return ret;
                };
            })();

            // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
            // then change that media back to its intended value on load
            rp.bindMediaToggle = function( link ){
                // remember existing media attr for ultimate state, or default to 'all'
                const finalMedia = link.media || "all";

                function enableStylesheet(){
                    // unbind listeners
                    if( link.addEventListener ){
                        link.removeEventListener( "load", enableStylesheet );
                    } else if( link.attachEvent ){
                        link.detachEvent( "onload", enableStylesheet );
                    }
                    link.setAttribute( "onload", null );
                    link.media = finalMedia;
                }

                // bind load handlers to enable media
                if( link.addEventListener ){
                    link.addEventListener( "load", enableStylesheet );
                } else if( link.attachEvent ){
                    link.attachEvent( "onload", enableStylesheet );
                }

                // Set rel and non-applicable media type to start an async request
                // note: timeout allows this to happen async to let rendering continue in IE
                setTimeout(function(){
                    link.rel = "stylesheet";
                    link.media = "only x";
                });
                // also enable media after 3 seconds,
                // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
                setTimeout( enableStylesheet, 3000 );
            };

            // loop through link elements in DOM
            rp.poly = function(){
                // double check this to prevent external calls from running
                if( rp.support() ){
                    return;
                }
                const links = w.document.getElementsByTagName("link");
                for(let i = 0; i < links.length; i++ ){
                    const link = links[i];
                    // qualify links to those with rel=preload and as=style attrs
                    if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
                        // prevent rerunning on link
                        link.setAttribute( "data-loadcss", true );
                        // bind listeners to toggle media back
                        rp.bindMediaToggle( link );
                    }
                }
            };

            // if unsupported, run the polyfill
            if( !rp.support() ){
                // run once at least
                rp.poly();

                // rerun poly on an interval until onload
                const run = w.setInterval(rp.poly, 500);
                if( w.addEventListener ){
                    w.addEventListener( "load", function(){
                        rp.poly();
                        w.clearInterval( run );
                    } );
                } else if( w.attachEvent ){
                    w.attachEvent( "onload", function(){
                        rp.poly();
                        w.clearInterval( run );
                    } );
                }
            }


            // commonjs
            if( typeof exports !== "undefined" ){
                exports.loadCSS = loadCSS;
            }
            else {
                w.loadCSS = loadCSS;
            }
        }( typeof global !== "undefined" ? global : this ) );
    </script>
    <style>{% include critical.css %}</style>

    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}"
          href="{% link feed.xml %}">
    <link rel="mask-icon" href="{{ site.data.author.brand_logo_mask }}" sizes="any" color="#323232">
    <link rel="shortcut icon" href="{{ site.data.author.brand_logo_png150 }}" type="image/png" sizes="150x150">
    <link rel="apple-touch-icon" sizes="150x150" href="{{ site.data.author.brand_logo_png150 }}">

    <script>
        FontAwesomeConfig = { autoAddCss: false }
    </script>
    <script type="text/javascript" src="/assets/javascripts/main.js" defer></script>
</head>
