+ {part}
+
+ ) : (
+ part
+ ),
+ )}
+
+ );
+}
+
+/**
+ * Native-dialog modal for reading a full prompt. Overlays the page, so
+ * opening it never shifts the layout. Content stays mounted (display: none
+ * while closed), so prompts remain in the served HTML for crawlers/agents.
+ */
+function PromptModal({
+ open,
+ onClose,
+ title,
+ checked,
+ onCopy,
+ children,
+}: {
+ open: boolean;
+ onClose: () => void;
+ title: string;
+ checked: boolean;
+ onCopy: MouseEventHandler
+ setOpen(false)}
+ title={title}
+ checked={checked}
+ onCopy={onCopy}
+ >
+
+
+ );
+}
+
+/**
+ * A row that opens arbitrary content in a modal instead of expanding inline,
+ * so revealing it never shifts the layout below. The content stays mounted
+ * inside the (closed) dialog, so it remains in the served HTML for crawlers
+ * and in the generated .md / llms output.
+ */
+export function ModalRow({
+ title,
+ description,
+ modalTitle,
+ icon,
+ children,
+}: {
+ title: string;
+ description?: string;
+ modalTitle?: string;
+ icon?: ReactNode;
+ children: ReactNode;
+}) {
+ const [open, setOpen] = useState(false);
+ const dialogRef = useRef
+
+ {title}
+ {guideHref && (
+
+ {guideTitle}
+
+
+ )}
+
+
+
+ {children}
+
+
+ );
+}
+
+/**
+ * Compact launcher row for the condensed journey: a button opens a modal with
+ * AI Prompt and CLI tabs, and a copy action grabs the prompt without opening
+ * anything. The prompt is a fenced code block child that stays mounted inside
+ * the (closed) dialog, so it remains in the served HTML for crawlers and in
+ * the generated .md / llms output; the CLI commands are passed as a
+ * newline-separated string and mirrored into .md by the markdown pipeline.
+ */
+export function GetStartedTabs({ cli, children }: { cli: string; children: ReactNode }) {
+ const [tab, setTab] = useState<"prompt" | "cli">("prompt");
+ const [open, setOpen] = useState(false);
+ const promptRef = useRef
+
+
+ {title}
+ {description && (
+ {description}
+ )}
+
+
+
+
+
+
+ );
+}
+
+/**
+ * Two-column section: heading and blurb on the left, content on the right.
+ * Stacks on small screens.
+ */
+export function SectionRow({
+ title,
+ description,
+ children,
+}: {
+ title: string;
+ description?: string;
+ children: ReactNode;
+}) {
+ const id = title
+ .toLowerCase()
+ .replace(/[^a-z0-9\s-]/g, "")
+ .trim()
+ .replace(/\s+/g, "-");
+ return (
+
+
+
+ AI prompt and CLI steps
+
+ One journey scaffolds, seeds, migrates, and deploys the whole stack.
+
+
+
+
+
+
+
+
+ + + {title} + +
+ {description && ( +
+
+ {children}
+
+
+ {children}
+
+ );
+}
+
+function IconTile({
+ src,
+ darkSrc,
+ invertDark,
+ mono,
+ icon,
+ className,
+}: {
+ src?: string;
+ darkSrc?: string;
+ invertDark?: boolean;
+ mono?: string;
+ icon?: ReactNode;
+ className?: string;
+}) {
+ return (
+
+ );
+}
+
+/**
+ * Compact horizontal link: a small icon tile plus a label, in the style of
+ * framework pickers. Icon can be an image (src), a mono letter fallback, or a
+ * passed element (e.g. a lucide icon).
+ */
+export function IconLink({
+ href,
+ title,
+ src,
+ darkSrc,
+ invertDark,
+ mono,
+ icon,
+ description,
+ badge,
+}: {
+ href: string;
+ title: string;
+ src?: string;
+ darkSrc?: string;
+ invertDark?: boolean;
+ mono?: string;
+ icon?: ReactNode;
+ description?: string;
+ badge?: string;
+}) {
+ return (
+
+
+ {children}
+
+ );
+}
+
+/** Left side of the hero: badge, pitch, and CTA buttons. */
+export function HeroPitch({
+ badge,
+ children,
+ primaryHref,
+ primaryLabel,
+ secondaryHref,
+ secondaryLabel,
+}: {
+ badge?: string;
+ children: ReactNode;
+ primaryHref: string;
+ primaryLabel: string;
+ secondaryHref?: string;
+ secondaryLabel?: string;
+}) {
+ return (
+
+ {badge && (
+
+
+ {badge}
+
+ )}
+
+ );
+}
+
+/**
+ * One product layer inside the StackDiagram. Purely illustrative — the hero
+ * copy carries the links — so it renders as a static tile with no click or
+ * hover affordance. The description is the element's children so it survives
+ * into the .md / llms output.
+ */
+export function StackLayer({
+ title,
+ src,
+ invertDark,
+ icon,
+ children,
+}: {
+ title: string;
+ src?: string;
+ invertDark?: boolean;
+ icon?: ReactNode;
+ children?: ReactNode;
+}) {
+ return (
+
+ {children}
+
+
+
+ {primaryLabel}
+
+
+ {secondaryHref && secondaryLabel && (
+
+ {secondaryLabel}
+
+ )}
+
+
+
+ );
+}
+
+/**
+ * Visual of the Prisma stack: linked product layers joined by connectors.
+ * Children are StackLayer elements.
+ */
+export function StackDiagram({ caption, children }: { caption?: string; children: ReactNode }) {
+ const layers = Array.isArray(children) ? children : [children];
+ return (
+
+
+ );
+}
diff --git a/apps/docs/src/components/page-actions.tsx b/apps/docs/src/components/page-actions.tsx
index fdded71bde..ff4c99da0d 100644
--- a/apps/docs/src/components/page-actions.tsx
+++ b/apps/docs/src/components/page-actions.tsx
@@ -10,39 +10,12 @@ import { cva } from "class-variance-authority";
const cache = new Map
+ {layers
+ .filter((child) => child != null && child !== "\n")
+ .map((child, i) => (
+
+ {caption && (
+
+ {i > 0 && (
+
+ )}
+ {child}
+
+ ))}
+ {caption}
+ )}
+ ` into indented fences that markdown consumers
* (and the afdocs parity checker) no longer treat as code blocks. Dedenting the
* body back to column 0 and collapsing the summary to a single bold line keeps
- * the content faithful to the rendered page. Must run BEFORE fenced code blocks
- * are protected, so the dedent applies to the fences themselves.
+ * the content faithful to the rendered page. Fences are already protected as
+ * indented placeholder tokens here; the prefix-aware restore in
+ * `protectFencedCodeBlocks` replays this dedent on the fence lines.
*/
function formatDetails(content: string) {
const summaryMatch = content.match(/]*>([\s\S]*?)<\/summary>/);
@@ -326,6 +327,44 @@ function formatButton(_attrs: string, content: string) {
return stripJsxTags(trimComponentContent(content));
}
+function formatStackLayer(attrs: string, content: string) {
+ const title = getAttribute(attrs, "title") ?? "Step";
+ const href = getAttribute(attrs, "href");
+ const text = stripJsxTags(trimComponentContent(content)).replace(/\n+/g, " ");
+ const label = href ? `[${title}](${href})` : title;
+ return `- **${label}**${text ? `: ${text}` : ""}`;
+}
+
+function formatHeroPitch(attrs: string, content: string) {
+ const text = stripJsxTags(trimComponentContent(content));
+ const links: string[] = [];
+ const primaryHref = getAttribute(attrs, "primaryHref");
+ const primaryLabel = getAttribute(attrs, "primaryLabel");
+ if (primaryHref && primaryLabel) links.push(`- [${primaryLabel}](${primaryHref})`);
+ const secondaryHref = getAttribute(attrs, "secondaryHref");
+ const secondaryLabel = getAttribute(attrs, "secondaryLabel");
+ if (secondaryHref && secondaryLabel) links.push(`- [${secondaryLabel}](${secondaryHref})`);
+ return [text, links.join("\n")].filter(Boolean).join("\n\n");
+}
+
+function formatGetStartedTabs(attrs: string, content: string) {
+ // cli may be a quoted string or a multiline template literal.
+ const cli = getAttribute(attrs, "cli") ?? attrs.match(/cli=\{\s*`([\s\S]*?)`\s*\}/)?.[1];
+ const text = trimComponentContent(content);
+ const cliBlock = cli ? `\`\`\`bash\n${cli}\n\`\`\`` : "";
+ return [cliBlock, text].filter(Boolean).join("\n\n");
+}
+
+function formatIconLink(attrs: string, _content: string) {
+ const title = getAttribute(attrs, "title") ?? "Link";
+ const href = getAttribute(attrs, "href");
+ const description = getAttribute(attrs, "description");
+ const badge = getAttribute(attrs, "badge");
+ const label = href ? `[${title}](${href})` : title;
+ const suffix = [description, badge].filter(Boolean).join(", ");
+ return `- ${label}${suffix ? `: ${suffix}` : ""}`;
+}
+
function findOpeningTagEnd(value: string, startIndex: number) {
let quote: string | undefined;
let braceDepth = 0;
@@ -456,25 +495,68 @@ function createProtector(input: string, label: string) {
restore(value: string, blocks: readonly string[]) {
return value.replace(pattern, (match, index: string) => blocks[Number(index)] ?? match);
},
+ restoreLines(value: string, replace: (index: number, linePrefix: string) => string) {
+ const linePattern = new RegExp(`^(.*?)${boundary}${label}_(\\d+)${boundary}`, "gm");
+ return value.replace(linePattern, (_match, prefix: string, index: string) =>
+ replace(Number(index), prefix),
+ );
+ },
};
}
+/**
+ * Replaces every fenced code block with a single-line placeholder token so the
+ * component pipeline can never rewrite code samples (e.g. a fenced example that
+ * mentions `` or ``). The token keeps the fence's leading
+ * indentation, so line-level transforms — the dedent in `trimComponentContent`,
+ * the `> ` prefix in `formatCallout` — act on the token line like on any other
+ * line. `restore` reads what happened to the token line's prefix and applies
+ * the same shift to every line of the fence, which preserves the dedent and
+ * blockquote behavior the pipeline previously applied to raw fences.
+ */
export function protectFencedCodeBlocks(markdown: string) {
- const blocks: string[] = [];
+ const blocks: { text: string; indent: string }[] = [];
const protector = createProtector(markdown, "LLM_FENCED_CODE_BLOCK");
const protectedMarkdown = markdown.replace(
/^([ \t]*)([`~]{3,})[^\n]*\n[\s\S]*?^\1\2\s*$/gm,
- (match) => {
+ (match, indent: string) => {
const token = protector.token(blocks.length);
- blocks.push(match);
- return token;
+ blocks.push({ text: match, indent });
+ return indent + token;
},
);
return {
markdown: protectedMarkdown,
restore(value: string) {
- return protector.restore(value, blocks);
+ const restored = protector.restoreLines(value, (index, linePrefix) => {
+ const block = blocks[index];
+ if (!block) return linePrefix;
+ // Only whitespace shifts and blockquote markers are line transforms we
+ // can mirror; any other prefix (a fence collapsed into prose) is left
+ // in place with the block substituted verbatim.
+ if (!/^[>\s]*$/.test(linePrefix)) return linePrefix + block.text.slice(block.indent.length);
+ const removable = Math.min(
+ linePrefix.match(/[ \t]*$/)?.[0].length ?? 0,
+ block.indent.length,
+ );
+ const removed = block.indent.length - removable;
+ const prefix = linePrefix.slice(0, linePrefix.length - removable);
+ return block.text
+ .split("\n")
+ .map((line) => {
+ const leading = line.match(/^[ \t]*/)?.[0].length ?? 0;
+ return prefix + line.slice(Math.min(removed, leading));
+ })
+ .join("\n");
+ });
+ // A token that ended up mid-line (its line start consumed by an earlier
+ // token on the same line) misses the line-anchored pass; substitute it
+ // verbatim so no placeholder ever leaks into the output.
+ return protector.restore(
+ restored,
+ blocks.map((block) => block.text),
+ );
},
};
}
@@ -507,7 +589,12 @@ export function normalizeProcessedMarkdown(
markdown: string,
options?: { headingDepths?: ReadonlyMap },
) {
- const componentMarkdown = markdown
+ // Protect fenced code before any component transform so code samples that
+ // mention component tags (or MDX comments) are never rewritten as live
+ // content. The prefix-aware restore keeps the dedent/blockquote behavior for
+ // fences nested inside
, callouts, tabs, and steps.
+ const protectedCode = protectFencedCodeBlocks(markdown);
+ const componentMarkdown = protectedCode.markdown
.replace(/\{\/\*[\s\S]*?\*\/\}/g, "")
.replace(
/]*>([\s\S]*?)<\/CalloutContainer>/g,
@@ -539,16 +626,75 @@ export function normalizeProcessedMarkdown(
trimComponentContent(content),
)
.replace(/]*\/>/g, "")
+ .replace(
+ // Attrs matcher tolerates JSX-element props like icon={"'{]|"[^"]*"|'[^']*'|\{[^{}]*\})*)>([\s\S]*?)<\/AgentPrompt>/g,
+ (_match, attrs: string, content: string) => {
+ const title = getAttribute(attrs, "title");
+ const guideHref = getAttribute(attrs, "guideHref");
+ // Untitled prompts sit under an existing "Use with your agent"
+ // heading in the page, so emit only the content.
+ if (!title && !guideHref) return trimComponentContent(content);
+ const base = formatSectionComponent(attrs, content, "Use with your agent");
+ if (!guideHref) return base;
+ const guideTitle = getAttribute(attrs, "guideTitle") ?? "Follow the guide";
+ const [heading, ...rest] = base.split("\n\n");
+ return [heading, `Follow the guide: [${guideTitle}](${guideHref})`, ...rest].join("\n\n");
+ },
+ )
+ .replace(
+ /]*)>([\s\S]*?)<\/SectionRow>/g,
+ (_match, attrs: string, content: string) => {
+ const title = getAttribute(attrs, "title") ?? "Section";
+ const description = getAttribute(attrs, "description");
+ const text = trimComponentContent(content);
+ return ["## " + title, description, text].filter(Boolean).join("\n\n");
+ },
+ )
+ .replace(/<\/?IconGrid[^>]*>/g, "")
+ .replace(/<\/?StackDiagram[^>]*>/g, "")
+ .replace(
+ /]*)>([\s\S]*?)<\/HeroPitch>/g,
+ (_match, attrs: string, content: string) => formatHeroPitch(attrs, content),
+ )
+ .replace(/<\/?HeroGrid[^>]*>/g, "")
+ .replace(
+ // Same brace-tolerant attrs matcher as AgentPrompt: ModalRow takes
+ // JSX-element props like icon={
does.
+ /"'{]|"[^"]*"|'[^']*'|\{[^{}]*\})*)>([\s\S]*?)<\/ModalRow>/g,
+ (_match, attrs: string, content: string) => {
+ const title = getAttribute(attrs, "title");
+ const body = trimComponentContent(content);
+ if (!body) return title ? `**${title}**` : "";
+ return title ? `**${title}**\n\n${body}` : body;
+ },
+ )
.replace(/]*>([\s\S]*?)<\/details>/g, (_match, content: string) =>
formatDetails(content),
);
- const protectedCode = protectFencedCodeBlocks(componentMarkdown);
const withoutJsxComponents = replaceComponentBlocks(
- replaceComponentBlocks(protectedCode.markdown, "Card", formatCard)
- .replace(/<\/?Cards[^>]*>/g, "")
- .replace(/})
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ );
+ }
+ return (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ );
+}
+
export function getMDXComponents(components?: MDXComponents): MDXComponents {
const pageContext = (components as any)?._pageContext;
@@ -63,7 +119,18 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
Accordion,
Accordions,
APIPage,
+ AgentPrompt,
ConceptAnimation,
+ GetStartedTabs,
+ HeroGrid,
+ HeroPitch,
+ IconGrid,
+ IconLink,
+ ModalRow,
+ SectionRow,
+ StackDiagram,
+ StackLayer,
+ TechIcon,
Youtube,
img: (props: any) => (
= {
ppg: "ppg",
error: "error",
@@ -98,7 +165,17 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
};
return (
-
+
{children}
);
{children}
,
+ CalloutTitle: ({ children }: any) => {children}
,
CalloutDescription: ({ children }: any) => <>{children},
- CalloutContainer: ({ type, children, icon, ...props }: any) => {
+ CalloutContainer: ({ type, children, icon, className, ...props }: any) => {
const variantMap: Record