my-website/templates/page.html

{% extends "base.html" %}

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

{% block head_extra %}
    {% if page.description %}
        <meta name="description" content="{{ page.description | safe }}">
    {% endif %}
{% endblock head_extra %}


{% block content %}

<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-center">
    {{ page.title }}
</h1>

<p class="subtitle">
    {% if page.updated %}
    Last Updated:
    <strong class="text-sky-400">
        <time datetime="{{ page.updated | date(format="%Y-%m-%d") }}">
            {{ page.updated | date(format="%B %d, %Y") }}
        </time>
    </strong>
    {% else %}
    <strong class="text-sky-400">
        <time datetime="{{ page.date | date(format="%Y-%m-%d") }}">
            {{ page.date | date(format="%B %d, %Y") }}
        </time>
    </strong>
    {% endif %}
</p>

{% if page.extra.image %}
    {% set image = page.extra.image %}
    {% if image is starting_with("http") %}
        {% set image_url = image %}
    {% else %}
        {% set image_url = get_url(path=image) %}
    {% endif %}

    <div class="flex justify-center my-4">
        <img
            src="{{ image_url | safe }}"
            alt="{{ page.title }}"
            class="max-w-full max-h-100 object-cover border border-gray-600 rounded-2xl"
            loading="lazy"
            decoding="async"
            onclick="openFullscreenImage(this)"
        />
    </div>
{% endif %}

<div class="mt-6 text-xl text-gray-300">
    {{ page.content | safe }}
</div>
{% endblock content %}