feat: create BaseLayout component with global styles and skip navigation

- Created src/layouts/BaseLayout.astro as the site's base layout component - Imports tokens.css and fonts.css for design system and typography - Accepts Props {title: string, description?: string} - Computes page title (appends ' — Crash Test Dev' unless title is already 'Crash Test Dev') - Reads import.meta.env.BASE_URL for RSS link generation - HTML structure: doctype, html lang=en, head with charset/viewport/description meta, computed title, RSS link alternate - Body: skip-to-content link, named nav slot, main#main-content with default slot - Global styles: CSS reset, body typography, link styles, skip-link, main container, ::selection - Updated src/pages/index.astro to use BaseLayout with inline style placeholders demonstrating tokens/fonts - Added tests/check-base-layout.mjs build-output test with 23 assertions, all passing
2026-05-26 22:43:02 +00:00
parent e100119e3b
commit 4455a5ed01
3 changed files with 251 additions and 11 deletions
@@ -0,0 +1,138 @@
+/**
+ * Build-output test for BaseLayout.astro
+ * Runs after `npm run build` and checks the dist HTML for expected structure.
+ */
+import { readFileSync, existsSync } from 'fs';
+import { resolve } from 'path';
+
+const distDir = resolve('dist');
+const indexPath = resolve(distDir, 'index.html');
+
+let failures = 0;
+let passes = 0;
+
+function assert(condition, label) {
+  if (condition) {
+    console.log(`  ✓ ${label}`);
+    passes++;
+  } else {
+    console.error(`  ✗ FAIL: ${label}`);
+    failures++;
+  }
+}
+
+// ── Source file existence checks ──
+console.log('\n--- Source file checks ---');
+
+assert(
+  existsSync(resolve('src/layouts/BaseLayout.astro')),
+  'src/layouts/BaseLayout.astro exists'
+);
+
+assert(
+  existsSync(resolve('src/pages/index.astro')),
+  'src/pages/index.astro exists'
+);
+
+// ── Source content checks ──
+console.log('\n--- Source content checks ---');
+
+if (existsSync(resolve('src/layouts/BaseLayout.astro'))) {
+  const layoutSrc = readFileSync(resolve('src/layouts/BaseLayout.astro'), 'utf-8');
+
+  assert(
+    layoutSrc.includes("import '../styles/tokens.css'") || layoutSrc.includes("import '../styles/tokens.css';"),
+    'BaseLayout imports tokens.css'
+  );
+  assert(
+    layoutSrc.includes("import '../styles/fonts.css'") || layoutSrc.includes("import '../styles/fonts.css';"),
+    'BaseLayout imports fonts.css'
+  );
+  assert(
+    /title:\s*string/.test(layoutSrc),
+    'Props interface has title: string'
+  );
+  assert(
+    /description\?:\s*string/.test(layoutSrc),
+    'Props interface has description?: string'
+  );
+  assert(
+    layoutSrc.includes('skip-link'),
+    'BaseLayout has skip-link class'
+  );
+  assert(
+    layoutSrc.includes("skip-to-content") || layoutSrc.includes("Skip to content"),
+    'BaseLayout has skip-to-content link text'
+  );
+  assert(
+    layoutSrc.includes('<slot name="nav"') || layoutSrc.includes("<slot name='nav'") || layoutSrc.includes('<slot name="nav" />') || layoutSrc.includes("<slot name='nav' />"),
+    'BaseLayout has named nav slot'
+  );
+  assert(
+    layoutSrc.includes('id="main-content"') || layoutSrc.includes("id='main-content'"),
+    'BaseLayout has main with id=main-content'
+  );
+  assert(
+    layoutSrc.includes('Crash Test Dev'),
+    'BaseLayout references site name for title computation'
+  );
+  assert(
+    layoutSrc.includes('import.meta.env.BASE_URL'),
+    'BaseLayout reads import.meta.env.BASE_URL'
+  );
+}
+
+if (existsSync(resolve('src/pages/index.astro'))) {
+  const indexSrc = readFileSync(resolve('src/pages/index.astro'), 'utf-8');
+
+  assert(
+    indexSrc.includes('BaseLayout'),
+    'index.astro uses BaseLayout'
+  );
+}
+
+// ── Build output checks ──
+console.log('\n--- Build output checks ---');
+
+assert(existsSync(indexPath), 'dist/index.html exists');
+
+if (existsSync(indexPath)) {
+  const html = readFileSync(indexPath, 'utf-8');
+
+  assert(html.includes('<!doctype html>') || html.includes('<!DOCTYPE html>'), 'Has doctype');
+  assert(html.includes('lang="en"') || html.includes("lang='en'"), 'html has lang=en');
+  assert(html.includes('charset'), 'Has charset meta');
+  assert(html.includes('viewport'), 'Has viewport meta');
+  // Astro extracts CSS into separate files; check both HTML and linked CSS bundles
+  const { readdirSync } = await import('fs');
+  const astroDir = resolve(distDir, '_astro');
+  let distCss = '';
+  if (existsSync(astroDir)) {
+    for (const f of readdirSync(astroDir)) {
+      if (f.endsWith('.css')) {
+        distCss += readFileSync(resolve(astroDir, f), 'utf-8');
+      }
+    }
+  }
+  assert(
+    html.includes('Source Serif') || distCss.includes('Source Serif'),
+    'dist output (HTML or CSS) contains Source Serif reference'
+  );
+  assert(html.includes('skip-link') || html.includes('Skip to content'), 'Has skip link');
+  assert(html.includes('main-content'), 'Has main-content id');
+  assert(
+    html.includes('Crash Test Dev'),
+    'Title contains Crash Test Dev'
+  );
+  assert(
+    html.includes('application/rss+xml') || html.includes('rss'),
+    'Has RSS link'
+  );
+}
+
+// ── Summary ──
+console.log(`\n--- Results: ${passes} passed, ${failures} failed ---`);
+
+if (failures > 0) {
+  process.exit(1);
+}