83 lines
4.3 KiB
Plaintext
83 lines
4.3 KiB
Plaintext
{% extends "layouts/base.njk" %}
|
|
|
|
{% block body %}
|
|
<article class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
|
|
<p class="text-sm font-medium uppercase tracking-wide text-zinc-500">{{ post.categories | join(", ") }}</p>
|
|
<h1 class="mt-2 font-[Source_Serif_4] text-4xl font-semibold leading-tight text-zinc-900">{{ post.title }}</h1>
|
|
<p class="mt-3 text-zinc-600">{{ post.excerpt }}</p>
|
|
|
|
{% if post.featuredImage %}
|
|
<img src="{{ post.featuredImage.url }}" alt="{{ post.featuredImage.alt }}" class="mt-4 w-full rounded-xl border border-zinc-200 object-cover" />
|
|
{% endif %}
|
|
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
{% for tag in post.tags %}
|
|
<span class="inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700">#{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<p class="mt-3 text-sm text-zinc-500">Views: {{ post.views }}</p>
|
|
|
|
<div class="mt-5 space-y-4 text-zinc-700 [&_a]:text-teal-700 [&_a]:underline [&_blockquote]:border-l-4 [&_blockquote]:border-zinc-300 [&_blockquote]:pl-4 [&_h1]:font-[Source_Serif_4] [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:font-[Source_Serif_4] [&_h2]:text-2xl [&_h2]:font-semibold [&_h3]:font-[Source_Serif_4] [&_h3]:text-xl [&_h3]:font-semibold [&_li]:ml-5 [&_li]:list-disc [&_p]:leading-7">
|
|
{{ contentHtml | safe }}
|
|
</div>
|
|
|
|
<div hx-post="/blog-posts/public/{{ post.slug }}/view" hx-trigger="load" hx-swap="none"></div>
|
|
</article>
|
|
|
|
<section class="grid items-start gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm">
|
|
<div class="mb-4 flex flex-wrap items-center justify-between gap-2">
|
|
<h2 class="font-[Source_Serif_4] text-3xl font-semibold text-zinc-900">More from the blog</h2>
|
|
<a class="rounded-lg bg-teal-600 px-4 py-2 text-sm font-semibold text-white no-underline transition hover:bg-teal-700" href="/">Back to Home</a>
|
|
</div>
|
|
|
|
{% if relatedPosts and relatedPosts.length > 0 %}
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
{% for related in relatedPosts %}
|
|
<article class="rounded-xl border border-zinc-200 bg-zinc-50/60 p-4">
|
|
<div class="mb-2 flex flex-wrap gap-1.5">
|
|
{% for cat in related.categories %}
|
|
<span class="inline-flex items-center rounded-full border border-teal-200 bg-teal-50 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-teal-700">{{ cat }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
<h3 class="font-[Source_Serif_4] text-xl font-semibold leading-tight text-zinc-900">
|
|
<a href="/blog/{{ related.slug }}" class="transition hover:text-teal-700">{{ related.title }}</a>
|
|
</h3>
|
|
<p class="mt-2 text-sm text-zinc-600">{{ related.excerpt }}</p>
|
|
<p class="mt-2 text-xs text-zinc-500">{{ related.views }} views</p>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
|
|
<p class="text-sm text-zinc-600">No related posts yet. Try exploring tags and categories from the home page.</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<aside class="grid gap-4">
|
|
<section class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
|
|
<h3 class="font-[Source_Serif_4] text-2xl font-semibold text-zinc-900">Popular Posts</h3>
|
|
<div class="mt-3 grid gap-2">
|
|
{% for item in popularPosts %}
|
|
<a href="/blog/{{ item.slug }}" class="flex items-center justify-between rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm font-medium text-zinc-700 no-underline transition hover:border-teal-500 hover:text-teal-700">
|
|
<span>{{ item.title }}</span>
|
|
<strong class="text-zinc-500">{{ item.views }}</strong>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm">
|
|
<h3 class="font-[Source_Serif_4] text-2xl font-semibold text-zinc-900">Tags</h3>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
{% for tag in topTags %}
|
|
<a class="rounded-full border border-teal-200 bg-teal-50 px-2.5 py-1 text-xs font-medium text-teal-700 no-underline transition hover:border-teal-400 hover:bg-teal-100" href="/?tags={{ tag.name | urlencode }}">#{{ tag.name }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
</aside>
|
|
</section>
|
|
{% endblock %}
|