JMRP.io (Astro v6)

This is the source code for my personal website, jmrp.io, built with Astro 6. It features a high-performance static architecture, robust security headers (including a strict CSP), and a focus on accessibility and modern web standards.

📑 Table of Contents

• Features
• Tech Stack
• Project Structure
• Getting Started
• Quality Assurance
• Deployment
• Security & Nginx
• LaTeX CV Compilation

---

🚀 Features

• Performance:
  • 100/100 Google PageSpeed (Desktop & Mobile).
  • Core Web Vitals: LCP < 0.8s, CLS < 0.031, FCP < 0.3s.
  • SSG (Static Site Generation): All pages pre-rendered at build time.
  • Islands Architecture: Minimal JavaScript with Preact islands.
  • Image Optimization: WebP/AVIF format with responsive sizing.
  • UnoCSS: Atomic CSS engine with presetWind4 for minimal and ultra-fast styles.
  • Icon Consistency: Custom verification engine ensuring 1:1 mapping between icons and CSS rules.
  • CSS Inlining: Critical CSS inlined for sub-second FCP.
• Accessibility:
  • WCAG 2.2 AA Compliance: Automated testing via Playwright + Axe-core.
  • HTML5 Compliance: Strict HTML validation (html-validate).
  • Motion Sensitivity: Respects prefers-reduced-motion settings.
• Content:
  • Content Layer API: Advanced content management (Standard in Astro v6).
  • Technical Blog: Support for MDX, LaTeX (MathJax), and Mermaid diagrams (SSR rendered).
  • Bilingual (EN/ES): Full i18n with Astro's built-in routing, hreflang alternates, and a language switcher with automatic browser language detection.
  • Interactive Tools: 14 privacy-first browser tools (security, network, developer utilities).
  • Unified CV: Dynamic CV generation with automated LaTeX-to-PDF compilation.
• Security:
  • CSP (Content Security Policy): Nonce-only strategy with strict-dynamic.
  • SRI (Subresource Integrity): Automated hash generation for all local resources.
  • Security Headers: HSTS, X-Frame-Options, COOP, COEP, CORP, Permissions-Policy.
• DevOps & QA:
  • CI Health Dashboard: Premium unified report interface hosted on Vercel.
  • Living PR Comments: Real-time CI status updates directly in GitHub Pull Requests.
  • Deep Security: Automated SonarCloud analysis and pnpm audit on every commit.

🛠️ Tech Stack

• Framework: Astro v6 (Beta)
• UI Components: Preact (islands only)
• Styling: UnoCSS (presetWind4) & CSS Custom Properties
• Content: MDX, Mermaid (SSR), MathJax (SSR)
• Icons: Iconify (12 collections)
• Syntax Highlighting: Shiki (with custom RouterOS grammar)
• Testing: Playwright, Axe-core, Lighthouse
• Linting: ESLint, Stylelint, Prettier, CSpell
• Security: SonarCloud, CSP Nonce-only strategy
• CI/CD: GitHub Actions & Vercel (Reports)

📂 Project Structure

Click to expand folder structure

/
├── src/
│   ├── components/       # Reusable Astro & Preact components
│   │   ├── apps/         # Interactive tool components (vanilla JS)
│   │   ├── ui/           # 36 reusable UI components
│   │   ├── layout/       # BaseHead, Header, Footer, LanguageDetector
│   │   ├── homelab/      # Preact islands (real-time data)
│   │   ├── blog/         # PostCard, PostGrid, TagCloud
│   │   ├── cv/           # CV-specific components
│   │   └── pages/        # Full page components
│   ├── content/          # Content Collections (Blog, Tools, CV, Config)
│   ├── content.config.ts # Collection Definitions (Content Layer)
│   ├── i18n/             # Internationalization (EN/ES translations)
│   ├── integrations/     # Pre-build & post-build pipelines
│   ├── layouts/          # Page layouts (Base, Tool)
│   ├── pages/            # File-based routing
│   ├── styles/           # Global CSS & design tokens
│   └── utils/            # Helper functions
├── public/               # Static assets (favicons, PDFs, llms.txt)
├── scripts/              # Build, QA & maintenance scripts
│   └── ci/               # 19 CI automation scripts
├── tests/                # 12 Playwright E2E & Accessibility test suites
├── docs/                 # Extended documentation
├── cv_latex/             # LaTeX source files for CV
├── astro.config.mjs      # Astro configuration
├── uno.config.ts         # UnoCSS configuration
└── package.json          # Dependencies & Scripts

🏁 Getting Started

Prerequisites

• Node.js (v22.12.0+): Required for advanced build and CI features.
• pnpm (v10.0.0+): Required package manager.

Installation

# 1. Clone & Install
git clone https://github.com/jmrplens/jmrp.io.git
cd jmrp.io && pnpm install

# 2. Install Playwright Browsers
pnpm exec playwright install --with-deps chromium

# 3. Start development
pnpm run dev

Build & Verify

The project uses a unified verification suite (pnpm verify) with 14 sequential steps: typecheck, ESLint, Prettier, Stylelint, build, HTML validation, RSS validation, Schema.org validation, CSpell, broken links, JSDoc coverage, SonarCloud, and Playwright E2E.

# Full Quality Suite (14 steps, fail-fast)
pnpm verify

# Production Build only
pnpm run build

⚠️ Stop astro dev before running pnpm verify — the dev server lacks nonces/SRI, causing security tests to fail.

🧪 Quality Assurance

This project employs a rigorous testing pipeline culminating in a CI Health Dashboard.

Unified Reporting Architecture

The CI pipeline aggregates all analysis and testing results into a single interactive dashboard.

graph TD
    Trigger[Push / PR] --> Phase1[Analysis & Build]
    Phase1 --> Phase2[Deep Testing]
    Phase2 --> Phase3[Aggregation]
    Phase3 --> Dashboard[Vercel Dashboard]
    Phase3 --> Comment[GitHub PR Comment]

Loading

• Executive Summary: High-level overview of project health and critical highlights.
• Bundle Analysis: Tracks JS/CSS size with a generous 8MB threshold for heavy technical content.
• Accessibility Matrix: Parallel tests for Light/Dark themes and Mobile/Desktop form factors.
• Static Analysis: Real-time feedback from ESLint, Stylelint, Prettier, CSpell, and JSDoc.
• Security Audit: Integrated SonarCloud and pnpm audit monitoring.

🔒 Security & Nginx

Advanced Nginx configuration for high-security environments.

• CSP (Content Security Policy): Nonce-only strategy with strict-dynamic for CSP compliance.
• SRI (Subresource Integrity): Automated hash generation for all local resources.
• Astro v6 Nonce Patch: Custom Vite plugin to ensure CSP compliance with Astro's prefetch system.
• Automated Deployment: Post-build script verifies Nginx config and deploys security snippets atomically.
• Security Headers: HSTS (2 years), X-Content-Type-Options, X-Frame-Options, COOP, COEP, CORP, Permissions-Policy.

📄 LaTeX CV Compilation

Automated LaTeX compilation for professional PDF resumes. See CV LaTeX Documentation for details.