---
layout: default
---

<article class="prose max-w-none">
    <header class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-2">{{ page.title }}</h1>
        <div class="flex items-center text-sm text-gray-500">
            <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
            <span class="mx-2">•</span>
            <span>{{ page.author }}</span>
            {% if page.categories %}
            <span class="mx-2">•</span>
            <div class="flex space-x-2">
                {% for category in page.categories %}
                <a href="{{ '/categories/' | append: category | relative_url }}" class="text-blue-600 hover:text-blue-800">
                    {{ category }}
                </a>
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </header>

    <div class="content">
        {{ content }}
    </div>

    {% if page.tags %}
    <footer class="mt-8 pt-4 border-t border-gray-200">
        <div class="flex flex-wrap gap-2">
            {% for tag in page.tags %}
            <a href="{{ '/tags/' | append: tag | relative_url }}" class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm hover:bg-gray-200">
                #{{ tag }}
            </a>
            {% endfor %}
        </div>
    </footer>
    {% endif %}
</article>