103 lines
4.1 KiB
Text
103 lines
4.1 KiB
Text
---
|
||
layout: layouts/base.njk
|
||
---
|
||
<a href="/blog/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mb-3">
|
||
← Back to Blog
|
||
</a>
|
||
|
||
<nav class="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
|
||
<ol class="flex space-x-2">
|
||
<li><a href="/" class="hover:text-blue-600">Home</a></li>
|
||
<li><span aria-hidden="true">›</span></li>
|
||
<li><a href="/blog/" class="hover:text-blue-600">Blog</a></li>
|
||
<li><span aria-hidden="true">›</span></li>
|
||
<li class="text-gray-900 dark:text-gray-100">{{ title }}</li>
|
||
</ol>
|
||
</nav>
|
||
|
||
<article class="h-entry">
|
||
{% if featuredImage %}
|
||
<img class="u-photo w-full rounded-lg mb-6" src="{{ featuredImage }}" alt="Featured image for {{ title }}" />
|
||
{% endif %}
|
||
|
||
<header class="mb-6">
|
||
<h1 class="p-name text-3xl font-bold mb-2">{{ title }}</h1>
|
||
{% if subtitle %}
|
||
<p class="text-xl text-gray-600 dark:text-gray-400 mb-4">{{ subtitle }}</p>
|
||
{% endif %}
|
||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||
Published on <time class="dt-published" datetime="{{ page.date }}">{{ page.date | readableDate }}</time>
|
||
by <span class="p-author h-card"><a class="u-url p-name hover:text-blue-600" href="/about/">{{ author or site.author }}</a></span>
|
||
• <span class="reading-time">{{ content | readingTime }} min read</span>
|
||
</div>
|
||
<a class="u-url hidden" href="{{ page.url }}">Permalink</a>
|
||
</header>
|
||
|
||
<div class="e-content prose max-w-none">
|
||
{{ content | safe }}
|
||
</div>
|
||
|
||
{% if tags %}
|
||
<div class="post-tags mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||
<h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-2">Tags</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
{% for tag in tags %}
|
||
<a class="p-category px-3 py-1 text-sm rounded-full text-white hover:opacity-80"
|
||
style="background-color: {{ tag | tagColor }}"
|
||
href="/tags/{{ tag | slug }}/">#{{ tag }}</a>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<section class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
|
||
{% include "partials/share-links.njk" %}
|
||
</section>
|
||
|
||
<section class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700">
|
||
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-6">
|
||
<div class="flex items-start space-x-4">
|
||
<img class="w-16 h-16 rounded-full" src="https://file.garden/Zw17vw8ctXTQw7PV/meicon.png" alt="{{ site.author }}" />
|
||
<div>
|
||
<h3 class="font-semibold text-lg">{{ site.author }}</h3>
|
||
<p class="text-gray-600 dark:text-gray-400 mt-1"></p>
|
||
<div class="mt-3 flex space-x-4 text-sm">
|
||
<a href="/about/" class="text-blue-600 hover:text-blue-800">More about me</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="mt-8">
|
||
{% if site.bio.long %}
|
||
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6 mb-8">
|
||
<h3 class="text-lg font-semibold mb-2">About {{ site.author }}</h3>
|
||
<p class="text-gray-700 dark:text-gray-300">
|
||
{{ site.bio.long }}
|
||
</p>
|
||
</div>
|
||
{% endif %}
|
||
{% if site.newsletter.enabled %}
|
||
<div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-6 text-center">
|
||
<h3 class="font-semibold text-lg mb-2">{{ site.newsletter.title }}</h3>
|
||
<p class="text-gray-600 dark:text-gray-400 mb-4">{{ site.newsletter.description }}</p>
|
||
<form action="{{ site.newsletter.action }}" method="post" class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
|
||
<input type="email" name="email" placeholder="your@email.com" class="flex-1 px-4 py-2 border rounded-lg" required />
|
||
<button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Subscribe</button>
|
||
</form>
|
||
</div>
|
||
{% endif %}
|
||
</section>
|
||
|
||
{% include "partials/related-posts.njk" %}
|
||
|
||
<section id="webmentions" class="mt-12">
|
||
<h2 class="text-xl font-semibold mb-4">Responses</h2>
|
||
<div id="webmentions-list">
|
||
<div class="text-center py-4 text-gray-500">
|
||
<div class="animate-pulse">Loading webmentions...</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</article>
|