lampRabit website
The website for lampRabit, a free and open-source local PHP development environment. React + Vite, pre-rendered to static HTML for every route, deployed to GitHub Pages.
Run locally
npm ci
npm run dev # http://localhost:5173/LampRabitWebsite/
Build and preview
npm run build # sync guides, build, pre-render every route
npm run preview # http://localhost:4173/LampRabitWebsite/
npm run build does three things:
- Syncs the guides (
scripts/sync-content.mjs): downloads docs/website/*.md from the app repository's main branch into src/content/. Edit guides in the app repository, not here; this copy is overwritten on every build. If GitHub can't be reached, the existing copies are used.
- Builds the site with Vite.
- Pre-renders every route in
src/site.js into its own index.html (scripts/prerender.mjs), with titles, descriptions, Open Graph tags, structured data, sitemap.xml, robots.txt and a 404.html.
Structure
| Path | What's there |
|---|
src/site.js | Repository links, routes, page titles and descriptions, link helpers |
src/github.js | Live data from the GitHub API: latest release, all releases, open issues; installer matching; OS detection |
src/components.jsx | Header, footer, logo, screenshot frame, markdown renderer, page intro |
src/pages/ | Home, Features (+ full list), Download, Changelog and Issues, Guides |
src/style.css | The whole design system: tokens, type scale, layout, components |
src/content/ | Guides synced from the app repository (don't edit here) |
public/screenshots/ | App screenshots (1280×860, taken from the running app) |
To add a page: add its route and meta in src/site.js, render it in src/App.jsx, and link it from the header or footer in src/components.jsx.
Live data
The Download, Changelog and Issues pages read from the GitHub API in the visitor's browser, so new releases and issues appear without rebuilding the site. Installers are matched by file name (x64-setup.exe, .msi, aarch64.dmg, x64.dmg, .deb, .AppImage). If the API can't be reached (for example GitHub's limit of 60 requests an hour per visitor), the pages link to GitHub instead.
Design rules
- Body text is 17px; nothing is smaller than 13px. Use the
--fs-* variables, not new sizes.
- Brand colours come from the app: charcoal
#1b2028, mint #59d1a2. Green text on white uses --green (#0d7f57) for contrast.
- Content must be visible without JavaScript or animation.
- Keep platform claims honest: Windows is fully supported; macOS and Linux are a preview until Apache, Nginx and PHP downloads exist there.
GitHub Pages
The workflow in .github/workflows/deploy.yml builds and deploys on every push to main. In Settings → Pages, the source must be GitHub Actions.
For a custom domain later, set the repository Actions variables SITE_URL (for example https://lamprabit.dev/) and PUBLIC_PATH (/), then configure the domain in Pages and DNS.
