layout: default


{% if page.image %}

{% capture page_image %}
  {{ page.image | relative_url | default: '' }}
{% endcapture %}

{% capture page_image_alt %}
  {{ page.image_alt | default: 'page image default alt' }}
{% endcapture %}

{% capture page_image_caption %}
  {{ page.image_caption | default: '' }}
{% endcapture %}

{% endif %}

{% assign blog_author = site.data.blog.authors %} {% capture bl_au_avatar %} {{ '/assets/images/' | relative_url | append: blog_author.avatar }} {% endcapture %}

{% capture bl_au_av_alt %} {{ blog_author.name }} avatar. {% endcapture %}

<section class=“container mt-3 blog-post”>

<div class="row">
  <div class="col-md-8 pb-3">
    {% if page.show_hero and page_image %}
    <!-- post hero -->
    <figure class="figure">
      <img class="img-fluid shadow-sm rounded mb-2 blog-post-hero-img" src="{{ page_image | strip }}"
        alt="{{ page_image_alt | strip }}">
      <figcaption class="figure-caption text-center">{{ page_image_caption | strip }}</figcaption>
    </figure>
    {% endif %}
    <!-- post title -->
    <h1>{{ page.title }}</h1>
    <p class="font-italic text-muted">{{ page.date | date: "%b %-d, %Y" }}</p>
    {% if page.show_author %}
    <!-- post author, share -->
    <div class="row align-items-center py-2 border-top border-bottom blog-post-author">
      <div class="col-auto pr-0 pb-1">
        <img src="{{ bl_au_avatar | strip }}" alt="{{ bl_au_av_alt | strip }}"
          class="rounded-circle shadow-sm blog-post-author-avatar ">
      </div>
      <div class="col pr-0 pb-1">
        <p class="blog-post-author-name p-0 m-0">{{ blog_author.name }}</p>
        <p class="blog-post-author-headline p-0 m-0">{{ blog_author.headline }}</p>
      </div>
      <div class="col-auto justify-content-end blog-post-author-follow">
        <div class="dropdown">
          <button class="btn btn-outline-info dropdown-toggle" type="button" id="followMenuButton"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Follow</button>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="followMenuButton">
            {% for follow in blog_author.follow %}
            <a class="dropdown-item pb-2 text-info" href="{{ follow.url }}"><i
                class="{{ follow.icon }}"></i>{{ follow.label }}</a>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% if page.show_toc %}
    <!-- post TOC -->
    <nav class="border mt-3 d-inline-block rounded">
      <div class="p-1 bg-info text-white">
        <i class="fas fa-list"></i>
        <span class="pl-1">Contents</span>
      </div>
      <div class="blog-post-toc m-1">
        {% include toc.html html=content %}
      </div>
    </nav>
    {% endif %}
    <!-- Post content -->
    <article class="mt-3 blog-post-article">
      {{ content }}
    </article>
    {% if page.share %}
    <div class="blog-post-social-share">
      {% include social-share.html %}
    </div>
    {% endif %}
  </div>
  <!-- blog post sidebar -->
  <div class="col-md-4 blog-post-sidebar">
    {% include blog-post-sidebar.html %}
  </div>
</div>
<div class="row mt-3">
  <div class="col-md-8">
    {% if page.show_comments %}
    <!-- Post comments -->
      {%- include comments.html -%}
    {% endif %}
  </div>
</div>

</section>