feat(site): initial about.uptime.link website
- Rebrand from idp.global to uptime.link - Add JetBrains Mono as primary font - Update Hero with port detection, network scanning, status widgets - Update Features for uptime monitoring capabilities - Update HowItWorks for CLI-based workflow - Create new docs: CLI, Widgets, Detector - Remove idp.global specific pages (FairUsage, Docker, OIDC, Organizations, Users) - Use emerald green color scheme throughout
This commit is contained in:
197
src/pages/docs/Widgets.tsx
Normal file
197
src/pages/docs/Widgets.tsx
Normal file
@@ -0,0 +1,197 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight } from 'lucide-react';
|
||||
|
||||
const Widgets = () => {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-foreground">Status Widgets</h1>
|
||||
<p className="text-xl text-muted-foreground">
|
||||
Embeddable web components to display real-time uptime status on your website.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Quick Start */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Quick Start</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Add the status widget to any HTML page with a single script tag:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`<script src="https://cdn.uptime.link/widget.js"></script>
|
||||
<uptime-status endpoint="https://api.example.com"></uptime-status>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Widget Types */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Widget Types</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Status Badge */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium text-foreground">Status Badge</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
A compact badge showing current status.
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`<uptime-badge
|
||||
endpoint="https://api.example.com"
|
||||
label="API Status"
|
||||
></uptime-badge>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Card */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium text-foreground">Status Card</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
A card showing status, uptime percentage, and response time.
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`<uptime-card
|
||||
endpoint="https://api.example.com"
|
||||
name="API Server"
|
||||
show-uptime="true"
|
||||
show-response-time="true"
|
||||
></uptime-card>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Page */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium text-foreground">Status Page</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
A full status page with multiple endpoints.
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`<uptime-page
|
||||
endpoints='[
|
||||
{"url": "https://api.example.com", "name": "API"},
|
||||
{"url": "https://app.example.com", "name": "Web App"},
|
||||
{"url": "https://db.internal:5432", "name": "Database"}
|
||||
]'
|
||||
title="System Status"
|
||||
></uptime-page>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Customization */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Customization</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Customize the appearance using CSS variables:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`<style>
|
||||
uptime-card {
|
||||
--uptime-bg: #1a1a1a;
|
||||
--uptime-text: #ffffff;
|
||||
--uptime-up: #10b981;
|
||||
--uptime-down: #ef4444;
|
||||
--uptime-border: #333333;
|
||||
--uptime-radius: 8px;
|
||||
}
|
||||
</style>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attributes */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Attributes</h2>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border">
|
||||
<th className="text-left py-2 px-3 font-medium text-foreground">Attribute</th>
|
||||
<th className="text-left py-2 px-3 font-medium text-foreground">Type</th>
|
||||
<th className="text-left py-2 px-3 font-medium text-foreground">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-border">
|
||||
<tr>
|
||||
<td className="py-2 px-3"><code className="text-emerald-500">endpoint</code></td>
|
||||
<td className="py-2 px-3 text-muted-foreground">string</td>
|
||||
<td className="py-2 px-3 text-muted-foreground">URL to monitor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3"><code className="text-emerald-500">name</code></td>
|
||||
<td className="py-2 px-3 text-muted-foreground">string</td>
|
||||
<td className="py-2 px-3 text-muted-foreground">Display name for the endpoint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3"><code className="text-emerald-500">refresh</code></td>
|
||||
<td className="py-2 px-3 text-muted-foreground">number</td>
|
||||
<td className="py-2 px-3 text-muted-foreground">Refresh interval in seconds (default: 60)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3"><code className="text-emerald-500">show-uptime</code></td>
|
||||
<td className="py-2 px-3 text-muted-foreground">boolean</td>
|
||||
<td className="py-2 px-3 text-muted-foreground">Show uptime percentage</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3"><code className="text-emerald-500">show-response-time</code></td>
|
||||
<td className="py-2 px-3 text-muted-foreground">boolean</td>
|
||||
<td className="py-2 px-3 text-muted-foreground">Show response time</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="py-2 px-3"><code className="text-emerald-500">theme</code></td>
|
||||
<td className="py-2 px-3 text-muted-foreground">"light" | "dark" | "auto"</td>
|
||||
<td className="py-2 px-3 text-muted-foreground">Color theme</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* React Integration */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">React Integration</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Use the React wrapper for type-safe integration:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`import { StatusCard, StatusPage } from '@uptime.link/react';
|
||||
|
||||
function MyStatusPage() {
|
||||
return (
|
||||
<StatusPage
|
||||
endpoints={[
|
||||
{ url: 'https://api.example.com', name: 'API' },
|
||||
{ url: 'https://app.example.com', name: 'Web App' }
|
||||
]}
|
||||
title="System Status"
|
||||
theme="dark"
|
||||
/>
|
||||
);
|
||||
}`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next steps */}
|
||||
<div className="space-y-4 pt-4 border-t border-border">
|
||||
<h2 className="text-xl font-semibold text-foreground">Next Steps</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/docs/sdk">
|
||||
TypeScript SDK
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/docs/detector">
|
||||
Network Detector
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Widgets;
|
||||
Reference in New Issue
Block a user