feat: replace index with foundation smoke test page

- Import BaseLayout, NavBar, and PostHeader components
- PostHeader with title 'Speeding Up Webpack Typescript Incremental Builds by 7x',
  date 2019-08-16, type post, readingTime 12
- Three typography voices in prose-width container:
  - Prose voice: Source Serif 4 at 18px (font-prose)
  - Structure voice: Inter at 14px in secondary color (font-structure)
  - Evidence voice: JetBrains Mono with code-text color, surface-code bg,
    rounded-md, accent-primary left border (font-evidence)
- Add build verification test (tests/verify-smoke-page.mjs)
- npm run build succeeds clean
This commit is contained in:
Ken
2026-05-26 22:51:49 +00:00
parent 42373521f0
commit 3175f27c8a
2 changed files with 114 additions and 10 deletions
+21 -10
View File
@@ -1,17 +1,28 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
import NavBar from '../components/NavBar.astro';
import PostHeader from '../components/PostHeader.astro';
---
<BaseLayout title="Crash Test Dev" description="Blog by Ken Chau">
<BaseLayout title="Crash Test Dev" description="Foundation smoke test">
<NavBar slot="nav" />
<h1 style="font-family: var(--font-prose); font-size: var(--type-2xl); color: var(--text-primary);">
Crash Test Dev
</h1>
<p style="font-family: var(--font-structure); font-size: var(--type-base); color: var(--text-secondary); margin-top: var(--space-2);">
Blog by Ken Chau
</p>
<p style="font-family: var(--font-evidence); font-size: var(--type-sm); color: var(--text-tertiary); margin-top: var(--space-4); background: var(--surface-code); padding: var(--space-1); border-radius: var(--rounded-md);">
Tokens and fonts are working.
</p>
<PostHeader
title="Speeding Up Webpack Typescript Incremental Builds by 7x"
date={new Date('2019-08-16')}
type="post"
readingTime={12}
/>
<div style="max-width: var(--width-prose); margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: var(--space-4);">
<p style="font-family: var(--font-prose); font-size: 18px; color: var(--text-primary); line-height: var(--leading-prose);">
This is the prose voice — Source Serif 4 at 18px. It carries the reader through long-form
content with a warm, readable serif that feels like ink on parchment.
</p>
<p style="font-family: var(--font-structure); font-size: 14px; color: var(--text-secondary); line-height: var(--leading-normal);">
This is the structure voice — Inter at 14px in secondary color. It handles navigation,
labels, metadata, and UI chrome with a clean sans-serif that stays out of the way.
</p>
<code style="display: block; font-family: var(--font-evidence); font-size: var(--type-sm); color: var(--code-text); background: var(--surface-code); padding: var(--space-2); border-radius: var(--rounded-md); border-left: 3px solid var(--accent-primary);">
const buildTime = 7 * previousBuildTime; // evidence voice — JetBrains Mono
</code>
</div>
</BaseLayout>