---
layout: base.njk
---

<div class="mx-auto grid max-w-screen-xl grid-flow-col md:grid-cols-content gap-8">
  {% if toc %}
    <aside>
      {{ content | toc | safe }}
    </aside>
  {% endif %}

  <article class="blogpost justify-items-center">
    <h1 class="text-4xl">{{ title }}</h1>
    <aside class="not-prose space-y-4 text-base">
      <ul class="postmeta">
        <li>
          {% lucide "calendar", {"size": "20"} %}
          <time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
            {{ page.date | readableDate }}
          </time>
        </li>
        <li>
          {% lucide "user", {"size": "20"} %}
          <a href="{{ author.href }}">{{ author.name }}</a>
        </li>
        <li>
          {% lucide "glasses", {"size": "20"} %}
          {{ content | readingtime }}
        </li>
      </ul>
      {% if tags.length > 0 %}
        <ul class="tags">
          {% for tag in tags %}
            <li class="tag">
              {% lucide "tag", {"size": "20"} %}
              {{ tag }}
            </li>
          {%- endfor %}
        </ul>
      {% endif %}
    </aside>

    {% if image and image.src != '' %}
      <img src="{{ image.src }}" alt="{{ image.alt }}">
    {% endif %}

    {{ content | safe }}
  </article>
</div>