<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{{#opengraph}}
{{#description}}
<meta name="description" content="{{.}}" />
{{/description}}
{{/opengraph}}

<!-- Inform modern browsers that this page supports both dark and light color schemes,
  and the page author prefers light. -->
<meta name="color-scheme" content="dark light">
<script>
  // If `prefers-color-scheme` is not supported, fall back to light mode.
  // i.e. In this case, inject the `light` CSS before the others, with
  // no media filter so that it will be downloaded with highest priority.
  if (window.matchMedia("(prefers-color-scheme: dark)").media === "not all") {
    document.documentElement.style.display = "none";
    document.head.insertAdjacentHTML(
      "beforeend",
      "<link id=\"css\" rel=\"stylesheet\" href=\"https://bootswatch.com/5/flatly/bootstrap.css\" onload=\"document.documentElement.style.display = ''\">"
    );
  }
</script>

<title>{{{pagetitle}}} • {{#site}}{{title}}{{/site}}</title>

{{#has_favicons}}
<!-- favicons -->
<link rel="icon" type="image/png" sizes="16x16" href="{{#site}}{{root}}{{/site}}favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{#site}}{{root}}{{/site}}favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png" />
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="{{#site}}{{root}}{{/site}}apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="{{#site}}{{root}}{{/site}}apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{#site}}{{root}}{{/site}}apple-touch-icon-60x60.png" />
{{/has_favicons}}

{{{headdeps}}}
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous" />

<!-- bootstrap-toc -->
<script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script>

<!-- headroom.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script>

<!-- clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script>

<!-- search -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script>

<!-- pkgdown -->
<script src="{{#site}}{{root}}{{/site}}pkgdown.js"></script>

{{#extra}}
  {{#css}}<link href="{{#site}}{{root}}{{/site}}extra.css" rel="stylesheet">{{/css}}
  {{#js}}<script src="{{#site}}{{root}}{{/site}}extra.js"></script>{{/js}}
{{/extra}}

<meta property="og:title" content="{{{pagetitle}}}" />
{{#opengraph}}
{{#description}}
<meta property="og:description" content="{{.}}" />
{{/description}}
{{#image}}
<meta property="og:image" content="{{{src}}}" />
{{#alt}}
<meta property="og:image:alt" content="{{{.}}}" />
{{/alt}}
{{/image}}
{{#twitter}}
{{#card}}
<meta name="twitter:card" content="{{{.}}}" />
{{/card}}
{{^card}}
<meta name="twitter:card" content="summary" />
{{/card}}
{{#creator}}
<meta name="twitter:creator" content="{{{.}}}" />
{{/creator}}
{{#site}}
<meta name="twitter:site" content="{{{.}}}" />
{{/site}}
{{/twitter}}
{{/opengraph}}

{{#yaml}}{{#noindex}}<meta name="robots" content="noindex" />{{/noindex}}{{/yaml}}
{{#development}}{{#in_dev}}<meta name="robots" content="noindex">{{/in_dev}}{{/development}}

{{#yaml}}{{#google_site_verification}}
<meta name="google-site-verification" content="{{{.}}}" />
{{/google_site_verification}}{{/yaml}}

<!-- mathjax -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script>

{{#yaml}}{{#canalytics}}
<!-- Custom Analytics -->
<script async defer data-domain="{{{domain}}}" src="{{{src}}}"></script>
{{/canalytics}}{{/yaml}}

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

{{#yaml}}{{#ganalytics}}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{.}}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{.}}');
</script>
{{/ganalytics}}{{/yaml}}
{{#has_trailingslash}}
<!-- See https://stackoverflow.com/questions/1865837/whats-the-difference-between-window-location-and-window-location-replace — we use .replace() because we don't want the old url to appear in the browser history. -->
<script>
  if (!/(\/|html?)$/.test(window.location.href)){
    window.location.replace(window.location.href + '/');
  }
</script>
{{/has_trailingslash}}
{{#has_deps}}
<!-- dependencies from examples -->
{{{dependencies}}}
{{/has_deps}}

<!-- Flatly Theme - Light  -->
<link id="css-light" rel="stylesheet" href="https://bootswatch.com/5/flatly/bootstrap.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">

<!-- Darkly Theme - Dark -->
<link id="css-dark" rel="stylesheet" href="https://bootswatch.com/5/darkly/bootstrap.css" media="(prefers-color-scheme: dark)">

<!-- preferably CSS -->
<link rel="stylesheet" href="{{#site}}{{root}}{{/site}}preferably.css">
<link id="css-code-light" rel="stylesheet" href="{{#site}}{{root}}{{/site}}code-color-scheme-light.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
<link id="css-code-dark" rel="stylesheet" href="{{#site}}{{root}}{{/site}}code-color-scheme-dark.css" media="(prefers-color-scheme: dark)">

{{#yaml}}
{{#toggle}}
  <script src="{{#site}}{{root}}{{/site}}darkswitch.js"></script>
{{/toggle}}
{{/yaml}}