From 3175f27c8a9e424a95c6cea627ce3b76e43f974c Mon Sep 17 00:00:00 2001 From: Ken Date: Tue, 26 May 2026 22:51:49 +0000 Subject: [PATCH] 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 --- src/pages/index.astro | 31 +++++++++---- tests/verify-smoke-page.mjs | 93 +++++++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+), 10 deletions(-) create mode 100644 tests/verify-smoke-page.mjs diff --git a/src/pages/index.astro b/src/pages/index.astro index a4ef0f2..aafbb95 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,17 +1,28 @@ --- import BaseLayout from '../layouts/BaseLayout.astro'; import NavBar from '../components/NavBar.astro'; +import PostHeader from '../components/PostHeader.astro'; --- - + -

- Crash Test Dev -

-

- Blog by Ken Chau -

-

- Tokens and fonts are working. -

+ +
+

+ 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. +

+

+ 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. +

+ + const buildTime = 7 * previousBuildTime; // evidence voice — JetBrains Mono + +
diff --git a/tests/verify-smoke-page.mjs b/tests/verify-smoke-page.mjs new file mode 100644 index 0000000..96f2c89 --- /dev/null +++ b/tests/verify-smoke-page.mjs @@ -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(''), 'BaseLayout renders DOCTYPE'); +assert(html.includes(''), '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!'); \ No newline at end of file