<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="author" content="Fredrik Danielsson, http://lostkeys.se">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex" />
  {% if meta.description %}
    <meta name="description" content="{{ meta.description|striptags }}">
  {% endif %}
  <title>{% if meta.title %}{{ meta.title }} | {% endif %}{{ site_title }}</title>
  <link rel="stylesheet" href="{{ theme_url }}/styles/main.css" type="text/css" />
  <link rel="stylesheet" href="{{ theme_url }}/styles/highlightjs-github.css" type="text/css" />
  {% for css_file in config.external_css %}
    <link rel="stylesheet" href="{{ css_file }}" type="text/css" />
  {% endfor %}
</head>
<body>

<aside class="main-nav">
<nav>
  <ul>
    {% for page in pages if page.title %}
      <li class="menuitem {% if page.id == current_page.id %}active{% endif %}">
        <a href="{{ page.url }}" data-shortcut="{{page.meta.shortcut}}">
          {{ page.title }}
          {% if page.meta.shortcut %}
            <span class="shortcut">{{page.meta.shortcut|replace({'+':' '})}}</a>
          {% endif %}
        </a>
      </li>
    {% endfor %}
  </ul>
</nav>
</aside>
<main class="main-content">
  <article class="article">
    {{ content }}
  </article>
</main>
<nav class="page-toc">
  <ul id="page-toc-container">

  </ul>
</nav>

<script src="{{ theme_url }}/scripts/highlight.js"></script>
<script src="{{ theme_url }}/scripts/mousetrap.min.js"></script>
<script src="{{ theme_url }}/scripts/clipboard.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();

  document.querySelectorAll('.menuitem a').forEach(function(el) {
    if (el.getAttribute('data-shortcut').length > 0) {
      Mousetrap.bind(el.getAttribute('data-shortcut'), function() {
        location.assign(el.getAttribute('href'));
      });
    }
  });

  /**
   * Generate page table of contents
   *
   * Get all H2 elements and render them in a list
  **/
  function generatePageTOC() {
    var tocContainer = document.getElementById('page-toc-container');

    document.querySelectorAll('.article h2').forEach(function(el, index) {
      // Insert a marker since anchor links breaks with css position sticky
      // sticky headers upwards are stacked at the top of the viewport
      // and therefore cannot be jumped to since they are already visible
      // Instead inject a hidden element to use as a scroll marker
      el.insertAdjacentHTML('beforebegin', '<i id="page-toc-'+index+'" class="page-toc-scroll-marker">TOC marker</i>');

      var newTocNavItem = document.createElement('li');
      var newTocNavItemLink = document.createElement('a');
      var newTocNavItemText = document.createTextNode(el.textContent);

      newTocNavItemLink.setAttribute('href', '#page-toc-' + index);
      newTocNavItemLink.appendChild(newTocNavItemText);
      newTocNavItem.appendChild(newTocNavItemLink);
      tocContainer.appendChild(newTocNavItem);
    });
  }
  generatePageTOC();

  /**
   * Copy to clipboard
   *
   * Powered by https://clipboardjs.com
  **/

  new ClipboardJS('.copy-to-clipboard-btn');

  // Attach id attribute to all pre > code elements and append a button
  document.querySelectorAll('pre code').forEach(function(el, index) {
    el.setAttribute('id', 'code-block-' + index);
  });

  // Add copy-to-clipboard buttons. Begin by wrapping all pre elements in a div...
  document.querySelectorAll('pre').forEach(function(el, index) {

    // Create the wrapper div and apply classes on it
    var wrapper = document.createElement('div');
    wrapper.classList.add('code-block-container');

    // Place the wrapper div before the pre element
    el.parentNode.insertBefore(wrapper, el);

    // Move the pre element inside the wrapper div
    wrapper.appendChild(el);

    // Append a copy to clipboard button after each code block
    wrapper.insertAdjacentHTML('beforeend', `
      <button type="button" class="copy-to-clipboard-btn" data-clipboard-target="#code-block-${index}">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0H24V24H0z"/><path fill="currentColor" d="M13 11L11 11 11 14 8 14 8 16 11 16 11 19 13 19 13 16 16 16 16 14 13 14z"/><path fill="currentColor" d="M19 5h-2V3h-1.142c-.447-1.72-2-3-3.858-3S8.589 1.28 8.142 3H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V7c0-1.103-.897-2-2-2zm-7-3c.739 0 1.385.402 1.731 1h-3.463c.347-.598.993-1 1.732-1zM9 5h6v2H9V5zm10 16H5V7h2v2h10V7h2v14z"/></svg>
      </button>
    `);
  });
</script>

</body>
</html>
