{% import "macros.html" as macros %}
<!DOCTYPE html>
<html lang="en-us">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta itemprop="name" content="{{config.title}}" />
  <meta itemprop="description" content="{{config.description}}" />

  <link rel="apple-touch-icon" sizes="180x180" href="{{get_url(path="apple-touch-icon.png")}}"/>
  <link rel="icon" type="image/png" sizes="32x32" href="{{get_url(path="favicon-32x32.png")}}" />
  <link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="{{get_url(path="favicon-16x16.png")}}"
  />
  <link
    rel="shortcut icon"
    href="{{get_url(path="favicon.ico")}}"
  />
  <link rel="stylesheet" href="{{get_url(path="style.css")}}"/>
  {% if page.title %}
  <title>{{page.title}}</title>
  {% else %}
  <title>{{config.title}}</title>
  {% endif %}

  {% if config.generate_feed %}
  <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}">
  {% endif %}

  <body id="page">

	{% block header %}
	{% endblock header %}
	
	{% block title %}
	<div id="spotlight" class="animated fadeIn">
	  <div id="home-center">
		<h1 id="home-title">{{config.title}}</h1>
		<p id="home-subtitle">{{config.extra.home_subtitle}}</p>
		<div id="home-social">
		  {{macros::render_social_icons()}}
		</div>
		{% endblock title %}
		{% block main %}
		<nav id="home-nav" class="site-nav">
		  {% for s in config.extra.hermit_menu %}
		  <a href="{{config.base_url ~ s.link}}">{{s.name}}</a>
		  {% endfor %}
		</nav>
		{% endblock main %}
	  </div>
	  
	  {% block footer %}
	  <div id="home-footer">
		<p>&copy; {{ now() | date(format="%Y")}}
      <a href="{{config.base_url}}">{{config.extra.author.name}}</a>
      {% if config.generate_feed %}
		  &#183; <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) }}" target="_blank" title="rss">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rss"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
      {% endif %}
      <a target="_blank" href="https://icons8.com/icon/SjG6BzZwdP2-/mastodon">Mastodon</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>
		  </a>
		</p>
	  </div>
	  {% endblock footer %}
	</div>
	
	<script src="{{get_url(path="js/main.js")}}"></script>

	<!-- Math rendering -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"
        onload="renderMathInElement(document.body, { delimiters: [ {left: '$$', right: '$$', display: true}, {left: '$', right: '$', display: false}, {left: '\\[', right: '\\]', display: true}, {left: '\\(', right: '\\)', display: false}]});"></script>

    {% if config.extra.highlightjs.enable %}
		<link href="https://unpkg.com/highlightjs-badge/highlightjs/styles/{{config.extra.highlightjs.theme}}.css" rel="stylesheet">
		<!-- https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.1/build/styles/  for min version -->
		<script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script>
		<script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script>
		<script>
			var pres = document.querySelectorAll("pre>code");
			for (var i = 0; i < pres.length; i++) {
				hljs.highlightBlock(pres[i]);
			}
		</script>
		{% if config.extra.highlightjs.clipboard %}
			<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
			<script>
				var options = {
					copyIconClass: "gg-clipboard",
					checkIconClass: "gg-check"
				};
				window.highlightJsBadge(options);
			</script>
		{% endif %}

	{% endif %}

	{% if not config.extra.highlightjs.enable %}
	<script src="{{get_url(path="js/copy.js")}}"></script>
	{% endif %}
	<script src="{{get_url(path="js/main.js")}}"></script>

    {% block js_footer %}
    {% endblock js_footer %}

	{% if config.extra.google_analytics.enable %}
    <!-- Global Site Tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ config.extra.google_analytics.id }}"></script>
    <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());
     gtag('config', '{{ config.extra.google_analytics.id }}');
    </script>
    {% endif %}
  </body>
</html>