{% extends "default" %}

{% block titlevariable %}
{% set title = metadata.title %}
{% endblock %}

{% block head -%}

<meta property="og:type" content="article">
{% if metadata.short_desc %}
    <meta property="og:description" content="{{ metadata.short_desc }}">
{% else %}
    <meta property="og:description" content="The outer part of a shadow is called the penumbra.">
{% endif %}

{%- endblock %}

{% block image %}
{% if metadata.card_image_path %}
    <meta property="twitter:image" content="https://{{ _domain }}{{ metadata.card_image_path }}">
    <meta property="og:image" content="https://{{ _domain }}{{ metadata.card_image_path }}">
{% else %}
    <meta property="twitter:image" content="https://{{ _domain }}/shadowfacts.png">
    <meta property="og:image" content="https://{{ _domain }}/shadowfacts.png">
{% endif %}
{% endblock %}

{% block content -%}

<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
    <meta itemprop="mainEntityOfPage" content="https://{{ _domain }}{{ _permalink }}">
    <h1 class="headline" itemprop="name headline">
        {% if metadata.html_title %}
            {{ metadata.html_title }}
        {% else %}
            {{ metadata.title }}
        {% endif %}
    </h1>
    <p class="article-meta">
        Published on
        <time itemprop="datePublished" datetime="{{ metadata.date | iso_datetime }}">
            {{ metadata.date | pretty_date }},
        </time>
        in
        {% for tag in metadata.tags %}
        <span itemprop="articleSection">
            <a href="/{{ tag.slug }}/">{{ tag.name }}</a>{% if loop.last %}.{% else %},{% endif %}
        </span>
        {% endfor %}
        <span title="{{ word_count }} word{% if word_count != 1 %}s{% endif %}">
            {{ word_count | reading_time }} minute read.
        </span>
    </p>
    <div class="body-content" itemprop="articleBody">
        {% if metadata.preamble %}
            {{ metadata.preamble }}
        {% endif %}
        {{ content }}
    </div>
</article>

{% if metadata.comments_post_id %}
<hr>
<script>
const commentsPostID = "{{ metadata.comments_post_id }}";
</script>
<details id="comments-container">
    <summary><h2>Comments</h2></summary>
    <p class="italic">Reply to this post <a href="https://social.shadowfacts.net/notice/{{ metadata.comments_post_id }}" target="_blank">via the Fediverse</a>.</p>
    <div id="comments-list"></div>
</details>
{% endif %}
<script src="/js/comments.js?{{ _stylesheet_cache_buster }}" async></script>

<hr>

{%- endblock %}