---
layout: "layout.njk"
---
<article>
    {% if tags and 'blog' in tags %}
    <div>
        <a href="/blog">
        <i class="fas fa-arrow-left mr-2"></i>
        Back to all posts
        </a>
    </div>
    {% endif %}
    <h1>{{ title }}</h1>
    <div class="post-meta flex flex-col md:flex-row md:items-center text-gray-400">
        <!--- Date Section -->
        <div class="flex items-center mb-1">
            <i class="fas fa-fw fa-calendar-alt mr-2"></i>
            <span>Published on {{ page.date | readableDate }}</span>
        </div>
        <!--- Views Section -->
        <span class="hidden md:inline mx-2 text-gray-600">•</span>
        <div class="flex items-center mb-1">
            <i class="fas fa-fw fa-eye mr-2"></i>
            <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views</span>
        </div>
        <!--- Comments Section -->
        <!---
        <span class="hidden md:inline mx-2 text-gray-600">•</span>
        <div class="flex items-center mb-1">
            <i class="fas fa-fw fa-comments mr-2"></i>
            <a href="#disqus_thread">Comments</a>
        </div>
         -->
        <!--- Likes Section -->
        <span class="hidden md:inline mx-2 text-gray-600">•</span>
        <div class="flex items-center mb-1">
            <i class="fas fa-fw fa-heart like-icon mr-2" data-like-button data-slug="{{ page.fileSlug }}"></i>
            <span class="like-count" data-like-count data-slug="{{ page.fileSlug }}">No likes</span>
        </div>
    </div>
    <br/>
    {{ content | safe }}
</article>
<script src="/js/like-button.js"></script>
<script src="/js/view-counter.js"></script>
<div id="bottom"></div>

## References: 

1. <https://www.11ty.dev/docs/languages/markdown/>