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

  <div class="container">
    <section>
      <article class="post" itemscope itemtype="http://schema.org/BlogPosting">

        <h2 class="post-title" itemprop="name headline">
          <a class="post-link" href="/{{ path }}/">{{ title }}</a>
        </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" async defer>
  <script type="text/javascript" src="/js/highlight.min.js"></script>
  <script type="text/javascript" src="/js/terraform.js"></script>
  <script type="text/javascript" src="/js/promql.js"></script>
  <script>
    hljs.registerLanguage('terraform', window.hljsDefineTerraform);
    hljs.registerLanguage('promql', window.hljsDefinePromQL);
    hljs.highlightAll();
  </script>

  <script>
    if (navigator.share) {
      [].slice.call(document.querySelectorAll('.share')).forEach(function(shareButton) {
        shareButton.classList.remove('hide');
        shareButton.addEventListener('click', function(event) {
          event.preventDefault();
          navigator.share({
            title: document.title,
            url: window.location.href
          });
        });
      });
    }

    [...document.querySelectorAll('figure img')].forEach(function(img) {
      img.style.cursor = "pointer";
      img.addEventListener('click', function() {
        window.open(img.getAttribute("src"), "_blank");
      });
    });
  </script>
</body>
</html>
