<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f7f7f7">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1b1b1e">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta
    name="viewport"
    content="width=device-width, user-scalable=no initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
  >

  {%- capture seo_tags -%}
    {% seo title=false %}
  {%- endcapture -%}

  <!-- Setup Open Graph image -->

  {% if page.image %}
    {% assign src = page.image.path | default: page.image %}

    {% unless src contains '://' %}
      {%- capture img_url -%}
        {% include media-url.html src=src subpath=page.media_subpath absolute=true %}
      {%- endcapture -%}

      {%- capture old_url -%}{{ src | absolute_url }}{%- endcapture -%}
      {%- capture new_url -%}{{ img_url }}{%- endcapture -%}

      {% assign seo_tags = seo_tags | replace: old_url, new_url %}
    {% endunless %}

  {% elsif site.social_preview_image %}
    {%- capture img_url -%}
      {% include media-url.html src=site.social_preview_image absolute=true %}
    {%- endcapture -%}

    {%- capture og_image -%}
      <meta property="og:image" content="{{ img_url }}" />
    {%- endcapture -%}

    {%- capture twitter_image -%}
      <meta name="twitter:card" content="summary_large_image" />
      <meta property="twitter:image" content="{{ img_url }}" />
    {%- endcapture -%}

    {% assign old_meta_clip = '<meta name="twitter:card" content="summary" />' %}
    {% assign new_meta_clip = og_image | append: twitter_image %}
    {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %}
  {% endif %}

  {{ seo_tags }}

  <title>
    {%- unless page.layout == 'home' -%}
      {{ page.title | append: ' | ' }}
    {%- endunless -%}
    {{ site.title }}
  </title>

  {% include_cached favicons.html %}

  {% if site.resources.ignore_env != jekyll.environment and site.resources.self_hosted %}
    <link href="{{ site.data.origin[type].webfonts | relative_url }}" rel="stylesheet">

  {% else %}
    {% for cdn in site.data.origin[type].cdns %}
      <link rel="preconnect" href="{{ cdn.url }}" {{ cdn.args }}>
      <link rel="dns-prefetch" href="{{ cdn.url }}" {{ cdn.args }}>
    {% endfor %}

    <link rel="stylesheet" href="{{ site.data.origin[type].webfonts | relative_url }}">
  {% endif %}

  <!-- GA -->
  {% if jekyll.environment == 'production' and site.analytics.google.id != empty and site.analytics.google.id %}
    <link rel="preconnect" href="https://www.google-analytics.com" crossorigin="use-credentials">
    <link rel="dns-prefetch" href="https://www.google-analytics.com">

    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous">
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
  {% endif %}

  <!-- Bootstrap -->
  <link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ site.data.origin[type].fontawesome.css | relative_url }}">

  <link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">

  {% if site.toc and page.toc %}
    <link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
  {% endif %}

  {% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
    <link rel="stylesheet" href="{{ site.data.origin[type]['lazy-polyfill'].css | relative_url }}">
  {% endif %}

  {% if page.layout == 'page' or page.layout == 'post' %}
    <!-- Manific Popup -->
    <link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">
  {% endif %}

  <!-- JavaScript -->

  {% unless site.theme_mode %}
    {% include mode-toggle.html %}
  {% endunless %}

  {% include metadata-hook.html %}
</head>