Here's how to get in touch:
diff --git a/src/pages/projects/index.astro b/src/pages/projects/index.astro
index 4291e14..419becc 100644
--- a/src/pages/projects/index.astro
+++ b/src/pages/projects/index.astro
@@ -24,14 +24,14 @@ const ogData = getListOGData(
-
+
Projects
-
+
{
projects.map((project) => (
-
-
+
))
}
diff --git a/tests/README.md b/tests/README.md
new file mode 100644
index 0000000..133057b
--- /dev/null
+++ b/tests/README.md
@@ -0,0 +1,348 @@
+# QA Testing
+
+This directory contains Playwright-based end-to-end tests for the website. These tests verify functionality, accessibility, responsive design, and content rendering.
+
+## Setup
+
+### System Requirements
+
+Playwright requires certain system libraries to run browsers. On Ubuntu/Debian systems, you can install them with:
+
+```bash
+npx playwright install --with-deps
+```
+
+**Note**: In highly sandboxed environments (like some CI containers), you may need to install system dependencies separately or use containerized Playwright images.
+
+### First Time Setup
+
+**Recommended**: Use the justfile setup command which handles everything:
+
+```bash
+just setup
+```
+
+This installs both npm dependencies and Playwright browsers.
+
+**Alternative**: Manual setup:
+
+```bash
+# Install npm dependencies
+npm install
+
+# Install Playwright browsers
+npx playwright install
+```
+
+Or install with system dependencies for all browsers:
+
+```bash
+npx playwright install --with-deps
+```
+
+## Running Tests
+
+### Using Just Commands
+
+The recommended way to run tests is via the justfile:
+
+```bash
+# Quick sample for local dev (tests ~5 pages)
+just qa-quick
+
+# Run core tests only (navigation, accessibility, content, responsive)
+just qa-core
+
+# Run comprehensive tests only (all sitemap pages)
+just qa-comprehensive
+
+# Run all tests - full suite (for CI or before major changes)
+just qa-full
+
+# Legacy: same as qa-full
+just qa
+
+# Run tests with visible browser
+just qa-headed
+
+# Open Playwright UI for interactive testing
+just qa-ui
+
+# Run tests in debug mode
+just qa-debug
+
+# View test report
+just qa-report
+
+# Generate test code interactively
+just qa-codegen
+```
+
+### Using npm Scripts
+
+Alternatively, use npm scripts directly:
+
+```bash
+# Quick sample for local dev
+npm run qa:quick
+
+# Run core tests only
+npm run qa:core
+
+# Run comprehensive tests only
+npm run qa:comprehensive
+
+# Run all tests - full suite
+npm run qa:full
+
+# Legacy: same as qa:full
+npm run qa
+
+# Run with visible browser
+npm run qa:headed
+
+# Open Playwright UI
+npm run qa:ui
+
+# Debug mode
+npm run qa:debug
+
+# Show report
+npm run qa:report
+
+# Code generator
+npm run qa:codegen
+```
+
+### Recommended Workflow
+
+**During development:**
+```bash
+just qa-quick
+```
+Tests a sample of pages across the site for quick feedback.
+
+**Before committing structural changes:**
+```bash
+just qa-full
+```
+Tests all pages from the sitemap plus all core functionality.
+
+**Just the comprehensive tests:**
+```bash
+just qa-comprehensive
+```
+Useful when reorganizing site structure to verify all pages still work.
+
+## Test Suites
+
+### Core Test Suites (Fast, Fixed Pages)
+
+These tests run on a fixed set of core pages and are fast enough for local development:
+
+**Navigation Tests** (`navigation.spec.ts`)
+- Home page loads
+- Navigation between pages
+- 404 page handling
+- Consistent navigation across pages
+
+**Accessibility Tests** (`accessibility.spec.ts`)
+- Proper heading structure
+- Alt text on images
+- Descriptive link text
+- Language attributes
+- Skip links for keyboard navigation
+- Focus visibility
+- No duplicate IDs
+
+**Content Tests** (`content.spec.ts`)
+- Page content rendering
+- Blog posts display
+- Briefs categories
+- Projects display
+- RSS feed validity
+- Sitemap generation
+- Code block rendering
+- External link security
+
+**Responsive Design Tests** (`responsive.spec.ts`)
+- Mobile, tablet, and desktop viewports
+- No horizontal scrolling
+- Responsive images
+- Readable text on mobile
+- Touch target sizing
+- Content reflow
+
+### Comprehensive Test Suite (Sitemap-Based)
+
+**Comprehensive Tests** (`comprehensive.spec.ts`)
+- **Discovers all pages from sitemap** automatically
+- Tests every page in your site for:
+ - Page loads successfully (< 400 status)
+ - Has valid title
+ - Has content (>50 characters)
+ - Exactly one H1
+ - Proper heading hierarchy (no skipped levels)
+ - All images have alt text
+ - No duplicate IDs
+ - All links have accessible labels
+
+**Two modes:**
+1. **Full mode** (CI): Tests ALL pages from sitemap
+2. **Sample mode** (Local): Tests ~5 representative pages for quick feedback
+
+This suite is designed to catch issues during site reorganization and ensures structural consistency across all pages.
+
+### Link Validation (External to Playwright)
+
+In addition to the Playwright tests, the repository includes **comprehensive link validation** via `scripts/validate-links.js`:
+
+- ✅ Validates **all internal links** across all built HTML files
+- ✅ Validates **fragment links** (e.g., `#section-id`)
+- ✅ Checks both `href` and `src` attributes
+- ✅ Verifies fragment targets exist on destination pages
+- ✅ External links are intentionally ignored (they change frequently)
+
+Run with:
+```bash
+npm run validate:links
+```
+
+This runs as part of `npm run validate:all` and in CI. Together with the Playwright tests, this provides comprehensive coverage of your site's link integrity.
+
+## Test Configuration
+
+Configuration is in `playwright.config.ts`. Key settings:
+
+- **Base URL**: `http://localhost:4321` (or `$BASE_URL` env var)
+- **Browsers**: Chromium, Firefox, WebKit, Mobile Chrome, Mobile Safari
+- **Auto-start**: Automatically builds and starts preview server before tests
+- **Retries**: 2 retries on CI, 0 locally
+- **Screenshots**: Captured on failure
+- **Traces**: Captured on first retry
+
+## Writing New Tests
+
+Create new test files in the `tests/` directory:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Feature Name', () => {
+ test('should do something', async ({ page }) => {
+ await page.goto('/');
+ // Your test code here
+ });
+});
+```
+
+## CI Integration
+
+Tests can be integrated into CI by adding to your workflow:
+
+```yaml
+- name: Install dependencies
+ run: npm ci
+
+- name: Install Playwright Browsers
+ run: npx playwright install --with-deps
+
+- name: Run QA tests
+ run: npm run qa
+```
+
+## Debugging
+
+### Visual Debugging
+
+Run tests with visible browser:
+
+```bash
+just qa-headed
+```
+
+### Interactive UI
+
+Open the Playwright UI for interactive test development:
+
+```bash
+just qa-ui
+```
+
+### Debug Mode
+
+Step through tests line by line:
+
+```bash
+just qa-debug
+```
+
+### Generate Test Code
+
+Use the code generator to create tests by interacting with your site:
+
+```bash
+just qa-codegen
+```
+
+This opens a browser where you can click around, and Playwright will generate test code.
+
+## Summary: What Gets Tested
+
+### Playwright Tests
+
+**Coverage:**
+- **Core tests** (33 tests × 5 browsers = 165 test executions)
+ - Test ~7 fixed pages (/, /blog, /briefs, /projects, /about, RSS, sitemap)
+ - Run structural, accessibility, content, and responsive checks
+
+- **Comprehensive tests** (variable count based on site size)
+ - **Sample mode** (~5 pages × 5 tests × 5 browsers = ~125 test executions)
+ - **Full mode** (all sitemap pages × 5 tests × 5 browsers = hundreds/thousands of executions)
+ - Discovers all pages from sitemap automatically
+ - Tests structure, headings, images, IDs, and links on every page
+
+**What changes require test updates:**
+- ✅ **No updates needed:** Adding blog posts, briefs, or projects
+- ✅ **No updates needed:** Content changes within pages
+- ✅ **No updates needed:** Styling changes (as long as accessibility maintained)
+- ⚠️ **Updates needed:** Renaming main sections (update URLs in core tests)
+- ⚠️ **Updates needed:** Changing navigation HTML structure (update selectors)
+- ⚠️ **Updates needed:** Removing main sections (remove/skip tests)
+
+### Link Validation (scripts/validate-links.js)
+
+**Coverage:**
+- **All** internal links across **all** built HTML files
+- **All** fragment links with verification targets exist
+- Runs independently of Playwright, as part of build validation
+
+**What changes require updates:**
+- ✅ **No updates needed:** This automatically adapts to site structure changes
+
+### Recommended Usage
+
+**Quick local feedback:**
+```bash
+just qa-quick
+```
+
+**Before structural reorganization:**
+```bash
+just qa-full && npm run validate:links
+```
+
+**In CI:**
+```bash
+npm run qa:full
+npm run validate:links
+```
+
+## Tips
+
+- Tests automatically build the site and start the preview server
+- Use `--headed` flag to see what's happening in the browser
+- Use Playwright UI for the best debugging experience
+- Screenshots and traces are saved on test failures
+- Run `just qa-report` after failures to see detailed reports with screenshots
+- The comprehensive tests adapt automatically to your sitemap—no maintenance needed as you add content!
diff --git a/tests/accessibility.spec.ts b/tests/accessibility.spec.ts
new file mode 100644
index 0000000..007ecac
--- /dev/null
+++ b/tests/accessibility.spec.ts
@@ -0,0 +1,123 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Accessibility", () => {
+ test("home page has proper heading structure", async ({ page }) => {
+ await page.goto("/");
+
+ // Should have exactly one h1
+ const h1Count = await page.locator("h1").count();
+ expect(h1Count).toBe(1);
+
+ // Headings should be in proper order (no skipping levels)
+ const headingLevels = await page.evaluate(() => {
+ const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+ return headings.map((h) => parseInt(h.tagName.substring(1)));
+ });
+
+ // Verify headings exist
+ expect(headingLevels.length).toBeGreaterThan(0);
+
+ // Verify no heading levels are skipped (e.g., h1 -> h3 without h2)
+ for (let i = 1; i < headingLevels.length; i++) {
+ const levelDiff = headingLevels[i] - headingLevels[i - 1];
+ // Can only go down any number of levels or up by 1 level
+ expect(levelDiff).toBeLessThanOrEqual(1);
+ }
+ });
+
+ test("all images have alt text", async ({ page }) => {
+ await page.goto("/");
+
+ const images = await page.locator("img").all();
+ for (const img of images) {
+ const alt = await img.getAttribute("alt");
+ expect(alt).toBeDefined();
+ }
+ });
+
+ test("links have descriptive text", async ({ page }) => {
+ await page.goto("/");
+
+ const links = await page.locator("a").all();
+ for (const link of links) {
+ const text = await link.textContent();
+ const ariaLabel = await link.getAttribute("aria-label");
+ const title = await link.getAttribute("title");
+
+ // Link should have either visible text, aria-label, or title
+ expect(
+ (text && text.trim().length > 0) ||
+ (ariaLabel && ariaLabel.trim().length > 0) ||
+ (title && title.trim().length > 0),
+ ).toBeTruthy();
+ }
+ });
+
+ test("page has proper language attribute", async ({ page }) => {
+ await page.goto("/");
+
+ const htmlLang = await page.locator("html").getAttribute("lang");
+ expect(htmlLang).toBeTruthy();
+ expect(htmlLang).toBe("en");
+ });
+
+ test("skip to content link exists for keyboard navigation", async ({ page }) => {
+ await page.goto("/");
+
+ // Check if skip link exists (common accessibility pattern)
+ const skipLink = page.locator("a[href=\"#main\"], a[href=\"#content\"]").first();
+ const skipLinkExists = await skipLink.count() > 0;
+
+ // If it exists, verify it's functional
+ if (skipLinkExists) {
+ const href = await skipLink.getAttribute("href");
+ const targetId = href?.replace("#", "");
+ if (targetId) {
+ const target = page.locator(`#${targetId}`);
+ await expect(target).toBeAttached();
+ }
+ }
+ });
+
+ test("focus is visible on interactive elements", async ({ page }) => {
+ await page.goto("/");
+
+ // Focus on the first navigation link to ensure we're testing page content
+ const firstNavLink = page.locator("nav a, header a").first();
+ await firstNavLink.focus();
+
+ // Verify the focused element has visible focus styles
+ const focusStyles = await page.evaluate(() => {
+ const el = document.activeElement;
+ if (!el) return null;
+ const styles = window.getComputedStyle(el);
+ return {
+ outline: styles.outline,
+ outlineWidth: styles.outlineWidth,
+ outlineStyle: styles.outlineStyle,
+ outlineColor: styles.outlineColor,
+ boxShadow: styles.boxShadow,
+ };
+ });
+
+ // Should have some form of visible focus indicator
+ // (outline or box-shadow for custom focus styles)
+ expect(focusStyles).toBeTruthy();
+ expect(
+ (focusStyles?.outline !== "none" && focusStyles?.outlineWidth !== "0px") ||
+ (focusStyles?.boxShadow !== "none"),
+ ).toBeTruthy();
+ });
+
+ test("no duplicate IDs on page", async ({ page }) => {
+ await page.goto("/");
+
+ const ids = await page.evaluate(() => {
+ const elements = Array.from(document.querySelectorAll("[id]"));
+ return elements.map((el) => el.id);
+ });
+
+ const uniqueIds = new Set(ids);
+ expect(ids.length).toBe(uniqueIds.size);
+ });
+});
diff --git a/tests/comprehensive.spec.ts b/tests/comprehensive.spec.ts
new file mode 100644
index 0000000..ff365a5
--- /dev/null
+++ b/tests/comprehensive.spec.ts
@@ -0,0 +1,206 @@
+import { test, expect } from "@playwright/test";
+import { parseString } from "xml2js";
+import { promisify } from "util";
+
+const parseXML = promisify(parseString);
+
+/**
+ * Comprehensive test suite that visits every page in the sitemap.
+ *
+ * This suite discovers all pages from the sitemap and runs structural
+ * and accessibility checks on each one. It's designed to catch issues
+ * during site reorganization.
+ *
+ * Modes:
+ * - CI (default): Tests ALL pages from sitemap
+ * - Sample (SAMPLE_MODE=true): Tests only a few pages for quick local feedback
+ */
+
+// Configuration constants
+const SAMPLE_PAGE_COUNT = 5;
+const MIN_PAGE_CONTENT_LENGTH = 50;
+
+let allUrls: string[] = [];
+let testUrls: string[] = [];
+
+// Fetch and parse sitemap before tests run
+test.beforeAll(async ({ request }) => {
+ const response = await request.get("/sitemap-0.xml");
+ expect(response.ok()).toBeTruthy();
+
+ const xmlText = await response.text();
+ const result = (await parseXML(xmlText)) as {
+ urlset?: { url?: Array<{ loc: string[] }> };
+ };
+
+ // Validate sitemap structure
+ if (!result.urlset?.url) {
+ throw new Error("Invalid sitemap structure: missing urlset or url array");
+ }
+
+ // Extract URLs from sitemap
+ const urlset = result.urlset.url;
+ allUrls = urlset.map((entry) => {
+ const url = entry.loc[0];
+ // Convert full URL to path-only
+ const urlObj = new URL(url);
+ return urlObj.pathname;
+ });
+
+ // Determine which URLs to test based on mode
+ const sampleMode = process.env.SAMPLE_MODE === "true";
+
+ if (sampleMode) {
+ // Sample mode: test a diverse sample (useful for local dev)
+ testUrls = sampleUrls(allUrls, SAMPLE_PAGE_COUNT);
+ console.log(`\n📋 Sample mode: Testing ${testUrls.length} of ${allUrls.length} pages`);
+ } else {
+ // Full mode: test everything (for CI)
+ testUrls = allUrls;
+ console.log(`\n📋 Comprehensive mode: Testing all ${testUrls.length} pages`);
+ }
+});
+
+/**
+ * Sample a diverse set of URLs from the sitemap for quick local testing
+ */
+function sampleUrls(urls: string[], count: number): string[] {
+ const samples = new Set();
+
+ // Always include home page
+ samples.add("/");
+
+ // Try to get one from each major section
+ const sections = ["blog", "briefs", "projects", "about"];
+ for (const section of sections) {
+ const match = urls.find((url) => url.includes(`/${section}/`) || url === `/${section}`);
+ if (match) samples.add(match);
+ }
+
+ // Fill remaining with random pages
+ while (samples.size < Math.min(count, urls.length)) {
+ const randomUrl = urls[Math.floor(Math.random() * urls.length)];
+ samples.add(randomUrl);
+ }
+
+ return Array.from(samples);
+}
+
+test.describe("Comprehensive Sitemap Tests", () => {
+ test("all pages load and have valid structure", async ({ page }) => {
+ for (const url of testUrls) {
+ const response = await page.goto(url);
+
+ // Page should load successfully
+ expect(response?.status(), `${url} should load successfully`).toBeLessThan(400);
+
+ // Should have a title
+ await expect(page, `${url} should have a title`).toHaveTitle(/.+/);
+
+ // Should have content
+ const bodyText = await page.locator("body").textContent();
+ expect(
+ bodyText?.length,
+ `${url} should have content (>${MIN_PAGE_CONTENT_LENGTH} chars)`,
+ ).toBeGreaterThan(MIN_PAGE_CONTENT_LENGTH);
+ }
+ });
+
+ test("all pages have proper heading structure", async ({ page }) => {
+ for (const url of testUrls) {
+ await page.goto(url);
+
+ // Should have exactly one h1
+ const h1Count = await page.locator("h1").count();
+ expect(h1Count, `${url} should have exactly one h1`).toBe(1);
+
+ // Headings should be in proper order (no skipping levels)
+ const headingLevels = await page.evaluate(() => {
+ const headings = Array.from(document.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+ return headings.map((h) => parseInt(h.tagName.substring(1)));
+ });
+
+ // Verify no heading levels are skipped
+ for (let i = 1; i < headingLevels.length; i++) {
+ const levelDiff = headingLevels[i] - headingLevels[i - 1];
+ expect(levelDiff, `${url} heading hierarchy should not skip levels`).toBeLessThanOrEqual(1);
+ }
+ }
+ });
+
+ test("all images have alt text on all pages", async ({ page }) => {
+ for (const url of testUrls) {
+ await page.goto(url);
+
+ const images = await page.locator("img").all();
+ for (const img of images) {
+ const alt = await img.getAttribute("alt");
+ const src = await img.getAttribute("src");
+ expect(alt, `Image on ${url} missing alt text (src: ${src})`).toBeDefined();
+ }
+ }
+ });
+
+ test("no duplicate IDs on any page", async ({ page }) => {
+ for (const url of testUrls) {
+ await page.goto(url);
+
+ const ids = await page.evaluate(() => {
+ const elements = Array.from(document.querySelectorAll("[id]"));
+ return elements.map((el) => el.id);
+ });
+
+ const uniqueIds = new Set(ids);
+ expect(ids.length, `${url} has duplicate IDs`).toBe(uniqueIds.size);
+ }
+ });
+
+ test("all links are accessible on all pages", async ({ page }) => {
+ for (const url of testUrls) {
+ await page.goto(url);
+
+ const links = await page.locator("a").all();
+ for (const link of links) {
+ const text = await link.textContent();
+ const ariaLabel = await link.getAttribute("aria-label");
+ const title = await link.getAttribute("title");
+ const href = await link.getAttribute("href");
+
+ // Link should have either visible text, aria-label, or title
+ expect(
+ (text && text.trim().length > 0) ||
+ (ariaLabel && ariaLabel.trim().length > 0) ||
+ (title && title.trim().length > 0),
+ `Link on ${url} missing accessible label (href: ${href})`,
+ ).toBeTruthy();
+ }
+ }
+ });
+});
+
+// Summary test that reports coverage
+test.describe("Test Coverage Summary", () => {
+ test("report test coverage", async () => {
+ const sampleMode = process.env.SAMPLE_MODE === "true";
+
+ console.log("\n" + "=".repeat(60));
+ console.log("📊 Test Coverage Summary");
+ console.log("=".repeat(60));
+ console.log(`Mode: ${sampleMode ? "SAMPLE (local dev)" : "COMPREHENSIVE (CI)"}`);
+ console.log(`Total pages in sitemap: ${allUrls.length}`);
+ console.log(`Pages tested: ${testUrls.length}`);
+ console.log(`Coverage: ${((testUrls.length / allUrls.length) * 100).toFixed(1)}%`);
+
+ if (sampleMode) {
+ console.log("\n💡 Tip: Run full tests with:");
+ console.log(" npm run qa:full");
+ console.log(" or");
+ console.log(" just qa-full");
+ }
+
+ console.log("=".repeat(60) + "\n");
+
+ // This test always passes - it's just for reporting
+ expect(testUrls.length).toBeGreaterThan(0);
+ });
+});
diff --git a/tests/content.spec.ts b/tests/content.spec.ts
new file mode 100644
index 0000000..6907008
--- /dev/null
+++ b/tests/content.spec.ts
@@ -0,0 +1,144 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Content", () => {
+ test("home page displays expected content", async ({ page }) => {
+ await page.goto("/");
+
+ // Main heading should be present
+ const h1 = page.locator("h1").first();
+ await expect(h1).toBeVisible();
+
+ // Page should have some content
+ const bodyText = await page.locator("body").textContent();
+ expect(bodyText?.length).toBeGreaterThan(100);
+ });
+
+ test("blog page lists blog posts", async ({ page }) => {
+ await page.goto("/blog");
+
+ // Should have a heading
+ await expect(page.locator("h1")).toContainText("Blog");
+
+ // Should have at least some content (posts or a message)
+ const bodyText = await page.locator("body").textContent();
+ expect(bodyText?.length).toBeGreaterThan(50);
+ });
+
+ test("briefs page shows categories", async ({ page }) => {
+ await page.goto("/briefs");
+
+ // Should have a heading
+ await expect(page.locator("h1")).toContainText("Briefs");
+
+ // Should have some content
+ const bodyText = await page.locator("body").textContent();
+ expect(bodyText?.length).toBeGreaterThan(50);
+ });
+
+ test("projects page displays projects", async ({ page }) => {
+ await page.goto("/projects");
+
+ // Should have a heading
+ await expect(page.locator("h1")).toContainText("Projects");
+
+ // Should have some content
+ const bodyText = await page.locator("body").textContent();
+ expect(bodyText?.length).toBeGreaterThan(50);
+ });
+
+ test("about page has bio information", async ({ page }) => {
+ await page.goto("/about");
+
+ // Should have a heading
+ await expect(page.locator("h1")).toContainText("About");
+
+ // Should have some biographical content
+ const bodyText = await page.locator("body").textContent();
+ expect(bodyText?.length).toBeGreaterThan(100);
+ });
+
+ test("RSS feed exists and is valid XML", async ({ page }) => {
+ const response = await page.goto("/rss.xml");
+ expect(response?.status()).toBe(200);
+
+ const contentType = response?.headers()["content-type"];
+ expect(contentType).toMatch(/xml|rss/);
+
+ const content = await response?.text();
+ expect(content).toContain(" {
+ const response = await page.goto("/sitemap-0.xml");
+ expect(response?.status()).toBe(200);
+
+ const contentType = response?.headers()["content-type"];
+ expect(contentType).toMatch(/xml/);
+
+ const content = await response?.text();
+ expect(content).toContain(" {
+ await page.goto("/blog");
+
+ // Find a blog post link and navigate to it
+ const postLink = page.locator("article a, a[href*=\"/blog/\"]").first();
+ const hasPostLink = await postLink.count() > 0;
+
+ if (hasPostLink) {
+ await postLink.click();
+
+ // Check if there are any code blocks
+ const codeBlocks = page.locator("pre, code");
+ const codeBlockCount = await codeBlocks.count();
+
+ if (codeBlockCount > 0) {
+ // Verify code blocks are visible
+ await expect(codeBlocks.first()).toBeVisible();
+
+ // Verify they have some styling (not default browser styles)
+ const hasCustomStyling = await codeBlocks.first().evaluate(el => {
+ const styles = window.getComputedStyle(el);
+ return styles.backgroundColor !== "rgba(0, 0, 0, 0)" &&
+ styles.backgroundColor !== "transparent";
+ });
+
+ expect(hasCustomStyling).toBeTruthy();
+ }
+ }
+ });
+
+ test("external links open in new tab", async ({ page }) => {
+ await page.goto("/");
+
+ // Get the site's hostname for comparison
+ const siteHostname = new URL(page.url()).hostname;
+
+ const externalLinks = await page.locator("a[href^=\"http\"]").all();
+
+ for (const link of externalLinks) {
+ const href = await link.getAttribute("href");
+ const target = await link.getAttribute("target");
+
+ // Skip links to the same hostname (internal links with full URLs)
+ if (href) {
+ try {
+ const linkHostname = new URL(href).hostname;
+ if (linkHostname === siteHostname) continue;
+ } catch {
+ // Invalid URL - treat as external
+ }
+ }
+
+ // External links should open in new tab
+ expect(target).toBe("_blank");
+
+ // And should have security attributes
+ const rel = await link.getAttribute("rel");
+ expect(rel).toContain("noopener");
+ }
+ });
+});
diff --git a/tests/navigation.spec.ts b/tests/navigation.spec.ts
new file mode 100644
index 0000000..4a395cf
--- /dev/null
+++ b/tests/navigation.spec.ts
@@ -0,0 +1,55 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Navigation", () => {
+ test("home page loads successfully", async ({ page }) => {
+ await page.goto("/");
+ await expect(page).toHaveTitle(/Dispatches/i);
+ });
+
+ test("can navigate to blog", async ({ page }) => {
+ await page.goto("/");
+ await page.click("a[href=\"/blog\"]");
+ await expect(page).toHaveURL(/.*\/blog/);
+ await expect(page.locator("h1")).toContainText("Blog");
+ });
+
+ test("can navigate to briefs", async ({ page }) => {
+ await page.goto("/");
+ await page.click("a[href=\"/briefs\"]");
+ await expect(page).toHaveURL(/.*\/briefs/);
+ await expect(page.locator("h1")).toContainText("Briefs");
+ });
+
+ test("can navigate to projects", async ({ page }) => {
+ await page.goto("/");
+ await page.click("a[href=\"/projects\"]");
+ await expect(page).toHaveURL(/.*\/projects/);
+ await expect(page.locator("h1")).toContainText("Projects");
+ });
+
+ test("can navigate to about", async ({ page }) => {
+ await page.goto("/");
+ await page.click("a[href=\"/about\"]");
+ await expect(page).toHaveURL(/.*\/about/);
+ await expect(page.locator("h1")).toContainText("About");
+ });
+
+ test("404 page exists", async ({ page }) => {
+ const response = await page.goto("/nonexistent-page");
+ expect(response?.status()).toBe(404);
+ });
+
+ test("navigation is consistent across pages", async ({ page }) => {
+ const pages = ["/", "/blog", "/briefs", "/projects", "/about"];
+
+ for (const pagePath of pages) {
+ await page.goto(pagePath);
+
+ // Check that all main nav links are present
+ await expect(page.locator("nav a[href=\"/blog\"]")).toBeVisible();
+ await expect(page.locator("nav a[href=\"/briefs\"]")).toBeVisible();
+ await expect(page.locator("nav a[href=\"/projects\"]")).toBeVisible();
+ await expect(page.locator("nav a[href=\"/about\"]")).toBeVisible();
+ }
+ });
+});
diff --git a/tests/responsive.spec.ts b/tests/responsive.spec.ts
new file mode 100644
index 0000000..5fd87b9
--- /dev/null
+++ b/tests/responsive.spec.ts
@@ -0,0 +1,133 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("Responsive Design", () => {
+ const viewports = [
+ { name: "mobile", width: 375, height: 667 },
+ { name: "tablet", width: 768, height: 1024 },
+ { name: "desktop", width: 1920, height: 1080 },
+ ];
+
+ for (const viewport of viewports) {
+ test(`home page renders correctly on ${viewport.name}`, async ({ page }) => {
+ await page.setViewportSize({ width: viewport.width, height: viewport.height });
+ await page.goto("/");
+
+ // Page should be visible and have content
+ await expect(page.locator("body")).toBeVisible();
+
+ // No horizontal scrollbar should appear
+ const hasHorizontalScroll = await page.evaluate(() => {
+ return document.documentElement.scrollWidth > document.documentElement.clientWidth;
+ });
+
+ expect(hasHorizontalScroll).toBeFalsy();
+ });
+
+ test(`navigation works on ${viewport.name}`, async ({ page }) => {
+ await page.setViewportSize({ width: viewport.width, height: viewport.height });
+ await page.goto("/");
+
+ // Navigation should be present (might be in hamburger menu on mobile)
+ const navLinks = page.locator("nav a, header a");
+ const navLinkCount = await navLinks.count();
+ expect(navLinkCount).toBeGreaterThan(0);
+ });
+ }
+
+ test("images have reasonable styling constraints", async ({ page }) => {
+ await page.goto("/");
+
+ const images = await page.locator("img").all();
+
+ for (const img of images) {
+ // Check that images have CSS to prevent them from exceeding container width
+ const imageInfo = await img.evaluate((el) => {
+ const computed = window.getComputedStyle(el);
+ const parent = el.parentElement;
+ const parentWidth = parent ? parent.clientWidth : window.innerWidth;
+ return {
+ maxWidth: computed.maxWidth,
+ width: computed.width,
+ clientWidth: el.clientWidth,
+ parentWidth: parentWidth,
+ };
+ });
+
+ // Images should be constrained to their container
+ // Check that the image width doesn't exceed its parent container
+ const hasResponsiveConstraint =
+ imageInfo.maxWidth === "100%" ||
+ imageInfo.width === "100%" ||
+ imageInfo.clientWidth <= imageInfo.parentWidth;
+
+ expect(hasResponsiveConstraint).toBeTruthy();
+ }
+ });
+
+ test("text is readable on mobile", async ({ page }) => {
+ await page.setViewportSize({ width: 375, height: 667 });
+ await page.goto("/");
+
+ // Check font size is reasonable (at least 14px for body text)
+ const bodyFontSize = await page.evaluate(() => {
+ const body = document.body;
+ const fontSize = window.getComputedStyle(body).fontSize;
+ return parseInt(fontSize);
+ });
+
+ expect(bodyFontSize).toBeGreaterThanOrEqual(14);
+ });
+
+ test("touch targets are appropriately sized on mobile", async ({ page }) => {
+ await page.setViewportSize({ width: 375, height: 667 });
+ await page.goto("/");
+
+ // Test that buttons (not text links) have adequate touch target size
+ // WCAG 2.5.8 (AAA) recommends 44x44 but has exceptions for inline text links
+ // This site uses text-style navigation links which are exempt
+ const buttons = await page.locator("button").all();
+
+ for (const element of buttons) {
+ const box = await element.boundingBox();
+
+ if (box && box.width > 0 && box.height > 0) {
+ // Check that buttons meet reasonable touch target size
+ const minSize = 32;
+ expect(box.width).toBeGreaterThanOrEqual(minSize);
+ expect(box.height).toBeGreaterThanOrEqual(minSize);
+ }
+ }
+
+ // Verify navigation links are at least minimally tappable
+ const navLinks = await page.locator("nav a").all();
+ for (const link of navLinks) {
+ const box = await link.boundingBox();
+ if (box && box.width > 0 && box.height > 0) {
+ // Text links should have at least readable line height
+ expect(box.height).toBeGreaterThanOrEqual(20);
+ }
+ }
+ });
+
+ test("content reflows properly on narrow viewports", async ({ page }) => {
+ await page.setViewportSize({ width: 320, height: 568 });
+ await page.goto("/");
+
+ // Check for horizontal overflow
+ const overflowElements = await page.evaluate(() => {
+ const allElements = Array.from(document.querySelectorAll("*"));
+ return allElements
+ .filter((el) => {
+ const rect = el.getBoundingClientRect();
+ return rect.right > window.innerWidth;
+ })
+ .map((el) => ({
+ tag: el.tagName,
+ class: el.className,
+ }));
+ });
+
+ // Allow for some rounding errors but no significant overflow
+ expect(overflowElements.length).toBeLessThan(3);
+ });
+});