uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(deps): add MIT license, update package metadata and bump dependencies; simplify docs

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-28 18:05:14 +00:00
parent 0b58441c3d
commit 8fb840f6f6
7 changed files with 85 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
changelog.md
View File

@@ -1,5 +1,14 @@
# Changelog
## 2025-12-28 - 1.4.2 - fix(deps)
add MIT license, update package metadata and bump dependencies; simplify docs
- Added license.md containing the MIT license and set package.json license to MIT
- Updated package.json author to Task Venture Capital GmbH
- Bumped @design.estate/dees-wcctools from ^3.2.0 to ^3.3.0 and @uptime.link/interfaces from ^2.0.21 to ^2.1.0
- Updated readme.md to reference license.md instead of LICENSE
- Rewrote and condensed readme.hints.md (cleaned up project overview, components list, build output and commands; removed legacy/verbose content)
## 2025-12-24 - 1.4.1 - fix(statuspage)
no changes detected; no version bump

21
license.md Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2024 Task Venture Capital GmbH
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

8
package.json
View File

@@ -12,13 +12,13 @@
"watch": "tswatch element",
"buildDocs": "tsdoc"
},
"author": "Lossless GmbH",
"license": "UNLICENSED",
"author": "Task Venture Capital GmbH",
"license": "MIT",
"dependencies": {
"@design.estate/dees-domtools": "^2.3.6",
"@design.estate/dees-element": "^2.1.3",
"@design.estate/dees-wcctools": "^3.2.0",
"@uptime.link/interfaces": "^2.0.21"
"@design.estate/dees-wcctools": "^3.3.0",
"@uptime.link/interfaces": "^2.1.0"
},
"devDependencies": {
"@git.zone/tsbuild": "^4.0.2",

44
pnpm-lock.yaml generated
View File

@@ -15,11 +15,11 @@ importers:
specifier: ^2.1.3
version: 2.1.3
'@design.estate/dees-wcctools':
specifier: ^3.2.0
version: 3.2.0
specifier: ^3.3.0
version: 3.3.0
'@uptime.link/interfaces':
specifier: ^2.0.21
version: 2.0.21
specifier: ^2.1.0
version: 2.1.0
devDependencies:
'@git.zone/tsbuild':
specifier: ^4.0.2
@@ -62,9 +62,6 @@ packages:
peerDependencies:
'@push.rocks/smartserve': '>=1.1.0'
'@apiglobal/typedrequest-interfaces@2.0.1':
resolution: {integrity: sha512-Oi7pNU4vKo5UvcCJmqkH43Us237Ws/Pp/WDYnwnonRnTmIMd+6QjNfN/gXcPnP6tbamk8r8Xzcz9mgnSDM2ysw==}
'@aws-crypto/crc32@5.2.0':
resolution: {integrity: sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==}
engines: {node: '>=16.0.0'}
@@ -256,8 +253,8 @@ packages:
'@design.estate/dees-element@2.1.3':
resolution: {integrity: sha512-TjXWxVcdSPaT1IOk31ckfxvAZnJLuTxhFGsNCKoh63/UE2FVf6slp8//UFvN+ADigiA9ZsY0azkY99XbJCwDDA==}
'@design.estate/dees-wcctools@3.2.0':
resolution: {integrity: sha512-tBh4RJFsQFIXDLzrksFK/M1i/34bMcDLFhYO/MWW5ArgH3mDyRlg+10RMAmbjI9ijOnegbbEtWanHoDx9EKgUA==}
'@design.estate/dees-wcctools@3.3.0':
resolution: {integrity: sha512-ZOxG5LkbLLsqDQWO+JCOjFkL77l9FuLDa7LBuZRkTSX0jRoYG6ICI1UoI9i6twxm4JKSzQ4iHjL/F5mHbQiKTg==}
'@emnapi/core@1.7.1':
resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
@@ -1404,9 +1401,6 @@ packages:
'@tokenizer/token@0.3.0':
resolution: {integrity: sha512-OvjF+z51L3ov0OyAU0duzsYuvO01PH7x4t6DJx+guahgTnBHkhJdG7soQeTSFLWN3efnHyibZ4Z8l2EuWwJN3A==}
'@tsclass/tsclass@4.0.61':
resolution: {integrity: sha512-E+LEX/cpRy0uMOJ3oQz3rBqfeMyCraVPeromT7VH9esYxUPh2SiRMIN6Im250IHXx7ANl0TNyX27UmbaD347GQ==}
'@tsclass/tsclass@4.4.4':
resolution: {integrity: sha512-YZOAF+u+r4u5rCev2uUd1KBTBdfyFdtDmcv4wuN+864lMccbdfRICR3SlJwCfYS1lbeV3QNLYGD30wjRXgvCJA==}
@@ -1515,8 +1509,8 @@ packages:
'@ungap/structured-clone@1.3.0':
resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
'@uptime.link/interfaces@2.0.21':
resolution: {integrity: sha512-sy7WBzHOxU7Kt0BGofK0R3CS8D8QtbTXB00i75QKYXkEesdLd91SbFL80wTupKfjzeldE0ejUVSgvtlZEr8XlQ==}
'@uptime.link/interfaces@2.1.0':
resolution: {integrity: sha512-KlsAUp4Vvb4TeFNBDq4MZ9v4RaeLPr1GRlj4mkNmGLSfEiSasj1FWGLEj8iRdfeUuxMu0WRpAvWe2Ol0MRzoqg==}
'@webcontainer/api@1.2.0':
resolution: {integrity: sha512-tzoKBd4lLdhHy5GHFpUkl+ndoSba8JqmB7x0ZQFnWfjbcbQOvKQfxA8MEMUYhgqjWHnbrWdAfnBEHz5f5lYG5A==}
@@ -2791,10 +2785,6 @@ packages:
resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
engines: {node: '>=12.20'}
type-fest@4.20.1:
resolution: {integrity: sha512-R6wDsVsoS9xYOpy8vgeBlqpdOyzJ12HNfQhC/aAKWM3YoCV9TtunJzh/QpkMgeDhkoynDcw5f1y+qF9yc/HHyg==}
engines: {node: '>=16'}
type-fest@4.41.0:
resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
engines: {node: '>=16'}
@@ -3005,8 +2995,6 @@ snapshots:
'@push.rocks/smartstring': 4.1.0
'@push.rocks/smarturl': 3.1.0
'@apiglobal/typedrequest-interfaces@2.0.1': {}
'@aws-crypto/crc32@5.2.0':
dependencies:
'@aws-crypto/util': 5.2.0
@@ -3508,7 +3496,7 @@ snapshots:
dependencies:
'@design.estate/dees-domtools': 2.3.6
'@design.estate/dees-element': 2.1.3
'@design.estate/dees-wcctools': 3.2.0
'@design.estate/dees-wcctools': 3.3.0
'@fortawesome/fontawesome-svg-core': 7.1.0
'@fortawesome/free-brands-svg-icons': 7.1.0
'@fortawesome/free-regular-svg-icons': 7.1.0
@@ -3585,7 +3573,7 @@ snapshots:
- supports-color
- vue
'@design.estate/dees-wcctools@3.2.0':
'@design.estate/dees-wcctools@3.3.0':
dependencies:
'@design.estate/dees-domtools': 2.3.6
'@design.estate/dees-element': 2.1.3
@@ -5172,10 +5160,6 @@ snapshots:
'@tokenizer/token@0.3.0': {}
'@tsclass/tsclass@4.0.61':
dependencies:
type-fest: 4.20.1
'@tsclass/tsclass@4.4.4':
dependencies:
type-fest: 4.41.0
@@ -5289,10 +5273,10 @@ snapshots:
'@ungap/structured-clone@1.3.0': {}
'@uptime.link/interfaces@2.0.21':
'@uptime.link/interfaces@2.1.0':
dependencies:
'@apiglobal/typedrequest-interfaces': 2.0.1
'@tsclass/tsclass': 4.0.61
'@api.global/typedrequest-interfaces': 3.0.19
'@tsclass/tsclass': 9.3.0
'@webcontainer/api@1.2.0': {}
@@ -6855,8 +6839,6 @@ snapshots:
type-fest@2.19.0: {}
type-fest@4.20.1: {}
type-fest@4.41.0: {}
typescript@5.9.3: {}

316
readme.hints.md
View File

@@ -1,292 +1,48 @@
# Project Hints and Analysis
# Project Hints
## Project Overview
The @uptime.link/statuspage (v1.0.74) is a web components catalog specifically designed for building status pages for UptimeLink - an uptime monitoring platform. This catalog provides pre-built, customizable UI components that can be assembled to create complete status pages.
## Core Purpose
- **Primary Function**: Provide a comprehensive set of web components for building status monitoring dashboards
- **Target Audience**: Developers building status pages for services using UptimeLink monitoring
- **Key Features**: Real-time status display, incident management, historical data visualization
**@uptime.link/statuspage** - A comprehensive web components catalog for building status pages for UptimeLink.
## Architecture
- **Package Name**: @uptime.link/statuspage (v1.0.74)
- **Project Type**: Web Component Catalog (wcc)
- **Module Type**: ESM (ECMAScript Modules)
- **Distribution**: Private npm package on verdaccio.lossless.one registry
- **License**: UNLICENSED (proprietary to Lossless GmbH)
- **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 - A web components framework with:
- TypeScript decorators for component registration
- Built-in CSS-in-JS with theme support
- Shadow DOM encapsulation
- Property binding system
- **DOM Utilities**: @design.estate/dees-domtools for DOM manipulation
- **Interfaces**: @uptime.link/interfaces for shared data structures
- **Build Tools**:
- tsbuild: TypeScript compilation with --allowimplicitany flag
- tsbundle: Creates production bundles for web components
- tswatch: Development file watching
- TypeScript target: ES2022 with NodeNext module resolution
- **Framework**: @design.estate/dees-element (Lit-based web components)
- **Build Tools**: tsbuild, tsbundle, tswatch
- **TypeScript**: ES2022 target with NodeNext module resolution
## Component Library
The catalog provides 7 main components + 1 internal component:
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
### Main Components:
1. **upl-statuspage-header**:
- Page header with customizable title
- Action buttons for "Report Incident" and "Subscribe to Updates"
- Emits custom events: 'reportNewIncident' and 'statusSubscribe'
## Build Output
- Source: `ts_web/`
- Compiled: `dist_ts_web/`
- Bundle: `dist_bundle/`
- Development: `dist_watch/`
2. **upl-statuspage-statusbar**:
- Main status indicator showing overall system health
- Visual status representation (likely green/yellow/red indicators)
## Commands
- `pnpm build` - Compile TypeScript and create bundle
- `pnpm watch` - Development server with hot reload
- `pnpm test` - Runs build (no actual tests)
3. **upl-statuspage-assetsselector**:
- Component for selecting/filtering which assets to view
- Useful for multi-service status pages
## 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/`
4. **upl-statuspage-statusdetails**:
- Detailed status information display
- Shows granular status data for selected services
5. **upl-statuspage-statusmonth**:
- Monthly calendar view of status history
- Visual representation of uptime/downtime over time
6. **upl-statuspage-incidents**:
- Incident management display
- Properties: currentIncidences and pastIncidences (arrays of IIncident)
- Supports whitelabel mode
- Shows active and historical incidents
7. **upl-statuspage-footer**:
- Page footer with legal information link
- Customizable legal URL
### Internal Components:
- **uplinternal-miniheading**: Internal component for consistent heading styling
## Data Flow & Integration
- Components receive data through properties (using @property decorator)
- Incident data follows the IIncident interface from @uptime.link/interfaces
- Components are designed to work standalone or together
- Event-driven communication between components
## Styling & Theming
- CSS-in-JS approach using cssManager
- Built-in light/dark theme support via bdTheme() helper
- Font: Inter (loaded via assetbroker)
- Responsive design with max-width constraints (900px)
- Background colors: Light (#eeeeeb) / Dark (#222222)
- Text colors: Light (#333333) / Dark (#ffffff)
## Build Output Structure
- Source: ts_web/ directory
- Compiled output: dist_ts_web/ (ES modules with TypeScript definitions)
- Bundle output: dist_bundle/ (production-ready bundle with source maps)
- Development server: dist_watch/ with index.html for testing
## Usage Pattern
1. Import components from the package
2. Create elements using document.createElement()
3. Set properties programmatically
4. Append to DOM
5. Handle custom events for user interactions
## Recent Updates (from changelog)
- v1.0.74: Improved font loading strategy using single assetbroker link
- v1.0.73: Enhanced documentation and aligned project descriptions
- v1.0.72: Fixed import paths and updated package configurations
## Development Workflow
- `pnpm build`: Compile TypeScript and create production bundle
- `pnpm watch`: Start development server with hot reload
- `pnpm test`: Currently just runs build (no actual tests implemented)
- Demo page available at html/index.html using page1 template
## Key Observations
1. The project follows a consistent pattern for all components
2. Each component is self-contained with its own styling
3. Theme support is built-in for all components
4. The project is part of a larger UptimeLink ecosystem
5. Components are designed for composition into complete status pages
6. No test files are currently implemented despite test infrastructure being set up
## Production Readiness Analysis (v1.0.74)
### Current State
The components are essentially **UI shells** - they have styling and structure but lack actual functionality. They display static/hardcoded content with no real data integration.
### Major Missing Functionality
#### 1. Data Integration
- **No API client or data fetching logic** - components can't retrieve real status data
- **No authentication/authorization** - no secure API communication
- **No real-time updates** - no WebSocket/SSE implementation
- **Static content only** - statusbar always shows "Everything is working normally!"
- **Empty data properties** - currentIncidences/pastIncidences arrays are never populated
#### 2. Component Implementation Gaps
- **upl-statuspage-assetsselector**: Only shows "Hello!" - missing entire asset selection UI
- **upl-statuspage-statusbar**: Hardcoded green status - no dynamic status calculation
- **upl-statuspage-statusdetails**: Shows 48 static green bars - no actual hourly data
- **upl-statuspage-statusmonth**: Shows 150 static green days - no real uptime data
- **upl-statuspage-incidents**: Only shows "No incidents" - missing incident card rendering
- **upl-statuspage-footer**: Placeholder "Hi there" - missing actual footer content
#### 3. Error Handling & States
- No loading indicators during data fetch
- No error states for failed requests
- No offline detection or handling
- No retry mechanisms
- No skeleton screens
#### 4. Accessibility Issues
- No ARIA labels on interactive elements
- No keyboard navigation support
- No focus management
- No screen reader announcements
- Missing semantic HTML (divs instead of buttons/nav)
- No skip navigation links
#### 5. Responsive Design Issues
- Fixed 900px max-width with no proper mobile breakpoints
- Grid layouts won't adapt to small screens
- No touch-friendly tap targets
- Font sizes not responsive
#### 6. Internationalization
- All text hardcoded in English
- No i18n framework or translation system
- No locale-aware date/time formatting
- No RTL language support
#### 7. Missing Infrastructure
- No configuration system for API endpoints
- No analytics integration
- No performance monitoring
- No PWA capabilities
- No export functionality
- No proper TypeScript interfaces for data models
- **No tests whatsoever** despite test infrastructure
### Production Requirements Summary
To make these components production-ready requires implementing:
1. Complete data layer with API client
2. State management system
3. All missing UI functionality
4. Comprehensive error handling
5. Full accessibility compliance
6. Proper responsive design
7. Internationalization support
8. Authentication/authorization
9. Real-time update capabilities
10. Comprehensive test suite
## Recent Updates (Post v1.0.74)
### Component Order (Top to Bottom)
1. `upl-statuspage-header` - Navigation header
2. `upl-statuspage-statusbar` - Overall system status
3. `upl-statuspage-statsgrid` - Key metrics grid (uptime, response time, incidents)
4. `upl-statuspage-assetsselector` - Service selection
5. `upl-statuspage-statusdetails` - 48-hour status visualization
6. `upl-statuspage-statusmonth` - Monthly calendar view
7. `upl-statuspage-incidents` - Current and past incidents
8. `upl-statuspage-footer` - Page footer
### Components Made Production-Ready
All components have been significantly enhanced with the following improvements:
1. **upl-statuspage-header**
- Added properties: showReportButton, showSubscribeButton, brandColor, logoUrl, customStyles, loading
- Supports custom branding with dynamic colors
- Loading state with skeleton animation
- Configurable button visibility
2. **upl-statuspage-statusbar**
- Already production-ready with full functionality
- Supports all status states (operational, degraded, partial_outage, major_outage, maintenance)
- Loading state and expandable behavior
3. **upl-statuspage-assetsselector**
- Complete implementation with service selection grid
- Full filtering capabilities (text, category, selected-only)
- Select all/none functionality
- Real-time status updates
- Event emissions for selection changes
- Loading states and empty states
4. **upl-statuspage-statusdetails**
- Hourly status bars with tooltips
- Skeleton loading states
- Real-time data updates
- Important: Expects hourly-aligned timestamps in data
5. **upl-statuspage-statusmonth**
- Calendar grid display with status colors
- Weekday labels and proper month alignment
- Hover tooltips with detailed information
- Day click events
6. **upl-statuspage-incidents**
- Full incident management with current/past incidents
- Multiple incident statuses (investigating, identified, monitoring, resolved, postmortem)
- Incident updates timeline
- Affected services display
- Root cause and resolution information
7. **upl-statuspage-footer** (Completely rebuilt)
- Comprehensive footer implementation with all expected properties
- Social media links with SVG icons (Twitter, GitHub, LinkedIn, Facebook, YouTube, Instagram, Slack, Discord)
- Subscribe/Report issue functionality
- Language selector and theme toggle
- Whitelabel support
- Custom branding options
- Loading and error states
- RSS feed and API status links
- Last updated timestamp with relative formatting
8. **upl-statuspage-statsgrid** (NEW)
- Displays key performance metrics in a responsive grid
- Shows current status with color indicator
- Uptime percentage with configurable time period
- Average response time with performance trend indicators
- Total incidents count with affected services
- Loading state with skeleton animation
- Responsive design that stacks on mobile
- Used stats data that was previously in statusdetails component
### Demo Architecture
- All demos have been updated to use dees-demowrapper with runAfterRender callbacks
- Properties are set dynamically on elements within runAfterRender
- Multiple demo sections show different use cases and states
- Event logging demonstrates interactivity
- Demos can be instrumented with multiple wrappers for different scenarios
### Interfaces Implemented
Created comprehensive TypeScript interfaces in ts_web/interfaces/index.ts:
- IServiceStatus - Service monitoring data
- IOverallStatus - Overall system status
- IIncidentUpdate - Incident update entries
- IIncidentDetails - Full incident information
- IMonthlyUptime - Monthly uptime calendar data
- IStatusHistoryPoint - Hourly status data points
- IStatusPageConfig - Configuration options
### Remaining Tasks
- Integration with actual UptimeLink API
- WebSocket/SSE for real-time updates
- Authentication/authorization implementation
- Accessibility improvements (ARIA labels, keyboard navigation)
- More comprehensive responsive design
- Internationalization system
- Unit and integration tests
### Important Fix Applied
The `dees-demowrapper` component was not functioning because it wasn't being imported. Fixed by adding:
```typescript
import '@design.estate/dees-wcctools/demotools';
```
to `html/index.ts`. This registers the `dees-demowrapper` custom element which properly executes the `runAfterRender` callbacks in demos.
## 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

2
readme.md
View File

@@ -362,7 +362,7 @@ Components automatically adapt to light/dark mode using `cssManager.bdTheme()`.
## License and Legal Information
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [license.md](./license.md) file.
**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@uptime.link/statuspage',
version: '1.4.1',
version: '1.4.2',
description: 'A catalog of web components for the UptimeLink dashboard.'
}