feat: add PostHeader component with badge, title, meta, and responsive styles

Built the PostHeader.astro component per the design spec. It accepts props {title, date, type, readingTime}, formats dates with toLocaleDateString, renders a centered header with content type badge, h1 title, and meta line with date/reading time. Has responsive typography stepping down at 719px and 479px breakpoints. All 39 tests pass and npm run build succeeds. Generated with Amplifier Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
2026-05-26 22:49:09 +00:00
parent d4b7eeb403
commit 42373521f0
2 changed files with 247 additions and 0 deletions
@@ -0,0 +1,88 @@
+---
+interface Props {
+  title: string;
+  date: Date;
+  type?: string;
+  readingTime?: number;
+}
+
+const { title, date, type = 'post', readingTime } = Astro.props;
+
+const formattedDate = date.toLocaleDateString('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+const isoDate = date.toISOString().split('T')[0];
+---
+
+<header class="post-header">
+  <span class="badge">{type}</span>
+  <h1 class="title">{title}</h1>
+  <p class="meta">
+    <time datetime={isoDate}>{formattedDate}</time>{readingTime && ` · ${readingTime} min read`}
+  </p>
+</header>
+
+<style>
+  .post-header {
+    max-width: var(--width-prose);
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: var(--space-8);
+    padding-bottom: var(--space-8);
+    text-align: 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;
+  }
+
+  .title {
+    font-family: var(--font-structure);
+    font-size: var(--type-3xl);
+    font-weight: 700;
+    color: var(--text-primary);
+    line-height: var(--leading-tight);
+    letter-spacing: -0.02em;
+    margin-top: var(--space-2);
+  }
+
+  .meta {
+    font-family: var(--font-structure);
+    font-size: var(--type-sm);
+    font-weight: 400;
+    color: var(--text-tertiary);
+    line-height: var(--leading-normal);
+    margin-top: var(--space-2);
+  }
+
+  @media (max-width: 719px) {
+    .post-header {
+      padding-top: var(--space-6);
+      padding-bottom: var(--space-6);
+    }
+
+    .title {
+      font-size: var(--type-2xl);
+      line-height: var(--leading-snug);
+    }
+  }
+
+  @media (max-width: 479px) {
+    .post-header {
+      padding-top: var(--space-5);
+      padding-bottom: var(--space-5);
+    }
+
+    .title {
+      font-size: var(--type-xl);
+      line-height: var(--leading-snug);
+    }
+  }
+</style>