Randify.pro/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

What this is

Randify is a static site (Astro 4 + Tailwind CSS 4) that hosts random-value generators. Only the number generator is live; the rest are catalogued in src/data/generators.ts with status: 'coming-soon'.

Commands

npm run dev       # Dev server (localhost:4321)
npm run build     # Static build → dist/
npm run preview   # Serve the built dist/ locally

Docker (production): multi-stage build compiles with Node 20 then serves via nginx:alpine. The nginx config handles pretty URLs via try_files $uri $uri/index.html.

docker build -t randify .
docker run -p 8080:80 randify

Architecture

Adding a new generator involves three steps:

1. Add an entry to src/data/generators.ts (set status: 'live' when ready).
2. Create src/components/generators/<Name>Generator.astro — interactive logic goes in an inline <script> tag (no framework, plain TypeScript compiled by Vite).
3. Create src/pages/generators/<slug>.astro — follows the same layout pattern as numbers.astro.

Key conventions:

• Accent color is #534AB7 (also exposed as --accent CSS custom property in BaseLayout.astro).
• All SVG icons are inlined strings inside GeneratorCard.astro; add new ones to the icons map there.
• AdBanner.astro is a placeholder component with three size variants (leaderboard, rectangle, tile) — not wired to any ad network yet.
• No client-side router — each generator is a separate static HTML page.
• No test runner or linter is configured.