{% 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 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 type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
{% endif %}
{% endblock %}
{% block main %}
{# Content Banner Image (optional) #}
{# Add 'banner_image' to your content front matter to display #}
{% if content.banner_image %}
<div class="item-banner">
<img src="{{content.banner_image}}" alt="{{content.title}}" />
</div>
{% endif %}
{# Main Article Content with IndieWeb h-entry #}
<article class="content-article 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 %}
{# Draft Warning #}
{% 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 %}
{# Content Title #}
<header class="content-header">
<h1 class="content-title">{{ content.title }}</h1>
{# Content Metadata (for posts with dates) #}
{% if content.date %}
{# Calculate reading time #}
{% set words = content.html | striptags | split(pat=' ') | length %}
{% set reading_time = (words / 200) | round(method='ceil') %}
<div class="content-meta">
<time class="content-date" datetime="{{ content.date | date(format='%+') }}">
{{ content.date | default_date_format }} - ⧖ {{ reading_time }} min
</time>
{# Authors with IndieWeb h-card #}
{% if content.authors %}
<div class="content-authors">
by
{% for author in content.authors %}
{% set slug = "author-" ~ author | trim | slugify %}
{% set link = slug ~ ".html"%}
<span class="h-card p-author"><a href="{{url_for(path=link)}}" class="item-author p-name u-url">{{ author }}</a></span>{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</header>
{# Series information (if content is part of a series) #}
{% if content.series %}
<div class="content-series">
<p><em>Published as part of '<a href="{{ url_for(path='series-' ~ content.series ~ '.html') }}">{{ series_display_name(series=content.series) }}</a>' series.</em></p>
</div>
{% endif %}
{# Table of Contents (if enabled and available) #}
{% if content.toc %}
<div class="content-toc">
<details>
<summary>📋 Table of Contents</summary>
{{ content.toc }}
</details>
</div>
{% endif %}
{# Main Content Body with IndieWeb e-content #}
<div class="content-body e-content">
{{ content.html }}
</div>
{# Content Footer with Tags and Stream info #}
{% if content.date %}
<footer class="content-footer">
{# Tags #}
{% if content.tags %}
<div class="content-tags">
<span class="tags-label">Tags:</span>
{% for tag in content.tags %}
{% set slug = "tag-" ~ tag | trim | slugify %}
{% set link = slug ~ ".html"%}
<a href="{{url_for(path=link)}}" class="tag-link p-category">{{ tag }}</a>{% if not loop.last %}, {% endif %}
{% endfor %}
</div>
{% endif %}
{# Stream info (if not the default 'index' stream) #}
{% if content.stream and content.stream != "index" %}
<div class="content-stream">
{% set slug = content.stream | trim | slugify %}
{% set link = slug ~ ".html"%}
<a href="{{url_for(path=link)}}" class="stream-link">{{ stream_display_name(stream=content.stream) }}</a>
</div>
{% endif %}
</footer>
{% endif %}
</article>
{# Related Content Section (if enabled and not part of a series) #}
{% if site.enable_related_content and not content.series %}
{# Back-links - other content that links to this content #}
{% if content.back_links %}
<section class="related-content">
<h3>Referenced by:</h3>
<ul class="backlinks-list">
{% for item in content.back_links | slice(end=5) %}
<li><a href="{{url_for(path=item.slug ~ '.html')}}">{{item.title}}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{# Related content by tags #}
{% if content.tags %}
{% set tag = content.tags[0] %}
{% set tag_slug = tag | slugify %}
{% set related_content = site_data.tag.map[tag_slug] %}
{% if related_content | length > 1 %}
<section class="related-content">
<h3>Related "{{ tag }}" content:</h3>
<ul class="related-list">
{% for item in related_content | sort(attribute="date") | reverse | slice(end=5) %}
{% if item.slug == content.slug %}{% continue %}{% endif %}
<li><a href="{{url_for(path=item.slug ~ '.html')}}">{{item.title}}</a></li>
{% endfor %}
</ul>
</section>
{% endif %}
{% endif %}
{% endif %}
{# Previous/Next Navigation (for stream-based content) #}
{% if site.show_next_prev_links and (content.previous or content.next) %}
<nav class="content-navigation">
<div class="nav-previous">
{% if content.previous %}
<a href="{{url_for(path=content.previous.slug ~ '.html')}}" class="nav-link">
← {{ content.previous.title }}
</a>
{% endif %}
</div>
<div class="nav-next">
{% if content.next %}
<a href="{{url_for(path=content.next.slug ~ '.html')}}" class="nav-link">
{{ content.next.title }} →
</a>
{% endif %}
</div>
</nav>
{% endif %}
{# Comments Section #}
{# Create content/_comments.md to add comment system integration #}
{% if comments is defined %}
<section class="content-comments">
{{ comments }}
</section>
{% 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 scripts %}
{{ super() }}
{%if content.extra.mermaid %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.3.0/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 %}