{% extends 'main.html' %}
{% block description %}{{ metadata.description }}{% endblock %}
{% block head %}
{% if metadata.gallery %}
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            post_gallery = new Viewer(document.getElementById('article'), {
                'url': 'realsrc',
                'title': false
            });
        });
    </script>
{% endif %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": {{ metadata.title | tojson }},
  "datePublished": "{{ metadata.date }}",
  "image": "https://jakec.tech/image/{{ metadata.image }}",
  "timeRequired": "PT{{ get_readtime_mins(post) }}M",
  "author": {
    "@type": "Person",
    "name": "Jake Charman",
    "url": "https://jakec.tech/"
  },
  "mainEntityOfPage": "https://jakec.tech/projects/{{ metadata.id }}"
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem", "position": 1, "name": "Projects", "item": "https://jakec.tech/projects/"},
    {"@type": "ListItem", "position": 2, "name": {{ metadata.title | tojson }}, "item": "https://jakec.tech/projects/{{ metadata.id }}"}
  ]
}
</script>
{% endblock %}

{% block content %}
<main>
    <section id="article">
        <h1>{{ metadata.title}} </h1>
        <p>{{ get_readtime(post) }} read</p>
        <p>{{ metadata.date | human_date }}</p>
        <hr />
        {{post|safe}}
    </section>
</main>
{% endblock %}