lewisdale.dev/src/_includes/post.njk

---
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 }}">{{ title | safe }}</a></h1>
        {{ post.excerpt.rendered | safe }}
        <div class="e-content stack-md">
        {{ content | safe }}
        </div>
    </article>

    <section class="stack-sm">
        <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">
                    <img src="{{ like.author.avatars["96"] }}" alt="{{ like.author.name }}" class="circle" />
                </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 like in post.comments.repost %}
                <a href="{{ like.author.url }}" rel="noreferrer" target="_blank">
                    <img src="{{ like.author.avatars["96"] }}" alt="{{ like.author.name }}" class="circle" />
                </a>
            {% endfor %}
            </div>
        </div>
        {% endif %}

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

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

                <li class="sidebar items-center">
                    <a href="{{ like.author.url }}" class="self-start" rel="noreferrer" target="_blank">
                        <img src="{{ reply.author.avatars["96"] }}" alt="{{ reply.author.name }}" class="max-w-[4rem] box" />
                    </a>
                    <div class="stack-2xs basis-[50ch]">
                        {% set date = reply.date | parseDate %}
                        <h4>{{ reply.author.name }} <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>