Yuika/post.hbs

{{!< default}} {{#post}} <div class="relative group index-header">
  {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background
  image--}}
  <div class="h-full opacity-50 bg-black">
  </div>
  </div>
  <div class="absolute bottom-0 py-4 left-0 right-0">
    <div class="container mx-auto content-full">
      <div class="flex">
        {{> primary-tag}}
      </div>
      <div>
        <h1 class="text-white font-light text-3xl md:text-4xl">{{title}}</h1>
      </div>
      <div class="mb-4">
        <p><span class="text-white text-sm"><time datetime="{{date format=" YYYY-MM-DD"}}">{{date format="D MMM
              YYYY"}}</time> <span class="bull">&bull;</span> {{reading_time}}</span></p>
      </div>
      <div class="author-list text-base text-white">
        <div class="author-images">
          {{#foreach authors}}
          {{#if profile_image}}
          <div class="h-8 ml-1 mr-3">
            <a href="{{url}}">
              <img class="h-full rounded-full" src="{{img_url profile_image size=" xs"}}" alt="{{name}}" />
            </a>
          </div>
          {{/if}}
          {{/foreach}}
        </div>
        <div class="author-names">
          <div>
            <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

  <article class="post-article">
    <main class="content container" id="post">
      <div class="content-full">
        {{#if access}}
        {{content}}
        {{else}}
        <div class="w-full py-8 text-center bg-yuika-blue-700 text-white md:px-8">
          <h1>Access level insufficient</h1>
          {{#has visibility="paid"}}
          <h2>Access level: Autonomous System</h2>
          <p>By subscribing as an Autonomous System, you can unlock access to the contents of this post, get additional benefits and support me at the same time!</p>
          <div class="flex justify-center">
            <a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
              href="/subscribe">
              Become a member now
            </a>
          </div>
          {{/has}}
          {{#has visibility="members"}}
          <h2>Access level: Subscriber</h2>
          <p>Subscribing gives you access to the contents of this post, and get notified on subsequent posts!</p>
          <div class="flex justify-center">
            <a class="px-4 py-2 bg-white border-yuika-blue-500 border appearance-none focus:outline-none border-yuika-blue-700 rounded-none hover:bg-yuika-blue-500 transition duration-300 ease-in-out"
              href="/subscribe">
              Subscribe now 
            </a>
          </div>
          {{/has}}
        </div>
        {{/if}}
      </div>
    </main>
    <div class="my-4 w-full content-full">
      <div class="flex flex-col md:flex-row justify-between">
        {{#prev_post}}
        <a href="{{url}}"
          class="block w-full md:w-1/3 flex flex-row items-center justify-start md:justify-end hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
          <span class="material-icons mr-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_back</span>
          <div class="flex flex-col items-start md:items-end ">
            <p class="text-xl text-yuika-blue-700 group-hover:text-white">Previous post</p>
            <p>{{title}}</p>
          </div>
        </a>
        {{/prev_post}}
        <div class="flex flex-grow"></div>
        {{#next_post}}
        <a href="{{url}}"
          class="block w-full md:w-1/3 flex flex-row items-center justify-end md:justify-start hover:text-white hover:bg-yuika-blue-700 transition duration-500 ease-in-out group py-4 px-4 hover:no-underline">
          <div class="flex flex-col items-end md:items-start">
            <p class="text-xl text-yuika-blue-700 group-hover:text-white">Next post</p>
            <p>{{title}}</p>
          </div>
          <span class="material-icons ml-4 text-yuika-blue-700 text-2xl group-hover:text-white">arrow_forward</span>
        </a>
        {{/next_post}}
      </div>
    </div>
    <div class="my-4 w-full content-full">
      <div class="my-4" id="comments">
        {{#is "preview"}}
        <p>Comments are disabled for post previews</p>
        {{else}}
        {{!-- Comments --}}

        {{/is}}
      </div>
    </div>
    <div class="mx-auto px-4 my-4 w-full">
      {{#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="grid grid-rows-3 grid-cols-1 row-gap-4 my-4">
        {{#foreach related_posts}}
        {{> post-card}}
        {{/foreach}}
      </div>
      {{/if}}
      {{/get}}
      {{/if}}
    </div>
    {{/post}}
  </article>

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