my website at ewancroft.uk
6
fork

Configure Feed

Select the types of activity you want to include in your feed.

refactor: collapse tags into icon and number

+21 -22
+21 -22
src/lib/components/ui/BlogPostCard.svelte
··· 1 1 <script lang="ts"> 2 - import { ExternalLink } from '@lucide/svelte'; 2 + import { ExternalLink, Tag } from '@lucide/svelte'; 3 3 import type { BlogPost } from '$lib/services/atproto'; 4 4 import { InternalCard } from '$lib/components/ui'; 5 5 import { getPostBadges, getBadgeClasses } from '$lib/helper/badges'; ··· 45 45 </p> 46 46 {/if} 47 47 48 - <!-- Timestamp and Tags row --> 49 - <div class="flex items-end justify-between gap-3 pt-1"> 50 - <!-- Timestamp (left) --> 48 + <!-- Timestamp --> 49 + <div class="pt-1"> 51 50 <p class="text-xs font-medium text-ink-800 dark:text-ink-100"> 52 51 {formatLocalizedDate(post.createdAt, locale)} 53 52 </p> 54 - 55 - <!-- Tags (right) --> 56 - {#if post.tags && post.tags.length > 0} 57 - <div class="flex flex-wrap items-center justify-end gap-1.5"> 58 - {#each post.tags as tag} 59 - <span 60 - class="rounded bg-ink-100 px-2 py-0.5 text-xs font-medium text-ink-800 dark:bg-ink-800 dark:text-ink-100" 61 - > 62 - #{tag} 63 - </span> 64 - {/each} 65 - </div> 66 - {/if} 67 53 </div> 68 54 </div> 69 55 70 - <!-- External Link Icon --> 71 - <ExternalLink 72 - class="h-4 w-4 shrink-0 text-ink-700 transition-colors dark:text-ink-200" 73 - aria-hidden="true" 74 - /> 56 + <!-- Right column: External Link Icon and Tags --> 57 + <div class="flex shrink-0 flex-col items-end justify-between self-stretch gap-2"> 58 + <!-- External Link Icon --> 59 + <ExternalLink 60 + class="h-4 w-4 text-ink-700 transition-colors dark:text-ink-200" 61 + aria-hidden="true" 62 + /> 63 + 64 + <!-- Tags --> 65 + {#if post.tags && post.tags.length > 0} 66 + <div class="flex items-center gap-1.5 rounded bg-ink-100 px-2 py-0.5 dark:bg-ink-800"> 67 + <Tag class="h-3 w-3 text-ink-700 dark:text-ink-200" aria-hidden="true" /> 68 + <span class="text-xs font-medium text-ink-800 dark:text-ink-100"> 69 + {post.tags.length} 70 + </span> 71 + </div> 72 + {/if} 73 + </div> 75 74 {/snippet} 76 75 </InternalCard>