{% extends "base.html" %}
{% block og_type %}article{% endblock og_type %}
{% block article_meta %}
<meta property="article:published_time" content="{{ created }}">
{% if updated %}<meta property="article:modified_time" content="{{ updated }}">{% endif %}
{% if author %}<meta property="article:author" content="{{ author.name }}">{% endif %}
{% for tag in tags %}<meta property="article:tag" content="{{ tag.name }}">{% endfor %}
{% endblock article_meta %}
{% block content %}
<article class="blog-post">
<header>
<h1>{{ title }}</h1>
<div class="post-meta">
{% if created %}<time>{{ created }}</time>{% endif %}
{% if updated %}<time>(updated {{ updated }})</time>{% endif %}
<span class="reading-time">ยท {{ reading_time_minutes }} min read</span>
{% if author %}
<span class="author">
{% if author.link %}<a href="{{ author.link }}" class="author-link">{% endif %}
{% if author.image %}
<img src="{{ author.image }}" alt="{{ author.name }}" class="author-avatar">
{% else %}
<svg class="author-avatar" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="16" fill="#e0e0e0" />
<circle cx="16" cy="12" r="5" fill="#9e9e9e" />
<path d="M6 28c0-5.5 4.5-10 10-10s10 4.5 10 10" fill="#9e9e9e" />
</svg>
{% endif %}
{{ author.name }}
{% if author.link %}</a>{% endif %}
</span>
{% endif %}
</div>
{% if description %}<p class="post-description">{{ description }}</p>{% endif %}
{% if tags | length > 0 %}
<ul class="tag-list">
{% for tag in tags %}
<li><a href="/tags/{{ tag.slug }}/">{{ tag.name }}</a></li>
{% endfor %}
</ul>
{% endif %}
</header>
{% if image %}
<img src="{{ image }}" alt="" class="post-hero">
{% endif %}
<div class="post-layout">
{% if toc | length > 0 %}
<aside class="toc">
<h2>Contents</h2>
<ul>
{% for entry in toc %}
<li class="toc-h{{ entry.level }}"><a href="#{{ entry.id }}">{{ entry.text }}</a></li>
{% endfor %}
</ul>
</aside>
{% endif %}
<div class="post-body">
{{ content | safe }}
</div>
</div>
{% if newer_post or older_post %}
<nav class="post-nav" aria-label="Adjacent posts">
{% if newer_post %}
<a class="post-nav-newer" rel="prev" href="{{ newer_post.url | safe }}">
<span class="post-nav-label">← Newer</span>
<span class="post-nav-title">{{ newer_post.title }}</span>
{% if newer_post.created %}<time>{{ newer_post.created }}</time>{% endif %}
</a>
{% endif %}
{% if older_post %}
<a class="post-nav-older" rel="next" href="{{ older_post.url | safe }}">
<span class="post-nav-label">Older →</span>
<span class="post-nav-title">{{ older_post.title }}</span>
{% if older_post.created %}<time>{{ older_post.created }}</time>{% endif %}
</a>
{% endif %}
</nav>
{% endif %}
</article>
{% endblock content %}