post.hbs

{{!< default}}

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

<header class="site-header">
  {{> site-header}}
</header>

{{!-- Everything inside the #post tags pulls data from the post --}}
{{#post}}

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

      <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

        <header v-pre class="post-full-header">

          {{#if primary_tag}}
            <section class="post-full-all-tags">
              {{#foreach tags}}
                <a href="{{url}}" title="{{name}}" class="tag post-card-primary-tag {{slug}}">{{name}}</a>{{#unless @last}}
                +{{/unless}}
              {{/foreach}}
            </section>
          {{/if}}

          <h1 class="post-full-title">{{title}}</h1>

          {{#if custom_excerpt}}
            <p class="post-full-custom-excerpt">{{custom_excerpt}}</p>
          {{/if}}

          <div class="post-full-byline">

            <section class="post-full-byline-content">

              <ul class="author-list">
                {{#foreach authors}}
                  <li class="author-list-item">
                    {{#if profile_image}}
                      <a href="{{url}}" class="author-avatar">
                        <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}"/>
                      </a>
                    {{else}}
                      <a href="{{url}}" class="author-avatar author-profile-image">{{> icons/avatar}}</a>
                    {{/if}}
                  </li>
                {{/foreach}}
              </ul>

              <section class="post-full-byline-meta">
                <h4 class="author-name">{{authors}}</h4>
                <div class="byline-meta-content">
                  <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date
                    format="D MMM YYYY"}}</time>
                  <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
                </div>
              </section>

            </section>


          </div>
        </header>

        {{#if feature_image}}
          <figure v-pre class="post-full-image">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
              srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 600w,
                            {{img_url feature_image size="l"}} 1000w,
                            {{img_url feature_image size="xl"}} 2000w"
              sizes="(max-width: 800px) 400px,
                        (max-width: 1170px) 1170px,
                            2000px"
              src="{{asset "default-close-tag@2x.png"}}"
              onerror="this.classList.add('empty'); this.removeAttribute('srcset')"
              alt="{{title}}"
            />
          </figure>
        {{/if}}
        {{#unless feature_image}}
          {{> inject/image-placeholder-meta }}
        {{/unless}}

        <section v-pre class="post-full-content">
          <div class="post-content">
            {{content}}
          </div>
        </section>

        <section v-pre class="post-full-content post-full-tg">
          <hr/>
          {{> subscribe-callout }}
          {{! Ads after content}}
          <div>
            <small style="color: #aaa; text-align: center; display:block;">{{t 'sponsor'}}</small>
            {{> widget-ads}}
          </div>
        </section>
      </article>

    </div>
  </main>
  <hr/>
  {{!-- Links to Previous/Next posts --}}
  <aside v-pre class="read-next outer">
    <div class="inner">
      <div class="read-next-feed">
        {{#if primary_tag}}
          {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
            {{#if related_posts}}
              <article class="read-next-card">
                <header class="read-next-card-header">
                  {{#../primary_tag}}
                    <h3><span>{{t 'More in'}}</span> <a href="{{url}}">{{name}}</a></h3>
                  {{/../primary_tag}}
                </header>
                <div class="read-next-card-content">
                  <ul>
                    {{#foreach related_posts}}
                      <li>
                        <h4><a href="{{url}}">{{title}}</a></h4>
                        <div class="read-next-card-meta">
                          <p>
                            <time datetime="{{date format="YYYY-MM-DD"}}">{{date format="D MMM YYYY"}}</time>
                            –
                            {{reading_time}}</p>
                        </div>
                      </li>
                    {{/foreach}}
                  </ul>
                </div>
                <footer class="read-next-card-footer">
                  <a href="{{#../primary_tag}}{{url}}{{/../primary_tag}}">{{plural meta.pagination.total
                                                                                   empty=(t 'No posts') singular=(t '% post')
                                                                                   plural=(t 'See all % posts')}}
                    →</a>
                </footer>
              </article>
            {{/if}}
          {{/get}}
        {{/if}}

        {{!-- If there's a next post, display it using the same markup included from - partials/post-card.hbs --}}
        {{#next_post}}
          {{> "post-card"}}
        {{/next_post}}

        {{!-- If there's a previous post, display it using the same markup included from - partials/post-card.hbs --}}
        {{#prev_post}}
          {{> "post-card"}}
        {{/prev_post}}
      </div>
    </div>
  </aside>

{{/post}}