Yuika/post.hbs

{{!< default}} {{#post}} <div class="relative group index-header">

  {{> header-background background=feature_image}}
  <div class="page-header">
    <div class="page-header__background responsive-header-img">
      <div class="page-header__overlay"></div>
    </div>
    <div class="page-header__contents">
      <div class="post-header container mx-auto main">
        {{> primary-tag}}
        <h1>{{title}}</h1>
        <p class="post-header__time">
          <span>
            <time datetime="{{date format=" YYYY-MM-DD"}}">
              {{date format="D MMM YYYY"}}
            </time>
            <span class="bull">&bull;</span>
            {{reading_time}}
          </span>
        </p>
        {{#if authors}}
        <div class="post-header__author-list">
          <div class="post-header__author-images">
            {{#foreach authors}}
            {{#if profile_image}}
            <div class="post-header__author-image">
              <a href="{{url}}">
                <img src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
              </a>
            </div>
            {{/if}}
            {{/foreach}}
          </div>
          <div class="post-header__author-names">
            <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
          </div>
        </div>
        {{/if}}
      </div>
    </div>
  </div>

  <main id="post" class="container mx-auto main">
    {{content}}
  </main>

  <div class="container mx-auto main">
    <div class="post-navigator">
      {{#prev_post}}
      <a href="{{url}}" class="post-navigator__nav post-navigator__nav--previous-post">
        <span class="material-icons post-navigator__icon">arrow_back</span>
        <div class="post-navigator__nav-content post-navigator__nav-content--previous-post">
          <p class="post-navigator__nav-title">Previous post</p>
          <p>{{title}}</p>
        </div>
      </a>
      {{/prev_post}}
      <div class="flex flex-grow"></div>
      {{#next_post}}
      <a href="{{url}}" class="post-navigator__nav post-navigator__nav--next-post">
        <div class="post-navigator__nav-content post-navigator__nav-content--next-post">
          <p class="post-navigator__nav-title">Next post</p>
          <p>{{title}}</p>
        </div>
        <span class="material-icons post-navigator__icon">arrow_forward</span>
      </a>
      {{/next_post}}
    </div>
  </div>
  <div id="comments" class="container mx-auto main">
    {{#is "preview"}}
    <p>Comments are disabled for post previews</p>
    {{else}}
    {{!-- Comments --}}

    {{/is}}
  </div>
  <div class="container mx-auto">
    {{#if primary_tag}}
    {{#get "posts" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
    {{#if related_posts}}
    {{#../primary_tag}}
    <div class="px-3 w-full">
      <p class="text-2xl">
        More in
        <a href="{{url}}">
          {{#if accent_color}}
          <span class="tag-accent-color medium" style="background-color: {{accent_color}};"></span>
          {{else}}
          <span class="tag-accent-color medium"></span>{{name}}
          {{/if}}
          <span class="hover:underline">{{name}}</span>
        </a>
      </p>
    </div>
    {{/../primary_tag}}
    <div class="post-list">
      {{#foreach related_posts}}
      {{> post-card}}
      {{/foreach}}
    </div>
    {{/if}}
    {{/get}}
    {{/if}}
  </div>


  {{/post}}
  {{#contentFor "scripts"}}
  <script>
    $(document).ready(function () {
      // FitVids - start
      var $postContent = $("#post");
      $postContent.fitVids();
      // FitVids - end
    });
  </script>
  {{/contentFor}}