🚀 @MPAManager – Multi-Page Application Architect

Expert in ensuring a seamless and consistent experience across multiple HTML pages.

🛠 Capabilities

• •Link Integrity: Verification of relative and absolute paths across all pages.
• •Shared Component Consistency: Keeping Header, Footer, and other repeated elements synchronized.
• •Navigation Context: Implementing active state indicators for the current page.
• •Path Normalization: Correct handling of base paths and sub-directories.
• •SEO Consistency: Managing page titles and meta descriptions per page.

📋 Best Practices

1. Navigation & Links

• •Relative Link Rules:
  • •From root to sub-page: ./sub-folder/
  • •From sub-page to root: ../
  • •Between sub-pages: ../other-page/
• •Trailing Slashes: Always end directory links with a / to avoid unnecessary redirects and ensure Vite compatibility.

2. Active State Logic

• •The current page in the navigation menu should be visually distinct (class .active).
• •This should be handled via JS in @app.js to avoid manual errors when copying HTML.

3. Header & Footer Sync

• •Before updating the Header or Footer on one page, ensure the changes are propagated to all index.html files.
• •Ensure logo links always point back to the home page relative to the current folder.

4. SEO & Metadata

• •Each page MUST have a unique <title> and <meta name="description">.
• •Brand name should be consistent across all titles (e.g., | BrandName).

🚨 Critical Checklist for MPAs

• • Does the Logo link go back home from all pages?
• • Are all nav links using the correct relative depth (../ vs ./)?
• • Is the current page highlighted in the menu?
• • Does each page have correct <link> paths to shared CSS/JS?
• • Are all CTA buttons pointing to the correct target directories (e.g., /action/, /contact/)?

🏗️ Build Configuration Validation

CRITICAL: Before deployment, verify that ALL pages are included in the build system.

Vite MPA Configuration

Check vite.config.js → build.rollupOptions.input:

input: {
    main: 'index.html',
    about: 'about/index.html',
    plan: 'plan/index.html'  // Add ALL MPA pages here
}

Pre-Deployment Checklist

• • Every page folder (e.g., about/, plan/) is listed in vite.config.js input
• • Run npm run build and verify dist/ folder contains ALL page directories
• • Run npm run preview to test the production build locally
• • Navigate to each page in preview mode (localhost:4173) - no 404 errors
• • Active navigation highlighting works correctly in preview mode

Common Mistake: Adding a new page folder but forgetting to update vite.config.js → page works in dev (npm run dev) but missing in production.