feat: add NavBar component with site name, Posts link, and responsive layout
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>
This commit is contained in:
Ken
@@ -0,0 +1,98 @@
|
||||
---
|
||||
const currentPath = Astro.url.pathname;
|
||||
const base = import.meta.env.BASE_URL;
|
||||
|
||||
const navLinks = [
|
||||
{ label: 'Posts', href: base },
|
||||
];
|
||||
|
||||
function isActive(href: string): boolean {
|
||||
return currentPath === href || currentPath.startsWith(base + 'posts/');
|
||||
}
|
||||
---
|
||||
|
||||
<nav aria-label="Site navigation">
|
||||
<div class="nav-inner">
|
||||
<a href={base} class="site-name">Crash Test Dev</a>
|
||||
<div class="nav-links">
|
||||
{navLinks.map((link) => (
|
||||
<a
|
||||
href={link.href}
|
||||
class:list={['nav-link', { active: isActive(link.href) }]}
|
||||
aria-current={isActive(link.href) ? 'page' : undefined}
|
||||
>
|
||||
{link.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
position: static;
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
max-width: var(--width-container);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: var(--gutter);
|
||||
padding-right: var(--gutter);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
font-family: var(--font-structure);
|
||||
font-size: var(--type-base);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-name:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-family: var(--font-structure);
|
||||
font-size: var(--type-sm);
|
||||
font-weight: 400;
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
text-decoration: underline;
|
||||
text-decoration-color: var(--accent-primary);
|
||||
text-decoration-thickness: 2px;
|
||||
text-underline-offset: 6px;
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.nav-inner {
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: var(--space-3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import NavBar from '../components/NavBar.astro';
|
||||
---
|
||||
|
||||
<BaseLayout title="Crash Test Dev" description="Blog by Ken Chau">
|
||||
<NavBar slot="nav" />
|
||||
<h1 style="font-family: var(--font-prose); font-size: var(--type-2xl); color: var(--text-primary);">
|
||||
Crash Test Dev
|
||||
</h1>
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
/**
|
||||
* Build-output test for NavBar.astro
|
||||
* Runs after `npm run build` and checks source + dist HTML for expected structure.
|
||||
*/
|
||||
import { readFileSync, existsSync, readdirSync } 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/components/NavBar.astro')),
|
||||
'src/components/NavBar.astro exists'
|
||||
);
|
||||
|
||||
// ── Source content checks ──
|
||||
console.log('\n--- NavBar source content checks ---');
|
||||
|
||||
if (existsSync(resolve('src/components/NavBar.astro'))) {
|
||||
const navSrc = readFileSync(resolve('src/components/NavBar.astro'), 'utf-8');
|
||||
|
||||
assert(
|
||||
navSrc.includes('Astro.url.pathname'),
|
||||
'NavBar reads Astro.url.pathname'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('import.meta.env.BASE_URL'),
|
||||
'NavBar reads import.meta.env.BASE_URL'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes("'Posts'") || navSrc.includes('"Posts"'),
|
||||
'navLinks has Posts entry'
|
||||
);
|
||||
assert(
|
||||
/aria-label\s*=\s*['"]Site navigation['"]/.test(navSrc),
|
||||
'nav has aria-label="Site navigation"'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('aria-current'),
|
||||
'NavBar uses aria-current attribute'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('Crash Test Dev'),
|
||||
'NavBar has site name "Crash Test Dev"'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('site-name'),
|
||||
'NavBar has .site-name class'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('nav-links'),
|
||||
'NavBar has .nav-links class'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('nav-link'),
|
||||
'NavBar has .nav-link class'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('nav-inner'),
|
||||
'NavBar has .nav-inner class'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('isActive') || navSrc.includes('is_active'),
|
||||
'NavBar has isActive function'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('border-bottom') || navSrc.includes('border-bottom'),
|
||||
'nav has border-bottom style'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('--font-structure'),
|
||||
'Uses structure font'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('max-width: var(--width-container)') || navSrc.includes('width-container'),
|
||||
'.nav-inner uses container max-width'
|
||||
);
|
||||
assert(
|
||||
navSrc.includes('599px'),
|
||||
'Has responsive breakpoint at 599px'
|
||||
);
|
||||
}
|
||||
|
||||
// ── index.astro includes NavBar ──
|
||||
console.log('\n--- index.astro integration checks ---');
|
||||
|
||||
if (existsSync(resolve('src/pages/index.astro'))) {
|
||||
const indexSrc = readFileSync(resolve('src/pages/index.astro'), 'utf-8');
|
||||
|
||||
assert(
|
||||
indexSrc.includes('NavBar'),
|
||||
'index.astro imports/uses NavBar'
|
||||
);
|
||||
assert(
|
||||
indexSrc.includes("slot='nav'") || indexSrc.includes('slot="nav"') || indexSrc.includes("slot='nav'") || indexSrc.includes('slot=\"nav\"'),
|
||||
'NavBar is placed in nav slot'
|
||||
);
|
||||
}
|
||||
|
||||
// ── Build output checks ──
|
||||
console.log('\n--- Build output checks ---');
|
||||
|
||||
assert(existsSync(indexPath), 'dist/crashtestdev/index.html exists');
|
||||
|
||||
if (existsSync(indexPath)) {
|
||||
const html = readFileSync(indexPath, 'utf-8');
|
||||
|
||||
assert(
|
||||
html.includes('<nav'),
|
||||
'dist HTML contains <nav> element'
|
||||
);
|
||||
assert(
|
||||
html.includes('Crash Test Dev'),
|
||||
'dist HTML contains "Crash Test Dev"'
|
||||
);
|
||||
assert(
|
||||
html.includes('Posts'),
|
||||
'dist HTML contains "Posts" nav link'
|
||||
);
|
||||
assert(
|
||||
/aria-label\s*=\s*["']Site navigation["']/.test(html),
|
||||
'dist HTML has aria-label="Site navigation"'
|
||||
);
|
||||
|
||||
// Check CSS is present in dist (HTML or linked CSS)
|
||||
let distCss = '';
|
||||
// Astro may output CSS in dist/_astro/ or dist/crashtestdev/_astro/
|
||||
for (const cssDir of [resolve(distDir, '_astro'), resolve(distDir, 'crashtestdev', '_astro')]) {
|
||||
if (existsSync(cssDir)) {
|
||||
for (const f of readdirSync(cssDir)) {
|
||||
if (f.endsWith('.css')) {
|
||||
distCss += readFileSync(resolve(cssDir, f), 'utf-8');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
assert(
|
||||
html.includes('nav-inner') || distCss.includes('nav-inner'),
|
||||
'dist output contains nav-inner styling'
|
||||
);
|
||||
}
|
||||
|
||||
// ── Summary ──
|
||||
console.log(`\n--- Results: ${passes} passed, ${failures} failed ---`);
|
||||
|
||||
if (failures > 0) {
|
||||
process.exit(1);
|
||||
}
|
||||
Reference in New Issue
Block a user