205 lines
6.6 KiB
Markdown
205 lines
6.6 KiB
Markdown
# @uptime.link/statuspage
|
||
a catalog with webcomponents for uptimelink dashboard
|
||
|
||
## Install
|
||
|
||
To install the `@uptime.link/statuspage` module, you can use npm. Make sure you have Node.js and npm installed, then run:
|
||
|
||
```sh
|
||
npm install @uptime.link/statuspage
|
||
```
|
||
|
||
## 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.
|
||
|
||
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 |