From 0749ad667e6cb8b7997103cb699a13f02e5bad0c Mon Sep 17 00:00:00 2001
From: mikewong23571 <mikewong23571@gmail.com>
Date: Thu, 19 Mar 2026 14:25:17 +0800
Subject: [PATCH] docs: migrate page metadata from MDX to layout.tsx (#904)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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           | 7 +++++++
 docs/src/app/cdp-mode/page.mdx             | 4 ----
 docs/src/app/changelog/layout.tsx          | 7 +++++++
 docs/src/app/changelog/page.mdx            | 4 ----
 docs/src/app/commands/layout.tsx           | 7 +++++++
 docs/src/app/commands/page.mdx             | 4 ----
 docs/src/app/configuration/layout.tsx      | 7 +++++++
 docs/src/app/configuration/page.mdx        | 4 ----
 docs/src/app/diffing/layout.tsx            | 7 +++++++
 docs/src/app/diffing/page.mdx              | 4 ----
 docs/src/app/engines/chrome/layout.tsx     | 7 +++++++
 docs/src/app/engines/chrome/page.mdx       | 4 ----
 docs/src/app/engines/lightpanda/layout.tsx | 7 +++++++
 docs/src/app/engines/lightpanda/page.mdx   | 4 ----
 docs/src/app/installation/layout.tsx       | 7 +++++++
 docs/src/app/installation/page.mdx         | 4 ----
 docs/src/app/ios/layout.tsx                | 7 +++++++
 docs/src/app/ios/page.mdx                  | 4 ----
 docs/src/app/native-mode/layout.tsx        | 7 +++++++
 docs/src/app/native-mode/page.mdx          | 4 ----
 docs/src/app/next/layout.tsx               | 7 +++++++
 docs/src/app/next/page.mdx                 | 4 ----
 docs/src/app/page.mdx                      | 4 ----
 docs/src/app/profiler/layout.tsx           | 7 +++++++
 docs/src/app/profiler/page.mdx             | 4 ----
 docs/src/app/quick-start/layout.tsx        | 7 +++++++
 docs/src/app/quick-start/page.mdx          | 4 ----
 docs/src/app/security/layout.tsx           | 7 +++++++
 docs/src/app/security/page.mdx             | 3 ---
 docs/src/app/selectors/layout.tsx          | 7 +++++++
 docs/src/app/selectors/page.mdx            | 4 ----
 docs/src/app/sessions/layout.tsx           | 7 +++++++
 docs/src/app/sessions/page.mdx             | 4 ----
 docs/src/app/skills/layout.tsx             | 7 +++++++
 docs/src/app/skills/page.mdx               | 4 ----
 docs/src/app/snapshots/layout.tsx          | 7 +++++++
 docs/src/app/snapshots/page.mdx            | 4 ----
 docs/src/app/streaming/layout.tsx          | 7 +++++++
 docs/src/app/streaming/page.mdx            | 4 ----
 39 files changed, 133 insertions(+), 79 deletions(-)
 create mode 100644 docs/src/app/cdp-mode/layout.tsx
 create mode 100644 docs/src/app/changelog/layout.tsx
 create mode 100644 docs/src/app/commands/layout.tsx
 create mode 100644 docs/src/app/configuration/layout.tsx
 create mode 100644 docs/src/app/diffing/layout.tsx
 create mode 100644 docs/src/app/engines/chrome/layout.tsx
 create mode 100644 docs/src/app/engines/lightpanda/layout.tsx
 create mode 100644 docs/src/app/installation/layout.tsx
 create mode 100644 docs/src/app/ios/layout.tsx
 create mode 100644 docs/src/app/native-mode/layout.tsx
 create mode 100644 docs/src/app/next/layout.tsx
 create mode 100644 docs/src/app/profiler/layout.tsx
 create mode 100644 docs/src/app/quick-start/layout.tsx
 create mode 100644 docs/src/app/security/layout.tsx
 create mode 100644 docs/src/app/selectors/layout.tsx
 create mode 100644 docs/src/app/sessions/layout.tsx
 create mode 100644 docs/src/app/skills/layout.tsx
 create mode 100644 docs/src/app/snapshots/layout.tsx
 create mode 100644 docs/src/app/streaming/layout.tsx

diff --git a/docs/src/app/cdp-mode/layout.tsx b/docs/src/app/cdp-mode/layout.tsx
new file mode 100644
index 0000000..f6257fe
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/cdp-mode/page.mdx b/docs/src/app/cdp-mode/page.mdx
index 6a1b314..6b23fc7 100644
--- a/docs/src/app/cdp-mode/page.mdx
+++ b/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:
diff --git a/docs/src/app/changelog/layout.tsx b/docs/src/app/changelog/layout.tsx
new file mode 100644
index 0000000..0f6f08a
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/changelog/page.mdx b/docs/src/app/changelog/page.mdx
index 195c83c..dbd2a31 100644
--- a/docs/src/app/changelog/page.mdx
+++ b/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
diff --git a/docs/src/app/commands/layout.tsx b/docs/src/app/commands/layout.tsx
new file mode 100644
index 0000000..355a0f7
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/commands/page.mdx b/docs/src/app/commands/page.mdx
index a5c350f..a0f3893 100644
--- a/docs/src/app/commands/page.mdx
+++ b/docs/src/app/commands/page.mdx
@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("commands")
-
 # Commands
 
 ## Core
diff --git a/docs/src/app/configuration/layout.tsx b/docs/src/app/configuration/layout.tsx
new file mode 100644
index 0000000..d38b79b
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/configuration/page.mdx b/docs/src/app/configuration/page.mdx
index 1edc7b8..e023ea7 100644
--- a/docs/src/app/configuration/page.mdx
+++ b/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.
diff --git a/docs/src/app/diffing/layout.tsx b/docs/src/app/diffing/layout.tsx
new file mode 100644
index 0000000..3c0bb8e
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/diffing/page.mdx b/docs/src/app/diffing/page.mdx
index 871b512..02584cd 100644
--- a/docs/src/app/diffing/page.mdx
+++ b/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
diff --git a/docs/src/app/engines/chrome/layout.tsx b/docs/src/app/engines/chrome/layout.tsx
new file mode 100644
index 0000000..bac7306
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/engines/chrome/page.mdx b/docs/src/app/engines/chrome/page.mdx
index 517f126..86b1ec3 100644
--- a/docs/src/app/engines/chrome/page.mdx
+++ b/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).
diff --git a/docs/src/app/engines/lightpanda/layout.tsx b/docs/src/app/engines/lightpanda/layout.tsx
new file mode 100644
index 0000000..000b313
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/engines/lightpanda/page.mdx b/docs/src/app/engines/lightpanda/page.mdx
index 8707074..ae3117a 100644
--- a/docs/src/app/engines/lightpanda/page.mdx
+++ b/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.
diff --git a/docs/src/app/installation/layout.tsx b/docs/src/app/installation/layout.tsx
new file mode 100644
index 0000000..b684f21
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/installation/page.mdx b/docs/src/app/installation/page.mdx
index 92164b1..bfa9882 100644
--- a/docs/src/app/installation/page.mdx
+++ b/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)
diff --git a/docs/src/app/ios/layout.tsx b/docs/src/app/ios/layout.tsx
new file mode 100644
index 0000000..b66e28d
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/ios/page.mdx b/docs/src/app/ios/page.mdx
index 1a40cab..97f8527 100644
--- a/docs/src/app/ios/page.mdx
+++ b/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
diff --git a/docs/src/app/native-mode/layout.tsx b/docs/src/app/native-mode/layout.tsx
new file mode 100644
index 0000000..4972dc1
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/native-mode/page.mdx b/docs/src/app/native-mode/page.mdx
index a5fb58e..58c641a 100644
--- a/docs/src/app/native-mode/page.mdx
+++ b/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.
diff --git a/docs/src/app/next/layout.tsx b/docs/src/app/next/layout.tsx
new file mode 100644
index 0000000..b2c1334
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/next/page.mdx b/docs/src/app/next/page.mdx
index dd3d0d6..4af6e50 100644
--- a/docs/src/app/next/page.mdx
+++ b/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.
diff --git a/docs/src/app/page.mdx b/docs/src/app/page.mdx
index aa31c83..b976e90 100644
--- a/docs/src/app/page.mdx
+++ b/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.
diff --git a/docs/src/app/profiler/layout.tsx b/docs/src/app/profiler/layout.tsx
new file mode 100644
index 0000000..1ce0dee
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/profiler/page.mdx b/docs/src/app/profiler/page.mdx
index 95108f5..1d0a491 100644
--- a/docs/src/app/profiler/page.mdx
+++ b/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.
diff --git a/docs/src/app/quick-start/layout.tsx b/docs/src/app/quick-start/layout.tsx
new file mode 100644
index 0000000..9e16a7b
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/quick-start/page.mdx b/docs/src/app/quick-start/page.mdx
index 3346321..07b5383 100644
--- a/docs/src/app/quick-start/page.mdx
+++ b/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
diff --git a/docs/src/app/security/layout.tsx b/docs/src/app/security/layout.tsx
new file mode 100644
index 0000000..de45483
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/security/page.mdx b/docs/src/app/security/page.mdx
index 15b9eff..20a0178 100644
--- a/docs/src/app/security/page.mdx
+++ b/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.
diff --git a/docs/src/app/selectors/layout.tsx b/docs/src/app/selectors/layout.tsx
new file mode 100644
index 0000000..a2b99da
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/selectors/page.mdx b/docs/src/app/selectors/page.mdx
index 03d76a5..fe22bd1 100644
--- a/docs/src/app/selectors/page.mdx
+++ b/docs/src/app/selectors/page.mdx
@@ -1,7 +1,3 @@
-import { pageMetadata } from "@/lib/page-metadata"
-
-export const metadata = pageMetadata("selectors")
-
 # Selectors
 
 ## Refs (recommended)
diff --git a/docs/src/app/sessions/layout.tsx b/docs/src/app/sessions/layout.tsx
new file mode 100644
index 0000000..3914523
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/sessions/page.mdx b/docs/src/app/sessions/page.mdx
index 1fe44c7..0801fee 100644
--- a/docs/src/app/sessions/page.mdx
+++ b/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:
diff --git a/docs/src/app/skills/layout.tsx b/docs/src/app/skills/layout.tsx
new file mode 100644
index 0000000..c281814
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/skills/page.mdx b/docs/src/app/skills/page.mdx
index 81764d9..50e2107 100644
--- a/docs/src/app/skills/page.mdx
+++ b/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.
diff --git a/docs/src/app/snapshots/layout.tsx b/docs/src/app/snapshots/layout.tsx
new file mode 100644
index 0000000..15126fc
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/snapshots/page.mdx b/docs/src/app/snapshots/page.mdx
index 00d8d04..b9c0354 100644
--- a/docs/src/app/snapshots/page.mdx
+++ b/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.
diff --git a/docs/src/app/streaming/layout.tsx b/docs/src/app/streaming/layout.tsx
new file mode 100644
index 0000000..0df0ec2
--- /dev/null
+++ b/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;
+}
diff --git a/docs/src/app/streaming/page.mdx b/docs/src/app/streaming/page.mdx
index d0c32a6..63830aa 100644
--- a/docs/src/app/streaming/page.mdx
+++ b/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"