v0.1.20 태그 페이지 및 Alpine 적용

page-authors.hbs

@@ -0,0 +1,42 @@
+{{!< default}}
+
+{{#post}}
+<main class="content-area">
+    <section class="stack-section">
+        <header class="section-header text-center">
+            <h1 class="section-title">{{title}}</h1>
+            {{#if custom_excerpt}}
+                <p class="section-description">{{custom_excerpt}}</p>
+            {{else}}
+                <p class="section-description">Browse by author</p>
+            {{/if}}
+        </header>
+
+        {{#get "authors" limit="all" include="count.posts"}}
+            <div class="author-directory grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+                {{#foreach authors}}
+                    <a class="author-directory__card group flex min-h-[128px] flex-col rounded-[14px] border border-[var(--border)] bg-[var(--surface)] p-4 text-left transition-colors hover:bg-[var(--surface-muted)]" href="{{url}}">
+                        <span class="flex items-start gap-3">
+                            {{#if profile_image}}
+                                <img class="h-11 w-11 rounded-full object-cover" src="{{img_url profile_image size="xs"}}" alt="{{name}}">
+                            {{else}}
+                                <span class="flex h-11 w-11 items-center justify-center rounded-full bg-[var(--surface-muted)] text-sm font-semibold">A</span>
+                            {{/if}}
+                            <span class="min-w-0 flex-1">
+                                <strong class="block text-[15px] font-semibold tracking-[-0.02em]">{{name}}</strong>
+                                {{#if bio}}
+                                    <span class="mt-1 line-clamp-3 block text-[13px] leading-5 text-[var(--text-soft)]">{{bio}}</span>
+                                {{else}}
+                                    <span class="mt-1 block text-[13px] leading-5 text-[var(--text-soft)]">Posts by {{name}}.</span>
+                                {{/if}}
+                            </span>
+                            <img class="h-4 w-4 shrink-0 opacity-70 transition-opacity group-hover:opacity-100" src="{{asset "icons/arrow_outward.svg"}}" alt="">
+                        </span>
+                        <span class="mt-auto pt-3 text-[13px] font-medium text-[var(--text-soft)]">{{plural count.posts empty="0 posts" singular="% post" plural="% posts"}}</span>
+                    </a>
+                {{/foreach}}
+            </div>
+        {{/get}}
+    </section>
+</main>
+{{/post}}