Compare commits

...

6 Commits

20 changed files with 4253 additions and 2163 deletions

View File

@ -1,132 +0,0 @@
# gitzone ci_default_private
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
cache:
paths:
- .npmci_cache/
key: '$CI_BUILD_STAGE'
stages:
- security
- test
- release
- metadata
before_script:
- pnpm install -g pnpm
- pnpm install -g @shipzone/npmci
- npmci npm prepare
# ====================
# security stage
# ====================
# ====================
# security stage
# ====================
auditProductionDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --prod
tags:
- lossless
- docker
auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --dev
tags:
- lossless
- docker
allow_failure: true
# ====================
# test stage
# ====================
testStable:
stage: test
script:
- npmci node install stable
- npmci npm install
- npmci npm test
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- lossless
- docker
- notpriv
testBuild:
stage: test
script:
- npmci node install stable
- npmci npm install
- npmci command npm run build
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- lossless
- docker
- notpriv
release:
stage: release
script:
- npmci node install stable
- npmci npm publish
only:
- tags
tags:
- lossless
- docker
- notpriv
# ====================
# metadata stage
# ====================
codequality:
stage: metadata
allow_failure: true
only:
- tags
script:
- npmci command npm install -g typescript
- npmci npm prepare
- npmci npm install
tags:
- lossless
- docker
- priv
trigger:
stage: metadata
script:
- npmci trigger
only:
- tags
tags:
- lossless
- docker
- notpriv
pages:
stage: metadata
script:
- npmci node install lts
- npmci command npm install -g @gitzone/tsdoc
- npmci npm install
- npmci command tsdoc
tags:
- lossless
- docker
- notpriv
only:
- tags
artifacts:
expire_in: 1 week
paths:
- public
allow_failure: true

58
changelog.md Normal file
View File

@ -0,0 +1,58 @@
# Changelog
## 2024-06-27 - 1.0.74 - fix(core)
Updated font loading strategy in index.html for improved performance
- Replaced multiple font loading links with a single assetbroker link.
- Removed redundant preconnect and stylesheet links for fonts.
## 2024-06-26 - 1.0.73 - fix(documentation)
Update project description and keywords in package.json and npmextra.json. Refactored documentation in readme.md.
- Updated project description and keywords within package.json and npmextra.json to ensure alignment.
- Enhanced readme.md with detailed setup, installation and usage instructions including examples for importing and using components.
## 2024-06-26 - 1.0.72 - fix(core)
Fixed incorrect import paths and updated configurations for package publication.
- Fixed import paths for various dependencies in TypeScript files.
- Updated npm package name and scope in package.json.
- Deleted .gitlab-ci.yml file.
- Adjusted tsconfig.json for ESModule compatibility.
- Adjusted npmextra.json for correct repository and license information.
- Updated documentation links in readme.md.
## 2023-01-05 - 1.0.69 to 1.0.71 - core
Multiple updates.
- fix(core): update
## 2022-03-24 - 1.0.67 to 1.0.69 - core
Multiple updates.
- fix(core): update
## 2021-09-27 - 1.0.60 to 1.0.66 - core
Multiple updates.
- fix(core): update
## 2021-09-24 - 1.0.59 to 1.0.60 - core
Fixes and updates.
- fix(core): update
## 2021-09-23 - 1.0.58 to 1.0.59 - core
Fixes and updates.
- fix(core): update
## 2020-11-29 - 1.0.57 to 1.0.58 - core
Fixes and updates.
- fix(core): update
## 2020-09-19 - 1.0.55 to 1.0.57 - core
Fixes and updates.
- fix(core): update

View File

@ -10,16 +10,9 @@
/> />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://rsms.me/"> <!--Lets load standard fonts-->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link
crossorigin="anonymous"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<style> <style>
body { body {

View File

@ -1,6 +1,6 @@
// dees tools // dees tools
import * as deesWccTools from '@designestate/dees-wcctools'; import * as deesWccTools from '@design.estate/dees-wcctools';
import * as deesDomTools from '@designestate/dees-domtools'; import * as deesDomTools from '@design.estate/dees-domtools';
// elements and pages // elements and pages
import * as elements from '../ts_web/elements/index.js'; import * as elements from '../ts_web/elements/index.js';

View File

@ -2,13 +2,27 @@
"gitzone": { "gitzone": {
"projectType": "wcc", "projectType": "wcc",
"module": { "module": {
"githost": "gitlab.com", "githost": "code.foss.global",
"gitscope": "uptimelink/private", "gitscope": "uptime.link",
"gitrepo": "catalog", "gitrepo": "statuspage",
"description": "a catalog with webcomponents for uptimelink dashboard", "description": "A catalog of web components for the UptimeLink dashboard.",
"npmPackagename": "@uptimelink_private/catalog", "npmPackagename": "@uptime.link/statuspage",
"license": "UNLICENSED", "license": "MIT",
"projectDomain": "uptime.link" "projectDomain": "uptime.link",
"keywords": [
"web components",
"uptimelink",
"dashboard",
"status monitoring",
"typescript",
"incidents",
"status",
"performance",
"uptime",
"frontend",
"UI",
"catalog"
]
} }
}, },
"npmci": { "npmci": {

View File

@ -1,33 +1,32 @@
{ {
"name": "@uptimelink_private/catalog", "name": "@uptime.link/statuspage",
"version": "1.0.71", "version": "1.0.74",
"private": false, "private": false,
"description": "a catalog with webcomponents for uptimelink dashboard", "description": "A catalog of web components for the UptimeLink dashboard.",
"main": "dist_ts_web/index.js", "main": "dist_ts_web/index.js",
"typings": "dist_ts_web/index.d.ts", "typings": "dist_ts_web/index.d.ts",
"type": "module", "type": "module",
"scripts": { "scripts": {
"test": "npm run build", "test": "npm run build",
"build": "tsbuild element --allowimplicitany && tsbundle element --production", "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
"watch": "tswatch element", "watch": "tswatch element",
"buildDocs": "tsdoc" "buildDocs": "tsdoc"
}, },
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@designestate/dees-domtools": "^2.0.1", "@design.estate/dees-domtools": "^2.0.1",
"@designestate/dees-element": "^2.0.4", "@design.estate/dees-element": "^2.0.4",
"@designestate/dees-wcctools": "^1.0.73", "@design.estate/dees-wcctools": "^1.0.73",
"@losslessone_private/loint-pubapi": "^1.0.10", "@uptime.link/interfaces": "^2.0.21"
"@uptimelink/interfaces": "^1.0.10"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.61", "@git.zone/tsbuild": "^2.1.61",
"@gitzone/tsbundle": "^2.0.7", "@git.zone/tsbundle": "^2.0.7",
"@gitzone/tsrun": "^1.2.39", "@git.zone/tsrun": "^1.2.39",
"@gitzone/tswatch": "^2.0.5", "@git.zone/tswatch": "^2.0.5",
"@pushrocks/projectinfo": "^5.0.1", "@push.rocks/projectinfo": "^5.0.1",
"@pushrocks/smartenv": "^5.0.0", "@push.rocks/smartenv": "^5.0.0",
"@types/node": "^18.11.18" "@types/node": "^18.11.18"
}, },
"files": [ "files": [
@ -44,5 +43,19 @@
], ],
"browserslist": [ "browserslist": [
"last 1 Chrome versions" "last 1 Chrome versions"
],
"keywords": [
"web components",
"uptimelink",
"dashboard",
"status monitoring",
"typescript",
"incidents",
"status",
"performance",
"uptime",
"frontend",
"UI",
"catalog"
] ]
} }

5847
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

0
readme.hints.md Normal file
View File

221
readme.md
View File

@ -1,32 +1,205 @@
# @uptimelink/private/catalog # @uptime.link/statuspage
a catalog with webcomponents for uptimelink dashboard a catalog with webcomponents for uptimelink dashboard
## Availabililty and Links ## Install
* [npmjs.org (npm package)](https://www.npmjs.com/package/@uptimelink_private/catalog)
* [gitlab.com (source)](https://gitlab.com/uptimelink/private/catalog)
* [github.com (source mirror)](https://github.com/uptimelink/private/catalog)
* [docs (typedoc)](https://uptimelink/private.gitlab.io/catalog/)
## Status for master To install the `@uptime.link/statuspage` module, you can use npm. Make sure you have Node.js and npm installed, then run:
Status Category | Status Badge ```sh
-- | -- npm install @uptime.link/statuspage
GitLab Pipelines | [![pipeline status](https://gitlab.com/uptimelink/private/catalog/badges/master/pipeline.svg)](https://lossless.cloud) ```
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/uptimelink/private/catalog/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@uptimelink_private/catalog)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/uptimelink/private/catalog)](https://lossless.cloud)
TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@uptimelink_private/catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@uptimelink_private/catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@uptimelink_private/catalog)](https://lossless.cloud)
## Usage ## Usage
Use TypeScript for best in class intellisense The `@uptime.link/statuspage` module provides a collection of web components to build a comprehensive status page for Uptime.link dashboards. This includes headers, status bars, asset selectors, status details, incident lists, and more.
For further information read the linked docs at the top of this readme.
## Legal Heres a detailed guide on how to use each component in your TypeScript project with ESM syntax. We will walk through creating a complete status page using the provided components.
> UNLICENSED licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy) ### Step-by-Step Example
1. **Setup Your Project:**
Ensure you have a TypeScript project setup. Here's a minimal `tsconfig.json` to get started:
```json
{
"compilerOptions": {
"target": "ES2020",
"module": "ESNext",
"moduleResolution": "node",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
}
}
```
2. **Import Components:**
Create an `index.ts` file, and import the components you need:
```typescript
import './elements/index.js';
import { page1 } from './pages/index.js';
```
3. **Creating a Status Page:**
Here, we'll create a simple status page using the imported components. We'll create individual components like headers, status bars, footers, etc., and combine them into a single page.
### UplStatuspageHeader
```typescript
import { UplStatuspageHeader } from './elements/upl-statuspage-header.js';
const header: UplStatuspageHeader = document.createElement('upl-statuspage-header');
header.pageTitle = "Uptime Link Status Page";
document.body.appendChild(header);
```
### UplStatuspageStatusbar
```typescript
import { UplStatuspageStatusbar } from './elements/upl-statuspage-statusbar.js';
const statusBar: UplStatuspageStatusbar = document.createElement('upl-statuspage-statusbar');
document.body.appendChild(statusBar);
```
### UplStatuspageAssetsselector
```typescript
import { UplStatuspageAssetsselector } from './elements/upl-statuspage-assetsselector.js';
const assetsSelector: UplStatuspageAssetsselector = document.createElement('upl-statuspage-assetsselector');
document.body.appendChild(assetsSelector);
```
### UplStatuspageStatusdetails
```typescript
import { UplStatuspageStatusdetails } from './elements/upl-statuspage-statusdetails.js';
const statusDetails: UplStatuspageStatusdetails = document.createElement('upl-statuspage-statusdetails');
document.body.appendChild(statusDetails);
```
### UplStatuspageStatusmonth
```typescript
import { UplStatuspageStatusmonth } from './elements/upl-statuspage-statusmonth.js';
const statusMonth: UplStatuspageStatusmonth = document.createElement('upl-statuspage-statusmonth');
document.body.appendChild(statusMonth);
```
### UplStatuspageIncidents
```typescript
import { UplStatuspageIncidents } from './elements/upl-statuspage-incidents.js';
import { uplInterfaces } from './plugins.js';
const incidents: UplStatuspageIncidents = document.createElement('upl-statuspage-incidents');
incidents.currentIncidences = [
// Example incident data
{
id: "incident1",
title: "Server Outage",
description: "There was an outage on the main server.",
status: "resolved",
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
}
] as uplInterfaces.IIncident[];
incidents.pastIncidences = [
// Example past incident data
{
id: "incident2",
title: "Database Maintenance",
description: "Scheduled maintenance on the database.",
status: "completed",
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
}
] as uplInterfaces.IIncident[];
document.body.appendChild(incidents);
```
### UplStatuspageFooter
```typescript
import { UplStatuspageFooter } from './elements/upl-statuspage-footer.js';
const footer: UplStatuspageFooter = document.createElement('upl-statuspage-footer');
footer.legalInfo = "https://example.com/legal";
document.body.appendChild(footer);
```
### Full Example
Heres how you can put it all together to create a full status page:
```typescript
import './elements/index.js';
import { page1 } from './pages/index.js';
import { UplStatuspageHeader } from './elements/upl-statuspage-header.js';
import { UplStatuspageStatusbar } from './elements/upl-statuspage-statusbar.js';
import { UplStatuspageAssetsselector } from './elements/upl-statuspage-assetsselector.js';
import { UplStatuspageStatusdetails } from './elements/upl-statuspage-statusdetails.js';
import { UplStatuspageStatusmonth } from './elements/upl-statuspage-statusmonth.js';
import { UplStatuspageIncidents } from './elements/upl-statuspage-incidents.js';
import { UplStatuspageFooter } from './elements/upl-statuspage-footer.js';
import { uplInterfaces } from './plugins.js';
const header: UplStatuspageHeader = document.createElement('upl-statuspage-header');
header.pageTitle = "Uptime Link Status Page";
document.body.appendChild(header);
const statusBar: UplStatuspageStatusbar = document.createElement('upl-statuspage-statusbar');
document.body.appendChild(statusBar);
const assetsSelector: UplStatuspageAssetsselector = document.createElement('upl-statuspage-assetsselector');
document.body.appendChild(assetsSelector);
const statusDetails: UplStatuspageStatusdetails = document.createElement('upl-statuspage-statusdetails');
document.body.appendChild(statusDetails);
const statusMonth: UplStatuspageStatusmonth = document.createElement('upl-statuspage-statusmonth');
document.body.appendChild(statusMonth);
const incidents: UplStatuspageIncidents = document.createElement('upl-statuspage-incidents');
incidents.currentIncidences = [
{
id: "incident1",
title: "Server Outage",
description: "There was an outage on the main server.",
status: "resolved",
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
}
] as uplInterfaces.IIncident[];
incidents.pastIncidences = [
{
id: "incident2",
title: "Database Maintenance",
description: "Scheduled maintenance on the database.",
status: "completed",
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString()
}
] as uplInterfaces.IIncident[];
document.body.appendChild(incidents);
const footer: UplStatuspageFooter = document.createElement('upl-statuspage-footer');
footer.legalInfo = "https://example.com/legal";
document.body.appendChild(footer);
```
This example uses all the components provided by `@uptime.link/statuspage` to create a functional status page. Modify the data, styles, and structure to suit your requirements.
undefined

View File

@ -1,8 +1,8 @@
/** /**
* autocreated commitinfo by @pushrocks/commitinfo * autocreated commitinfo by @push.rocks/commitinfo
*/ */
export const commitinfo = { export const commitinfo = {
name: '@uptimelink_private/catalog', name: '@uptime.link/statuspage',
version: '1.0.71', version: '1.0.74',
description: 'a catalog with webcomponents for uptimelink dashboard' description: 'A catalog of web components for the UptimeLink dashboard.'
} }

View File

@ -1,6 +1,6 @@
import { customElement, DeesElement, html, TemplateResult } from '@designestate/dees-element'; import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
@customElement('uplinternal-miniheading') @customElement('uplinternal-miniheading')
export class UplinternalMiniheading extends DeesElement { export class UplinternalMiniheading extends DeesElement {

View File

@ -3,11 +3,11 @@ import {
property, property,
html, html,
customElement, customElement,
TemplateResult, type TemplateResult,
cssManager, cssManager,
css, css,
} from '@designestate/dees-element'; } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import './internal/uplinternal-miniheading.js'; import './internal/uplinternal-miniheading.js';

View File

@ -1,5 +1,5 @@
import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element'; import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -1,5 +1,5 @@
import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element'; import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -4,10 +4,10 @@ import {
property, property,
html, html,
customElement, customElement,
TemplateResult, type TemplateResult,
css, css,
cssManager, cssManager,
} from '@designestate/dees-element'; } from '@design.estate/dees-element';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -1,5 +1,5 @@
import { DeesElement, property, html, customElement, TemplateResult, cssManager, css } from '@designestate/dees-element'; import { DeesElement, property, html, customElement, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -4,10 +4,10 @@ import {
property, property,
html, html,
customElement, customElement,
TemplateResult, type TemplateResult,
css, css,
cssManager, cssManager,
} from '@designestate/dees-element'; } from '@design.estate/dees-element';
import './internal/uplinternal-miniheading.js'; import './internal/uplinternal-miniheading.js';

View File

@ -3,11 +3,11 @@ import {
property, property,
html, html,
customElement, customElement,
TemplateResult, type TemplateResult,
css, css,
cssManager cssManager
} from '@designestate/dees-element'; } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import './internal/uplinternal-miniheading.js'; import './internal/uplinternal-miniheading.js';

View File

@ -1,5 +1,5 @@
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@design.estate/dees-domtools';
import * as uplInterfaces from '@uptimelink/interfaces'; import * as uplInterfaces from '@uptime.link/interfaces';
export { export {
domtools, domtools,

View File

@ -1,8 +1,14 @@
{ {
"compilerOptions": { "compilerOptions": {
"experimentalDecorators": true, "experimentalDecorators": true,
"useDefineForClassFields": false,
"target": "ES2022", "target": "ES2022",
"module": "ES2022", "module": "NodeNext",
"moduleResolution": "nodenext" "moduleResolution": "NodeNext",
} "esModuleInterop": true,
"verbatimModuleSyntax": true
},
"exclude": [
"dist_*/**/*.d.ts"
]
} }