116 lines
4.8 KiB
TypeScript
116 lines
4.8 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { ArrowRight, BookOpen, Bot, Code2, MousePointerClick, Rocket, Shield } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { docNavigation, groupDocNavigation } from '@/lib/navigation';
|
||
import { usePublicSettings } from '@/providers/public-settings-provider';
|
||
|
||
const highlights = [
|
||
{
|
||
icon: Rocket,
|
||
title: 'Быстрый старт',
|
||
description: 'Локальный запуск через Docker Compose за несколько минут.',
|
||
href: '/docs/getting-started'
|
||
},
|
||
{
|
||
icon: Code2,
|
||
title: 'OAuth 2.0 / OIDC',
|
||
description: 'Стандартный OpenID Connect: Discovery, client_id, PKCE, form-urlencoded token. Примеры для PHP без доработки OidcProvider.',
|
||
href: '/docs/oauth'
|
||
},
|
||
{
|
||
icon: MousePointerClick,
|
||
title: 'One Tap Login',
|
||
description: 'FedCM и виджет sso-widget.js: вход в один клик на сайтах-клиентов без полного редиректа.',
|
||
href: '/docs/one-tap-login'
|
||
},
|
||
{
|
||
icon: Bot,
|
||
title: 'Telegram Bot API',
|
||
description: 'Telegraf, BotFather, профиль бота, setChatMenuButton и Mini Apps — совместимость с Telegram без смены кода.',
|
||
href: '/docs/bot-api'
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: 'Безопасность',
|
||
description: 'PIN-код, сессии, LDAP/LDAPS и управление устройствами.',
|
||
href: '/docs/sessions'
|
||
},
|
||
{
|
||
icon: BookOpen,
|
||
title: 'Справочник API',
|
||
description: 'Полный список REST endpoints и ссылка на Swagger.',
|
||
href: '/docs/api-reference'
|
||
}
|
||
];
|
||
|
||
export function DocsHomeContent() {
|
||
const { projectName, projectTagline } = usePublicSettings();
|
||
const groups = groupDocNavigation(docNavigation);
|
||
|
||
return (
|
||
<main className="min-w-0 pb-16 xl:col-span-1">
|
||
<section className="relative overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50 px-6 py-12 dark:border-zinc-800 dark:bg-zinc-900/50 sm:px-10 sm:py-16">
|
||
<p className="text-sm font-medium text-zinc-500">Документация</p>
|
||
<h1 className="mt-3 max-w-2xl text-4xl font-bold tracking-tight text-zinc-950 dark:text-zinc-50 sm:text-5xl">{projectName}</h1>
|
||
<p className="mt-4 max-w-2xl text-lg leading-relaxed text-zinc-600 dark:text-zinc-400">{projectTagline}</p>
|
||
<p className="mt-4 max-w-2xl text-zinc-600 dark:text-zinc-400">
|
||
Enterprise Identity Provider: единый вход, OAuth 2.0, корпоративный LDAP, семейные группы, чат и админ-панель.
|
||
</p>
|
||
<div className="mt-8 flex flex-wrap gap-3">
|
||
<Button asChild size="lg">
|
||
<Link href="/docs/getting-started">
|
||
Начать
|
||
<ArrowRight className="h-4 w-4" />
|
||
</Link>
|
||
</Button>
|
||
<Button asChild variant="outline" size="lg">
|
||
<Link href="/docs/deployment">Развёртывание</Link>
|
||
</Button>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="mt-10 grid gap-4 sm:grid-cols-2">
|
||
{highlights.map((item) => (
|
||
<Link key={item.href} href={item.href}>
|
||
<Card className="h-full transition-colors hover:border-zinc-300 dark:hover:border-zinc-700">
|
||
<CardHeader>
|
||
<div className="mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-100 dark:bg-zinc-800">
|
||
<item.icon className="h-5 w-5" />
|
||
</div>
|
||
<CardTitle>{item.title}</CardTitle>
|
||
<CardDescription>{item.description}</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<span className="text-sm font-medium text-zinc-500">Читать →</span>
|
||
</CardContent>
|
||
</Card>
|
||
</Link>
|
||
))}
|
||
</section>
|
||
|
||
<section className="mt-12">
|
||
<h2 className="text-xl font-semibold">Все разделы</h2>
|
||
<div className="mt-4 grid gap-6 sm:grid-cols-2">
|
||
{groups.map(([group, items]) => (
|
||
<div key={group}>
|
||
<p className="mb-2 text-xs font-semibold uppercase tracking-wider text-zinc-500">{group}</p>
|
||
<ul className="space-y-2">
|
||
{items.map((item) => (
|
||
<li key={item.slug}>
|
||
<Link href={`/docs/${item.slug}`} className="text-sm text-zinc-600 hover:text-zinc-950 dark:text-zinc-400 dark:hover:text-zinc-50">
|
||
{item.title}
|
||
</Link>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
</main>
|
||
);
|
||
}
|