<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        :root {
            --accent-color: {{ .Site.Params.AccentColor | default "#FF4D4D" }};
            --font-size: {{ .Site.Params.FontSize | default "1.1rem" }};
        }
    </style>

    {{ $title := .Title | markdownify | default .Site.Title }}
    {{ $description := ((.Description | default (.Summary | default .Content) | default .Site.Params.Description) | plainify | truncate 160) }}
    {{ $image := .Params.image | default (.Scratch.Get "avatarImgSrc") }}
    {{ $siteKeywords := .Site.Params.MetaKeywords | default (slice) }}
    {{ $postKeywords := .Params.tags | default (slice) }}
    {{ $keywords := union $siteKeywords $postKeywords }}

    <!-- SEO titles & descriptions -->
    <title>{{ $title }}</title>
    <meta name="description" content="{{ $description }}">
    <meta name="keywords" content='{{ delimit $keywords ", "}}'>

    <meta property="og:url" content="{{ .Permalink }}">
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ $title }}">
    <meta property="og:description" content="{{ $description }}">
    <meta property="og:image" content="{{ absURL $image }}">
    <meta property="og:image:secure_url" content="{{ absURL $image }}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $title }}">
    <meta name="twitter:description" content="{{ $description }}">
    <meta property="twitter:domain" content="{{ .Permalink }}">
    <meta property="twitter:url" content="{{ .Permalink }}">
    <meta name="twitter:image" content="{{ absURL $image }}">

    <!-- SEO canonicals: helps Google understand your site better when using marketing campaign tagging etc -->
    <link rel="canonical" href="{{ .Permalink }}">

    {{ $cssNormalize := resources.Get "css/normalize.min.css" }}
    <link rel="stylesheet" type="text/css" href="{{ $cssNormalize.RelPermalink }}" media="print">

    {{ $cssMain := resources.Get "css/main.css" | minify }}
    <link rel="stylesheet" type="text/css" href="{{ $cssMain.RelPermalink }}">

    {{ $cssSyntax := resources.Get "css/syntax.css" | minify }}
    <link rel="stylesheet" type="text/css" href="{{ $cssSyntax.RelPermalink }}">

    {{ $cssDark := resources.Get "css/dark.css" | minify }}
    <link id="dark-theme" rel="stylesheet" href="{{ $cssDark.RelPermalink }}">

    {{ $jsBundle := resources.Match "js/**.js" | resources.Concat "js/bundle.js" | minify | resources.Fingerprint "sha256" }}
    <script src="{{ $jsBundle.RelPermalink }}" integrity="{{ $jsBundle.Data.Integrity }}"></script>

    <!-- Option for user to inject custom html -->
    {{ if .Site.Params.CustomHeadHTML }}
    {{ .Site.Params.CustomHeadHTML | safeHTML }}
    {{ end }}
</head>
