diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md new file mode 100644 index 0000000..cbec2f0 --- /dev/null +++ b/.claude/CLAUDE.md @@ -0,0 +1,30 @@ +# CLAUDE.md — KMountain Flower Radio Station + +## Project overview + +This is a standalone-component Angular 21 app for a community radio station website. It renders a hero page, about page, broadcast schedule, donation tiers, upcoming events, and a contact form — all styled with a warm mountain/nature color palette (blue primary + orange accent on cream). + +## Code style + +- **Components:** Standalone only (no NgModules). Every component is a single file with `@Component` decorator, `imports` array, and the four standard files (`.ts`, `.html`, `.scss`, component). +- **Data patterns:** Page content lives as `readonly` arrays with interfaces defined in the same file. Never put content in services or APIs — this is a static site. +- **SCSS:** All design tokens go in [src/styles/_variables.scss](src/styles/_variables.scss). Mixins in [_mixins.scss](src/styles/_mixins.scss). CSS custom properties exposed in [_themes.scss](src/styles/_themes.scss). Components import via `@use 'variables'` (no relative path needed). +- **Routes:** Defined in [src/app/app.routes.ts](src/app/app.routes.ts) using `loadComponent()` lazy loading. Add new pages here after creating the component. +- **TypeScript:** Strict mode enabled. Use `readonly` for data arrays. No unnecessary interfaces — keep data shapes close to their components. + +## Architecture + +See [README.md](../README.md) for a full architecture map. Key files: + +- `src/app/app.routes.ts` — all routing +- `src/styles/_variables.scss` — color palette, spacing, breakpoints (change these to re-skin) +- `src/styles/_mixins.scss` — card-style, button-style, responsive, gradient-text, flowery-border, fade-in +- `src/styles/_themes.scss` — SCSS → CSS custom property mapping + +## Common tasks + +- **Re-skin:** Edit colors in `_variables.scss` only. +- **Add a page:** Create component folder → add route in `app.routes.ts` → add nav link (if needed). +- **Update content:** Edit the `readonly` array in the relevant component file (`schedule.component.ts`, `events.component.ts`, `donate.component.ts`). +- **Run the app:** `ng serve` → [localhost:4200](http://localhost:4200). +- **Build:** `ng build` → `dist/`. diff --git a/README.md b/README.md index a958842..4faadde 100644 --- a/README.md +++ b/README.md @@ -1,59 +1,132 @@ -# RadioStation +# RadioStation — KMountain Flower -This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.14. +A static Angular boilerplate for a community radio station website. The app showcases a broadcast schedule, upcoming events, donation tiers, an about page, and a contact form — all styled with a warm mountain/nature aesthetic. -## Development server +## Architecture -To start a local development server, run: +``` +src/ +├── app/ # Angular application root +│ ├── app.ts # Root component (shell layout) +│ ├── app.config.ts # Application config: providers + router +│ ├── app.html # Shell template: navbar + + footer +│ ├── app.routes.ts # Route definitions (lazy-loaded components) +│ ├── app.scss # Root component styles +│ ├── hero/ # Landing page (home route) +│ ├── about/ # About the station page +│ ├── schedule/ # Program schedule (data-driven table) +│ ├── donate/ # Donation tiers (data-driven cards) +│ ├── events/ # Upcoming events (data-driven cards) +│ ├── contact/ # Contact form (two-way binding via FormsModule) +│ ├── navbar/ # Top navigation bar (responsive hamburger menu) +│ └── footer/ # Site footer +├── styles/ # Global SCSS design tokens +│ ├── _variables.scss # Color palette, spacing, breakpoints, z-index scale +│ ├── _mixins.scss # Reusable SCSS mixins (cards, buttons, responsiveness) +│ ├── _themes.scss # Maps SCSS vars → CSS custom properties on :root +│ └── index.scss # Global entry: reset + utility classes + theme import +├── assets/ +│ └── svg/ # Decorative SVGs (mountain dividers, floral accents) +├── main.ts # App bootstrap entry point +└── index.html # HTML shell ( mount point) +``` + +### Key architectural decisions + +- **Standalone components** — Every component is standalone (no NgModules). This is Angular 21's default and keeps imports explicit. +- **Lazy-loaded routes** — Each page is code-splitted via `loadComponent()` in [app.routes.ts](src/app/app.routes.ts). The router imports each component on first navigation. +- **Data-driven pages** — `ScheduleComponent`, `DonateComponent`, and `EventsComponent` all hold their content as readonly arrays (`readonly programs: Program[]`, etc.). To update content, edit these arrays in the component TypeScript files. +- **Design tokens in SCSS** — All colors, spacing, breakpoints, and typography live in [src/styles/_variables.scss](src/styles/_variables.scss). Change these once and every component inherits the new values via [_themes.scss](src/styles/_themes.scss) (which exposes them as CSS custom properties) and the mixins in [_mixins.scss](src/styles/_mixins.scss). +- **SCSS preprocessor paths** — [angular.json](angular.json) adds `src/styles/` to the include path, so any component can `@use 'variables'` without a relative path. + +## Pages + +| Route | Component | Description | +| -------- | --------------- | -------------------------------------------- | +| `/` | HeroComponent | Hero landing section | +| `/about` | AboutComponent | Station mission & info | +| `/schedule` | ScheduleComponent | Program schedule, rendered from `programs[]` | +| `/donate` | DonateComponent | Donation tiers, rendered from `tiers[]` | +| `/events` | EventsComponent | Upcoming events, rendered from `upcomingEvents[]` | +| `/contact` | ContactComponent | Contact form with submission handler | + +## Customization guide + +### Re-skinning the color palette +1. Edit the color variables in [src/styles/_variables.scss](src/styles/_variables.scss). The primary palette (blue) and accent palette (orange) control the entire site. +2. That's it — [_themes.scss](src/styles/_themes.scss) automatically maps them to CSS custom properties used by every component. + +### Changing typography +Edit `$font-primary`, `$font-heading`, and `$font-mono` in [src/styles/_variables.scss](src/styles/_variables.scss). + +### Adding a new page +1. Create a new folder under `src/app/` with a `*.component.ts`, `*.component.html`, and `*.component.scss`. +2. Export a `@Component` decorated class. +3. Add a route in [app.routes.ts](src/app/app.routes.ts) using `loadComponent()` to lazy-load it. +4. (Optional) Add a `RouterLink` in [navbar.component.html](src/app/navbar/navbar.component.html). + +### Updating schedule / events / donation content +Edit the `readonly` arrays directly in their respective component files: +- [schedule.component.ts](src/app/schedule/schedule.component.ts) — `programs` +- [events.component.ts](src/app/events/events.component.ts) — `upcomingEvents` +- [donate.component.ts](src/app/donate/donate.component.ts) — `tiers` + +Each interface (`Program`, `Event`, `Tier`) is defined in the component file. Modify the interfaces and data together. + +## Getting started + +### Prerequisites +- Node.js 20+ (or use the dev container) +- npm 11+ + +### Quick start ```bash +npm install ng serve ``` -Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files. +Open [http://localhost:4200](http://localhost:4200). -## Code scaffolding - -Angular CLI includes powerful code scaffolding tools. To generate a new component, run: +### Development server ```bash -ng generate component component-name +ng serve # Start dev server (hot reload enabled) +ng serve --port 8080 # Custom port ``` -For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run: +### Building ```bash -ng generate --help +ng build # Production build → dist/ +ng build --configuration development # With source maps ``` -## Building +### Code style -To build the project run: +This project uses [Prettier](https://prettier.io/) (configured in [.prettierrc](.prettierrc)). Run: ```bash -ng build +npx prettier --write . ``` -This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed. - -## Running unit tests - -To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command: +### Testing ```bash -ng test +ng test # Run unit tests (Vitest) ``` -## Running end-to-end tests +## Dev container -For end-to-end (e2e) testing, run: +This project ships with a [.devcontainer/](.devcontainer/) for VS Code. Open the repo in VS Code → "Reopen in Container" to get a pre-configured environment with Angular CLI, Node.js, Python 3, and Git. -```bash -ng e2e -``` +## Project tech stack -Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs. - -## Additional Resources - -For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page. +- **Framework:** Angular 21 (standalone components, signals-ready) +- **Language:** TypeScript 5.9 +- **Styling:** SCSS with design tokens (variables → mixins → CSS custom properties) +- **Routing:** Angular Router with lazy loading +- **Form handling:** FormsModule (two-way binding) +- **Linting/formatting:** Prettier +- **Testing:** Vitest (via Angular CLI) +- **Package manager:** npm 11.11