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

fix(uptimelink-webwidget): Modernize element props (use accessor), bump deps, add CI/workflows, export pages and update package metadata/docs

Browse Source
This commit is contained in:
Jürgen Kunz
2025-11-30 17:30:38 +00:00
parent 368ddec10d
commit 53af713533
15 changed files with 3662 additions and 2629 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
readme.md
View File

@@ -1,4 +1,5 @@
# @uptimelink/webwidget
the webwidget for public use of uptimelink
## Install
@@ -18,9 +19,11 @@ yarn add @uptimelink/webwidget
## Usage
### Introduction
The `@uptimelink/webwidget` package provides a web component that can be embedded into web pages to display uptime information for a given project on the UptimeLink platform. The component is implemented using TypeScript and leverages modern web standards including Web Components and LitElement.
### Basic Setup
First, you will need to import the `UptimelinkWebwidget` class and define it in your project. To do this, create an HTML file and include a script to register the web component.
```typescript
@@ -32,30 +35,32 @@ document.body.appendChild(UptimelinkWebwidget.demo());
```
### Setting Up in HTML
To use the widget in an HTML document, you will need to include the built JavaScript file. Here is an example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uptime Link Widget</title>
</head>
<body>
<script type="module">
import { UptimelinkWebwidget } from './path_to_your_built_index.js';
customElements.define('uptimelink-webwidget', UptimelinkWebwidget);
const widgetElement = document.createElement('uptimelink-webwidget');
widgetElement.projectSlug = 'uptime.link';
document.body.appendChild(widgetElement);
</script>
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Uptime Link Widget</title>
</head>
<body>
<script type="module">
import { UptimelinkWebwidget } from './path_to_your_built_index.js';
customElements.define('uptimelink-webwidget', UptimelinkWebwidget);
const widgetElement = document.createElement('uptimelink-webwidget');
widgetElement.projectSlug = 'uptime.link';
document.body.appendChild(widgetElement);
</script>
</body>
</html>
```
### Creating a Custom Page with the Widget
You can integrate the widget into a custom page to display uptime status. First, create a new TypeScript file for the page.
```typescript
@@ -71,16 +76,19 @@ export const customPage = () => html`
height: 120px;
padding: 40px;
width: 100%;
background: rgba(0,0,0,0.2);
background: rgba(0, 0, 0, 0.2);
}
</style>
<div class="container">
<uptimelink-webwidget projectSlug="custom-project-slug"></uptimelink-webwidget>
<uptimelink-webwidget
projectSlug="custom-project-slug"
></uptimelink-webwidget>
</div>
`;
```
### Styling the Widget
The `UptimelinkWebwidget` component comes with default styles but you can override those styles to match your site's aesthetics. Below is an example of how this can be done:
```typescript
@@ -99,18 +107,26 @@ UptimelinkWebwidget.styles = [
.statusindicator {
background: #28a745;
}
`
`,
];
document.body.appendChild(UptimelinkWebwidget.demo());
```
### Advanced Interactions
The `UptimelinkWebwidget` allows for advanced interactions such as hovering effects to show detailed information. This is handled within the component's lifecycle and event handlers. Below is a detailed code snippet demonstrating lifecycle hooks and event listeners:
```typescript
// uppimelink-webwidget.ts
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
cssManager,
} from '@design.estate/dees-element';
import { DeesWindowLayer } from '@design.estate/dees-catalog';
@customElement('uptimelink-webwidget')
@@ -126,9 +142,7 @@ export class UptimelinkWebwidget extends DeesElement {
this.setupEventing();
}
public static styles = [
cssManager.defaultStyles,
]
public static styles = [cssManager.defaultStyles];
public render(): TemplateResult {
return html`
@@ -140,11 +154,9 @@ export class UptimelinkWebwidget extends DeesElement {
<div class="statusindicator"></div>
<div class="statustext">All systems are up!</div>
</div>
${this.showExpanded ? html`
<div class="expanded">
/* Expanded view content */
</div>
` : null}
${this.showExpanded
? html` <div class="expanded">/* Expanded view content */</div> `
: null}
</div>
`;
}
@@ -173,7 +185,9 @@ export class UptimelinkWebwidget extends DeesElement {
this.showExpanded = true;
await this.performUpdate();
await domtools.convenience.smartdelay.delayFor(50);
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
const expandedDiv = this.shadowRoot.querySelector(
'.expanded',
) as HTMLElement;
expandedDiv.style.opacity = '1';
};
@@ -193,12 +207,13 @@ export class UptimelinkWebwidget extends DeesElement {
this.showExpanded = false;
await domtools.convenience.smartdelay.delayFor(50);
this.isFocused = false;
}
};
}
}
```
### Utilizing Multiple Widgets
You can also utilize multiple instances of the web widget on a single page. Below is an example of how you could do this:
```typescript
@@ -216,6 +231,7 @@ document.body.appendChild(widget2);
```
### Building and Serving
To build the project, use the following npm scripts:
```bash
@@ -229,6 +245,7 @@ npm run watch
```
### Testing
Currently, the `test` script is identical to the `build` script. Running tests requires building the project:
```bash
@@ -236,10 +253,12 @@ npm run test
```
### Contributing
Contributions to the `@uptimelink/webwidget` project are welcome! Please follow the guidelines provided in the repository. Reach out on the project issues page for discussions, questions, or follow the established process for submitting pull requests.
### Conclusion
This guide covered the steps needed to install, set up, and use the `@uptimelink/webwidget` package in your TypeScript projects. We also explored various ways to customize and extend the widget, ensuring seamless integration into your existing web applications. For more detailed information, refer to the [documentation](https://uptimelink.gitlab.io/webwidget/).
Feel free to check the links provided in the initial sections for more context and updates about the project's status and availability.
undefined
undefined