---
layout: base.njk
includePrism: true
eleventyComputed:
    title: "{{ post.title.rendered | safe }}"
    description: "{{ post.yoast_head_json.description }}"
---
<main class="wrapper-md stack-lg">
    <article class="stack-md h-entry">
        <h1 class="p-name"><a href="{{ post.url }}" class="u-url">{{ title | safe }}</a></h1>
        <p class="published">Published: <time class="dt-published" datetime="{{ post.date | rfc3339 }}">{{ post.date | dateDisplay }}</time></p>
        {{ post.excerpt.rendered | safe }}
        <div class="e-content stack-md">
        {{ content | safe }}
        </div>
        {% if post.tags | length %}
        <section>
            <h2>Tags:</h2>
            <ul role="list">
                {% for tag in post.tags %}
                    <li><a class="p-category" href="/post/tag/{{ tag.slug }}" rel="tag">#{{ tag.name }}</a></li>
                {% endfor %}
            </ul>
        </section>
        {% endif %}
    </article>

    <section class="p-author h-card" data-section="author">
      <h2>About the author</h2>
      {% image metadata.author.avatar, "My face", "box circle u-photo", "(max-width: 500px) 50px, 100px", [50, 100] %}

      <p class="p-note">I'm <a href="https://{{metadata.site.domain}}" class="u-url p-name">Lewis Dale</a>, a software engineer and web developer based in the UK. I write about writing software, silly projects, and cycling. A lot of cycling. Too much, maybe.</p>
    </section>

    <section class="stack-sm" data-section="responses">
        <h2>Responses</h2>
        
        {% if post.comments.like | length %}
        <div class="stack-xs">
            <h3 class="block w-full">Likes</h3>

            <div class="row overlaps">
            {% for like in post.comments.like %}
                <a href="{{ like.author.url }}" rel="noreferrer" target="_blank">
                    {% remoteImage(like.author.avatars["96"], like.author.name, "circle", "96px", [96] %}
                </a>
            {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if post.comments.repost | length %}
        <div class="stack-xs">
            <h3 class="block w-full">Reposts</h3>

            <div class="row overlaps">
            {% for repost in post.comments.repost %}
                <a href="{{ repost.author.url }}" rel="noreferrer" target="_blank">
                    {% remoteImage(repost.author.avatars["96"], repost.author.name, "circle", "96px", [96] %}
                </a>
            {% endfor %}
            </div>
        </div>
        {% endif %}

        {% if post.comments.comment | length %}
        <div class="stack-xs">
            <h3 class="block w-full">Replies</h3>

            <ol class="stack-md">
                {% for reply in post.comments.comment | reverse %}

                <li class="sidebar items-center">
    
                    <div class="stack-2xs basis-[50ch]">
                        {% set date = reply.date | parseDate %}
                        <h4><a href="{{ reply.author.url }}" rel="noreferrer" target="_blank">{{ reply.author.name }}</a> <span class="font-normal">on</span> {{ date | dateDisplay }} <span class="font-normal">at</span> {{ date | timeDisplay }}</h4>
                        <a href="{{ reply.canonical }}" rel="noreferrer" target="_blank">Original comment</a>
                        <p>{{ reply.content | safe }}</p>
                    </div>
                </li>
                {% endfor %}
            </ol>
        </div>
        {% endif %}

    </section>

</main>