133 lines
6.3 KiB
Markdown
133 lines
6.3 KiB
Markdown
# RadioStation — KMountain Flower
|
|
|
|
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.
|
|
|
|
## Architecture
|
|
|
|
```
|
|
src/
|
|
├── app/ # Angular application root
|
|
│ ├── app.ts # Root <app-root> component (shell layout)
|
|
│ ├── app.config.ts # Application config: providers + router
|
|
│ ├── app.html # Shell template: navbar + <router-outlet> + 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 (<app-root> 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
|
|
```
|
|
|
|
Open [http://localhost:4200](http://localhost:4200).
|
|
|
|
### Development server
|
|
|
|
```bash
|
|
ng serve # Start dev server (hot reload enabled)
|
|
ng serve --port 8080 # Custom port
|
|
```
|
|
|
|
### Building
|
|
|
|
```bash
|
|
ng build # Production build → dist/
|
|
ng build --configuration development # With source maps
|
|
```
|
|
|
|
### Code style
|
|
|
|
This project uses [Prettier](https://prettier.io/) (configured in [.prettierrc](.prettierrc)). Run:
|
|
|
|
```bash
|
|
npx prettier --write .
|
|
```
|
|
|
|
### Testing
|
|
|
|
```bash
|
|
ng test # Run unit tests (Vitest)
|
|
```
|
|
|
|
## Dev container
|
|
|
|
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.
|
|
|
|
## Project tech stack
|
|
|
|
- **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
|