buildmymcpserver/apps/web/app/docs/layout.tsx
Marco Sadjadi 09688c1114 feat(web): real 3-step wizard, settings, audit, docs, marketing pages
Sprint 3.5: close every dead link and replace the single-step wizard with the
spec-mandated 3-step flow.

Wizard:
- Step 1 collects prompt + name + slug, calls /v1/servers/preview.
- Step 2 renders parsed tools (name, description, input schema as copyable JSON)
  + a credential field per requiredSecret Claude actually identified. Self-contained
  servers see 'No credentials needed' instead of generic Notion placeholders.
- Step 3 streams the live build over WebSocket and shows install snippets.

New dashboard pages:
- /settings — org, plan/usage, members table, API keys + billing stubs (Sprint 4),
  encryption status. Reads /v1/me/org.
- /audit — filterable table over /v1/audit with action pills, resource refs, IP,
  metadata JSON.

Docs site (/docs + 6 sub-pages):
- Sticky 240px sidebar, max-w-prose article column, shared DocsTitle/H2/Code primitives.
- Quickstart, MCP concepts, OAuth 2.1 flow (full walkthrough with curl), Authoring
  tools, Self-hosting, API reference, FAQ.

Marketing pages:
- /changelog with tagged release timeline.
- /security with 8 pillars + disclosure.
- /privacy with GDPR-aware sections.
- /terms (10 clauses).
- /pricing full page (nav now points here instead of /#pricing anchor).
- /status with live 10s probes against /api/health and /login.

Footer 'system status' badge now links to /status.

All 20 routes 200 OK in smoke crawl. Typecheck clean across packages.
2026-05-19 18:20:31 +02:00

86 lines
2.9 KiB
TypeScript

import Link from 'next/link';
import { Logo } from '@/components/logo';
const SECTIONS: { heading: string; items: { href: string; label: string }[] }[] = [
{
heading: 'Get started',
items: [
{ href: '/docs', label: 'Quickstart' },
{ href: '/docs/concepts', label: 'MCP concepts' },
],
},
{
heading: 'Auth',
items: [{ href: '/docs/oauth', label: 'OAuth 2.1 flow' }],
},
{
heading: 'Build',
items: [
{ href: '/docs/authoring', label: 'Authoring tools' },
{ href: '/docs/self-hosting', label: 'Self-hosting' },
],
},
{
heading: 'Reference',
items: [
{ href: '/docs/api-reference', label: 'API reference' },
{ href: '/docs/faq', label: 'FAQ' },
],
},
];
export default function DocsLayout({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen flex-col">
<header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/85 backdrop-blur-md">
<div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-6">
<div className="flex items-center gap-3">
<Logo />
<span className="text-[12.5px] text-[--color-fg-subtle]">/ docs</span>
</div>
<nav className="flex items-center gap-2">
<Link
href="/"
className="text-[12.5px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
>
Home
</Link>
<Link
href="/login"
className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[12.5px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
>
Start building
</Link>
</nav>
</div>
</header>
<div className="mx-auto flex w-full max-w-6xl flex-1 gap-12 px-6 py-10">
<aside className="w-[240px] shrink-0">
<nav className="sticky top-20 space-y-5">
{SECTIONS.map((section) => (
<div key={section.heading}>
<div className="text-[10.5px] uppercase tracking-[0.14em] text-[--color-fg-subtle]">
{section.heading}
</div>
<ul className="mt-2 space-y-0.5">
{section.items.map((item) => (
<li key={item.href}>
<Link
href={item.href}
className="block rounded-sm px-1 py-1 text-[12.5px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
>
{item.label}
</Link>
</li>
))}
</ul>
</div>
))}
</nav>
</aside>
<article className="prose prose-invert max-w-2xl flex-1">{children}</article>
</div>
</div>
);
}