|
| 1 | +--- |
| 2 | +import { formatDate } from '../lib/posts' |
| 3 | +import type { Author } from '../lib/authors' |
| 4 | +
|
| 5 | +interface Props { |
| 6 | + title: string |
| 7 | + description?: string |
| 8 | + date: Date |
| 9 | + tags: string[] |
| 10 | + cover?: string |
| 11 | + slug: string |
| 12 | + readingTime: number |
| 13 | + author?: Author |
| 14 | + class?: string |
| 15 | +} |
| 16 | +
|
| 17 | +const { title, description, date, tags, cover, slug, readingTime, author, class: className } = Astro.props |
| 18 | +--- |
| 19 | + |
| 20 | +<article class:list={['post-card group', className]}> |
| 21 | + <a href={`/${slug}`} class="post-card-link block rounded-xl overflow-hidden relative border border-transparent hover:border-primary/20 transition-colors duration-400"> |
| 22 | + <div class="pointer-events-none absolute inset-0 z-20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-linear-to-b from-primary/20 via-primary/10 to-transparent" /> |
| 23 | + <div class="post-card-inner transition-transform duration-300 ease-out"> |
| 24 | + <!-- Image --> |
| 25 | + <div class="post-card-img rounded-t-xl bg-muted aspect-16/10 shrink-0"> |
| 26 | + {cover ? ( |
| 27 | + <img src={cover} alt={title} class="w-full h-full rounded-xl object-cover" /> |
| 28 | + ) : ( |
| 29 | + <div class="w-full h-full bg-linear-to-br from-primary/20 to-primary/5" /> |
| 30 | + )} |
| 31 | + </div> |
| 32 | + <!-- Body --> |
| 33 | + <div class="post-card-body relative z-30 p-3 flex flex-col"> |
| 34 | + <div class="flex flex-wrap items-center gap-2 mb-2"> |
| 35 | + {tags.map((tag) => ( |
| 36 | + <span class="rounded-full border border-primary/30 bg-primary/10 text-primary group-hover:border-border group-hover:bg-background group-hover:text-foreground px-2 py-px text-[9px] font-semibold uppercase tracking-wider transition-colors duration-300"> |
| 37 | + {tag} |
| 38 | + </span> |
| 39 | + ))} |
| 40 | + |
| 41 | + {readingTime > 0 && ( |
| 42 | + <span class="flex items-center gap-1 rounded-full border border-primary/30 bg-primary/10 text-primary group-hover:border-border group-hover:bg-background group-hover:text-foreground px-2.5 py-px text-[9px] font-semibold uppercase tracking-wider transition-colors duration-300"> |
| 43 | + <svg class="size-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> |
| 44 | + {readingTime} minutes |
| 45 | + </span> |
| 46 | + )} |
| 47 | + </div> |
| 48 | + <time datetime={date.toISOString()} class="text-xs font-semibold uppercase tracking-wider text-muted-foreground"> |
| 49 | + {formatDate(date)} |
| 50 | + </time> |
| 51 | + <h2 class="font-bold text-lg leading-snug mt-1.5 line-clamp-2"> |
| 52 | + {title} |
| 53 | + </h2> |
| 54 | + {description && <p class="post-card-desc text-sm text-muted-foreground mt-3 line-clamp-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">{description}</p>} |
| 55 | + {author && ( |
| 56 | + <div class="post-card-author flex items-center gap-3 mt-auto pt-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-150"> |
| 57 | + <img src={author.avatar} alt={author.name} class="size-9 rounded-full object-cover" /> |
| 58 | + <div> |
| 59 | + <p class="text-sm font-semibold leading-tight">{author.name}</p> |
| 60 | + <p class="text-xs text-muted-foreground">{author.title}</p> |
| 61 | + </div> |
| 62 | + </div> |
| 63 | + )} |
| 64 | + </div> |
| 65 | + </div> |
| 66 | + </a> |
| 67 | +</article> |
| 68 | + |
| 69 | +<style> |
| 70 | + .post-card:hover .post-card-inner { |
| 71 | + transform: translateY(var(--slide)); |
| 72 | + } |
| 73 | +</style> |
| 74 | + |
| 75 | +<script> |
| 76 | + function initPostCards() { |
| 77 | + const cards = document.querySelectorAll('.post-card') |
| 78 | + const measurements: { card: HTMLElement; link: HTMLElement; body: HTMLElement; imgHeight: number; bodyNoHidden: number }[] = [] |
| 79 | + |
| 80 | + // First pass: reset and measure |
| 81 | + cards.forEach((card) => { |
| 82 | + const link = card.querySelector('.post-card-link') as HTMLElement | null |
| 83 | + const img = card.querySelector('.post-card-img') as HTMLElement | null |
| 84 | + const body = card.querySelector('.post-card-body') as HTMLElement | null |
| 85 | + if (!link || !img || !body) return |
| 86 | + |
| 87 | + link.style.height = '' |
| 88 | + body.style.minHeight = '' |
| 89 | + |
| 90 | + const imgHeight = img.offsetHeight |
| 91 | + const desc = card.querySelector('.post-card-desc') as HTMLElement | null |
| 92 | + const author = card.querySelector('.post-card-author') as HTMLElement | null |
| 93 | + |
| 94 | + if (desc) desc.style.display = 'none' |
| 95 | + if (author) author.style.display = 'none' |
| 96 | + const bodyNoHidden = body.offsetHeight |
| 97 | + if (desc) desc.style.display = '' |
| 98 | + if (author) author.style.display = '' |
| 99 | + |
| 100 | + measurements.push({ card: card as HTMLElement, link, body, imgHeight, bodyNoHidden }) |
| 101 | + }) |
| 102 | + |
| 103 | + // Find max card height |
| 104 | + const maxCardHeight = Math.max(...measurements.map((m) => m.imgHeight + m.bodyNoHidden)) |
| 105 | + |
| 106 | + // Second pass: apply uniform height |
| 107 | + measurements.forEach(({ card, link, body, imgHeight }) => { |
| 108 | + link.style.height = `${maxCardHeight}px` |
| 109 | + body.style.minHeight = `${maxCardHeight}px` |
| 110 | + card.style.setProperty('--slide', `-${imgHeight}px`) |
| 111 | + }) |
| 112 | + } |
| 113 | + |
| 114 | + initPostCards() |
| 115 | + window.addEventListener('resize', initPostCards) |
| 116 | + document.addEventListener('astro:after-swap', initPostCards) |
| 117 | +</script> |
0 commit comments