88c7262a08
All checks were successful
Deploy to Production / deploy (push) Successful in 1m13s
- Hero h1 was a fixed text-[44px] — overflowed narrow phones. Now text-[30px] sm:text-[40px] md:text-[56px]. - Hero grid children get min-w-0 so the code blocks' overflow-x-auto actually constrains instead of widening the page. - Marketing nav: the inline links were hidden below md with no fallback. Added a hamburger MobileMenu; "Sign in" collapses into it on the smallest screens. - Section vertical padding is now responsive (py-14 sm:py-20). - globals.css: overflow-x: clip on <html> as a safety net. - docs: the 240px sidebar is hidden below lg, article gets min-w-0. - dashboard header: nav labels collapse to icons on small screens. Verified: next build passes (40/40 pages). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
import { Logo } from '@/components/logo';
|
|
import { pageMetadata } from '@/lib/seo';
|
|
import Link from 'next/link';
|
|
|
|
export const metadata = pageMetadata({
|
|
title: 'Docs',
|
|
description:
|
|
'BuildMyMCPServer documentation — quickstart, MCP concepts, the OAuth 2.1 flow, authoring tools, self-hosting and the API reference.',
|
|
path: '/docs',
|
|
});
|
|
|
|
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-8 px-5 py-8 sm:px-6 sm:py-10 lg:gap-12">
|
|
<aside className="hidden w-[240px] shrink-0 lg:block">
|
|
<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 min-w-0 max-w-2xl flex-1">{children}</article>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|