Yuika/post.hbs

{{!< default}}

{{#post}}
<article>
<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 group-hover:opacity-75 transition-opacity">
    </div>
  </div>
  <div class="absolute bottom-0 py-6 px-6">
    {{#if primary_tag}}
    {{#primary_tag}}
    <div>
      <a href="{{url}}"><p class="bg-green-500 w-auto inline-block px-2 py-1 text-white text-sm">{{name}}</p></a>
    </div>
    {{/primary_tag}}
    {{/if}}
    <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="flex flex-row">
        {{#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>
          {{else}}
            <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
          {{/if}}   
        {{/foreach}}
        <div class="text-white">
          <p>{{#has author="count:>2"}}Multiple authors{{else}}{{authors}}{{/has}}</p>
        </div>
      </div>
  </div>
  <div class="w-full flex flex-row justify-begin items-center absolute top-0 index-navbar">
  {{> "site-header"}}
  </div>
</div>

<main class="container md:w-4/5 lg:w-4/6 md:mx-auto px-6 my-6" id="post">
    <div>
      {{content}}
    </div>
</main>
<div class="container md:w-4/5 lg:w-4/6 md:mx-auto px-6 my-6">
    <div class="my-4" id="comments">
    </div>
    <div class="my-4 flex flex-row justify-between">
      {{#prev_post}}
      <div class="w-1/3">
      <a href="{{url}}">
      <div class="flex flex-col items-end">
        <p class="text-xl text-blue-500">Previous post</p>
        <p>{{title}}</p>
      </div>
      </a>
      </div>
      {{/prev_post}}
      {{#next_post}}
      <div class="w-1/3">
      <a href="{{url}}">
      <div class="flex flex-col items-begin">
        <p class="text-xl text-blue-500">Next post</p>
        <p>{{title}}</p>
      </div>
      </a>
      </div>
      {{/next_post}}
    </div>
</div>
{{/post}}
</article>

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

    $(document).ready(function () {
        
        var nav = document.querySelector('.index-navbar');
        var feed = document.querySelector('#post');

        var lastScrollY = window.scrollY;
        var lastWindowHeight = window.innerHeight;
        var lastDocumentHeight = $(document).height();
        var ticking = false;

        function onScroll() {
            lastScrollY = window.scrollY;
            requestTick();
        }

        function onResize() {
            lastWindowHeight = window.innerHeight;
            lastDocumentHeight = $(document).height();
            requestTick();
        }

        function requestTick() {
            if (!ticking) {
                requestAnimationFrame(update);
            }
            ticking = true;
        }

        function update() {
            var trigger = feed.getBoundingClientRect().top + window.scrollY;
            var progressMax = lastDocumentHeight - lastWindowHeight;

            // show/hide nav
            if (lastScrollY >= trigger - 20) {
                nav.classList.add('fixed');
                nav.classList.add('nav-fixed');
                nav.classList.remove('absolute');
            } else {
                nav.classList.remove('fixed');
                nav.classList.remove('nav-fixed');
                nav.classList.add('absolute');
            }

            ticking = false;
        }

        window.addEventListener('scroll', onScroll, { passive: true });
        window.addEventListener('resize', onResize, false);

        update();

    });

</script>
{{/contentFor}}