60 lines
5.5 KiB
Handlebars
60 lines
5.5 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="post-card-content relative min-w-0 flex-3 md:flex-4 flex flex-col gap-0.5 self-stretch min-h-0" 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="inline-flex text-brand -mr-0.5 [&_svg]:-mt-0.5">
|
|
<i class="icon icon-bolt size-4 stroke-1 fill-current" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-bolt"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11"></path></svg>
|
|
</i>
|
|
</span>
|
|
{{/if}}
|
|
<span>{{title}}</span>
|
|
</a>
|
|
</h2>
|
|
{{#if excerpt}}
|
|
<p class="post-card-content__excerpt text-[0.8rem] text-typ-tone leading-tight line-clamp-2 text-ellipsis" data-post-card-excerpt>{{excerpt words="24"}}</p>
|
|
{{/if}}
|
|
<div class="post-card-content__meta flex flex-wrap gap-2 sm:gap-1.5 items-center text-xs text-typ-tone [&>*:not(:last-child)]:after:content-['/'] [&>*:not(:last-child)]:after:ml-2 sm:[&>*:not(:last-child)]:after:ml-1.5 [&>*:not(:last-child)]:after:text-brd{{#if excerpt}} mt-auto{{/if}}" 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-1 items-center hover:opacity-75" href="{{url}}#ghost-comments">
|
|
<i class="icon icon-comments size-3.5 stroke-2 -mt-px 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-message-circle"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1"></path></svg>
|
|
</i>
|
|
<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>
|