<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% if meta.robots %}
    <meta name="robots" content="{{ meta.robots }}">
  {% endif %}{% 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 href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!-- highlight.js -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>

  <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'] ],
        displayMath: [ ['$$','$$'] ],
        skipTags: ["script","noscript","style","textarea"]
      }
    });
    MathJax.Hub.Queue(function () {
      $('.MathJax_Preview').parent().css('border','none').css('background','none').css('color','black');
      $('.MathJax_Display').css('margin','-1em 0 -1em 0');
    });
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_HTML"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.6.1/mousetrap.min.js"></script>


</head>
<body>

<aside class="main-nav">
<nav>
  
  <!-- <p class="directory">{{ current_page.id |root}}</p> -->
  <p class="directory"><a href="{{ base_url }}">root</a>/{{ current_page.id |root|directoryChain}}</p>

  {% set offset = 0 %}
  <ul>
    {% for page in pages|sort_by("title")%}
    {% if page.meta.shortcut %}
      <span class="shortcut-data" style="display:none;" data-shortcut='{{ page.meta.shortcut }}'>{{ page.url }}</span>
    {% endif %}
    {%if current_page.id|isIndex %}
      {% set offset = 1 %}
    {% endif %}

      {% if (is_front_page or (page.id starts with current_page.id |root)) 
      and (current_page.id|level == page.id|level-offset) %}

      <li class="menuitem {% if page.id == current_page.id %}active{% endif %}">
        <a href="{{ page.url }}" data-shortcut="{{page.meta.shortcut}}">
          {{ page.title }}
        </a>
      </li>

      {% endif %}
    {% endfor %}
  </ul>
</nav>
</aside>

<main class="main-content">
  <article class="article">
    <h1 class='main-title'><span class="section-anchor"><a href="#">#</a></span>{{ current_page.title }}</h1>
    {{ content }}
  </article>
</main>

<aside class="nav-contents">
<nav>
  <ul class="table-contents">
  <li><a href="#">{{ current_page.title }}</a></li>
    

  </ul>
  
</nav>
</aside>

<script>
{% if meta.highlight %} //set highlighting if it's defined
  $('code').addClass('{{ current_page.meta.highlight }}');
 {% endif %}

$('.shortcut-data').each(function(){ //make shortcuts
  var self = this;
  Mousetrap.bind($(this).attr('data-shortcut'),function(e) {
    window.location=$(self).text();
  });
});


$('.article h1, .article h2').not('.main-title').each(function() { //make anchors
  var rawName = $(this).text();

  var cleanedName = rawName.replace(/[\.\s]+/g, '-');
  $('<a id='+cleanedName+' />').insertBefore($(this));
  $(this).prepend($('<span class="section-anchor"><a href="#'+cleanedName+'">#</a></span>'));

  var contentLine = $('<li><a href="#'+cleanedName+'">'+rawName+'</a>'+'</li>');
  if($(this).is('h2')) contentLine.addClass('layer2');
  $('.table-contents').append(contentLine);
});




</script>

</body>
</html>
