{% import "macros.html" as macros %}

{% extends "layout.html" %}

{% block title %}{{ page.title }} - {{ config.title }}{% endblock %}

{% block metadata %}
    <meta property="og:url" content="{{ page.permalink }}" />
    <meta property="og:title" content="{{ page.title }}" />
    <meta property="og:description" content="{{ page.summary | default(value="") | striptags }}" />
    <meta property="og:type" content="article" />
    <meta property="og:locale" content="en_AU" />
    {% if page.colocated_path %}
      {% set cover_path = "/" ~ page.colocated_path ~ "cover.jpg" %}
      {% if cover_path in page.assets %}
        {% set cover_url = get_url(path=cover_path) %}
        <meta property="og:image" content="{{ cover_url }}" />
        <meta name="twitter:image" content="{{ cover_url }}" />
        <meta name="twitter:card" content="summary_large_image" />
      {% else %}
        <meta name="twitter:card" content="summary" />
      {% endif %}
    {% else %}
      <meta name="twitter:card" content="summary" />
    {% endif %}
    <meta name="twitter:creator" content="{{ config.extra.twitter_name }}" />
{% endblock %}

{% block body %}
<h1 class="logo"><a href="{{ config.base_url }}/" class="no-border hover-underline">👨‍💻 {{ config.title }}</a></h1>

<nav>
  {% for ancestor in page.ancestors %}
    {% set section = get_section(path=ancestor) %}
    {% if section.path == "/" %}
      <a href="{{ config.base_url }}{{ section.path }}" class="no-border hover-underline">Home</a>
    {% else %}
      <span class="breadcrumb-sep">/</span>
      <a href="{{ config.base_url }}/{{ section.path }}" class="no-border hover-underline">{{ section.title }}</a>
    {% endif %}
  {% endfor %}
</nav>

<article id="{{ page.slug }}">
  <h2>
    <a href="{{ page.permalink }}">{{ page.title }}</a>
  </h2>
  {% if page.date %}
  <div class="post-metadata">
    <div class="date-published">
      <svg class="date-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" version="1.1" x="0px" y="0px"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M38.6172116,78.6191533 L47.8030928,78.6191533 L47.8030928,69.4332721 L38.6172116,69.4332721 L38.6172116,78.6191533 Z M24.8586734,78.6191533 L34.0445546,78.6191533 L34.0445546,69.4332721 L24.8586734,69.4332721 L24.8586734,78.6191533 Z M66.1332478,64.2656288 L75.319129,64.2656288 L75.319129,55.0797476 L66.1332478,55.0797476 L66.1332478,64.2656288 Z M52.3757498,64.2656288 L61.561631,64.2656288 L61.561631,55.0797476 L52.3757498,55.0797476 L52.3757498,64.2656288 Z M38.6172116,64.2656288 L47.8030928,64.2656288 L47.8030928,55.0797476 L38.6172116,55.0797476 L38.6172116,64.2656288 Z M24.8586734,64.2656288 L34.0445546,64.2656288 L34.0445546,55.0797476 L24.8586734,55.0797476 L24.8586734,64.2656288 Z M66.1332478,49.9110641 L75.319129,49.9110641 L75.319129,40.7251829 L66.1332478,40.7251829 L66.1332478,49.9110641 Z M52.3757498,49.9110641 L61.561631,49.9110641 L61.561631,40.7251829 L52.3757498,40.7251829 L52.3757498,49.9110641 Z M38.6172116,49.9110641 L47.8030928,49.9110641 L47.8030928,40.7251829 L38.6172116,40.7251829 L38.6172116,49.9110641 Z M24.8586734,49.9110641 L34.0445546,49.9110641 L34.0445546,40.7251829 L24.8586734,40.7251829 L24.8586734,49.9110641 Z M13.1607434,90.8382164 L87.7337471,90.8382164 L87.7337471,30.2016227 L13.1607434,30.2016227 L13.1607434,90.8382164 Z M13.1617836,26.0408793 L87.7347873,26.0408793 L87.7347873,16.2662529 L13.1617836,16.2662529 L13.1617836,26.0408793 Z M73.5237682,12.1055095 L73.5237682,5 L69.3630249,5 L69.3630249,12.1055095 L31.5314656,12.1055095 L31.5314656,5 L27.3707222,5 L27.3707222,12.1055095 L9,12.1055095 L9,95 L91.8955307,95 L91.8955307,12.1055095 L73.5237682,12.1055095 Z" fill="currentColor"/></g></svg>
      <time datetime="{{ page.date }}">{{ page.date | date(format="%d %B %Y") }}</time>
    </div>
    {%- if page.extra.updated %}
    <div class="date-updated">
      <span class="ornament">&middot;</span><em><span class="updated small-caps">updated</span>
        <time datetime="{{ page.extra.updated }}">{{ page.extra.updated | date(format="%d %B %Y") }}</time>
      </em>
    </div>
    {% endif %}
  </div>
  {% endif %}

  <div class="post-body">
    {{ page.content | replace(from="<!-- toc -->", to=macros::toc(page=page)) | safe }}
  </div>
  <div class="respond">
    <h3>
      <svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
          <path d="M2,3 L29,3 L29,20 L24,20 L16,28 L16,20 L2,20 L2,3 Z" id="comment" stroke="#484848" stroke-width="2" sketch:type="MSShapeGroup"></path>
        </g>
      </svg>
      Stay in touch!
    </h3>
    <p>
      Follow me on the <a href="https://mastodon.decentralised.social/@wezm">Fediverse</a>,
      <a href="{{ config.base_url }}/rss.xml">subscribe to the feed</a>,
      or <a href="mailto:wes@wezm.net">send me an email</a>.
    </p>
  </div>
</article>
{% endblock %}