JMRP.io (Astro v5)

This is the source code for my personal website, jmrp.io, built with Astro 5. 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 format with responsive sizing.
  • Font Loading: Optimized with fallback fonts and metric overrides.
  • CSS Inlining: Critical CSS inlined, async loading for non-critical.
• Accessibility:
  • Axe-core Testing: Automated WCAG 2.1 AA validation via Playwright for all pages.
  • HTML5 Compliance: Strict HTML validation (html-validate).
  • Lighthouse CI: Accessibility auditing on every commit.
  • Inclusive Design: Keyboard navigation, focus indicators, and unique aria-labels.
  • Motion Sensitivity: Respects prefers-reduced-motion settings.
• Content:
  • Blog: Technical articles with MDX support.
  • RSS Feed: Automatic generation of rss.xml for blog posts.
  • CV Generation: Automated LaTeX compilation for PDF resumes.
• Themeable: Light/Dark mode with system preference detection.
• Configurable: Centralized configuration via YAML files (site.yml, socials.yml, cv.yml).
• SEO Optimized: Dynamic Schema.org (JSON-LD), Open Graph, and Twitter Cards.

🛠️ Tech Stack

• Framework: Astro
• UI Components: Preact
• Styling: Native CSS (Variables, Nesting) & Astro Scoped Styles
• Icons: Iconify
• Testing: Playwright & Lighthouse
• CI/CD: GitHub Actions

📂 Project Structure

Click to expand folder structure

/
├── src/
│   ├── components/   # Reusable Astro & Preact components
│   ├── content/      # Content Collections (Blog posts)
│   ├── data/         # YAML Data files (Site config, CV, Socials)
│   ├── layouts/      # Page layouts (Base, etc.)
│   ├── pages/        # File-based routing
│   ├── styles/       # Global CSS & Fonts
│   └── utils/        # Helper functions
├── public/           # Static assets (images, fonts, robots.txt)
├── scripts/          # Build & Maintenance scripts
├── tests/            # Playwright E2E & Accessibility tests
├── cv_latex/         # LaTeX source files for CV
├── astro.config.mjs  # Astro configuration
└── package.json      # Dependencies & Scripts

🏁 Getting Started

Prerequisites

• Node.js (v18+)
• pnpm

Installation

# Clone the repository
git clone https://github.com/jmrplens/jmrp.io.git

# Install dependencies
pnpm install

# Start development server
pnpm run dev

Build

pnpm run build

This command will:

1. Fetch latest avatars.
2. Build the Astro site.
3. Index content for search.
4. Process inline styles and extract assets.
5. Generate SRI and CSP hashes.

🧪 Quality Assurance

This project employs a rigorous testing pipeline to ensure quality and compliance.

Pipeline Overview

graph TD
    Trigger[Push / PR] --> Phase1[Analysis & Build]
    Phase1 --> Phase2[Deep Testing]
    Phase2 --> Phase3[Reporting]

Loading

Phase 1: Parallel Analysis & Build

Static analysis tools run in parallel with the production build to provide fast feedback.

graph TD
    Trigger[Push / PR] --> SA[Static Analysis]
    Trigger --> Build[Build Artifact]

    subgraph SA [Static Analysis]
        direction LR
        Lint[Lint & Type Check]
        Links[Link Checker]
        Spell[Spell Checker]
        CodeQL
        Sonar[SonarCloud]
        Snyk[Snyk Security]
    end

Loading

Phase 2: Deep Testing & Reporting

Once the build is ready, we execute comprehensive testing matrices and generate unified reports.

graph LR
    Build[Build Artifact] --> TM
    Build --> CV

    subgraph TM [Testing Matrices]
        direction TB
        A11y[Accessibility Tests]
        LH[Lighthouse Audit]
        Func[Functional Tests]
    end

    subgraph CV [Content Validations]
        direction LR
        HTML[HTML5]
        RSS
        Schema
        Img[Images]
    end

    subgraph Rep [Reporting Pipelines]
        direction TB
        A11yAgg[A11y Dashboard] --> A11yCom[PR Comment]
        LHAgg[LH Dashboard] --> LHCom[PR Comment]
    end

    A11y --> A11yAgg
    LH --> LHAgg

Loading

Accessibility Testing

We perform comprehensive accessibility checks:

• Axe-core (via Playwright): Scans every page against WCAG 2.1/2.2 AA and Best Practice rules.
  • Dual-Theme Matrix: Tests run in parallel for both Light and Dark modes to ensure contrast compliance in all contexts.
  • Unified Dashboard: Aggregates results into an interactive HTML dashboard deployed to Surge, providing a single point of review for both themes.
  • Global SVG Exclusion: Prevents false positives in diagrams (Mermaid, etc.).
  • Fails the build on any violation.
• Lighthouse CI: Runs Lighthouse audits on all pages, enforcing high scores for Accessibility, Performance, and SEO.
  • Parallel Matrix Execution: Runs 4 parallel jobs covering Mobile & Desktop form factors across both Light & Dark themes.
  • Unified Dashboard: Aggregates all results into a single, interactive HTML dashboard deployed to Surge for easy review.
• Manual Checks: The pipeline flags "incomplete" checks (e.g., complex color contrast) for manual review.

Content Validation

• HTML Validation: html-validate checks generated HTML for standard compliance and semantic correctness.
• RSS Validation: validate-rss.mjs ensures the generated rss.xml strictly follows RSS 2.0 specifications.
• Schema.org: validate-schema.mjs verifies the structure of JSON-LD data for SEO.

🚀 Deployment

The site is built as a static folder (dist/) and can be deployed to any static host. I use Docker with Nginx.

Docker

docker build -t jmrp-io .
docker run -p 8080:80 jmrp-io

🔒 Security & Nginx

The project includes advanced Nginx configuration for security headers and asset delivery.

• Main Nginx Configuration Example
• Security Headers Example

Security Features

• Reverse Proxy: Nginx reverse proxy handles requests to external services (Mastodon, Matrix, Meshtastic), hiding upstreams and preventing CORS issues.
• SRI (Subresource Integrity): Comprehensive protection for all local resources. A post-build script calculates hashes for:
  • All <script> and <link rel="stylesheet"> tags.
  • <link rel="preload"> and <link rel="modulepreload"> (including fonts and Astro dynamic components).
  • PWA Metadatas (Favicons, Icons, and Web Manifest).
  • Multimedia assets (<img>, <video>, <audio>, <source>).
• CSP (Content Security Policy): Uses a combined strategy of request-specific nonce (injected via Nginx sub_filter) and SHA-512 hashes for all scripts and styles.
  • Features:
    • SHA-512 Hashing: Upgraded from SHA-384 for stronger security.
    • Automatic Splitting: Splits long CSP header strings into multiple Nginx variables to avoid "too long parameter" errors.
    • Nginx Reload: Automatically reloads Nginx after updating the configuration.
• Incident Reporting: Real-time monitoring of security violations:
  • CSP Violations: Natively reported by the browser.
  • SRI Failures: Tracked via a custom event listener (SRIEventListener.astro) that captures integrity validation errors.
  • Telegram Integration: A dedicated backend (csp-reporter.mjs) receives these reports and sends instant notifications to Telegram.
• HSTS: Enforces HTTPS.

📄 LaTeX CV Compilation

The project includes LaTeX source files to generate professional PDF CVs.

Prerequisites:

• TeX Live (Full distribution)
• latexmk
• lualatex

Compilation:

cd cv_latex
latexmk -lualatex -interaction=nonstopmode CV_RequenaPlensJoseManuel_ENG.tex CV_RequenaPlensJoseManuel_SPA.tex