projects.blueskye.co.uk

React landing page for projects.blueskye.co.uk — the project portal and agentic infrastructure dashboard.

What it does

• Lists curated projects from an explicit registry (public/projects.json)
• Shows screenshots, rich descriptions, and tech-stack badges per project
• Displays live health status for each project (up / degraded / unreachable)
• Displays OpenCode token usage by provider/model for the last day, week, and lifetime
• Uses Mantine component library with a dark theme

Stack

Layer	Tech
Framework	React 19 + TypeScript
Bundler	Vite 8
UI	Mantine 9 + Tabler Icons
Data	Static JSON (projects.json, health.json, opencode-token-usage.json) generated by local scripts

Project registry

Projects are listed in public/projects.json. Each entry includes:

• name — display title
• hostname — subdomain on projects.blueskye.co.uk
• url — full HTTPS URL
• description — brief project description
• techStack — array of technology labels rendered as badges

When adding a new project, edit public/projects.json and run pnpm build to regenerate the enriched JSON and capture a screenshot.

Development

pnpm dev        # dev server with HMR
pnpm build      # typecheck + build + regenerate project JSON, health, screenshots
pnpm preview    # serve the production build locally

Deployment

After pnpm build, the compiled dist/ is served statically by Caddy. The projects.json and health.json are regenerated by ~/bin/build-project-registry during each build. OpenCode token usage is refreshed by ~/bin/opencode-token-usage during builds.