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

initial

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 00:23:21 +00:00
commit 59f64a1291
91 changed files with 12991 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
src/pages/docs/QuickStart.tsx Normal file
View File

@@ -0,0 +1,182 @@
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>
);
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.
</p>
</div>
{/* Option 1: Hosted Platform */}
<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>
</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 */}
<div className="space-y-4">
<h2 className="text-2xl font-semibold text-foreground">Integrate with Your Application</h2>
<p className="text-muted-foreground">
Once you have access to an idp.global instance, install the TypeScript client:
</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>
{/* 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>
</div>
</div>
);
};
export default QuickStart;