diff --git a/CLAUDE.md b/CLAUDE.md
index cf27304..6ef0354 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -77,7 +77,7 @@ export const metadata = {
 }
 ```
 
-3. Add navigation entry in `/src/components/Navigation.jsx`
+3. Add navigation entry in `/src/lib/navigation.ts`
 
 ### MDX Page Structure
 
@@ -124,7 +124,7 @@ Store in `/public/images/` and reference as:
 
 ### Navigation
 
-Navigation structure is defined in `/src/components/Navigation.jsx`. Each section contains an array of pages with `title` and `href`.
+Navigation structure is defined in `/src/lib/navigation.ts` and rendered by `/src/components/Navigation.tsx`. Each section contains an array of pages with `title` and `href`.
 
 ### Search Index
 
@@ -160,7 +160,7 @@ The documentation site uses a sophisticated MDX processing pipeline:
 
 The navigation is centrally managed through several interconnected components:
 
-1. **Navigation Data**: Defined in `/src/components/Navigation.jsx` as a static structure
+1. **Navigation Data**: Defined in `/src/lib/navigation.ts` as a static structure, shared by the sidebar, search, footer and the Markdown/llms.txt routes
 2. **Dynamic Sections**: The `layout.jsx` file extracts sections from all MDX files at build time
 3. **Section Provider**: Uses Zustand to manage active section state for smooth scrolling
 4. **Mobile/Desktop Split**: Separate navigation components for responsive design
@@ -182,7 +182,7 @@ Documentation follows a hierarchical structure:
 2. Use two-column layout with `<Row>` and `<Col>`
 3. Document properties with `<Properties>` component
 4. Include practical code examples
-5. Add to navigation in `/src/components/Navigation.jsx`
+5. Add to navigation in `/src/lib/navigation.ts`
 
 ### Updating Existing Documentation
 
@@ -206,5 +206,5 @@ Documentation follows a hierarchical structure:
 - Keep code examples practical and directly runnable in Inkdrop
 - The site is deployed at https://developers.inkdrop.app/
 - All MDX files are automatically indexed for search during the build process
-- Navigation is centrally managed in `/src/components/Navigation.jsx`
+- Navigation is centrally managed in `/src/lib/navigation.ts`
 
diff --git a/next.config.mjs b/next.config.mjs
index 7072ebb..4a29ba7 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -23,6 +23,13 @@ const nextConfig = {
   outputFileTracingRoot: __dirname,
   outputFileTracingIncludes: {
     '/**/*': ['./src/app/**/*.mdx']
+  },
+  // Serve a plain Markdown version of every page at `<path>.md` for agents
+  async rewrites() {
+    return [
+      { source: '/index.md', destination: '/raw-md' },
+      { source: '/:path+.md', destination: '/raw-md/:path+' }
+    ]
   }
 }
 
diff --git a/src/app/api/markdown/route.ts b/src/app/api/markdown/route.ts
deleted file mode 100644
index 016f5f0..0000000
--- a/src/app/api/markdown/route.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { readFile } from 'node:fs/promises'
-import path from 'node:path'
-
-import { mdxToMarkdown } from '@/lib/mdxToMarkdown'
-
-const APP_DIR = path.join(process.cwd(), 'src', 'app')
-
-/** Normalizes the `path` query param to a clean absolute page path like `/states/db`. */
-function normalizePagePath(raw: string | null): string | null {
-  if (raw == null || raw === '' || raw === '/') return '/'
-  // Allow only safe characters and reject any traversal attempt.
-  if (!/^\/[\w\-/]*$/.test(raw) || raw.includes('..')) return null
-  return raw.replace(/\/+$/, '') || '/'
-}
-
-/** Resolves a page path to its `page.mdx` file, ensuring it stays within src/app. */
-function resolveMdxFile(pagePath: string): string | null {
-  const relative = pagePath === '/' ? 'page.mdx' : `${pagePath.slice(1)}/page.mdx`
-  const filePath = path.join(APP_DIR, relative)
-  if (filePath !== APP_DIR && !filePath.startsWith(APP_DIR + path.sep)) {
-    return null
-  }
-  return filePath
-}
-
-export async function GET(request: Request): Promise<Response> {
-  const url = new URL(request.url)
-  const pagePath = normalizePagePath(url.searchParams.get('path'))
-
-  if (!pagePath) {
-    return new Response('Invalid path', { status: 400 })
-  }
-
-  const filePath = resolveMdxFile(pagePath)
-  if (!filePath) {
-    return new Response('Invalid path', { status: 400 })
-  }
-
-  let source: string
-  try {
-    source = await readFile(filePath, 'utf8')
-  } catch {
-    return new Response('Not found', { status: 404 })
-  }
-
-  try {
-    const markdown = await mdxToMarkdown(source, { origin: url.origin, pagePath })
-    return new Response(markdown, {
-      status: 200,
-      headers: {
-        'Content-Type': 'text/markdown; charset=utf-8',
-        'Cache-Control': 'public, max-age=0, s-maxage=3600'
-      }
-    })
-  } catch (error) {
-    console.error('Failed to convert MDX to Markdown:', error)
-    return new Response('Failed to render Markdown', { status: 500 })
-  }
-}
diff --git a/src/app/llms-full.txt/route.ts b/src/app/llms-full.txt/route.ts
new file mode 100644
index 0000000..1d99458
--- /dev/null
+++ b/src/app/llms-full.txt/route.ts
@@ -0,0 +1,9 @@
+import { getLlmsFullTxt } from '@/lib/markdown'
+
+export const dynamic = 'force-static'
+
+export async function GET() {
+  return new Response(await getLlmsFullTxt(), {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' }
+  })
+}
diff --git a/src/app/llms.txt/route.ts b/src/app/llms.txt/route.ts
new file mode 100644
index 0000000..f65c8dc
--- /dev/null
+++ b/src/app/llms.txt/route.ts
@@ -0,0 +1,9 @@
+import { getLlmsTxt } from '@/lib/markdown'
+
+export const dynamic = 'force-static'
+
+export async function GET() {
+  return new Response(await getLlmsTxt(), {
+    headers: { 'Content-Type': 'text/plain; charset=utf-8' }
+  })
+}
diff --git a/src/app/raw-md/[[...slug]]/route.ts b/src/app/raw-md/[[...slug]]/route.ts
new file mode 100644
index 0000000..966742c
--- /dev/null
+++ b/src/app/raw-md/[[...slug]]/route.ts
@@ -0,0 +1,23 @@
+import { getMarkdownSlugs, getPageMarkdown } from '@/lib/markdown'
+
+// Serves each docs page as plain Markdown, e.g. `/states/db.md`.
+// Requests are rewritten here from `*.md` URLs in next.config.mjs.
+export const dynamic = 'force-static'
+export const dynamicParams = false
+
+export async function generateStaticParams() {
+  let slugs = await getMarkdownSlugs()
+  return slugs.map(slug => ({ slug }))
+}
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ slug?: Array<string> }> }
+) {
+  let { slug = [] } = await params
+  let markdown = await getPageMarkdown(slug)
+
+  return new Response(markdown, {
+    headers: { 'Content-Type': 'text/markdown; charset=utf-8' }
+  })
+}
diff --git a/src/components/CopyMarkdownButton.tsx b/src/components/CopyMarkdownButton.tsx
deleted file mode 100644
index 96240a4..0000000
--- a/src/components/CopyMarkdownButton.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { usePathname } from 'next/navigation'
-import clsx from 'clsx'
-
-function ClipboardIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
-      <path
-        strokeWidth="0"
-        d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
-      />
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinejoin="round"
-        d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
-      />
-    </svg>
-  )
-}
-
-type CopyState = 'idle' | 'copied' | 'error'
-
-export function CopyMarkdownButton() {
-  const pathname = usePathname()
-  const [state, setState] = useState<CopyState>('idle')
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (state === 'idle') return
-    const timeout = setTimeout(() => setState('idle'), 2000)
-    return () => clearTimeout(timeout)
-  }, [state])
-
-  async function handleCopy() {
-    if (loading) return
-    setLoading(true)
-    try {
-      const response = await fetch(
-        `/api/markdown?path=${encodeURIComponent(pathname)}`
-      )
-      if (!response.ok) throw new Error(`Request failed: ${response.status}`)
-      const markdown = await response.text()
-      await window.navigator.clipboard.writeText(markdown)
-      setState('copied')
-    } catch (error) {
-      console.error('Failed to copy Markdown:', error)
-      setState('error')
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const label =
-    state === 'copied' ? 'Copied!' : state === 'error' ? 'Failed' : 'Copy as Markdown'
-
-  return (
-    <button
-      type="button"
-      onClick={handleCopy}
-      disabled={loading}
-      aria-label="Copy page as Markdown"
-      className={clsx(
-        'mt-1 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium transition disabled:opacity-60',
-        state === 'copied'
-          ? 'text-pink-500 dark:text-pink-400'
-          : 'text-zinc-600 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'
-      )}
-    >
-      <ClipboardIcon className="h-4 w-4 fill-transparent stroke-current" />
-      <span className="hidden sm:inline">{label}</span>
-      <span className="sm:hidden">{state === 'copied' ? 'Copied!' : 'Copy'}</span>
-    </button>
-  )
-}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 6a8da52..ac8b3fb 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
 import { Button } from '@/components/Button'
-import { navigation } from '@/components/Navigation'
+import { navigation } from '@/lib/navigation'
 
 function PageLink({
   label,
diff --git a/src/components/Guides.tsx b/src/components/Guides.tsx
index 65e0aad..03b6b91 100644
--- a/src/components/Guides.tsx
+++ b/src/components/Guides.tsx
@@ -1,29 +1,6 @@
 import { Button } from '@/components/Button'
 import { Heading } from '@/components/Heading'
-
-const guides = [
-  {
-    href: '/guides/create-a-theme',
-    name: 'Create a theme',
-    description: 'A tutorial on how to create a theme.'
-  },
-  {
-    href: '/guides/plugin-word-count',
-    name: 'Create a plugin',
-    description: 'A tutorial on how to create a plugin.'
-  },
-  {
-    href: '/guides/access-the-local-database',
-    name: 'Access the local database',
-    description:
-      'Learn how to access the local database from plugins and external programs.'
-  },
-  {
-    href: '/guides/create-a-blog-using-astro',
-    name: 'Create a blog using Astro',
-    description: 'A tutorial on how to create a blog using Astro.'
-  }
-]
+import { guides } from '@/lib/guides'
 
 export function Guides() {
   return (
diff --git a/src/components/ListNavigationSection.tsx b/src/components/ListNavigationSection.tsx
index d9d93b4..19efcee 100644
--- a/src/components/ListNavigationSection.tsx
+++ b/src/components/ListNavigationSection.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-import { navigation } from '@/components/Navigation'
+import { navigation } from '@/lib/navigation'
 
 export function ListNavigationSection() {
   const currentPath = usePathname()
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 58e7a61..a534bc1 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -11,17 +11,9 @@ import { Button } from '@/components/Button'
 import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
 import { useSectionStore } from '@/components/SectionProvider'
 import { Tag } from '@/components/Tag'
+import { navigation, type NavGroup } from '@/lib/navigation'
 import { remToPx } from '@/lib/remToPx'
 
-interface NavGroup {
-  title: string
-  link?: string
-  links: Array<{
-    title: string
-    href: string
-  }>
-}
-
 function useInitialValue<T>(value: T, condition = true) {
   let initialValue = useRef(value).current
   return condition ? initialValue : value
@@ -227,149 +219,6 @@ function NavigationGroup({
   )
 }
 
-export const navigation: Array<NavGroup> = [
-  {
-    title: 'Guides',
-    links: [
-      { title: 'Introduction', href: '/' },
-      { title: 'The init file', href: '/guides/the-init-file' },
-      { title: 'Style tweaks', href: '/guides/style-tweaks' },
-      { title: 'Create a theme', href: '/guides/create-a-theme' },
-      { title: 'Plugin: Word count', href: '/guides/plugin-word-count' },
-      {
-        title: 'Getting & modifying the app state',
-        href: '/guides/flux-architecture'
-      },
-      {
-        title: 'Access the local database',
-        href: '/guides/access-the-local-database'
-      },
-      {
-        title: 'Integrate with external programs',
-        href: '/guides/integrate-with-external-programs'
-      },
-      { title: 'Customize the editor', href: '/guides/customize-the-editor' },
-      { title: 'Extend the UI', href: '/guides/extend-the-ui' },
-      {
-        title: 'Create a note template',
-        href: '/guides/create-a-note-template'
-      },
-      {
-        title: 'Add styles for text annotations',
-        href: '/guides/text-annotations'
-      },
-      {
-        title: 'Create a blog using Astro',
-        href: '/guides/create-a-blog-using-astro'
-      },
-      {
-        title: 'Use ES modules in your plugin',
-        href: '/guides/es-modules'
-      },
-      {
-        title: 'List of commands',
-        href: '/guides/list-of-commands'
-      }
-    ]
-  },
-  {
-    title: 'Resources',
-    links: [
-      { title: 'Notes', href: '/data-access/notes' },
-      { title: 'Notebooks', href: '/data-access/books' },
-      { title: 'Tags', href: '/data-access/tags' },
-      { title: 'Files', href: '/data-access/files' },
-      { title: 'Utilities', href: '/data-access/utils' },
-      { title: 'Events', href: '/data-access/events' },
-      { title: 'Local HTTP Server', href: '/data-access/local-http-server' }
-    ]
-  },
-  {
-    title: 'Core Modules',
-    links: [
-      { title: 'Config', href: '/modules/config' },
-      { title: 'Command Registry', href: '/modules/command-registry' },
-      { title: 'Context Menu Manager', href: '/modules/context-menu-manager' },
-      { title: 'Component Manager', href: '/modules/component-manager' },
-      { title: 'Environment', href: '/modules/environment' },
-      { title: 'Keymap Manager', href: '/modules/keymap-manager' },
-      { title: 'Layout Manager', href: '/modules/layout-manager' },
-      { title: 'Markdown Renderer', href: '/modules/markdown-renderer' },
-      { title: 'Markdown Editor', href: '/modules/markdown-editor' },
-      { title: 'Menu Manager', href: '/modules/menu-manager' },
-      { title: 'Notification', href: '/modules/notification' },
-      { title: 'Notification Manager', href: '/modules/notification-manager' },
-      { title: 'Package', href: '/modules/package' },
-      { title: 'Package Manager', href: '/modules/package-manager' },
-      { title: 'Style Manager', href: '/modules/style-manager' },
-      { title: 'Telescope Manager', href: '/modules/telescope-manager' },
-      { title: 'Theme Manager', href: '/modules/theme-manager' }
-    ]
-  },
-  {
-    title: 'App States',
-    link: '/states',
-    links: [
-      { title: 'Notebooks', href: '/states/books' },
-      { title: 'Database', href: '/states/db' },
-      { title: 'Editing note', href: '/states/editing-note' },
-      { title: 'Editor', href: '/states/editor' },
-      { title: 'Layouts', href: '/states/layouts' },
-      { title: 'Local config', href: '/states/local-config' },
-      { title: 'Main layout', href: '/states/main-layout' },
-      { title: 'Note list bar', href: '/states/note-list-bar' },
-      { title: 'Notes', href: '/states/notes' },
-      { title: 'Preview', href: '/states/preview' },
-      { title: 'Query context', href: '/states/query-context' },
-      { title: 'Tags', href: '/states/tags' },
-      { title: 'Stats', href: '/states/stats' }
-    ]
-  },
-  {
-    title: 'App Actions',
-    link: '/actions',
-    links: [
-      { title: 'Editing note', href: '/actions/editing-note' },
-      { title: 'Editor', href: '/actions/editor' }
-    ]
-  },
-  {
-    title: 'Components',
-    links: [
-      { title: 'Modal', href: '/components/modal' },
-      { title: 'Dialog', href: '/components/dialog' },
-      { title: 'Button', href: '/components/button' },
-      { title: 'CommandButton', href: '/components/command-button' },
-      { title: 'NotebookListBar', href: '/components/notebook-list-bar' },
-      { title: 'MessageDialog', href: '/components/message-dialog' }
-    ]
-  },
-  {
-    title: 'Event Subscription (event-kit)',
-    links: [
-      { title: 'Disposable', href: '/event-subscription/disposable' },
-      {
-        title: 'Composite Disposable',
-        href: '/event-subscription/composite-disposable'
-      },
-      { title: 'Emitter', href: '/event-subscription/emitter' }
-    ]
-  },
-  {
-    title: 'Appendix',
-    links: [
-      {
-        title: 'Migration Guide from v5 to v6',
-        href: '/appendix/plugin-migration-from-v5-to-v6'
-      },
-      {
-        title: 'Migration Guide from v3 to v4',
-        href: '/appendix/plugin-migration-from-v3-to-v4'
-      }
-    ]
-  }
-]
-
 export function Navigation(props: React.ComponentPropsWithoutRef<'nav'>) {
   return (
     <nav {...props}>
diff --git a/src/components/Resources.tsx b/src/components/Resources.tsx
index 468989d..264fc3a 100644
--- a/src/components/Resources.tsx
+++ b/src/components/Resources.tsx
@@ -10,101 +10,7 @@ import Link from 'next/link'
 
 import { GridPattern } from '@/components/GridPattern'
 import { Heading } from '@/components/Heading'
-import { DatabaseIcon } from '@/components/icons/DatabaseIcon'
-import { ImageFileIcon } from '@/components/icons/FileIcon'
-import { NoteIcon } from '@/components/icons/NoteIcon'
-import { NotebookIcon } from '@/components/icons/NotebookIcon'
-import { TagIcon } from '@/components/icons/TagIcon'
-import { UtilsIcon } from '@/components/icons/UtilsIcon'
-
-interface Resource {
-  href: string
-  name: string
-  description: string
-  icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>
-  pattern: Omit<
-    React.ComponentPropsWithoutRef<typeof GridPattern>,
-    'width' | 'height' | 'x'
-  >
-}
-
-const resources: Array<Resource> = [
-  {
-    href: '/data-access/notes',
-    name: 'Notes',
-    description:
-      'Learn about the note model and how to create, retrieve, update, delete, and list notes.',
-    icon: NoteIcon,
-    pattern: {
-      y: 16,
-      squares: [
-        [0, 1],
-        [1, 3]
-      ]
-    }
-  },
-  {
-    href: '/data-access/books',
-    name: 'Notebooks',
-    description:
-      'Learn about the notebook model and how to organize your notes with notebooks.',
-    icon: NotebookIcon,
-    pattern: {
-      y: -6,
-      squares: [
-        [-1, 2],
-        [1, 3]
-      ]
-    }
-  },
-  {
-    href: '/data-access/tags',
-    name: 'Tags',
-    description:
-      'Learn about the tag model and how to categorize your notes with tags.',
-    icon: TagIcon,
-    pattern: {
-      y: 32,
-      squares: [
-        [0, 2],
-        [1, 4]
-      ]
-    }
-  },
-  {
-    href: '/data-access/files',
-    name: 'Files',
-    description:
-      'Files in Inkdrop are primarily used as image attachments that can be inserted into notes.',
-    icon: ImageFileIcon,
-    pattern: {
-      y: 22,
-      squares: [[0, 1]]
-    }
-  },
-  {
-    href: '/data-access/utils',
-    name: 'Utilities',
-    description:
-      'Provides convenient methods for managing documents in the local database.',
-    icon: UtilsIcon,
-    pattern: {
-      y: 22,
-      squares: [[0, 1]]
-    }
-  },
-  {
-    href: '/data-access/local-http-server',
-    name: 'Local HTTP server',
-    description:
-      'The Inkdrop client app can open a simple HTTP server so that you can access the data from an external program easily.',
-    icon: DatabaseIcon,
-    pattern: {
-      y: 22,
-      squares: [[0, 1]]
-    }
-  }
-]
+import { resources, type Resource } from '@/lib/resources'
 
 function ResourceIcon({ icon: Icon }: { icon: Resource['icon'] }) {
   return (
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 27f28ac..9616718 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -21,7 +21,7 @@ import {
 } from 'react'
 import Highlighter from 'react-highlight-words'
 
-import { navigation } from '@/components/Navigation'
+import { navigation } from '@/lib/navigation'
 import { type Result } from '@/mdx/search.mjs'
 import { useMobileNavigationStore } from './MobileNavigation'
 
diff --git a/src/components/ViewMarkdownLink.tsx b/src/components/ViewMarkdownLink.tsx
new file mode 100644
index 0000000..5c202dc
--- /dev/null
+++ b/src/components/ViewMarkdownLink.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+import { RobotHeadIcon } from '@/components/icons/RobotHeadIcon'
+import { markdownPath } from '@/lib/markdownPath'
+
+export function ViewMarkdownLink() {
+  const href = markdownPath(usePathname())
+
+  // A plain `<a>`: the `.md` URL is a route handler, not a page `next/link`
+  // could navigate to client-side
+  return (
+    <>
+      <link rel="alternate" type="text/markdown" href={href} />
+      <a
+        href={href}
+        aria-label="View page as Markdown"
+        className="mt-1 inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-zinc-600 transition hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+      >
+        <RobotHeadIcon aria-hidden="true" className="h-4 w-4 flex-none" />
+        <span className="hidden sm:inline">View as Markdown</span>
+        <span className="sm:hidden">Markdown</span>
+      </a>
+    </>
+  )
+}
diff --git a/src/components/icons/RobotHeadIcon.tsx b/src/components/icons/RobotHeadIcon.tsx
new file mode 100644
index 0000000..d091048
--- /dev/null
+++ b/src/components/icons/RobotHeadIcon.tsx
@@ -0,0 +1,14 @@
+export function RobotHeadIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M5.25 9h13.5s2 0 2 2v10s0 2-2 2H5.25s-2 0-2-2V11s0-2 2-2M.75 14v4.5M23.25 14v4.5M6.5 16a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M14.5 16a1.5 1.5 0 1 0 3 0 1.5 1.5 0 1 0-3 0M12 9V6M9.5 3.5a2.5 2.5 0 1 0 5 0 2.5 2.5 0 1 0-5 0"
+      />
+    </svg>
+  )
+}
diff --git a/src/components/mdx.tsx b/src/components/mdx.tsx
index bb94def..eed9ff5 100644
--- a/src/components/mdx.tsx
+++ b/src/components/mdx.tsx
@@ -1,10 +1,10 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 
-import { CopyMarkdownButton } from '@/components/CopyMarkdownButton'
 import { Feedback } from '@/components/Feedback'
 import { Heading } from '@/components/Heading'
 import { Prose } from '@/components/Prose'
+import { ViewMarkdownLink } from '@/components/ViewMarkdownLink'
 
 function ExternalIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
   return (
@@ -74,9 +74,7 @@ export const h1 = function H1({
   return (
     <div className="flex items-start justify-between gap-4">
       <h1 {...props} className="flex-1" />
-      <div className="flex items-center gap-1">
-        <CopyMarkdownButton />
-      </div>
+      <ViewMarkdownLink />
     </div>
   )
 }
diff --git a/src/lib/guides.ts b/src/lib/guides.ts
new file mode 100644
index 0000000..7c9fb58
--- /dev/null
+++ b/src/lib/guides.ts
@@ -0,0 +1,23 @@
+export const guides = [
+  {
+    href: '/guides/create-a-theme',
+    name: 'Create a theme',
+    description: 'A tutorial on how to create a theme.'
+  },
+  {
+    href: '/guides/plugin-word-count',
+    name: 'Create a plugin',
+    description: 'A tutorial on how to create a plugin.'
+  },
+  {
+    href: '/guides/access-the-local-database',
+    name: 'Access the local database',
+    description:
+      'Learn how to access the local database from plugins and external programs.'
+  },
+  {
+    href: '/guides/create-a-blog-using-astro',
+    name: 'Create a blog using Astro',
+    description: 'A tutorial on how to create a blog using Astro.'
+  }
+]
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
new file mode 100644
index 0000000..3487d8a
--- /dev/null
+++ b/src/lib/markdown.ts
@@ -0,0 +1,119 @@
+import glob from 'fast-glob'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+
+import { markdownPath } from '@/lib/markdownPath'
+import { mdxMetadata, mdxToMarkdown } from '@/lib/mdxToMarkdown'
+import { navigation } from '@/lib/navigation'
+
+export const SITE_URL = 'https://developers.inkdrop.app'
+
+const APP_DIR = path.join(process.cwd(), 'src', 'app')
+
+function pagePath(slug: Array<string>) {
+  return `/${slug.join('/')}`
+}
+
+async function readPage(slug: Array<string>) {
+  let source = await readFile(path.join(APP_DIR, ...slug, 'page.mdx'), 'utf8')
+  return source.replace(/\r\n?/g, '\n')
+}
+
+export async function getMarkdownSlugs() {
+  let files = await glob('**/page.mdx', { cwd: APP_DIR })
+  return files.map(file => file.split('/').slice(0, -1))
+}
+
+export async function getPageMarkdown(slug: Array<string>) {
+  let markdown = await mdxToMarkdown(await readPage(slug), {
+    origin: SITE_URL,
+    pagePath: pagePath(slug)
+  })
+
+  // Pages bring their own `# Title` and lead paragraph, so only the source URL
+  // goes right below the title
+  let info = `Source: ${SITE_URL}${pagePath(slug)}`
+  let match = markdown.match(/^# .*\n/m)
+  if (!match || match.index == null) return `${info}\n\n${markdown}`
+  let end = match.index + match[0].length
+  return `${markdown.slice(0, end)}\n${info}\n${markdown.slice(end)}`
+}
+
+async function linkItem(slug: Array<string>, title?: string) {
+  let page = mdxMetadata(await readPage(slug))
+  let item = `- [${title ?? page.title ?? slug.join('/')}](${SITE_URL}${markdownPath(pagePath(slug))})`
+  return page.description ? `${item}: ${page.description}` : item
+}
+
+function toSlug(href: string) {
+  return href.split('/').filter(Boolean)
+}
+
+// Index of all pages following the llms.txt convention (https://llmstxt.org)
+export async function getLlmsTxt() {
+  let listed = new Set<string>()
+  let sections = await Promise.all(
+    navigation.map(async group => {
+      let links = group.link
+        ? [{ title: 'Overview', href: group.link }, ...group.links]
+        : group.links
+      let items = await Promise.all(
+        links.map(link => {
+          listed.add(link.href)
+          return linkItem(toSlug(link.href), link.title)
+        })
+      )
+      return `## ${group.title}\n\n${items.join('\n')}`
+    })
+  )
+
+  let slugs = await getMarkdownSlugs()
+  let others = await Promise.all(
+    slugs
+      .filter(slug => !listed.has(pagePath(slug)))
+      .map(slug => linkItem(slug))
+  )
+  if (others.length > 0) {
+    sections.push(`## Optional\n\n${others.sort().join('\n')}`)
+  }
+
+  sections.push(
+    [
+      '## Further Resources\n',
+      '- [User manual](https://docs.inkdrop.app/): Learn how to use Inkdrop',
+      '- [User forum](https://forum.inkdrop.app/): Join discussions, get help, and share app insights',
+      '- [Plugins](https://my.inkdrop.app/plugins): Browse community plugins'
+    ].join('\n')
+  )
+
+  return [
+    '# Inkdrop API Reference',
+    '> Developer documentation for Inkdrop - a Markdown note-taking app built for developers. Covers customizing the app with the init file and style tweaks, building plugins and themes, and the APIs for the local database, core modules, app states, actions and UI components.',
+    `Every page is available as Markdown by appending \`.md\` to its URL. The full documentation in a single file: ${SITE_URL}/llms-full.txt`,
+    ...sections
+  ]
+    .join('\n\n')
+    .concat('\n')
+}
+
+// Every page's Markdown concatenated into a single document
+export async function getLlmsFullTxt() {
+  // In navigation order, so the guides come before the API references, with
+  // pages missing from the navigation at the end
+  let order = navigation.flatMap(group =>
+    [group.link, ...group.links.map(link => link.href)].filter(Boolean)
+  )
+  let rank = (slug: Array<string>) => {
+    let index = order.indexOf(pagePath(slug))
+    return index === -1 ? order.length : index
+  }
+  let slugs = await getMarkdownSlugs()
+  let pages = await Promise.all(
+    slugs
+      .sort(
+        (a, b) => rank(a) - rank(b) || a.join('/').localeCompare(b.join('/'))
+      )
+      .map(getPageMarkdown)
+  )
+  return pages.join('\n---\n\n')
+}
diff --git a/src/lib/markdownPath.ts b/src/lib/markdownPath.ts
new file mode 100644
index 0000000..5ee2b92
--- /dev/null
+++ b/src/lib/markdownPath.ts
@@ -0,0 +1,4 @@
+/** The `.md` address of a page, e.g. `/states/db.md`, or `/index.md` for the home page. */
+export function markdownPath(pathname: string) {
+  return pathname === '/' ? '/index.md' : `${pathname.replace(/\/+$/, '')}.md`
+}
diff --git a/src/lib/mdxToMarkdown.ts b/src/lib/mdxToMarkdown.ts
index 23d7fa6..99dc80a 100644
--- a/src/lib/mdxToMarkdown.ts
+++ b/src/lib/mdxToMarkdown.ts
@@ -2,11 +2,17 @@ import { remark } from 'remark'
 import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
 
+import { guides } from '@/lib/guides'
+import { navigation } from '@/lib/navigation'
+import { resources } from '@/lib/resources'
+
 /**
  * Converts an MDX source string into clean GitHub-Flavored Markdown:
  * strips imports/exports and `{{ … }}` annotations, unwraps the custom JSX
  * components used throughout the docs, and rewrites relative links/images to
  * absolute URLs so the result is self-contained when pasted elsewhere.
+ * An MDX component the converter doesn't know throws, so a new component can't
+ * silently drop content from the Markdown output.
  */
 
 // mdast/mdxast nodes are loosely typed here; we only touch a handful of fields.
@@ -15,6 +21,8 @@ interface MdNode {
   children?: MdNode[]
   value?: string
   url?: string
+  meta?: string | null
+  depth?: number
   name?: string | null
   attributes?: MdxAttribute[]
   [key: string]: unknown
@@ -23,7 +31,7 @@ interface MdNode {
 interface MdxAttribute {
   type: string
   name?: string
-  value?: string | null
+  value?: string | { type: string; value: string } | null
 }
 
 interface TransformOptions {
@@ -51,16 +59,31 @@ function makeResolveUrl({ origin, pagePath }: TransformOptions) {
   }
 }
 
-/** Pulls a `label`/`title` string out of a `{{ label: '…' }}` annotation expression. */
+/** Reads a string property out of a `{{ key: '…' }}` annotation expression. */
+function readAnnotation(source: string, key: string): string | undefined {
+  const match = new RegExp(`\\b${key}\\s*:\\s*(['"])(.*?)\\1`).exec(source)
+  return match?.[2]
+}
+
+/**
+ * Builds a heading's signature out of its `{{ tag: 'GET', label: '/notes' }}`
+ * annotation, e.g. `GET /notes`.
+ */
 function extractHeadingLabel(children: MdNode[]): string | undefined {
   for (const child of children) {
-    if (child.type !== 'mdxTextExpression' && child.type !== 'mdxFlowExpression') {
+    if (
+      child.type !== 'mdxTextExpression' &&
+      child.type !== 'mdxFlowExpression'
+    ) {
       continue
     }
-    const match = /\b(?:label|title)\s*:\s*(['"])(.*?)\1/.exec(
-      typeof child.value === 'string' ? child.value : ''
-    )
-    if (match) return match[2]
+    const source = typeof child.value === 'string' ? child.value : ''
+    const label =
+      readAnnotation(source, 'label') ?? readAnnotation(source, 'title')
+    if (label) {
+      const tag = readAnnotation(source, 'tag')
+      return tag ? `${tag} ${label}` : label
+    }
   }
   return undefined
 }
@@ -86,7 +109,49 @@ function getAttr(node: MdNode, name: string): string | boolean | undefined {
   )
   if (!attr) return undefined
   // Valueless attributes (e.g. `required`) parse with a null value → treat as true.
-  return attr.value == null ? true : attr.value
+  if (attr.value == null) return true
+  // Expression attributes (e.g. `level={3}`) → their source text.
+  return typeof attr.value === 'string' ? attr.value : attr.value.value
+}
+
+function textOf(node: MdNode): string {
+  if (typeof node.value === 'string') return node.value
+  return (node.children ?? []).map(textOf).join('')
+}
+
+function heading(depth: number, text: string): MdNode {
+  return { type: 'heading', depth, children: [{ type: 'text', value: text }] }
+}
+
+/** A tight bullet list of links, each optionally followed by `: description`. */
+function linkList(
+  items: Array<{ title: string; href: string; description?: string }>,
+  resolveUrl: (url: string) => string | undefined
+): MdNode {
+  return {
+    type: 'list',
+    ordered: false,
+    spread: false,
+    children: items.map(item => ({
+      type: 'listItem',
+      spread: false,
+      children: [
+        {
+          type: 'paragraph',
+          children: [
+            {
+              type: 'link',
+              url: resolveUrl(item.href),
+              children: [{ type: 'text', value: item.title }]
+            },
+            ...(item.description
+              ? [{ type: 'text', value: `: ${item.description}` }]
+              : [])
+          ]
+        }
+      ]
+    }))
+  }
 }
 
 function buildPropertyItem(
@@ -97,14 +162,20 @@ function buildPropertyItem(
   const type = getAttr(node, 'type')
   const required = getAttr(node, 'required') === true
 
-  const meta = [typeof type === 'string' ? type : null, required ? 'required' : null]
+  const meta = [
+    typeof type === 'string' ? type : null,
+    required ? 'required' : null
+  ]
     .filter(Boolean)
     .join(', ')
 
   const heading: MdNode = {
     type: 'paragraph',
     children: [
-      { type: 'strong', children: [{ type: 'text', value: String(name ?? '') }] },
+      {
+        type: 'strong',
+        children: [{ type: 'text', value: String(name ?? '') }]
+      },
       ...(meta ? [{ type: 'text', value: ` (${meta})` }] : [])
     ]
   }
@@ -116,6 +187,8 @@ function buildPropertyItem(
   }
 }
 
+const LAYOUT_COMPONENTS = new Set(['Row', 'Col', 'CodeGroup', 'div', 'span'])
+
 function makeTransformer(options: TransformOptions) {
   const resolveUrl = makeResolveUrl(options)
 
@@ -136,7 +209,9 @@ function makeTransformer(options: TransformOptions) {
     if (name === 'Note' || name === 'Warning') {
       const label: MdNode = {
         type: 'paragraph',
-        children: [{ type: 'strong', children: [{ type: 'text', value: `${name}:` }] }]
+        children: [
+          { type: 'strong', children: [{ type: 'text', value: `${name}:` }] }
+        ]
       }
       return {
         type: 'blockquote',
@@ -155,8 +230,104 @@ function makeTransformer(options: TransformOptions) {
       return buildPropertyItem(node, transformChildren)
     }
 
-    // Layout-only components (Row, Col, CodeGroup, …): drop the tag, keep content.
-    return transformChildren(node.children ?? [])
+    if (name === 'kbd' || name === 'code') {
+      return { type: 'inlineCode', value: textOf(node) }
+    }
+
+    if (name === 'em' || name === 'strong') {
+      return {
+        type: name === 'em' ? 'emphasis' : 'strong',
+        children: transformChildren(node.children ?? [])
+      }
+    }
+
+    if (name === 'a') {
+      const href = getAttr(node, 'href')
+      return {
+        type: 'link',
+        url: resolveUrl(typeof href === 'string' ? href : undefined),
+        children: transformChildren(node.children ?? [])
+      }
+    }
+
+    if (name === 'video') {
+      const source = (node.children ?? []).find(
+        child => child.name === 'source'
+      )
+      const src = getAttr(node, 'src') ?? (source && getAttr(source, 'src'))
+      if (typeof src !== 'string') {
+        throw new Error(`<video> without a src in ${options.pagePath}`)
+      }
+      return {
+        type: 'paragraph',
+        children: [
+          { type: 'text', value: 'Video: ' },
+          {
+            type: 'link',
+            url: resolveUrl(src),
+            children: [{ type: 'text', value: src }]
+          }
+        ]
+      }
+    }
+
+    // MDX parses the content of `<pre>` as Markdown, so its paragraphs are
+    // joined back into the literal text the page displays.
+    if (name === 'pre') {
+      return {
+        type: 'code',
+        lang: null,
+        meta: null,
+        value: (node.children ?? []).map(textOf).join('\n\n')
+      }
+    }
+
+    if (name === 'Guides') {
+      return [
+        heading(2, 'Guides'),
+        linkList(
+          guides.map(g => ({
+            title: g.name,
+            href: g.href,
+            description: g.description
+          })),
+          resolveUrl
+        )
+      ]
+    }
+
+    if (name === 'Resources') {
+      return [
+        heading(2, 'Resources'),
+        linkList(
+          resources.map(r => ({
+            title: r.name,
+            href: r.href,
+            description: r.description
+          })),
+          resolveUrl
+        )
+      ]
+    }
+
+    if (name === 'ListNavigationSection') {
+      const group = navigation.find(
+        section => section.link === options.pagePath
+      )
+      return linkList(group?.links ?? [], resolveUrl)
+    }
+
+    // Decorative only.
+    if (name === 'HeroPattern') return []
+
+    // Layout-only components and elements: drop the tag, keep content.
+    if (LAYOUT_COMPONENTS.has(name)) {
+      return transformChildren(node.children ?? [])
+    }
+
+    throw new Error(
+      `Unsupported MDX element <${name}> in ${options.pagePath}: teach src/lib/mdxToMarkdown.ts how to render it as Markdown`
+    )
   }
 
   function transformNode(node: MdNode): MdNode | MdNode[] | null {
@@ -180,6 +351,15 @@ function makeTransformer(options: TransformOptions) {
         }
         return { ...node, children: kids }
       }
+      case 'code': {
+        // `{{ title: '…' }}` annotations → the conventional `title="…"` meta.
+        if (!node.meta?.startsWith('{{')) return node
+        const title = readAnnotation(node.meta, 'title')
+        return {
+          ...node,
+          meta: title ? `title=${JSON.stringify(title)}` : null
+        }
+      }
       case 'paragraph': {
         const kids = trimEdges(transformChildren(node.children ?? []))
         return kids.length === 0 ? null : { ...node, children: kids }
@@ -190,7 +370,9 @@ function makeTransformer(options: TransformOptions) {
         return {
           ...node,
           url: resolveUrl(node.url),
-          ...(node.children ? { children: transformChildren(node.children) } : {})
+          ...(node.children
+            ? { children: transformChildren(node.children) }
+            : {})
         }
       default:
         if (node.children) {
@@ -211,7 +393,10 @@ export async function mdxToMarkdown(
 ): Promise<string> {
   // Parse MDX (mdx + gfm extensions), strip/unwrap to plain mdast, then
   // stringify without the mdx extension so no JSX is re-emitted.
-  const tree = remark().use(remarkMdx).use(remarkGfm).parse(source) as unknown as MdNode
+  const tree = remark()
+    .use(remarkMdx)
+    .use(remarkGfm)
+    .parse(source) as unknown as MdNode
   const cleaned = makeTransformer(options)(tree)
 
   const file = remark()
@@ -219,5 +404,51 @@ export async function mdxToMarkdown(
     .data('settings', { bullet: '-', rule: '-', listItemIndent: 'one' })
     .stringify(cleaned as never)
 
-  return String(file).replace(/\n{3,}/g, '\n\n').trim() + '\n'
+  return (
+    String(file)
+      .replace(/\n{3,}/g, '\n\n')
+      .trim() + '\n'
+  )
+}
+
+export interface MdxMetadata {
+  title?: string
+  description?: string
+}
+
+// estree nodes are loosely typed here too; only `export const metadata = {…}` matters.
+interface EsNode {
+  type: string
+  [key: string]: any
+}
+
+/** Reads the string `title`/`description` of a page's `export const metadata`. */
+export function mdxMetadata(source: string): MdxMetadata {
+  const tree = remark().use(remarkMdx).parse(source) as unknown as MdNode
+  const metadata: MdxMetadata = {}
+
+  for (const node of tree.children ?? []) {
+    if (node.type !== 'mdxjsEsm') continue
+    const program = (node.data as { estree?: EsNode } | undefined)?.estree
+    for (const statement of (program?.body ?? []) as EsNode[]) {
+      const declarations: EsNode[] =
+        statement.type === 'ExportNamedDeclaration'
+          ? (statement.declaration?.declarations ?? [])
+          : []
+      const init = declarations.find(d => d.id?.name === 'metadata')?.init
+      if (init?.type !== 'ObjectExpression') continue
+      for (const property of init.properties as EsNode[]) {
+        const key = property.key?.name ?? property.key?.value
+        if (
+          (key === 'title' || key === 'description') &&
+          property.value?.type === 'Literal' &&
+          typeof property.value.value === 'string'
+        ) {
+          metadata[key as keyof MdxMetadata] = property.value.value
+        }
+      }
+    }
+  }
+
+  return metadata
 }
diff --git a/src/lib/navigation.ts b/src/lib/navigation.ts
new file mode 100644
index 0000000..d0984fe
--- /dev/null
+++ b/src/lib/navigation.ts
@@ -0,0 +1,151 @@
+export interface NavGroup {
+  title: string
+  link?: string
+  links: Array<{
+    title: string
+    href: string
+  }>
+}
+
+export const navigation: Array<NavGroup> = [
+  {
+    title: 'Guides',
+    links: [
+      { title: 'Introduction', href: '/' },
+      { title: 'The init file', href: '/guides/the-init-file' },
+      { title: 'Style tweaks', href: '/guides/style-tweaks' },
+      { title: 'Create a theme', href: '/guides/create-a-theme' },
+      { title: 'Plugin: Word count', href: '/guides/plugin-word-count' },
+      {
+        title: 'Getting & modifying the app state',
+        href: '/guides/flux-architecture'
+      },
+      {
+        title: 'Access the local database',
+        href: '/guides/access-the-local-database'
+      },
+      {
+        title: 'Integrate with external programs',
+        href: '/guides/integrate-with-external-programs'
+      },
+      { title: 'Customize the editor', href: '/guides/customize-the-editor' },
+      { title: 'Extend the UI', href: '/guides/extend-the-ui' },
+      {
+        title: 'Create a note template',
+        href: '/guides/create-a-note-template'
+      },
+      {
+        title: 'Add styles for text annotations',
+        href: '/guides/text-annotations'
+      },
+      {
+        title: 'Create a blog using Astro',
+        href: '/guides/create-a-blog-using-astro'
+      },
+      {
+        title: 'Use ES modules in your plugin',
+        href: '/guides/es-modules'
+      },
+      {
+        title: 'List of commands',
+        href: '/guides/list-of-commands'
+      }
+    ]
+  },
+  {
+    title: 'Resources',
+    links: [
+      { title: 'Notes', href: '/data-access/notes' },
+      { title: 'Notebooks', href: '/data-access/books' },
+      { title: 'Tags', href: '/data-access/tags' },
+      { title: 'Files', href: '/data-access/files' },
+      { title: 'Utilities', href: '/data-access/utils' },
+      { title: 'Events', href: '/data-access/events' },
+      { title: 'Local HTTP Server', href: '/data-access/local-http-server' }
+    ]
+  },
+  {
+    title: 'Core Modules',
+    links: [
+      { title: 'Config', href: '/modules/config' },
+      { title: 'Command Registry', href: '/modules/command-registry' },
+      { title: 'Context Menu Manager', href: '/modules/context-menu-manager' },
+      { title: 'Component Manager', href: '/modules/component-manager' },
+      { title: 'Environment', href: '/modules/environment' },
+      { title: 'Keymap Manager', href: '/modules/keymap-manager' },
+      { title: 'Layout Manager', href: '/modules/layout-manager' },
+      { title: 'Markdown Renderer', href: '/modules/markdown-renderer' },
+      { title: 'Markdown Editor', href: '/modules/markdown-editor' },
+      { title: 'Menu Manager', href: '/modules/menu-manager' },
+      { title: 'Notification', href: '/modules/notification' },
+      { title: 'Notification Manager', href: '/modules/notification-manager' },
+      { title: 'Package', href: '/modules/package' },
+      { title: 'Package Manager', href: '/modules/package-manager' },
+      { title: 'Style Manager', href: '/modules/style-manager' },
+      { title: 'Telescope Manager', href: '/modules/telescope-manager' },
+      { title: 'Theme Manager', href: '/modules/theme-manager' }
+    ]
+  },
+  {
+    title: 'App States',
+    link: '/states',
+    links: [
+      { title: 'Notebooks', href: '/states/books' },
+      { title: 'Database', href: '/states/db' },
+      { title: 'Editing note', href: '/states/editing-note' },
+      { title: 'Editor', href: '/states/editor' },
+      { title: 'Layouts', href: '/states/layouts' },
+      { title: 'Local config', href: '/states/local-config' },
+      { title: 'Main layout', href: '/states/main-layout' },
+      { title: 'Note list bar', href: '/states/note-list-bar' },
+      { title: 'Notes', href: '/states/notes' },
+      { title: 'Preview', href: '/states/preview' },
+      { title: 'Query context', href: '/states/query-context' },
+      { title: 'Tags', href: '/states/tags' },
+      { title: 'Stats', href: '/states/stats' }
+    ]
+  },
+  {
+    title: 'App Actions',
+    link: '/actions',
+    links: [
+      { title: 'Editing note', href: '/actions/editing-note' },
+      { title: 'Editor', href: '/actions/editor' }
+    ]
+  },
+  {
+    title: 'Components',
+    links: [
+      { title: 'Modal', href: '/components/modal' },
+      { title: 'Dialog', href: '/components/dialog' },
+      { title: 'Button', href: '/components/button' },
+      { title: 'CommandButton', href: '/components/command-button' },
+      { title: 'NotebookListBar', href: '/components/notebook-list-bar' },
+      { title: 'MessageDialog', href: '/components/message-dialog' }
+    ]
+  },
+  {
+    title: 'Event Subscription (event-kit)',
+    links: [
+      { title: 'Disposable', href: '/event-subscription/disposable' },
+      {
+        title: 'Composite Disposable',
+        href: '/event-subscription/composite-disposable'
+      },
+      { title: 'Emitter', href: '/event-subscription/emitter' }
+    ]
+  },
+  {
+    title: 'Appendix',
+    links: [
+      {
+        title: 'Migration Guide from v5 to v6',
+        href: '/appendix/plugin-migration-from-v5-to-v6'
+      },
+      {
+        title: 'Migration Guide from v3 to v4',
+        href: '/appendix/plugin-migration-from-v3-to-v4'
+      }
+    ]
+  }
+]
diff --git a/src/lib/resources.ts b/src/lib/resources.ts
new file mode 100644
index 0000000..ffb1589
--- /dev/null
+++ b/src/lib/resources.ts
@@ -0,0 +1,96 @@
+import { type GridPattern } from '@/components/GridPattern'
+import { DatabaseIcon } from '@/components/icons/DatabaseIcon'
+import { ImageFileIcon } from '@/components/icons/FileIcon'
+import { NoteIcon } from '@/components/icons/NoteIcon'
+import { NotebookIcon } from '@/components/icons/NotebookIcon'
+import { TagIcon } from '@/components/icons/TagIcon'
+import { UtilsIcon } from '@/components/icons/UtilsIcon'
+
+export interface Resource {
+  href: string
+  name: string
+  description: string
+  icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>
+  pattern: Omit<
+    React.ComponentPropsWithoutRef<typeof GridPattern>,
+    'width' | 'height' | 'x'
+  >
+}
+
+export const resources: Array<Resource> = [
+  {
+    href: '/data-access/notes',
+    name: 'Notes',
+    description:
+      'Learn about the note model and how to create, retrieve, update, delete, and list notes.',
+    icon: NoteIcon,
+    pattern: {
+      y: 16,
+      squares: [
+        [0, 1],
+        [1, 3]
+      ]
+    }
+  },
+  {
+    href: '/data-access/books',
+    name: 'Notebooks',
+    description:
+      'Learn about the notebook model and how to organize your notes with notebooks.',
+    icon: NotebookIcon,
+    pattern: {
+      y: -6,
+      squares: [
+        [-1, 2],
+        [1, 3]
+      ]
+    }
+  },
+  {
+    href: '/data-access/tags',
+    name: 'Tags',
+    description:
+      'Learn about the tag model and how to categorize your notes with tags.',
+    icon: TagIcon,
+    pattern: {
+      y: 32,
+      squares: [
+        [0, 2],
+        [1, 4]
+      ]
+    }
+  },
+  {
+    href: '/data-access/files',
+    name: 'Files',
+    description:
+      'Files in Inkdrop are primarily used as image attachments that can be inserted into notes.',
+    icon: ImageFileIcon,
+    pattern: {
+      y: 22,
+      squares: [[0, 1]]
+    }
+  },
+  {
+    href: '/data-access/utils',
+    name: 'Utilities',
+    description:
+      'Provides convenient methods for managing documents in the local database.',
+    icon: UtilsIcon,
+    pattern: {
+      y: 22,
+      squares: [[0, 1]]
+    }
+  },
+  {
+    href: '/data-access/local-http-server',
+    name: 'Local HTTP server',
+    description:
+      'The Inkdrop client app can open a simple HTTP server so that you can access the data from an external program easily.',
+    icon: DatabaseIcon,
+    pattern: {
+      y: 22,
+      squares: [[0, 1]]
+    }
+  }
+]
diff --git a/src/proxy.ts b/src/proxy.ts
new file mode 100644
index 0000000..c889e91
--- /dev/null
+++ b/src/proxy.ts
@@ -0,0 +1,40 @@
+import { NextResponse, type NextRequest } from 'next/server'
+
+function quality(accept: string, type: string) {
+  for (let entry of accept.split(',')) {
+    let [mediaType, ...params] = entry.trim().split(';')
+    if (mediaType.trim().toLowerCase() !== type) continue
+    let q = params.find(param => param.trim().startsWith('q='))
+    return q ? Number(q.trim().slice(2)) : 1
+  }
+  return 0
+}
+
+// Agents asking for Markdown via `Accept: text/markdown` get the `.md` version
+// of a page at its regular URL, while browsers keep getting HTML
+export function proxy(request: NextRequest) {
+  let accept = request.headers.get('accept') ?? ''
+  let markdown = quality(accept, 'text/markdown')
+  if (markdown === 0 || markdown < quality(accept, 'text/html')) {
+    return NextResponse.next()
+  }
+
+  let response = NextResponse.rewrite(
+    new URL(`/raw-md${request.nextUrl.pathname}`, request.url)
+  )
+  response.headers.set('Vary', 'Accept')
+  return response
+}
+
+export const config = {
+  // Only runs for docs pages requested with `text/markdown` in the Accept
+  // header, so regular page views and RSC prefetches skip the proxy entirely.
+  // Next internals, route handlers and files with an extension (images, `.md`,
+  // `llms.txt`, ...) are excluded.
+  matcher: [
+    {
+      source: '/((?!_next/|raw-md|.*\\.).*)',
+      has: [{ type: 'header', key: 'accept', value: '.*text/markdown.*' }]
+    }
+  ]
+}