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:
@@ -1,179 +1,137 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ArrowRight, ArrowLeft, ExternalLink } from 'lucide-react';
|
||||
|
||||
const CodeBlock = ({ children, title }: { children: string; title?: string }) => (
|
||||
<div className="rounded-lg border border-border overflow-hidden">
|
||||
{title && (
|
||||
<div className="px-4 py-2 bg-muted/50 border-b border-border text-xs font-medium text-muted-foreground">
|
||||
{title}
|
||||
</div>
|
||||
)}
|
||||
<pre className="p-4 overflow-x-auto bg-muted/30">
|
||||
<code className="text-sm font-mono text-foreground">{children}</code>
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
import { ArrowRight, CheckCircle2 } from 'lucide-react';
|
||||
|
||||
const QuickStart = () => {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{/* Header */}
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-foreground">
|
||||
Quick Start
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground leading-relaxed">
|
||||
Get started with idp.global in under 5 minutes. Choose between using our
|
||||
free hosted platform or self-hosting with Docker.
|
||||
<h1 className="text-4xl font-bold tracking-tight text-foreground">Quick Start</h1>
|
||||
<p className="text-xl text-muted-foreground">
|
||||
Get uptime.link running and monitoring your first endpoint in under 5 minutes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Option 1: Hosted Platform */}
|
||||
{/* Prerequisites */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Option 1: Use Free Hosted Platform</h2>
|
||||
<p className="text-muted-foreground">
|
||||
The fastest way to get started. Create your free account on idp.global and start using
|
||||
it immediately. No installation required.
|
||||
</p>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0">1</span>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Create your account</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Visit <a href="https://idp.global" className="text-primary hover:underline">idp.global</a> and sign up for a free account.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0">2</span>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Create an organization</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Set up your first organization and invite team members.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground text-xs font-bold shrink-0">3</span>
|
||||
<div>
|
||||
<p className="font-medium text-foreground">Register your application</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Create an OAuth/OIDC client for your app and get your credentials.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<a href="https://idp.global">
|
||||
Get Started Free
|
||||
<ExternalLink className="ml-2 h-4 w-4" />
|
||||
</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Option 2: Self-Host */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Option 2: Self-Host with Docker</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Deploy your own instance for complete control over your data and infrastructure.
|
||||
</p>
|
||||
|
||||
<h3 className="text-lg font-medium text-foreground">Prerequisites</h3>
|
||||
<ul className="list-disc list-inside text-muted-foreground space-y-1 ml-2">
|
||||
<li>Docker installed on your server</li>
|
||||
<li>MongoDB instance (local or cloud)</li>
|
||||
<li>A domain name pointing to your server</li>
|
||||
<h2 className="text-2xl font-semibold text-foreground">Prerequisites</h2>
|
||||
<ul className="space-y-2">
|
||||
{['Node.js 18+ or Docker', 'npm or pnpm package manager'].map((item) => (
|
||||
<li key={item} className="flex items-center gap-2 text-muted-foreground">
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-500" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<h3 className="text-lg font-medium text-foreground">1. Pull the Docker image</h3>
|
||||
<CodeBlock title="Terminal">
|
||||
{`docker pull code.foss.global/idp.global/idp.global`}
|
||||
</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-foreground">2. Run the container</h3>
|
||||
<CodeBlock title="Terminal">
|
||||
{`docker run -d \\
|
||||
-p 2999:2999 \\
|
||||
-e MONGODB_URL=mongodb://your-mongo:27017/idp \\
|
||||
-e IDP_BASEURL=https://your-domain.com \\
|
||||
-e INSTANCE_NAME=my-idp \\
|
||||
code.foss.global/idp.global/idp.global`}
|
||||
</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-foreground">3. Access your instance</h3>
|
||||
<p className="text-muted-foreground">
|
||||
Your idp.global instance is now running on port 2999. Configure your reverse proxy
|
||||
(nginx, traefik, etc.) to handle HTTPS and route traffic to the container.
|
||||
</p>
|
||||
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/docs/docker">
|
||||
Full Docker Guide
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Integrate with your app */}
|
||||
{/* Step 1 */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Integrate with Your Application</h2>
|
||||
<h2 className="text-2xl font-semibold text-foreground">1. Install the CLI</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Once you have access to an idp.global instance, install the TypeScript client:
|
||||
Install the uptime.link CLI globally using npm or pnpm:
|
||||
</p>
|
||||
|
||||
<CodeBlock title="Terminal">
|
||||
{`npm install @idp.global/idpclient`}
|
||||
</CodeBlock>
|
||||
|
||||
<h3 className="text-lg font-medium text-foreground">Basic Usage</h3>
|
||||
<CodeBlock title="app.ts">
|
||||
{`import { IdpClient } from '@idp.global/idpclient';
|
||||
|
||||
// Initialize the client
|
||||
const idpClient = new IdpClient('https://idp.global');
|
||||
|
||||
// Enable WebSocket connection for real-time updates
|
||||
await idpClient.enableTypedSocket();
|
||||
|
||||
// Check if user is logged in
|
||||
const isLoggedIn = await idpClient.determineLoginStatus();
|
||||
|
||||
if (isLoggedIn) {
|
||||
// Get current user info
|
||||
const userInfo = await idpClient.whoIs();
|
||||
console.log('User:', userInfo.user);
|
||||
|
||||
// Get user's organizations
|
||||
const orgs = await idpClient.getRolesAndOrganizations();
|
||||
console.log('Organizations:', orgs.organizations);
|
||||
}`}
|
||||
</CodeBlock>
|
||||
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/docs/sdk">
|
||||
Full SDK Documentation
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<code className="text-sm text-foreground">npm install -g @uptime.link/cli</code>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Or with pnpm:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<code className="text-sm text-foreground">pnpm add -g @uptime.link/cli</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between pt-8 border-t border-border">
|
||||
<Button variant="ghost" asChild>
|
||||
<Link to="/docs">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Introduction
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost" asChild>
|
||||
<Link to="/docs/docker">
|
||||
Docker Deployment
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
{/* Step 2 */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">2. Scan Your Network</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Run the detector to discover services on your local network:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<code className="text-sm text-foreground">uptime scan</code>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This will scan common ports and detect running services like HTTP servers, databases, and more.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 3 */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">3. Add a Monitor</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Add an endpoint to monitor:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`uptime add https://api.example.com --interval 60`}</pre>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
This adds the endpoint to your monitoring list with 60-second check intervals.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Step 4 */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">4. View Status</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Check the status of all monitored endpoints:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<code className="text-sm text-foreground">uptime status</code>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You'll see a table with the current status, response time, and uptime percentage for each endpoint.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Using the SDK */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Using the SDK</h2>
|
||||
<p className="text-muted-foreground">
|
||||
For programmatic access, install the TypeScript SDK:
|
||||
</p>
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<code className="text-sm text-foreground">npm install @uptime.link/sdk</code>
|
||||
</div>
|
||||
<div className="bg-muted/50 rounded-lg p-4 mt-4">
|
||||
<pre className="text-sm text-foreground overflow-x-auto">{`import { UptimeClient } from '@uptime.link/sdk';
|
||||
|
||||
const client = new UptimeClient();
|
||||
|
||||
// Check a single endpoint
|
||||
const result = await client.check('https://api.example.com');
|
||||
console.log(result.status, result.responseTime);
|
||||
|
||||
// Scan local network
|
||||
const services = await client.scanNetwork();
|
||||
console.log('Found services:', services);`}</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/cli">
|
||||
CLI Reference
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link to="/docs/widgets">
|
||||
Status Widgets
|
||||
<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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user