2025-12-28 18:05:14 +00:00
|
|
|
# Project Hints
|
2025-06-29 19:55:58 +00:00
|
|
|
|
|
|
|
|
## Project Overview
|
2025-12-28 18:05:14 +00:00
|
|
|
**@uptime.link/statuspage** - A comprehensive web components catalog for building status pages for UptimeLink.
|
2025-06-29 19:55:58 +00:00
|
|
|
|
|
|
|
|
## Architecture
|
2025-12-28 18:05:14 +00:00
|
|
|
- **Package Type**: Web Component Catalog (wcc)
|
|
|
|
|
- **Module Type**: ESM
|
|
|
|
|
- **License**: MIT
|
|
|
|
|
- **Registry**: Public on npm and verdaccio.lossless.digital
|
2025-06-29 19:55:58 +00:00
|
|
|
|
|
|
|
|
## Technology Stack
|
2025-12-28 18:05:14 +00:00
|
|
|
- **Framework**: @design.estate/dees-element (Lit-based web components)
|
|
|
|
|
- **Build Tools**: tsbuild, tsbundle, tswatch
|
|
|
|
|
- **TypeScript**: ES2022 target with NodeNext module resolution
|
2025-06-29 19:55:58 +00:00
|
|
|
|
|
|
|
|
## Component Library
|
2025-12-28 18:05:14 +00:00
|
|
|
9 components total:
|
|
|
|
|
1. `upl-statuspage-header` - Page header with branding and action buttons
|
|
|
|
|
2. `upl-statuspage-pagetitle` - Hero section with title/subtitle
|
|
|
|
|
3. `upl-statuspage-statusbar` - Overall system status indicator
|
|
|
|
|
4. `upl-statuspage-statsgrid` - Key metrics grid (uptime, response time, incidents)
|
|
|
|
|
5. `upl-statuspage-assetsselector` - Service selection with filtering
|
|
|
|
|
6. `upl-statuspage-statusdetails` - 48-hour status timeline
|
|
|
|
|
7. `upl-statuspage-statusmonth` - Monthly calendar uptime view
|
|
|
|
|
8. `upl-statuspage-incidents` - Current and past incidents feed
|
|
|
|
|
9. `upl-statuspage-footer` - Full-featured footer with social/subscription
|
|
|
|
|
|
|
|
|
|
## Build Output
|
|
|
|
|
- Source: `ts_web/`
|
|
|
|
|
- Compiled: `dist_ts_web/`
|
|
|
|
|
- Bundle: `dist_bundle/`
|
|
|
|
|
- Development: `dist_watch/`
|
|
|
|
|
|
|
|
|
|
## Commands
|
|
|
|
|
- `pnpm build` - Compile TypeScript and create bundle
|
|
|
|
|
- `pnpm watch` - Development server with hot reload
|
|
|
|
|
- `pnpm test` - Runs build (no actual tests)
|
|
|
|
|
|
|
|
|
|
## Demo System
|
|
|
|
|
- Uses `dees-demowrapper` from `@design.estate/dees-wcctools/demotools`
|
|
|
|
|
- Each component has a `.demo.ts` file with runAfterRender callbacks
|
|
|
|
|
- Pre-built page templates in `ts_web/pages/`
|
|
|
|
|
|
|
|
|
|
## Important Notes
|
|
|
|
|
- Import `@design.estate/dees-wcctools/demotools` in html/index.ts for demos to work
|
|
|
|
|
- All components support light/dark theme via cssManager.bdTheme()
|
|
|
|
|
- Components are designed to work standalone or composed together
|
