Gimmer Crag Apps

This repository contains a set of lightweight web apps that can be deployed straight to GitHub Pages.

Getting Started

1. Install dependencies

   npm install

2. Start the development server

   npm start

By default this serves the wbs-via-pddl app. The server loads the app at http://localhost:3000. Future apps can be served by setting APP=<app-name>.

3. Run tests

   npm test

   This launches Vitest in watch mode.

4. Create a production build

   npm run build

   The build script iterates over every folder in apps/ and writes the optimised output under docs/apps/<app-name>.

5. Validate app index links and baseline HTML conventions

   npm run check:app-links

   This verifies every app is linked from app-index.html, includes a back link, and checks baseline index.html conventions.

6. Preview the production build locally

   npm run preview

   Pass APP=<app-name> to preview a specific build.

Project Structure

• apps/<app-name>/ – individual applications with their own src and index.html.
• src/common/ – shared utilities like index.css, reportWebVitals.js and test setup.
• vite.config.js – uses the APP environment variable to select which app to serve or build.
• scripts/build-all.js – builds every app found in apps/.

Adding a New App

1. Create apps/<app-name>/ with a src folder and index.html. Include <a href="../../index.html">Back to app index</a> in the HTML.
2. Add a screenshot as pics/<number>.png and a row to app-index.csv with the same number in the # column.
3. Run and test locally with APP=<app-name> npm start and npm test.
4. Build with npm run build when ready.

Design & Style Guidelines

• Use the shared common.css stylesheet with a relative path in every static app.
• common.css imports the Inter font and defines base spacing, heading rules and .btn classes.
• Include a viewport meta tag and design layouts responsively.
• Keep asset paths relative (avoid leading /). React apps should set basename={import.meta.env.BASE_URL} on the router.
• Embed small datasets inline so pages open without a server.

Deploying to GitHub Pages

Push your changes to the main branch and enable GitHub Pages in the repo settings using Deploy from branch with the root folder. Each app folder then becomes available at:

https://<org>.github.io/<repo>/<app-folder>/

Learn More

• Vite documentation
• Vitest documentation
• React documentation

License

This project is licensed under the MIT License.