98 lines
8.4 KiB
Handlebars
98 lines
8.4 KiB
Handlebars
<section class="px-5 sm:px-6 py-4" data-home-content x-data="{ activeFeed: '#latest', postFeedTypeOpen: false }">
|
|
<div class="max-w-content mx-auto">
|
|
<div class="flex gap-2 items-center justify-between border-b border-brd pb-2">
|
|
<ul class="hidden md:flex gap-1 text-typ-tone font-medium" data-feed-select="">
|
|
<li data-feed-select-item="latest">
|
|
<a href="#latest" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#latest' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#latest'">Latest</a>
|
|
</li>
|
|
<li data-feed-select-item="featured">
|
|
<a href="#featured" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#featured' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#featured'">Featured</a>
|
|
</li>
|
|
<li data-feed-select-item="updated">
|
|
<a href="#updated" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#updated' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#updated'">Updated</a>
|
|
</li>
|
|
<li data-feed-select-item="categories">
|
|
<a href="#categories" class="block text-sm px-3 py-1.5 rounded-theme hover:bg-bgr-tone hover:text-typ relative" :class="activeFeed === '#categories' ? 'text-typ after:absolute after:-bottom-2 after:left-0 after:w-full after:h-0.5 after:bg-typ' : ''" @click.prevent="activeFeed = '#categories'">Categories</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="flex flex-col gap-1 relative text-sm font-medium md:hidden">
|
|
<button class="px-3 py-1.5 pr-2 rounded-theme bg-bgr hover:bg-bgr-tone relative leading-none cursor-pointer flex gap-0.75 items-center justify-center border border-brd" @click="postFeedTypeOpen = !postFeedTypeOpen" data-feed-type-toggle="" aria-label="Select feed type">
|
|
<span class="pointer-events-none" x-show="activeFeed === '#latest'">Latest</span>
|
|
<span class="pointer-events-none" x-show="activeFeed === '#featured'">Featured</span>
|
|
<span class="pointer-events-none" x-show="activeFeed === '#updated'">Updated</span>
|
|
<span class="pointer-events-none" x-show="activeFeed === '#categories'">Categories</span>
|
|
<span class="opacity-75 pointer-events-none">
|
|
<i class="icon icon-chevron-down stroke-[2.5] size-4" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
</svg>
|
|
</i>
|
|
</span>
|
|
</button>
|
|
<menu class="flex flex-col gap-0.5 absolute top-9 left-0 border border-brd bg-bgr rounded-theme p-1.5 z-10 transition-[transform,opacity,visibility] shadow" :class="postFeedTypeOpen ? 'translate-y-0 opacity-100 visible' : '-translate-y-2 opacity-0 invisible'" @click.outside="postFeedTypeOpen = false">
|
|
<li class="w-full"><a href="#latest" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#latest'; postFeedTypeOpen = false">Latest</a></li>
|
|
<li class="w-full"><a href="#featured" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#featured'; postFeedTypeOpen = false">Featured</a></li>
|
|
<li class="w-full"><a href="#updated" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#updated'; postFeedTypeOpen = false">Updated</a></li>
|
|
<li class="w-full"><a href="#categories" class="w-full px-2 py-1 flex items-center gap-1.5 hover:bg-bgr-tone rounded-theme cursor-pointer" @click.prevent="activeFeed = '#categories'; postFeedTypeOpen = false">Categories</a></li>
|
|
</menu>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-8 mb-8" x-show="activeFeed === '#latest'" data-feed="latest">
|
|
{{> "lists/post-feed"}}
|
|
</div>
|
|
|
|
<div class="tab-panel" x-show="activeFeed === '#featured'" data-feed="featured">
|
|
{{#get "posts" filter="featured:true" limit="8" include="authors,tags"}}
|
|
{{> "lists/post-items" posts=posts}}
|
|
{{/get}}
|
|
</div>
|
|
|
|
<div class="tab-panel **:data-post-card-date-updated:block **:data-post-card-date:hidden" x-show="activeFeed === '#updated'" data-feed="updated">
|
|
{{#get "posts" order="updated_at desc" limit="8" include="authors,tags"}}
|
|
{{> "lists/post-items" posts=posts}}
|
|
{{/get}}
|
|
</div>
|
|
|
|
<div class="tab-panel" x-show="activeFeed === '#categories'" data-feed="categories">
|
|
<ul class="flex flex-col">
|
|
{{#get "tags" limit="8" include="count.posts" order="count.posts desc"}}
|
|
{{#foreach tags}}
|
|
<li class="p-4 pl-5 sm:pl-6 sm:p-5 flex flex-wrap flex-col gap-2 md:flex-row border-b border-b-brd relative before:absolute before:left-0 before:top-0 before:w-0.75 before:h-full before:bg-accent"{{#if accent_color}} style="--color-accent:{{accent_color}}"{{/if}}>
|
|
<h2 class="font-medium basis-full leading-tight">{{name}}</h2>
|
|
<div class="flex-2 flex flex-col gap-1.5 border-b border-brd pb-3 mb-2 md:pb-0 md:border-b-0 md:mr-4 md:mb-0 items-start justify-between">
|
|
{{#if description}}
|
|
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{description}}</p>
|
|
{{else}}
|
|
<p class="text-sm text-typ-tone line-clamp-4 text-ellipsis leading-snug">{{plural count.posts empty="No posts yet" singular="% post in this category" plural="% posts in this category"}}</p>
|
|
{{/if}}
|
|
<a href="{{url}}" class="text-sm text-typ-tone font-semibold leading-snug flex items-center gap-1 hover:opacity-75 mt-0.5">
|
|
<span>View all</span>
|
|
<i class="icon icon-arrow-up-right size-3.5 stroke-3" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M17 7l-10 10"></path>
|
|
<path d="M8 7l9 0l0 9"></path>
|
|
</svg>
|
|
</i>
|
|
</a>
|
|
</div>
|
|
<ol class="flex-3 flex flex-col gap-1.5 text-sm text-typ-tone font-medium">
|
|
{{#get "posts" filter=(concat "tag:" slug) limit="5"}}
|
|
{{#foreach posts}}
|
|
<li>
|
|
<a href="{{url}}" data-number="{{@number}}. " class="line-clamp-1 text-ellipsis before:content-[attr(data-number)] before:font-bold leading-snug hover:opacity-75" title="{{title}}">{{title}}</a>
|
|
</li>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</ol>
|
|
</li>
|
|
{{/foreach}}
|
|
{{/get}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|