---
layout: base.njk
---
{% css %}{% include "css/post.css" %}{% endcss %}
{% css %}{% include "css/highlighting.css" %}{% endcss %}
{% css %}{% include "css/lists.css" %}{% endcss %}
{% css %}{% include "css/modal.css" %}{% endcss %}
{% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
{% js %}{% include "js/modal.js" %}{% endjs %}

<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
  <article>
    <h1>{{ title }}</h1>

    <div class="post-metadata">
      <p>
        posted on
        <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
        by {{ metadata.author }}
      </p>
      {% set relevantTags = tags | removeBasicTags %}
      {% if relevantTags.length %}
      <ul class="post-tags">
        {% for tag in relevantTags %}
        <li>
          {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
          <a href="{{ tagUrl }}">{{ tag }}</a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
    </div>

    {% if image %}
		<dialog closedby="any" aria-label="image modal" tabindex="-1">
			<button class="close-dialog" autofocus aria-label="close the image modal">&times;</button>
	    <img class="modal-img" src="/img/{{ image.src }}" alt="{{ image.alt }}">
		</dialog>
    <img class="hero" src="/img/{{ image.src }}" alt="{{ image.alt }}">
    {% endif %}

    {{ content | safe }}
  </article>

  {% set olderPost = collections.posts | getPreviousCollectionItem %}
  {% set newerPost = collections.posts | getNextCollectionItem %}
  {% set olderHref = olderPost.url %}
  {% set newerHref = newerPost.url %}
  {% set olderTitle = olderPost.data.title %}
  {% set newerTitle = newerPost.data.title %}
  {% set inPost = true %}
  {% include "pagination.njk" %}

  <hr>

  {% set relevantTags = tags | removeBasicTags %}
  {% set postlist = collections.posts | filterByTags(relevantTags) | excludeFromCollection([page.url, olderHref, newerHref]) | randomize | head(3) %}
  {% if postlist.length %}
  <section class="related-posts">
    <h2 data-ha-exclude>related posts</h2>
    {% include "postlist.njk" %}
  </section>
  {% endif %}

</heading-anchors>
