liebling/index.hbs
2020-03-11 18:42:00 +01:00

92 lines
4.2 KiB
Handlebars

{{!--
This template is used for the index page.
It can be used also as the home page or the default page.
--}}
{{!-- The tag below means: insert everything in this file
into the {body} of the default.hbs template --}}
{{!< default}}
<div class="main-wrap">
{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=@site.cover_image}}
{{!-- Inject styles of the hero image to make it responsive --}}
{{> hero background=@site.cover_image}}
<div class="m-hero__content" data-aos="fade-down">
<h1 class="m-hero-title bigger">{{@site.title}}</h1>
{{#if @site.description}}
<p class="m-hero-description bigger">{{@site.description}}</p>
{{/if}}
{{#if @labs.subscribers}}
<a href="{{@site.url}}/subscribe" class="m-button filled">{{t "Subscribe"}}</a>
{{/if}}
{{#if @labs.members}}
<a href="{{@site.url}}/newsletter" class="m-button filled">{{t "Subscribe"}}</a>
{{/if}}
</div>
</section>
<main>
<div class="l-content">
<div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
<div class="l-grid centered">
{{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
{{#if featured}}
<div class="m-featured-slider">
<div class="m-featured-slider__list js-featured-articles">
{{#foreach featured}}
<div class="m-featured-slider__list__item">
<article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
<div class="m-featured-article__picture">
{{#if feature_image}}
<div class="lozad no-fade-animation" data-background-image="{{img_url feature_image size="l"}}"></div>
{{/if}}
</div>
<div class="m-featured-article__meta">
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
{{#if primary_author.profile_image}}
<div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}}
</a>
{{#if primary_tag}}
<a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
{{/if}}
</div>
<div class="m-featured-article__ribbon">
<span class="icon-star"></span>
<span>{{t "Featured"}}</span>
</div>
<a href="{{url}}" class="m-featured-article__content">
<h1 class="m-featured-article__title js-featured-article-title" title="{{title}}">
{{title}}
</h1>
<div class="m-featured-article__timestamp">
<span>{{date published_at timeago="true"}}</span>
<span>&bull;</span>
<span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
</div>
</a>
</article>
</div>
{{/foreach}}
</div>
</div>
{{/if}}
{{/get}}
{{!-- The tag below iterates over all the posts --}}
{{> "loop"}}
</div>
</div>
{{!-- Links to Previous/Next posts --}}
{{pagination}}
</div>
</main>
</div>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script defer src="{{asset "js/home.js"}}"></script>
{{/contentFor}}