The Astro BASE_URL (/crashtestdev) lacked a trailing slash, causing
post URLs to render as /crashtestdevposts/... instead of
/crashtestdev/posts/... Breaking article card navigation and RSS feed
links.
Applied the same .replace(/\/?$/, '/') normalization pattern already
used in BaseLayout.astro to:
- ArticleCard.astro (card link hrefs)
- NavBar.astro (isActive path matching)
- rss.xml.ts (item link generation)
Also adds final-verification.test.mjs with 31 tests covering:
- Clean build output structure
- Index page cards, shadows, hover states, URL format
- Post page NavBar active state, PostHeader centering
- Three typography voices (prose/structure/evidence)
- Code block breakout width, warm background, terracotta border
- Design token color compliance
- Responsive behavior (nav stacking, title shrinking, gutter respect)
- RSS feed validity and URL correctness
This replaces the smoke test index with a real page that:
- Imports getCollection, BaseLayout, NavBar, ArticleCard, getReadingTime
- Fetches all posts and sorts descending by date
- Maps posts to ArticleCard components with title, date, type, summary, slug, readingTime
- Styles .post-list with prose max-width, space-6/space-12 margins, flex column, space-2 gap
Generated with [Amplifier](https://github.com/microsoft/amplifier)
Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
- 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
Created NavBar.astro component with:
- Site name link 'Crash Test Dev' and Posts nav link with active state detection
- aria-label='Site navigation' and aria-current='page' accessibility attributes
- Responsive stacking at 599px breakpoint
- Design token-based styling (structure font, border-subtle, etc.)
- Updated index.astro to include NavBar in nav slot
- Added comprehensive build-output tests (24 assertions)
Generated with Amplifier
Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
- 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
Ken