Technology Stack
Relevant source files
The following files were used as context for generating this wiki page:
The technology stack for lukemcdonald.com comprises a modern web development suite centered on the Astro framework. It focuses on static site generation, type safety, and utility-first styling to deliver a performant and accessible personal website.
Sources: README.md:1-5, AGENTS.md:1-5
Core Framework and Language
Astro serves as the primary static site generator for the project. It handles routing, layouts, and component rendering while utilizing vanilla TypeScript for logic and type safety.
- Astro: Orchestrates the build process and handles content collections.
- TypeScript: Provides a type-safe environment for all application logic.
- Node.js: Requires version 24.0.0 or higher for the development environment.
Sources: README.md:9-13, package.json:4-6, AGENTS.md:52-58
Styling and UI
The project utilizes TailwindCSS for styling, following a utility-first approach. It integrates specialized plugins to manage typography and complex content layouts.
Styling Components
- TailwindCSS: Manages global and component-level styles.
- @tailwindcss/typography: Adds the
proseclass for styling markdown-driven content. - @tailwindcss/vite: Handles CSS processing during the Vite-based build.
- Lucide Astro: Provides iconography directly imported as Astro components.
Sources: README.md:12, package.json:48-51, src/assets/styles/typography.css:1-5, AGENTS.md:70-74
The diagram shows how various styling components and assets are processed by the TailwindCSS engine and Astro to produce the final UI assets.
Sources: src/assets/styles/typography.css:1-10, AGENTS.md:70-74
Development and Workflow Tools
The project uses a structured development workflow managed by pnpm. It includes automated auditing and validation scripts to ensure code quality.
| Tool | Purpose | Command |
|---|---|---|
| pnpm | Package Management | pnpm install |
| fallow | Code Auditing & Hotspot Analysis | pnpm run audit:code |
| Prettier | Code Formatting | pnpm run format |
| ESLint | Static Code Analysis | pnpm run lint |
| tsx | TypeScript Execution | pnpm test |
Sources: package.json:11-30, AGENTS.md:7-12
Infrastructure and Deployment
Deployment is handled by Netlify, which provides hosting and serverless function support.
- Netlify: Hosts the static site and manages environment variables like
CLOUDFLARE_ANALYTICS_TOKEN. - Build Hooks: Netlify build hooks trigger daily rebuilds for dynamic content like the "verse of the day".
- Cloudflare Web Analytics: Provides privacy-focused analytics via a beacon loaded in production.
Sources: README.md:10-11, package.json:34-36
Testing Architecture
The project maintains a dual testing strategy using native Node.js testing for units and Playwright for end-to-end (E2E) browser testing.
Testing Tiers
- Unit Tests: Uses
node:testandnode:assert/strictfor pure helper functions and utilities. These tests are colocated with the source code. - E2E Tests: Uses Playwright to verify browser behavior and accessibility (WCAG) compliance.
- Accessibility: Integrates
@axe-core/playwrightto automatically scan pages for A/AA violations.
Sources: package.json:42-43, e2e/README.md:1-10, AGENTS.md:80-85
The sequence diagram illustrates the automated testing flow triggered during the CI process, including accessibility checks.
Sources: package.json:28-31, e2e/README.md:120-130, e2e/specs/accessibility.spec.ts:1-15
Content Management
Content is separated into collections and stored as flat files within the repository.
- Markdown: Used for standard site pages located in
src/content/pages/. - YAML: Used for structured data like resume details in
src/content/resume/. - Zod: Used for content schema validation (referenced via feature schemas).
Sources: AGENTS.md:61-68, src/content/resume/basics.yaml:1-5
This technology stack ensures the project remains lightweight by avoiding complex UI runtimes like React while maintaining rigorous standards for code health and accessibility.
Sources: README.md:9-14, AGENTS.md:77-79