feat: add ArticleCard component with card layout, hover/active/focus states, and design tokens

- ArticleCard.astro: Props {title, date, type, summary?, slug, readingTime?} - HTML: article.card > a.card-link wrapping badge-row, h2.title, p.summary, time - Uses BASE_URL for link construction: {base}posts/{slug}/ - Hover: shadow-md, title accent-primary; Active: translateY(1px); Focus-visible: focus-ring - All styles reference design tokens (fonts, sizes, colors, spacing, shadows, motion) - 32 tests covering props, structure, date formatting, and styles
2026-05-26 23:18:15 +00:00
parent 62fe16623b
commit 6b754d1646
2 changed files with 335 additions and 0 deletions
@@ -0,0 +1,122 @@
+---
+interface Props {
+  title: string;
+  date: Date;
+  type: string;
+  summary?: string;
+  slug: string;
+  readingTime?: number;
+}
+
+const { title, date, type, summary, slug, readingTime } = Astro.props;
+const base = import.meta.env.BASE_URL;
+
+const formattedDate = date.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+});
+const isoDate = date.toISOString().split('T')[0];
+---
+
+<article class="card" aria-label={`${type}: ${title}`}>
+  <a href={`${base}posts/${slug}/`} class="card-link">
+    <div class="badge-row">
+      <span class="badge">{type}</span>
+      {readingTime && <span class="reading-time">{readingTime} min read</span>}
+    </div>
+    <h2 class="title">{title}</h2>
+    {summary && <p class="summary">{summary}</p>}
+    <time datetime={isoDate}>{formattedDate}</time>
+  </a>
+</article>
+
+<style>
+  .card {
+    max-width: var(--width-prose);
+  }
+
+  .card-link {
+    display: block;
+    background-color: var(--surface-card);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--rounded-lg);
+    padding: var(--space-3);
+    box-shadow: var(--shadow-sm);
+    text-decoration: none;
+    color: inherit;
+    transition:
+      box-shadow var(--duration-fast) var(--ease-default),
+      transform var(--duration-fast) var(--ease-default);
+  }
+
+  .card-link:hover {
+    box-shadow: var(--shadow-md);
+    text-decoration: none;
+  }
+
+  .card-link:hover .title {
+    color: var(--accent-primary);
+  }
+
+  .card-link:active {
+    box-shadow: var(--shadow-sm);
+    transform: translateY(1px);
+  }
+
+  .card-link:focus-visible {
+    outline: 2px solid var(--focus-ring);
+    outline-offset: 2px;
+  }
+
+  .badge-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .badge {
+    font-family: var(--font-structure);
+    font-size: var(--type-xs);
+    font-weight: 600;
+    color: var(--accent-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    line-height: var(--leading-normal);
+  }
+
+  .reading-time {
+    font-family: var(--font-structure);
+    font-size: var(--type-xs);
+    font-weight: 400;
+    color: var(--text-tertiary);
+    line-height: var(--leading-normal);
+  }
+
+  .title {
+    font-family: var(--font-structure);
+    font-size: var(--type-xl);
+    font-weight: 600;
+    color: var(--text-primary);
+    line-height: var(--leading-snug);
+    margin-bottom: var(--space-1);
+    transition: color var(--duration-fast) var(--ease-default);
+  }
+
+  .summary {
+    font-family: var(--font-prose);
+    font-size: var(--type-base);
+    font-weight: 400;
+    color: var(--text-secondary);
+    line-height: var(--leading-prose);
+    margin-bottom: var(--space-2);
+  }
+
+  time {
+    font-family: var(--font-structure);
+    font-size: var(--type-sm);
+    font-weight: 400;
+    color: var(--text-tertiary);
+    line-height: var(--leading-normal);
+  }
+</style>