<html lang="en">
{{> head }}
<body>
  {{> header }}

  <div class="container">
    <section>
      <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
        <a href="/" class="back-to-blog" title="Return to all posts">←</a>

        <h2 class="post-title" itemprop="name headline">
          <a class="post-link" href="{{ path }}">{{ title }}</a> {{> share }}
        </h2>

        <div class="post-meta feather_type">
          <span>
            <time datetime="{{moment this.date 'YYYY-MM-DD' }}">
              {{moment this.date 'dddd, Do MMMM YYYY' }}
            </time>
          </span>
        </div>

        <div class="post-body" itemprop="articleBody">
          {{{ contents }}}
        </div>

      </article>
      <div class="center">
        {{> share shareText='Share this post'}}
      </div>
    </section>

    {{> footer }}
  </div>

  <link rel="stylesheet" href="/css/zenburn.css">
  <script type="text/javascript" src="/js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
  <script>
    var tweets = document.querySelectorAll(".tweet");
    for(var i=0; i<tweets.length; i++) {
      var tweet = tweets[i];
      var id = tweet.getAttribute("tweetID");

      twttr.widgets.createTweet(
        id, tweet,
        {
          conversation : 'none',
          cards: 'visible',
          linkColor: '#cc0000',
          theme: 'light',
          align: 'center'
        });
    }

  </script>
  <script>
    if (navigator.share) {
      [...document.querySelectorAll('.share')].forEach(function(shareButton) {
        shareButton.classList.add('show');
        shareButton.addEventListener('click', function(event) {
          event.preventDefault();
          navigator.share({
            title: document.title,
            url: window.location.url
          });
        });
      });
    }
  </script>
</body>
</html>