zenn/ghost.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.21 카테고리 Alpine 및 업로드 정리

Browse Source
This commit is contained in:
zenn
2026-04-14 10:24:11 +09:00
parent 892dd270bc
commit dc24ee66f0
13 changed files with 126 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
partials/site/sidebar-left.hbs
View File

@@ -56,23 +56,22 @@
</section>
</nav>
<section class="sidebar-card sidebar-card--categories sidebar-card--collapsible is-open" data-sidebar-categories>
<button class="sidebar-card__trigger px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex items-center gap-1 justify-between cursor-pointer hover:opacity-75" type="button" data-accordion aria-expanded="true">
<section class="sidebar-card sidebar-card--categories border-b border-brd px-5 sm:px-6 py-4 sm:py-5 xl:pl-0 pr-3 sm:pr-3 flex flex-col gap-1.5" x-data="{ categoriesOpen: window.innerWidth >= 1024 }" x-init="window.addEventListener('resize', () => { categoriesOpen = window.innerWidth >= 1024 })" data-sidebar-categories>
<button class="sidebar-card__trigger flex items-center gap-1 justify-between cursor-pointer pr-2 hover:opacity-75" type="button" @click="categoriesOpen = !categoriesOpen" :aria-expanded="categoriesOpen.toString()">
<span class="sidebar-card__eyebrow uppercase font-medium text-xs">Categories</span>
<span class="sidebar-card__chevron" aria-hidden="true">
<span class="sidebar-card__chevron" aria-hidden="true" :class="categoriesOpen ? 'rotate-180' : ''">
<img class="sidebar-card__chevron-icon sidebar-card__chevron-icon--down" src="{{asset "icons/keyboard_arrow_down.svg"}}" alt="">
<img class="sidebar-card__chevron-icon sidebar-card__chevron-icon--up" src="{{asset "icons/keyboard_arrow_up.svg"}}" alt="">
</span>
</button>
<div class="sidebar-card__content sidebar-card__content--categories" data-accordion-content>
<ul class="category-grid px-5 sm:px-6 xl:pl-0 pr-3 sm:pr-3 mt-1 -mb-1.5 grid sm:grid-cols-2 gap-x-2 gap-y-0.5 text-[0.8rem] font-medium">
<div class="sidebar-card__content sidebar-card__content--categories" x-cloak x-show="categoriesOpen">
<ul class="category-grid grid sm:grid-cols-2 gap-x-2 gap-0.5 mt-1 text-typ-tone font-medium text-[0.8rem] -mb-1.5">
{{#get "tags" limit="10" include="count.posts"}}
{{#foreach tags}}
<li>
<a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-[18px] hover:px-3 transition-[padding,background-color,color]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
<span class="category-chip__dot"></span>
<span class="category-chip__label flex-1 text-ellipsis">{{name}}</span>
<span class="category-chip__count text-xs font-medium">{{count.posts}}</span>
<a class="category-chip group flex items-center gap-2 leading-tight pl-0 pr-3 py-2 rounded-theme hover:bg-bgr-tone hover:px-3 hover:text-typ transition-[padding]" href="{{url}}" aria-label="{{name}}"{{#if accent_color}} style="--color-accent: {{accent_color}};"{{/if}}>
<span class="category-chip__dot w-1 h-4 bg-accent rounded-sm rounded-l-none group-hover:size-2 group-hover:rounded-full transition-all"></span>
<span class="category-chip__label flex-1 line-clamp-1 text-ellipsis">{{name}}</span>
<span class="category-chip__count text-xs opacity-0 invisible group-hover:opacity-100 group-hover:visible font-medium">{{count.posts}}</span>
</a>
</li>
{{/foreach}}