changelog.md

@@ -1,17 +1,5 @@
 # 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.
 

html/index.html

@@ -10,9 +10,16 @@
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://rsms.me/">
-    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <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>
       body {

npmextra.json

@@ -5,24 +5,10 @@
       "githost": "code.foss.global",
       "gitscope": "uptime.link",
       "gitrepo": "statuspage",
-      "description": "A catalog of web components for the UptimeLink dashboard.",
+      "description": "a catalog with webcomponents for 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": {

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@uptime.link/statuspage",
-  "version": "1.0.74",
+  "version": "1.0.72",
   "private": false,
-  "description": "A catalog of web components for the UptimeLink dashboard.",
+  "description": "a catalog with webcomponents for uptimelink dashboard",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
@@ -43,19 +43,5 @@
   ],
   "browserslist": [
     "last 1 Chrome versions"
-  ],
-  "keywords": [
-    "web components",
-    "uptimelink",
-    "dashboard",
-    "status monitoring",
-    "typescript",
-    "incidents",
-    "status",
-    "performance",
-    "uptime",
-    "frontend",
-    "UI",
-    "catalog"
   ]
 }

readme.md

@@ -1,205 +1,32 @@
-# @uptime.link/statuspage
+# @uptime.link/private/catalog
 a catalog with webcomponents for uptimelink dashboard
 
-## Install
+## 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/)
 
-To install the `@uptime.link/statuspage` module, you can use npm. Make sure you have Node.js and npm installed, then run:
+## Status for master
 
-```sh
+Status Category | Status Badge
-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
 
-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.
+Use TypeScript for best in class intellisense
+For further information read the linked docs at the top of this readme.
 
-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.
+## Legal
-
+> UNLICENSED licensed | **©** [Task Venture Capital GmbH](https://task.vc)
-### Step-by-Step Example
+| By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
-
-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

ts_web/00_commitinfo_data.ts

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