{% extends "base.html" %}

{% block title %}{{ page.title }} | {{ config.title }}{% endblock title %}

{% block head %}
  <!-- SEO Schema JSON-LD -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    "headline": "{{ page.title }}",
    {% if page.date %}"datePublished": "{{ page.date }}",{% endif %}
    "author": {
      "@type": "Person",
      "name": "{{ config.extra.author | default(value="Author") }}"
    }
  }
  </script>
  {% if page.extra.math %}
  <link rel="stylesheet" href="{{ get_url(path="css/katex/katex.min.css") }}">
  <script defer src="{{ get_url(path="js/katex/katex.min.js") }}"></script>
  <script defer src="{{ get_url(path="js/katex/auto-render.min.js") }}"
      onload="renderMathInElement(document.body);"></script>
  {% endif %}

  {% if page.extra.mermaid %}
  <script type="module">
    import mermaid from '{{ get_url(path="js/mermaid.min.js") }}';
    mermaid.initialize({ startOnLoad: true, theme: 'dark' });
  </script>
  {% endif %}

{% endblock head %}

{% block content %}
<article class="post-detail">
    <header class="post-header">
        <h1 class="post-title">{{ page.title }}</h1>
        <div class="post-meta">
            {% if page.date %}
            <time datetime="{{ page.date }}">{{ page.date | date(format="%B %e, %Y") }}</time>
            {% endif %}
        </div>
    </header>

    {% include "partials/toc.html" %}

    <div class="post-body">
        {{ page.content | safe }}
    </div>

    {% include "partials/post-nav.html" %}

    <footer class="post-footer">
        <div class="post-tags">
            {% if page.taxonomies.tags %}
                {% for tag in page.taxonomies.tags %}
                    <span class="tag">#{{ tag }}</span>
                {% endfor %}
            {% endif %}
        </div>
        
        <!-- Utterances comments (posts only) -->
        {% include "partials/comments.html" %}
    </footer>
</article>
{% endblock content %}