buildmymcpserver/apps/web/app/docs/layout.tsx
Marco Sadjadi b843394d0f
Some checks failed
Deploy to Production / deploy (push) Failing after 46s
feat(web): full SEO stack — metadata, JSON-LD, sitemap, robots, OG image
Ported and adapted from the BuildMyDiscord SEO setup:

- lib/seo.ts — single source for site constants, the FAQ data (shared by
  the rendered FAQ and the FAQPage schema so they never drift) and JSON-LD
  builders.
- Rich root metadata: title template, keywords, Open Graph, Twitter card,
  robots directives, canonical.
- JSON-LD: Organization + WebSite + SoftwareApplication sitewide, FAQPage
  on the landing page. No AggregateRating — there are no real reviews yet.
- app/robots.ts — allow all, explicit allow-list for AI answer-engine
  crawlers (GPTBot, ClaudeBot, PerplexityBot, …), disallow private routes.
- app/sitemap.ts — every public marketing + docs route.
- app/opengraph-image.tsx — monochrome on-brand 1200x630 share card.
- app/manifest.ts + public/llms.txt.
- Per-page metadata for pricing, changelog, security, privacy, terms,
  docs, templates and status.
- opengraph-image + apple-icon pinned to the edge runtime — next/og
  crashes during a Node-runtime prerender.

Verified: next build passes; /robots.txt, /sitemap.xml,
/manifest.webmanifest and /opengraph-image all generate.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 19:16:40 +02:00

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-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>
);
}