ken/crashtestdev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create BaseLayout component with global styles and skip navigation

Browse Source 
- 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
This commit is contained in:
Ken
2026-05-26 22:43:02 +00:00
parent e100119e3b
commit 4455a5ed01
3 changed files with 251 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+12 -11
View File
@@ -1,14 +1,15 @@
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Crash Test Dev</title>
</head>
<body>
<h1>Crash Test Dev</h1>
<p>Blog by Ken Chau</p>
</body>
</html>
<BaseLayout title="Crash Test Dev" description="Blog by Ken Chau">
<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>
</BaseLayout>