Yuika/post.hbs

87 lines
2.5 KiB
Handlebars

{{!< default}}
{{#post}}
<article>
<div class="h-64 relative group">
{{> 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>
<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
});
</script>
{{/contentFor}}