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
2026-05-26 22:51:49 +00:00
parent 42373521f0
commit 3175f27c8a
2 changed files with 114 additions and 10 deletions
@@ -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>
@@ -0,0 +1,93 @@
+/**
+ * Smoke test verification for index.astro
+ * Checks that the built HTML contains expected elements for the foundation smoke test page.
+ */
+import { readFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distPath = resolve(__dirname, '../dist/index.html');
+
+let html;
+try {
+  html = readFileSync(distPath, 'utf-8');
+} catch (e) {
+  console.error('FAIL: dist/index.html not found. Run `npm run build` first.');
+  process.exit(1);
+}
+
+let passed = 0;
+let failed = 0;
+
+function assert(condition, description) {
+  if (condition) {
+    console.log(`  PASS: ${description}`);
+    passed++;
+  } else {
+    console.error(`  FAIL: ${description}`);
+    failed++;
+  }
+}
+
+console.log('Verifying smoke test page (dist/index.html):\n');
+
+// 1. Imports: BaseLayout structure present
+assert(html.includes('<!DOCTYPE html>'), 'BaseLayout renders DOCTYPE');
+assert(html.includes('<html lang="en">'), 'BaseLayout renders html lang=en');
+assert(html.includes('Skip to content'), 'BaseLayout includes skip link');
+
+// 2. NavBar rendered
+assert(html.includes('aria-label="Site navigation"'), 'NavBar is rendered');
+assert(html.includes('Crash Test Dev'), 'NavBar shows site name');
+assert(html.includes('Posts'), 'NavBar shows Posts link');
+
+// 3. PostHeader with correct props
+assert(html.includes('Speeding Up Webpack Typescript Incremental Builds by 7x'), 'PostHeader title present');
+assert(html.includes('August 16, 2019'), 'PostHeader formatted date present');
+assert(html.includes('12 min read'), 'PostHeader reading time present');
+assert(html.includes('post') || html.includes('POST'), 'PostHeader badge type present');
+
+// 4. Three typography voices in body
+// Prose voice: Source Serif 4 / font-prose, 18px
+assert(
+  html.includes('font-prose') || html.includes('Source Serif'),
+  'Prose voice paragraph uses font-prose (Source Serif 4)'
+);
+
+// Structure voice: Inter / font-structure, 14px, secondary color
+assert(
+  html.includes('font-structure') || html.includes('Inter'),
+  'Structure voice paragraph uses font-structure (Inter)'
+);
+
+// Evidence voice: JetBrains Mono / font-evidence, code-text color, surface-code bg
+assert(
+  html.includes('font-evidence') || html.includes('JetBrains Mono'),
+  'Evidence voice uses font-evidence (JetBrains Mono)'
+);
+
+// 5. Evidence voice styling details
+assert(
+  html.includes('code-text') || html.includes('--code-text'),
+  'Evidence voice uses code-text color'
+);
+assert(
+  html.includes('surface-code') || html.includes('--surface-code'),
+  'Evidence voice uses surface-code background'
+);
+assert(
+  html.includes('accent-primary') || html.includes('--accent-primary'),
+  'Evidence voice has accent-primary left border'
+);
+assert(
+  html.includes('rounded-md') || html.includes('--rounded-md'),
+  'Evidence voice has rounded-md border radius'
+);
+
+console.log(`\nResults: ${passed} passed, ${failed} failed out of ${passed + failed}`);
+
+if (failed > 0) {
+  process.exit(1);
+}
+console.log('\nAll smoke test verifications passed!');