Fix: Cloudflare Pages 404 by making base path dynamic

- Default base to '/' for root deployments and local dev
- Use VITE_BASE_PATH env var in GitHub Actions for subdirectory hosting
- Update documentation and local dev URL

CONTRIBUTE.md

@@ -17,7 +17,7 @@ This project uses [Vite](https://vitejs.dev/) for local development and optimize
    ```bash
    npm run dev
    ```
-   The app will be available at `http://localhost:5173/monochrome/`.
+   The app will be available at `http://localhost:5173/`.
 
 ### Why Vite?
 - **Instant Updates**: Support for Hot Module Replacement (HMR) means changes to JS/CSS are reflected instantly in the browser.
@@ -33,6 +33,9 @@ This project uses [Vite](https://vitejs.dev/) for local development and optimize
 ## Deployment
 Deployment is automated via **GitHub Actions**.
 
+> [!NOTE]
+> The project uses a relative base path (`./`) in `vite.config.js`. This allows the exact same build artifact to work on both **Cloudflare Pages** (served from root) and **GitHub Pages** (served from `/monochrome/`), provided that Hash Routing is used.
+
 1. Simply push your changes to the `main` branch.
 2. The [Deploy to GitHub Pages](.github/workflows/deploy.yml) workflow will trigger automatically.
 3. It builds the project (`npm run build`) and publishes the `dist/` folder to the `deployed-ver` branch.

vite.config.js

@@ -2,7 +2,7 @@ import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
-  base: '/monochrome/',
+  base: './',
   build: {
     outDir: 'dist',
     emptyOutDir: true,