<!DOCTYPE html>
<html>
<head>
  <title>Wroten - {{name}}</title>

  <link href="./assets/stylesheet.css" rel="stylesheet" type="text/css">
  <link href="./assets/highlightjs-dracula.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Slabo+27px|Source+Code+Pro|Source+Sans+Pro:300" rel="stylesheet"> 

  <meta charset="UTF-8">
  <meta name="author" content="Jo Wroten">
  <meta name="description" content="Web engineer realizing the best tools to communicate valuable information to the people who need it.">
  <meta name="keywords" content="developer,designer,engineer,web,portfolio">
  <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes">
</head>
<body class="interior -{{pageType}}">
  <header class="interior-header">
    <div class="interior-topbar -container -pad-h -pad-v">
      <a href="/">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <use xlink:href="./assets/spritesheet.svg#back" />
        </svg>
      </a>
      <a href="#" class="about-link" onclick="document.getElementById('about').classList.toggle('open')">
        <img class="about-link-image" src="./assets/avatar-small.png" alt="About Jo Wroten" />
      </a>
    </div>
    <div class="interior-headline -{{pageType}} -pad-h -pad-v">
      <h1 class="-container">
        <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="./assets/spritesheet.svg#{{pageType}}" />
        </svg>
        {{name}}
      </h1>
    </div>
  </header>
  <div class="popup" id="about">
    {{> about}}
  </div>
  <main class="interior-content -container -pad-h -pad-v">
    <article>
      <header class="-clearfix">
        <h2 class="interior-description">
          {{description}}
        </h2>
        <div class="interior-info">
          <ul class="tags interior-tags">
            {{#each repositoryTopics.edges}}
              <li class="-left"><span class="tag"><!--<a href="#" class="tag">-->{{this.node.topic.name}}<!--</a>--></span>
            {{/each}}
          </ul>
          <div class="interior-link">
            <a href={{url}}>
              {{#if organization}}
                {{organization}}
              {{else}}
                Github Repo
              {{/if}}
            </a>
          </div>
        </div>
      </header>
      {{{readme.html}}}
    </article>
  </main>


  {{> footer}}

  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
