<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  {{ if is "homepage" -}}
    <link rel="alternate" type="application/atom+xml" href="{{ rootURL }}/feed.atom">
  {{- end }}
  {{ if is "homepage" -}}
    <link rel="canonical" href="{{ .RootURL }}">
  {{- else if is "category" -}}
    <link rel="canonical" href="{{ .RootURL }}/{{ .Category }}/">
  {{- else -}}
    <link rel="canonical" href="{{ .RootURL }}/{{ .Category }}/{{ .Name }}.html">
  {{- end }}

  <title>
    {{ if is "homepage" -}}
      {{ .SiteTitle }}
    {{- else if is "category" -}}
      {{ index .CategoryMap .Category }}
    {{- else -}}
      {{ .Title }} - {{ .SiteTitle }}
    {{- end }}
  </title>

  <!-- Generated by realfavicongenerator.net -->
  <link rel="apple-touch-icon" sizes="180x180" href="{{ rootURL }}/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="{{ rootURL }}/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ rootURL }}/favicon-16x16.png">
  <link rel="manifest" href="{{ rootURL }}/site.webmanifest">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  {{ $docsetMode := eq (getEnv "ELVISH_DOCSET_MODE") "1" -}}
  <style>
    {{ fontFace "Source Serif" 400 "normal" "SourceSerif4-Regular" }}
    {{ fontFace "Source Serif" 400 "italic" "SourceSerif4-It" }}
    {{ fontFace "Source Serif" 600 "normal" "SourceSerif4-Semibold" }}
    {{ fontFace "Source Serif" 600 "italic" "SourceSerif4-SemiboldIt" }}
    {{ fontFace "Fira Mono" 400 "normal" "FiraMono-Regular" }}
    {{ fontFace "Fira Mono" 600 "italic" "FiraMono-Bold" }}

    {{ .BaseCSS }}
    {{ .ExtraCSS }}
    {{ if $docsetMode }}
      .toc {
        display: none;
      }
    {{ end }}
  </style>

  <script>
    {{ .ExtraJS }}
  </script>
</head>

<body class="no-js">
  <script>
    document.body.classList = ['has-js'];

    // If the domain starts with "dark.", trigger dark mode.
    if (location.hostname.startsWith('dark.')) {
      document.body.classList.add('dark');
    }

    // Pressing d triggers dark mode. This is useful for debugging.
    window.addEventListener('keypress', function(ev) {
      if (String.fromCodePoint(ev.keyCode || ev.charCode) == 'D') {
        document.body.classList.toggle('dark');
      }
    });
  </script>

  {{ if not $docsetMode }}
    <div id="navbar-container"> <div id="navbar">
      <a id="site-title" href="{{ rootURL }}/">
        elvish
      </a>
      <ul id="nav-list">
        {{ $homepageTitle := .HomepageTitle }}
        {{ $curcat := .Category }}
        {{ range $i, $info := .Categories }}
          <li>
            <a href="{{ rootURL }}/{{ $info.Name }}/"
               class="{{ if eq $curcat $info.Name}}current{{ end }}">
              {{ or $info.NavHTML $info.Name }}
            </a>
          </li>
        {{ end }}
      </ul>
    </div> </div>
  {{ end }}

  {{/*
    The reference to "content" is a free one and has to be fixed elsewhere.
    The *-content templates defined below are intended to be used for this.

    For instance, by adding the following code, this whole template file will
    function as the template for articles:

        {{ define "content" }} {{ template "article-content" . }} {{ end }}

    This snippet can be generated by contentIs("article").
  */}}
  {{ template "content" . }}

  <script>
    // If viewing locally, append index.html to relative paths that point to
    // directories
    if (location.protocol === 'file:') {
      var links = document.getElementsByTagName('a');
      for (var i = 0; i < links.length; i++) {
        var href = links[i].getAttribute('href');
        if (href && !href.match(/^https?:/) && href.endsWith('/')) {
          links[i].href = href + 'index.html';
        }
      }
    }

    // Make the navbar sticky only when scrolling up. This makes the navbar
    // easily accessible without taking up vertical space when reading.
    makeStickyWhenScrollingUp(document.getElementById('navbar-container'));

    function makeStickyWhenScrollingUp(element) {
      var lastScrollY = 0;
      var topPx = 0;
      var jumped = window.location.hash !== '';
      element.style.position = 'sticky';
      element.style.zIndex = 100;
      element.style.top = '0px';
      document.addEventListener('scroll', function(ev) {
        if (jumped) {
          // Hide the element after jumping to an anchor.
          jumped = false;
          topPx = -element.offsetHeight;
        } else {
          // Use a negative top property on sticky elements to control how much
          // of it is visible. Keep it in sync with the scroll position, and cap
          // it between -element.offsetHeight (entirely hidden) and 0 (entirely
          // visible).
          topPx += lastScrollY - window.scrollY;
          topPx = Math.max(-element.offsetHeight, Math.min(0, topPx));
        }
        element.style.top = topPx + 'px';
        lastScrollY = window.scrollY;
      });
      window.addEventListener('hashchange', function(ev) {
        jumped = true;
      });
    }
  </script>
</body>
</html>

{{ define "article-content" }}
  <div id="main">
    <article>
      {{ if not .IsHomepage }}
        <div class="article-title">
          <div class="timestamp"> {{ .Timestamp }} </div>
          <h1> {{ .Title }} </h1>
          <div class="clear"></div>
        </div>
      {{ end }}
      <div class="article-content">
        {{ .Content }}
      </div>
      <div class="clear"></div>
    </article>
  </div>
{{ end }}

{{ define "category-content" }}
  {{ $category := .Category }}
  <div id="main" class="category">
    {{ if .Prelude }}
      <article>
        {{ .Prelude }}
      </article>
    {{ end }}
    {{ range $group := .Groups }}
      {{ if $group.Intro }}
        <p>{{ $group.Intro }}</p>
      {{ end }}
      <ul class="article-list">
        {{ range $article := $group.Articles }}
          <li>
            <header>
              <a href="{{ rootURL }}/{{ $category }}/{{ $article.Name }}.html"
                 class="article-link">{{ $article.Title }}</a>
              {{ if $article.Note }}
                &mdash; {{ $article.Note }}
              {{ end }}
            </header>
            <time>
              {{ $article.Timestamp }}
            </time>
          </li>
        {{ end }}
      </ul>
    {{ end }}
  </div>
{{ end }}
