Yuika/post.hbs

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

  <div class="page-header page-header--short">
    <div class="page-header__background">
      <div class="page-header__overlay"></div>
    </div>
    <div class="page-header__contents">
    </div>
  </div>

  <div class="post-header container mx-auto main">
    {{> primary-tag}}
    <h1 class="post-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}}
    <figure class="post-header__featured-image">
      <img src="{{feature_image}}" alt="{{feature_image_alt}}" loading="lazy">
      {{#if feature_image_caption}}

      <figcaption>{{feature_image_caption}}</figcaption>
      {{/if}}
    </figure>

    {{/if}}
  </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}}