docs: migrate page metadata from MDX to layout.tsx (#904)

Move JS metadata exports out of page.mdx files into per-directory
layout.tsx files. MDX files now contain pure markdown content, making
them render cleanly on GitHub without visible JS import/export lines.

No content changes — only the metadata mechanism is relocated.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

docs/src/app/cdp-mode/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("cdp-mode");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/cdp-mode/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("cdp-mode")
-
 # CDP Mode
 
 Connect to an existing browser via Chrome DevTools Protocol:

docs/src/app/changelog/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("changelog");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/changelog/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("changelog")
-
 # Changelog
 
 ## v0.21.0

docs/src/app/commands/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("commands");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/commands/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("commands")
-
 # Commands
 
 ## Core

docs/src/app/configuration/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("configuration");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/configuration/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("configuration")
-
 # Configuration
 
 Create an `agent-browser.json` file to set persistent defaults instead of repeating flags on every command.

docs/src/app/diffing/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("diffing");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/diffing/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("diffing")
-
 import { DiffDemo } from "@/components/diff-demo"
 
 # Diffing

docs/src/app/engines/chrome/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("engines/chrome");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/engines/chrome/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("engines/chrome")
-
 # Chrome
 
 Chrome (and Chromium) is the default browser engine. agent-browser discovers, launches, and manages the Chrome process automatically via the Chrome DevTools Protocol (CDP).

docs/src/app/engines/lightpanda/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("engines/lightpanda");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/engines/lightpanda/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("engines/lightpanda")
-
 # Lightpanda
 
 [Lightpanda](https://lightpanda.io/) is a headless browser engine built from scratch in Zig for machines. It starts instantly, uses 10x less memory than Chrome, and executes 10x faster.

docs/src/app/installation/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("installation");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/installation/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("installation")
-
 # Installation
 
 ## Global installation (recommended)

docs/src/app/ios/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("ios");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/ios/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("ios")
-
 # iOS Simulator
 
 Control real Mobile Safari in the iOS Simulator for authentic mobile

docs/src/app/native-mode/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("native-mode");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/native-mode/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("native-mode")
-
 # Native Mode
 
 agent-browser is now 100% native Rust by default. The Node.js/Playwright daemon has been removed.

docs/src/app/next/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("next");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/next/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("next")
-
 # Next.js + Vercel
 
 Run agent-browser from a Next.js app on Vercel using Vercel Sandbox.

docs/src/app/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("")
-
 # agent-browser
 
 Browser automation CLI designed for AI agents. Compact text output minimizes context usage. 100% native Rust.

docs/src/app/profiler/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("profiler");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/profiler/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("profiler")
-
 # Profiler
 
 Capture Chrome DevTools performance profiles during browser automation.

docs/src/app/quick-start/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("quick-start");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/quick-start/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("quick-start")
-
 # Quick Start
 
 ## Core workflow

docs/src/app/security/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("security");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/security/page.mdx

@@ -1,6 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-export const metadata = pageMetadata("security")
-
 # Security
 
 agent-browser includes security features to protect against credential exposure, prompt injection via untrusted page content, and unauthorized browser actions.

docs/src/app/selectors/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("selectors");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/selectors/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("selectors")
-
 # Selectors
 
 ## Refs (recommended)

docs/src/app/sessions/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("sessions");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/sessions/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("sessions")
-
 # Sessions
 
 Run multiple isolated browser instances:

docs/src/app/skills/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("skills");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/skills/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("skills")
-
 # Skills
 
 agent-browser ships with skills that teach AI coding agents how to use it for specific workflows. Install a skill and your agent in Cursor, Claude Code, or Codex can automate browser tasks without manual guidance.

docs/src/app/snapshots/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("snapshots");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/snapshots/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("snapshots")
-
 # Snapshots
 
 The `snapshot` command returns a compact accessibility tree with refs for element interaction.

docs/src/app/streaming/layout.tsx

@@ -0,0 +1,7 @@
+import { pageMetadata } from "@/lib/page-metadata";
+
+export const metadata = pageMetadata("streaming");
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

docs/src/app/streaming/page.mdx

@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("streaming")
-
 # Streaming
 
 Stream the browser viewport via WebSocket for live preview or "pair browsing"