1349dc1dc0
feat(web): SEO — server-rendered template pages + /guides articles - templates/[slug] converted from client to server component: per-template generateMetadata (title/description/canonical/OG) + SoftwareApplication JSON-LD; code-audit toggle split into a client island; missing/non-public templates now return a real 404. - sitemap.ts pulls public template slugs live from the API (best-effort) + the new /guides routes. - new /guides section: 3 server-rendered SEO articles (host MCP with OAuth, hosted-platforms comparison, MintMCP alternative) with TechArticle JSON-LD; Guides link added to the marketing nav. - lib/seo.ts: articleJsonLd + templateJsonLd builders. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> @
74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import Link from 'next/link';
|
|
import type { ReactNode } from 'react';
|
|
|
|
// Shared layout + typographic primitives for /guides/* SEO articles. Server
|
|
// component (no client JS) so each article page can export its own metadata.
|
|
|
|
export function ArticleShell({
|
|
title,
|
|
subtitle,
|
|
updated,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
subtitle?: string;
|
|
updated?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<article className="mx-auto max-w-3xl px-6 py-14">
|
|
<Link
|
|
href="/guides"
|
|
className="text-[12px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
|
|
>
|
|
← Guides
|
|
</Link>
|
|
<h1 className="mt-4 text-[30px] font-semibold leading-tight tracking-tight text-[--color-fg]">
|
|
{title}
|
|
</h1>
|
|
{subtitle && <p className="mt-3 text-[15px] leading-relaxed text-[--color-fg-muted]">{subtitle}</p>}
|
|
{updated && <p className="mt-2 text-[12px] text-[--color-fg-subtle]">Updated {updated}</p>}
|
|
<div className="mt-8">{children}</div>
|
|
|
|
<div className="mt-14 rounded-lg border border-[--color-border] bg-[--color-bg-subtle] p-5">
|
|
<p className="text-[14px] font-medium text-[--color-fg]">
|
|
Skip the boilerplate — describe your tool, get a hosted MCP server.
|
|
</p>
|
|
<p className="mt-1 text-[13px] text-[--color-fg-muted]">
|
|
BuildMyMCPServer generates the TypeScript server, wraps it in OAuth 2.1 and deploys it to a
|
|
public Streamable HTTP URL for Claude, Cursor and ChatGPT. Free tier, source export, no
|
|
lock-in.
|
|
</p>
|
|
<Link
|
|
href="/login"
|
|
className="mt-3 inline-flex h-9 items-center rounded-md bg-[--color-accent] px-4 text-[13px] font-medium text-white transition-colors hover:bg-[#5557e8]"
|
|
>
|
|
Start building →
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|
|
|
|
export function H2({ children }: { children: ReactNode }) {
|
|
return (
|
|
<h2 className="mt-10 text-[19px] font-semibold tracking-tight text-[--color-fg]">{children}</h2>
|
|
);
|
|
}
|
|
|
|
export function P({ children }: { children: ReactNode }) {
|
|
return <p className="mt-3 text-[14.5px] leading-relaxed text-[--color-fg-muted]">{children}</p>;
|
|
}
|
|
|
|
export function UL({ children }: { children: ReactNode }) {
|
|
return (
|
|
<ul className="mt-3 list-disc space-y-1.5 pl-5 text-[14.5px] leading-relaxed text-[--color-fg-muted]">
|
|
{children}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export function Strong({ children }: { children: ReactNode }) {
|
|
return <strong className="font-semibold text-[--color-fg]">{children}</strong>;
|
|
}
|