lewisdale.dev/src/_includes/post.njk
2023-11-29 08:34:39 +00:00

90 lines
3.5 KiB
Plaintext

---
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>