mirror of https://github.com/Damillora/Yuika
111 lines
4.0 KiB
Handlebars
111 lines
4.0 KiB
Handlebars
{{!< default}}
|
|
|
|
{{#post}}
|
|
{{> "site-header"}}
|
|
<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">
|
|
{{#if primary_tag}}
|
|
{{#primary_tag}}
|
|
<div>
|
|
<a href="{{url}}"><span class="primary-tag-header">{{name}}</span></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">•</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">
|
|
{{content}}
|
|
</div>
|
|
<div class="content-full">
|
|
<div class="my-4" id="comments">
|
|
</div>
|
|
</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">
|
|
<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">
|
|
<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="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}}" class="primary-tag-header text-2xl">{{name}}</a> </p>
|
|
</div>
|
|
{{/../primary_tag}}
|
|
<div class="grid grid-cols-3 row-gap-4 col-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}}
|