catalog/readme.hints.md

Project Hints

Project Overview

@uptime.link/statuspage - A comprehensive web components catalog for building status pages for UptimeLink.

Architecture

• Package Type: Web Component Catalog (wcc)
• Module Type: ESM
• License: MIT
• Registry: Public on npm and verdaccio.lossless.digital

Technology Stack

• Framework: @design.estate/dees-element (Lit-based web components)
• Build Tools: tsbuild, tsbundle, tswatch
• TypeScript: ES2022 target with NodeNext module resolution

Component Library

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