From ee54e62eab641cfc51e836052f5d3c8610e0a52e Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Wed, 26 Jun 2024 20:30:22 +0200 Subject: [PATCH] fix(documentation): Update project description and keywords in package.json and npmextra.json. Refactored documentation in readme.md. --- changelog.md | 6 + npmextra.json | 18 ++- package.json | 18 ++- readme.md | 221 +++++++++++++++++++++++++++++++---- ts_web/00_commitinfo_data.ts | 4 +- 5 files changed, 237 insertions(+), 30 deletions(-) diff --git a/changelog.md b/changelog.md index c249343..a9c5241 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,11 @@ # Changelog +## 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. diff --git a/npmextra.json b/npmextra.json index 10f8f21..53bcf7b 100644 --- a/npmextra.json +++ b/npmextra.json @@ -5,10 +5,24 @@ "githost": "code.foss.global", "gitscope": "uptime.link", "gitrepo": "statuspage", - "description": "a catalog with webcomponents for uptimelink dashboard", + "description": "A catalog of web components for the UptimeLink dashboard.", "npmPackagename": "@uptime.link/statuspage", "license": "MIT", - "projectDomain": "uptime.link" + "projectDomain": "uptime.link", + "keywords": [ + "web components", + "uptimelink", + "dashboard", + "status monitoring", + "typescript", + "incidents", + "status", + "performance", + "uptime", + "frontend", + "UI", + "catalog" + ] } }, "npmci": { diff --git a/package.json b/package.json index 1d5f1e2..1e78e7e 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@uptime.link/statuspage", "version": "1.0.72", "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", "typings": "dist_ts_web/index.d.ts", "type": "module", @@ -43,5 +43,19 @@ ], "browserslist": [ "last 1 Chrome versions" + ], + "keywords": [ + "web components", + "uptimelink", + "dashboard", + "status monitoring", + "typescript", + "incidents", + "status", + "performance", + "uptime", + "frontend", + "UI", + "catalog" ] -} +} \ No newline at end of file diff --git a/readme.md b/readme.md index 8a14d5c..298190c 100644 --- a/readme.md +++ b/readme.md @@ -1,32 +1,205 @@ -# @uptime.link/private/catalog +# @uptime.link/statuspage a catalog with webcomponents for uptimelink dashboard -## Availabililty and Links -* [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/) +## Install -## 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 --- | -- -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) +```sh +npm install @uptime.link/statuspage +``` ## Usage -Use TypeScript for best in class intellisense -For further information read the linked docs at the top of this readme. +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. -## Legal -> UNLICENSED licensed | **©** [Task Venture Capital GmbH](https://task.vc) -| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy) +Here’s 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. + +### 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 + +Here’s 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 \ No newline at end of file diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 8f439fe..5e7b4df 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@uptime.link/statuspage', - version: '1.0.72', - description: 'a catalog with webcomponents for uptimelink dashboard' + version: '1.0.73', + description: 'A catalog of web components for the UptimeLink dashboard.' }