{% macro list_posts(pages) -%}
<ul>
  {%- for page in pages %}
  {%- if page.draft %}
  {%- continue -%}
  {% endif -%}
  <li class="post-list-item">
    <h2 class="title">
      <a href={{ page.permalink | safe }}>{{ page.title }}</a>
    </h2>
    {%- if page.description %}
    <div class="description">
      {{ page.description }}
    </div>
    {%- elif page.summary %}
    <div class="description">
      {{ page.summary }}&hellip;
    </div>
    {%- endif %}
    <div class="meta">
      posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
    </div>
    {{- post_macros::tags(page=page) -}}
  </li>
  {% endfor -%}
</ul>
{% endmacro list_posts -%}

{%- macro tags(page) %}
{%- if page.taxonomies and page.taxonomies.tags %}
<span class="meta post-tags-inline">
  <span>tagged with </span>
  {%- for tag in page.taxonomies.tags %}
  <a class="post-tag" href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
  {%- if not loop.last %},{% endif -%}
  {% endfor %}
</span>
{% endif -%}
{% endmacro tags -%}

{%- macro page_header(title) -%}
<h1 class="page-header">{{ title }}<span class="primary-color header-dot">.</span></h1>
{%- endmacro content %}

{% macro content(page) %}
<article>
  <div class="title">
    {{ post_macros::page_header(title=page.title) }}
    {%- if page.date %}
    <div class="meta">
      Posted on <time>{{ page.date | date(format="%Y-%m-%d") }}</time>
      {%- if page.draft %}
      <span class="draft-label">DRAFT</span>
      {% endif -%}
    </div>
    {% if page.updated %}
    <div class="meta">
      Updated on <time>{{ page.updated | date(format="%Y-%m-%d") }}</time>
    </div>
    {% endif -%}
    <div class="meta">
      {{ page.word_count }} words, {{ page.reading_time }} minute read
    </div>
    {% endif -%}
  </div>
  {{ post_macros::hero(page=page) }}
  {%- if page.extra.tldr %}
  <div class="tldr">
    <strong>tl;dr:</strong>
    {{ page.extra.tldr }}
  </div>
  {% endif -%}
  {# Optional table of contents #}
  {%- if page.extra.toc | default(value=false) %}
  {%- if page.toc -%}
  <h2>Table of Contents</h2>
  <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>
        </li>
        {%- if h2.children %}
        <ul>
          {%- for h3 in h2.children %}
          <li>
            <a href="{{ h3.permalink | safe }}">{{ h3.title }}</a>
          </li>
          {% endfor -%}
        </ul>
        {% endif -%}
        {% endfor -%}
      </ul>
      {% endif -%}
    </li>
    {% endfor -%}
  </ul>
  {%- endif -%}
  {% endif -%}
  <section class="body">
    {{ page.content | safe -}}
  </section>
  {%- if page.taxonomies and page.taxonomies.tags %}
  <div class="post-tags">
    <span class="meta" id="tagged-with-label">this post is tagged with</span>
    <nav class="nav tags" aria-labelledby="tagged-with-label">
      <ul class="tags">
        {%- for tag in page.taxonomies.tags -%}
        <li>
          <a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}">#{{ tag }}</a>
        </li>
        {% endfor -%}
      </ul>
    </nav>
  </div>
  {% endif -%}
</article>
{% endmacro content -%}

{% macro hero(page) %}
{%- if page.extra.hero %}
  <figure>
    <img width=1024 height=512 class="hero" alt="{{ page.extra.heroPrompt }} - generated using Stable Diffusion" src=hero.webp />
    <figcaption>
      <p><i>{{ page.extra.heroPrompt }}</i> - generated using Stable Diffusion</p>
    </figcaption>
  </figure>
{% endif -%}
{% endmacro hero -%}