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 class="page-header__heading">{{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}}
            <a href="{{url}}">
              <img class="post-header__author-image" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
            </a>
            {{/if}}
            {{/foreach}}
          </div>
          <div class="post-header__author-names">
            {{#has author="count:>2"}}
            Multiple authors
            {{else}}
            {{#foreach authors}}
            <a href="{{url}}" title="{{name}}" class="post-header__author-name">{{name}}</a>
            {{/foreach}}
            {{/has}}
          </div>
        </div>
        {{/if}}
        {{#if feature_image_caption}}
        <p class="post-header__caption">
          <span class="post-header__caption-text">
            {{feature_image_caption}}
          </span>
        </p>
        {{/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-indicator">Previous post</p>
          <p class="post-navigator__nav-title">{{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-indicator">Next post</p>
          <p class="post-navigator__nav-title">{{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" include="tags" filter="tags:{{primary_tag.slug}}+id:-{{id}}" limit="3" as |related_posts|}}
    {{#if related_posts}}
    <div class="post-list">
      <div>
        More in
        {{#../primary_tag}}
        <a href="{{url}}">
          {{#if accent_color}}
          <span class="tag__color" style="background-color: {{accent_color}};"></span>
          {{else}}
          <span class="tag__color"></span>
          {{/if}}
          <span class="tag__name">{{name}}</span>
        </a>
        {{/../primary_tag}}
      </div>
      {{#foreach related_posts}}
      {{> post-card}}
      {{/foreach}}
    </div>
    {{/if}}
    {{/get}}
    {{/if}}
  </div>
  {{/post}}

  {{#contentFor "scripts"}}
  <script>
  </script>
  {{/contentFor}}