{% extends "base.html" %}
{% block seo %}
<meta property="og:title" content="{{content.title}}">
{% if content.description %}
<meta property="og:description" content="{{ content.description | replace(from='"', to="") | truncate(length=100, end="...") }}">
{% else %}
<meta property="og:description" content="{{ content.html | striptags | trim_start_matches(pat=content.title) | truncate(length=100, end="...") }}">
{%- endif %}
{% if content.card_image %}
<meta property="og:image" content="{{url_for(path=content.card_image, abs=true)}}">
{% elif site.card_image %}
<meta property="og:image" content="{{url_for(path=site.card_image, abs=true)}}">
{% endif %}
{% if site.url %}
<meta property="og:url" content="{{url_for(path=content.slug, abs=true)}}.html">
{% endif %}
<meta property="og:type" content="article">
<meta property="og:site_name" content="{{site.name}}">
{% if content.date %}
<meta property="article:published_time" content="{{content.date | date(format=' %+')}}">
{% endif %}
{% if site.url and content.authors %}
<meta property="article:author" content="{{url_for(path='author-' ~ content.authors[0] ~ '.html', abs=true)}}">
{% endif %}
{% include "json_ld_content.html" ignore missing%}
{% endblock %}
{% block head %}
{{ super() }}
{% if content.at_uri %}
<link rel="site.standard.document" href="{{ content.at_uri }}">
{% endif %}
{% if not site.code_highlight or site.code_highlight.enabled %}
<link rel="stylesheet" href="{{ url_for(path='static/arborium.css') }}" />
{% endif %}
{%if content.extra.math %}
<script>
window.MathJax = {tex: {inlineMath: [['$','$'], ['\\(','\\)']]}};
</script>
<script type="text/javascript" src="{{ url_for(path='static/vendor/tex-mml-svg.js') }}">
</script>
{% endif %}
{% endblock %}
{% block main %}
{% if content.banner_image %}
<div class="content-banner-image" style="background-image: url({{content.banner_image}});"></div>
{% endif %}
<article class="h-entry">
<data class="p-name" value="{{ content.title }}"></data>
<a class="u-url" href="{{url_for(path=content.slug ~ '.html')}}" style="display: none;"></a>
{% if content.date %}
<time class="dt-published" datetime="{{ content.date | date(format='%+') }}" style="display: none;">{{ content.date | default_date_format }}</time>
{% endif %}
{% if content.stream == "draft" %}
<div class="draft-warning" style="background-color: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; margin-bottom: 20px; color: #856404;">
<strong>⚠️ Draft Post:</strong> This post is a draft and may not be complete yet.
</div>
{% endif %}
{% include "content_title.html" ignore missing %}
{% if content.series %}
<div class="content-series">
<p><small>Published as part of '<a href="{{ url_for(path='series-' ~ content.series ~ '.html') }}">{{ series_display_name(series=content.series) }}</a>' series.</small></p>
</div>
{% endif %}
{% if content.translations | length > 0 %}
<div class="content-translations">
<p><small>Also available in:
{% for t in content.translations %}
<a href="{{ url_for(path=t.slug ~ '.html') }}" hreflang="{{ t.lang }}">{{ t.name }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</small></p>
</div>
{% endif %}
{% if content.toc %}
<div class="content-toc">
<a href="#" id="toc"></a>
<details>
<summary>🗒️</summary>
{{ content.toc }}
</details>
</div>
{% endif %}
<div class="content-html e-content">{{ content.html }}</div>
{% if content.date %}
<footer class="data-tags-footer">
<div class="content-authors-flex">
<div class="content-authors-full">
{% include "content_authors.html" ignore missing %}
</div>
<div class="date-tags-container">
<div class="content-date">
{% include "content_date.html" ignore missing %}
{% if content.stream and content.stream != "index" %}
<div class="content-stream">
{% set slug = content.stream | trim | slugify %}
{% set link = slug ~ ".html"%}
<small><a href="{{url_for(path=link)}}">{{ stream_display_name(stream=content.stream) }}</a></small>
</div>
{% endif %}
</div>
<ul class="content-tags">
{% for tag in content.tags %}
{% set slug = "tag-" ~ tag | trim | slugify %}
{% set link = slug ~ ".html"%}
<li><a href="{{url_for(path=link)}}" class="p-category">{{ tag }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</footer>
{% endif %}
</article>
{% if site.enable_related_content and not content.series %}
{% if content.back_links %}
<article>
Back-links
<ul>
{% for item in content.back_links[:10] %}
<li><a href="{{url_for(path=item.slug ~ '.html')}}">{{item.title}}</a></li>
{% endfor %}
</ul>
</article>
{% endif %}
{% if content.tags %}
{# Only the first tag for now #}
{% set tag = content.tags[0] %}
{% set tag_slug = tag | slugify %}
{% set related_content = site_data.tag.map[tag_slug] %}
{% if related_content | length > 1 %}
<article>
Related {{tag}} content
<ul>
{% for item in (related_content | sort(attribute="date") | reverse)[:5] %}
{% if item.slug == content.slug or item in content.back_links or item.language != content.language %}
{% continue %}
{% endif %}
<li><a href="{{url_for(path=item.slug ~ '.html')}}">{{item.title}}</a></li>
{% endfor %}
</ul>
</article>
{% endif %}
{% endif %}
{% endif %}
{% if site.show_next_prev_links and (content.previous or content.next) %}
<article>
<nav style="display: flex; justify-content: space-between;">
<div>
{% if content.previous %}<a href="{{url_for(path=content.previous.slug ~ '.html')}}">← {{ content.previous.title }}</a>{% endif %}
</div>
<div>
{% if content.next %}<a href="{{url_for(path=content.next.slug ~ '.html')}}">{{ content.next.title }} →</a>{% endif %}
</div>
</nav>
</article>
{% endif %}
{% if comments is defined %}
<article>{{ comments }}</article>
{% elif site?.extra?.comments?.source is defined and content.date %}
{%include "comments.html" ignore missing %}
{% endif %}
{% if content.source_path is string and (site.publish_md or site.source_repository) %}
<article>
<div class="content-source">
{% set source_url = source_link(content=content) %}
{% if source_url %}
<a href="{{url_for(path=source_url)}}" rel="nofollow">📄 View source</a>
{% endif %}
</div>
</article>
{% endif %}
{% endblock %}
{% block tail %}
{{ super() }}
{%if content.extra.mermaid and not site.native_mermaid_render %}
<script src="{{ url_for(path='static/vendor/mermaid.min.js') }}"></script>
<script>
var config = {
startOnLoad: true,
theme: '{{content.extra.mermaid_theme | default(value="default") }}',
flowchart: { useMaxWidth: false, htmlLabels: true }
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>
{% endif %}
{% endblock %}