56 lines
4.4 KiB
Handlebars
56 lines
4.4 KiB
Handlebars
<div class="post-list home-post-list flex flex-col divide-y divide-brd" data-load-more-list>
|
|
{{#foreach posts}}
|
|
<article class="post {{post_class}} relative flex flex-row items-start gap-3 text-typ py-4 group overflow-hidden" data-post-card{{#if featured}} data-featured{{/if}}>
|
|
<a href="{{url}}" data-post-card-media class="flex-1 relative group aspect-square sm:aspect-video min-w-16 ">
|
|
{{#if feature_image}}
|
|
<figure class="block rounded-lg overflow-hidden" role="none">
|
|
<img class="w-full aspect-square sm:aspect-video object-cover hover:opacity-90 transition-all blur-0" src="{{img_url feature_image size="s"}}" alt="{{title}}">
|
|
</figure>
|
|
{{else}}
|
|
<span class="block w-full aspect-square sm:aspect-video rounded-lg bg-bgr-tone text-typ-tone text-xs text-center p-4">{{title}}</span>
|
|
{{/if}}
|
|
</a>
|
|
<div class="relative min-w-0 flex-3 md:flex-4 flex flex-col gap-1.5 justify-between " data-post-card-content>
|
|
<h2 class="text-sm font-medium leading-tight flex flex-wrap gap-y-0.5 gap-x-1.5 items-end max-w-[90%]" data-post-card-title>
|
|
<a href="{{url}}" class="hover:opacity-75 flex items-start gap-1.5">
|
|
{{#if featured}}
|
|
<span data-post-featured class="icon icon-bolt size-4 stroke-1 fill-current5">
|
|
<img class="size-4 -mt-0.5" src="{{asset "icons/bolt.svg"}}" alt="">
|
|
</span>
|
|
{{/if}}
|
|
<span>{{title}}</span>
|
|
</a>
|
|
</h2>
|
|
{{#if excerpt}}
|
|
<p class="text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis flex-1" data-post-card-excerpt>{{excerpt words="24"}}</p>
|
|
{{/if}}
|
|
<div class="flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone *:after:content-['/'] *:after:ml-2 sm:*:after:ml-1.5 *:after:text-brd *:last:after:hidden!" data-post-card-info>
|
|
<time data-post-card-date datetime="{{date format="YYYY-MM-DD"}}">{{date format="MMM D"}}</time>
|
|
{{#primary_author}}
|
|
<a data-post-card-author href="{{url}}" class="hover:opacity-75">{{name}}</a>
|
|
{{/primary_author}}
|
|
{{#primary_tag}}
|
|
<ul class="flex flex-wrap items-center font-medium" data-post-card-tags>
|
|
<li{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
|
|
<a href="{{url}}" class="bg-accent/10 px-1.5 py-px rounded-sm text-typ hover:bg-accent/5 hover:text-accent">{{name}}</a>
|
|
</li>
|
|
</ul>
|
|
{{/primary_tag}}
|
|
{{#unless access}}
|
|
<span class="font-medium">Members</span>
|
|
{{/unless}}
|
|
<a data-post-card-comments class="flex gap-0.5 items-center hover:opacity-75" href="{{url}}#ghost-comments">
|
|
<img class="size-3.5 -mt-px pointer-events-none" src="{{asset "icons/chat_bubble.svg"}}" alt="">
|
|
<span class="pointer-events-none">{{#if comments}}{{comment_count empty="0" singular="" plural="" autowrap="false"}}{{else}}0{{/if}}</span>
|
|
</a>
|
|
</div>
|
|
<button data-post-share-toggle class="absolute top-0 md:top-auto md:bottom-0 right-0 flex gap-1 items-center hover:opacity-75 cursor-pointer md:opacity-0 md:invisible group-hover:opacity-100 group-hover:visible transition-[opacity,visibility]" type="button" aria-label="Share this post">
|
|
<i class="icon icon-share size-4 stroke-2 pointer-events-none" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-share-3"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 4v4c-6.575 1.028 -9.02 6.788 -10 12c-.037 .206 5.384 -5.962 10 -6v4l8 -7l-8 -7"></path></svg>
|
|
</i>
|
|
</button>
|
|
</div>
|
|
</article>
|
|
{{/foreach}}
|
|
</div>
|