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
+19
-8
@@ -1,17 +1,28 @@
|
|||||||
---
|
---
|
||||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
import NavBar from '../components/NavBar.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" />
|
<NavBar slot="nav" />
|
||||||
<h1 style="font-family: var(--font-prose); font-size: var(--type-2xl); color: var(--text-primary);">
|
<PostHeader
|
||||||
Crash Test Dev
|
title="Speeding Up Webpack Typescript Incremental Builds by 7x"
|
||||||
</h1>
|
date={new Date('2019-08-16')}
|
||||||
<p style="font-family: var(--font-structure); font-size: var(--type-base); color: var(--text-secondary); margin-top: var(--space-2);">
|
type="post"
|
||||||
Blog by Ken Chau
|
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>
|
||||||
<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);">
|
<p style="font-family: var(--font-structure); font-size: 14px; color: var(--text-secondary); line-height: var(--leading-normal);">
|
||||||
Tokens and fonts are working.
|
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>
|
</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>
|
</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!');
|
||||||
Reference in New Issue
Block a user