{% extends "index.html" %}
{% import "post_macros.html" as post_macros %}

{% block title -%}
<title>{{page.title}} | {{config.title}}</title>
<meta property="og:title" content="{{page.title}} | {{config.title}}" />
<meta name="twitter:title" content="{{page.title}} | {{config.title}}" />
{%- endblock title %}

{% block description -%}
{% if page.summary -%}
<meta name="description" content="{{ page.summary | linebreaksbr | replace(from="<br>", to=" ") | striptags | trim |
safe }}">
<meta property="og:description" content="{{ page.summary | linebreaksbr | replace(from="<br>", to=" ") | striptags |
trim | safe }}">
<meta name="twitter:description" content="{{ page.summary | linebreaksbr | replace(from="<br>", to=" ") | striptags |
truncate(length=200) | trim | safe }}">
{% else %}
<meta name="description" content="{{ page.content | linebreaksbr | replace(from="<br>", to=" ") | striptags |
truncate(length=280) | trim | safe }}">
<meta property="og:description" content="{{ page.content | linebreaksbr | replace(from="<br>", to=" ") | striptags |
truncate(length=280) | trim | safe }}">
<meta name="twitter:description" content="{{ page.content | linebreaksbr | replace(from="<br>", to=" ") | striptags |
truncate(length=280) | trim | safe }}">
{%- endif %}
{%- endblock description %}

{% block content %}
<article class="p-article">
  <header>
    <h1>{{ page.title | markdown | striptags }}</h1>
    <div>
      <div class="c-time">

        <time datetime="{{ page.date | date(format=" %F") | safe }}">
          {{ page.date | date(format="%F") }}
        </time>
        {% if page.extra.author -%}
        by {{ page.extra.author}}
        {%- endif %}
        {{ " - " }}({{ page.reading_time }} min read)
      </div>
    </div>
  </header>
  {% if page.toc and page.extra.toc -%}
  <div class="toc">
    <strong>Contents</strong>
    <div>
      <nav id="TableOfContents">
        <ul>
          {% for h1 in page.toc %}
          <li>
            <a href="{{h1.permalink | safe}}">{{ h1.title }}</a>
            {% if h1.children %}
            <ul>
              {% for h2 in h1.children %}
              <li>
                <a href="{{h2.permalink | safe}}">{{ h2.title }}</a>
                {% if h2.children %}
                <ul>
                  {% for h3 in h2.children %}
                  <li>
                    <a href="{{h3.permalink | safe}}">{{ h3.title }}</a>
                  </li>
                  {% endfor %}
                </ul>
                {% endif %}
              </li>
              {% endfor %}
            </ul>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </nav>
    </div>
  </div>
  {%- endif %}
  <section id="js-article" class="p-article__body">
    {{ page.content | safe }}
  </section>
  <footer>
    <nav class="c-pagination p-pagination">
      <div class="c-pagination__ctrl">
        <div class="c-pagination__newer">
          {% if page.later -%}
          <a href="{{ page.later.permalink }}">{{ page.later.title }}</a>
          {%- endif %}
        </div>
        <div class="c-pagination__older">
          {% if page.earlier -%}
          <a href="{{ page.earlier.permalink }}">{{ page.earlier.title }}</a>
          {%- endif %}
        </div>
      </div>
    </nav>
  </footer>
</article>
{%- endblock content %}
{% block webring -%}
{%- endblock webring %}