---
layout: default
current: post
class: post-template
disqus: false
---

<!-- default -->

<!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template -->

<header class="site-header outer">
    <div class="inner">
        {% include site-nav.html %}
    </div>
</header>

<!-- Everything inside the #post tags pulls data from the post -->
<!-- #post -->

<main id="site-main" class="site-main outer" role="main">
    <div class="inner">

        <article class="post-full {% if page.tags.size > 0 %}{% for tag in page.tags %} tag-{{ tag | slugify: "latin" }}{% endfor %}{% endif %} {{ page.subclass }} {% unless page.cover %}no-image{% endunless %}">

            <header class="post-full-header">
                <section class="post-full-meta">
                    <time class="post-full-meta-date" datetime="{{ page.date | date:'%e %B %Y' }}">{{ page.date | date:'%e %B %Y' }}</time>
                    {% if page.tags.size > 0 %}
                        <span class="date-divider">/</span>
                        {% for tag in page.tags %}
                            {% if forloop.index == page.tags.size %}
                               <a href='{{ site.baseurl }}tag/{{ tag | slugify: "latin" }}/'>{{ tag | upcase }}</a>
                            {% else %}
                               <a href='{{ site.baseurl }}tag/{{ tag | slugify: "latin" }}/'>{{ tag | upcase }}</a>,
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                </section>
                <h1 class="post-full-title">{{ page.title }}</h1>
            </header>

            {% if page.cover %}
            <figure class="post-full-image" style="background-image: url({{ site.baseurl }}{{ page.cover }})">
            </figure>
            {% endif %}

            <section class="post-full-content">
                <div class="kg-card-markdown">
                    {{ content }}
                </div>
            </section>

            <!-- Email subscribe form at the bottom of the page -->
            {% if site.subscribers %}
                <section class="subscribe-form">
                    <h3 class="subscribe-form-title">Subscribe to {{ site.title }}</h3>
                    <p>Get the latest posts delivered right to your inbox</p>
                    {% include subscribe-form.html placeholder="youremail@example.com" %}
                </section>
            {% endif %}

            <footer class="post-full-footer">
                <!-- Everything inside the #author tags pulls data from the author -->
                <!-- #author-->
                {% for author in site.data.authors %}
                    {% if author[1].username == page.author %}
                        <section class="author-card">
                            {% if author[1].picture %}
                                <img class="author-profile-image" src="{{ site.baseurl }}{{ author[1].picture }}" alt="{{ page.author }}" />
                            {% endif %}
                            <section class="author-card-content">
                                <h4 class="author-card-name"><a href="{{ site.baseurl }}author/{{ page.author }}">{{ author[1].name }}</a></h4>
                                {% if author[1].bio %}
                                    <p>{{ author[1].bio }}</p>
                                {% else %}
                                    <p>Read <a href="{{ site.baseurl }}author/{{ page.author }}">more posts</a> by this author.</p>
                                {% endif %}
                            </section>
                        </section>
                        <div class="post-full-footer-right">
                            <a class="author-card-button" href="{{ site.baseurl }}author/{{ page.author }}">Read More</a>
                        </div>
                    {% endif %}
                {% endfor %}
                <!-- /author  -->
            </footer>

            <!-- If you use Disqus comments, just uncomment this block.
            The only thing you need to change is "test-apkdzgmqhj" - which
            should be replaced with your own Disqus site-id. -->
            {% if site.disqus or page.disqus %}
                <section class="post-full-comments">
                    <div id="disqus_thread"></div>
                    <script>
                        var disqus_config = function () {
                            var this_page_url = '{{ site.url }}{{ page.url }}';
                            var this_page_identifier = '{{ page.id }}';
                            var this_page_title = '{{ page.title }}';
                        };
                        (function() {
                            var d = document, s = d.createElement('script');
                            s.src = 'https://{{ site.disqus_shortname }}.disqus.com/embed.js';
                            s.setAttribute('data-timestamp', +new Date());
                            (d.head || d.body).appendChild(s);
                        })();
                    </script>
                </section>
            {% endif %}

        </article>

    </div>
</main>

<!-- Links to Previous/Next posts -->
<aside class="read-next outer">
    <div class="inner">
        <div class="read-next-feed">
            {% if page.tags.size > 0 %}
                {% assign primary = page.tags | first %}
                {% assign related_posts = 0 %}
                {% for post in site.posts %}
                  {% if post.tags.size > 0 %}
                      {% if post.tags contains primary %}
                        {% assign related_posts = related_posts | plus: 1 %}
                      {% endif %}
                  {% endif %}
                {% endfor %}
                {% if related_posts > 1 %}
                    <article class="read-next-card"
                        {% if site.cover %}
                            style="background-image: url({{ site.baseurl }}{{ site.cover }})"
                        {% else %}
                            {% if page.cover %}
                                style="background-image: url(url({{ site.baseurl }}{{ page.cover }})"{% endif %}
                        {% endif %}
                    >
                        <header class="read-next-card-header">
                            <small class="read-next-card-header-sitetitle">&mdash; {{ site.title }} &mdash;</small>
                            {% if primary %}
                                <h3 class="read-next-card-header-title"><a href="{{ site.baseurl }}tag/{{ primary | slugify: "latin" }}/">{{ primary | capitalize }}</a></h3>
                            {% endif %}
                        </header>
                        <div class="read-next-divider">{% include infinity.html %}</div>
                        <div class="read-next-card-content">
                            <ul>
                                {% assign count = 0 %}
                                {% for post in site.posts %}
                                  {% if post.tags contains primary %}
                                    {% if post.title != page.title %}
                                        {% assign count = count | plus: 1 %}
                                        {% if count <= 3 %}
                                            <li><a href="{{ site.baseurl }}{{ post.url | remove_first: '/' }}">{{ post.title }}</a></li>
                                        {% endif %}
                                    {% endif %}
                                  {% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                        <footer class="read-next-card-footer">
                            <a href="{{ site.baseurl }}tag/{{ primary | slugify: "latin" }}/">
                                {% if related_posts > 1 %}
                                    See all {{ related_posts | minus: 1 }} posts  →
                                {% elsif related_posts == 1 %}
                                    {{ related_posts }} post  →
                                {% else %}
                                    No posts.
                                {% endif %}
                            </a>
                        </footer>
                    </article>
                {% endif %}
            {% endif %}

            <!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs -->
            {% if page.next %}
                {% include post-card-next.html %}
            {% endif %}

            <!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs -->
            {% if page.previous %}
                {% include post-card-previous.html %}
            {% endif %}

        </div>
    </div>
</aside>

<!-- Floating header which appears on-scroll, included from includes/floating-header.hbs -->
{% include floating-header.html %}

<!-- /post -->

<!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs -->
