홈: Latest 아래 Categories 섹션 추가 (v0.2.4)

Made-with: Cursor

partials/lists/home-categories.hbs

@@ -0,0 +1,63 @@
+{{!-- 홈 Latest 하단: 태그별 최신 글 5개(텍스트 링크만). 좌측 사이드바와 동일한 data-category-priority-order + 최대 10개 --}}
+<section class="px-5 sm:px-6 py-4 mb-8 home-categories" data-home-categories>
+    <div class="max-w-content mx-auto">
+        <div class="flex gap-2 items-end justify-between border-b border-brd pb-3">
+            <h2 class="text-sm uppercase font-medium text-typ-tone">Categories</h2>
+        </div>
+        <div data-feed="categories">
+            {{#get "tags" limit="100" include="count.posts" order="count.posts desc"}}
+                <ul
+                    class="flex flex-col"
+                    data-category-priority-list
+                    data-category-priority-order="tech,business,health,science,design,travel,gaming,music,diy,photography,books"
+                    data-category-priority-limit="10"
+                >
+                    {{#foreach tags}}
+                        {{#if count.posts}}
+                            <li
+                                class="home-categories__row 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:h-full before:w-0.75 before:bg-accent"
+                                data-category-priority-item
+                                data-category-slug="{{slug}}"
+                                style="--color-accent: {{#if accent_color}}{{accent_color}}{{else}}var(--accent){{/if}};"
+                            >
+                                <h2 class="font-medium basis-full leading-tight text-typ">{{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" singular="% post" plural="% posts"}}</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-2 shrink-0" role="presentation" aria-hidden="true">
+                                            <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 list-none">
+                                    {{#get "posts" filter=(concat "tag:" slug) limit="5" include="authors,tags" order="published_at desc"}}
+                                        {{#foreach posts}}
+                                            <li>
+                                                <a
+                                                    href="{{url}}"
+                                                    data-number="{{@number}}. "
+                                                    title="{{title}}"
+                                                    class="line-clamp-1 text-ellipsis before:content-[attr(data-number)] before:font-bold leading-snug hover:opacity-75"
+                                                    aria-label="{{title}}"
+                                                >{{title}}</a>
+                                            </li>
+                                        {{/foreach}}
+                                    {{/get}}
+                                </ol>
+                            </li>
+                        {{/if}}
+                    {{/foreach}}
+                </ul>
+            {{/get}}
+        </div>
+    </div>
+</section>

partials/lists/post-feed.hbs

@@ -61,3 +61,5 @@
         </div>
     </div>
 </section>
+
+{{> "lists/home-categories"}}