<!-- TOP BEGIN -->
<%
  const getPageField=(field_name)=> {
    return page[field_name] || site[field_name] || '';
  },
  getUrl = () => site.base_uri + (site.base_uri.endsWith('/') ? '' : '/') + page.path;
  let title = page?.title ?? '';
  if (page.title && page.section && !page.path.endsWith(`${page.section.replace(' ', '-')}/index.html`)) {
    if (page.section === 'bestiary') {
      title = `${title} (Creature)`;
    }
    else if (page.section === 'classes') {
      title = `${title} (Class)`;
    }
    else if (page.section === 'races') {
      title = `${title} (Race)`;
    }
    else if (page.section === 'magic items') {
      title = `${title} (Magic Item)`;
    }
  }
-%>
  <!doctype html>
  <html class="no-js" lang="en" xmlns:fb="http://ogp.me/ns/fb#">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Security-Policy"
      content="<%= site.csp %>" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- LEARN MORE:
         What can go in the head, why meta and viewport MUST go first, and what do they do?
         https://github.com/joshbuchea/HEAD#recommended-minimum
    -->
  
    <base href="<%= getUrl() %>" />
    <title>
      <%= title ? title + ' | ' : '' %>
      <%= page.sub_title ? page.sub_title + ' | ' : '' %>
      <%= site.title %>
    </title>

    <!--

             Welcome, weary traveler, to...
          ________________   ________________
      .-/|                \ /                |\-.
      ||||                 |                 ||||
      ||||       THE       |      GUIDE      ||||
      ||||                 |                 ||||
      ||||     PLANAR      |     TO THE      ||||
      ||||                 |                 ||||
      ||||   VAGABOND'S    |   MULTIVERSE    ||||
      ||||                 |                 ||||
      ||||                 |                 ||||
      ||||________________ | ________________||||
      ||/=================\|/=================\||
      `------------------~___~-----------------''
    -->

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#f03733">
    <meta name="msapplication-TileColor" content="#8fffff">
    <meta name="theme-color" content="#ffffff">
  
    <meta name="application-name" content="The Planar Vagabond's Guide to the Multiverse">
    <meta name="description" content="<%= getPageField('description') %>">
    <meta name="author" content="<%= (page.author || site.author).name %>">
    <meta name="generator" content="Weevr" />
    <meta name="keywords" content="<%= getPageField('keywords') %>">
    <meta name="robots" content="<%= getPageField('robots') %>">
    <meta name="googlebot" content="<%= getPageField('robots') %>">

    <link rel="license" href="/licenses/cc-by-sa/index.html">

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= site.base_uri %><%= page.path %>" />
    <meta property="og:site_name" content="<%= site.title %>" />
    <meta property="og:title" content="<%= getPageField('title') %>" />
    <meta property="og:locale" content="en_US">
    <% if (page.image) { %>
      <meta property="og:image" content="<%= page.image %>" />
    <% } %>
    <% if (page.description) { %>
      <meta property="og:description" content="<%= page.description %>" />
    <% } %>

    <!-- Twitter Card -->
    <% if (page.image) { %>
      <meta name="twitter:card" content="summary_large_image" />
    <% } else { %>
      <meta name="twitter:card" content="summary" />
    <% } %>
    <meta name="twitter:url" content="<%= site.base_uri %><%= page.path %>" />
    <meta name="twitter:title" content="<%= getPageField('title') %>" />
    <meta name="twitter:description" content="<%= getPageField('description') %>" />
    <meta name="twitter:image" content="<%= getPageField('image') %>" />
    <% if (page.author && page.author.twitter) { %>
      <meta name="twitter:creator" content="<%= page.author.twitter %>" />
    <% } else if (site.author && site.author.twitter) { %>
      <meta name="twitter:creator" content="<%= site.author.twitter %>" />
    <% } %>
 
    <!--
      Disallow Twitter from using your site’s info for personalization purposes:
      https://github.com/joshbuchea/HEAD#twitter-privacy
    -->
    <meta name="twitter:dnt" content="on">

  
    <link rel="start" href="<%= site.base_uri %>/" />
    <link rel="contents" href="/sitemap.xml" title="Sitemap" />
    <link rel="alternate" type="application/rss+xml" title="Recent Changes" href="/feed" />
    <link rel="canonical" href="<%= site.base_uri %><%= page.path %>" />

    <link rel="stylesheet" href="/styles/imports.css" type="text/css" />
    <link rel="stylesheet" href="/styles/fonts.css" type="text/css" />
    <link rel="stylesheet" href="/styles/styles.css" type="text/css" />
  </head>

  <!-- TOP END -->