docs: add clean markdown version of all documentation pages (#11308)

* added route to book

* added to resources

* added route to ui

* added to user guide

www/apps/ui/src/app/md-content/[[...slug]]/route.ts

@@ -0,0 +1,86 @@
+import { getCleanMd } from "docs-utils"
+import { existsSync } from "fs"
+import { unstable_cache } from "next/cache"
+import { notFound } from "next/navigation"
+import { NextRequest, NextResponse } from "next/server"
+import path from "path"
+import { addUrlToRelativeLink } from "remark-rehype-plugins"
+import type { Plugin } from "unified"
+import * as Icons from "@medusajs/icons"
+import * as HookValues from "@/registries/hook-values"
+import { colors as allColors } from "@/config/colors"
+
+type Params = {
+  params: Promise<{ slug: string[] }>
+}
+
+export async function GET(req: NextRequest, { params }: Params) {
+  const { slug = ["/"] } = await params
+
+  // keep this so that Vercel keeps the files in deployment
+  const basePath = path.join(process.cwd(), "src", "content", "docs")
+  const examplesPath = path.join(process.cwd(), "src", "examples")
+  const specsPath = path.join(process.cwd(), "src", "specs")
+  const fileName = slug.length === 1 ? "index" : slug.pop() || "index"
+
+  const filePath = path.join(basePath, ...slug, `${fileName}.mdx`)
+
+  if (!existsSync(filePath)) {
+    return notFound()
+  }
+
+  const cleanMdContent = await getCleanMd_(
+    filePath,
+    { examplesPath, specsPath },
+    {
+      after: [
+        [addUrlToRelativeLink, { url: process.env.NEXT_PUBLIC_BASE_URL }],
+      ] as unknown as Plugin[],
+    }
+  )
+
+  return new NextResponse(cleanMdContent, {
+    headers: {
+      "Content-Type": "text/markdown",
+    },
+  })
+}
+
+const getCleanMd_ = unstable_cache(
+  async (
+    filePath: string,
+    parserOptions: {
+      examplesPath: string
+      specsPath: string
+    },
+    plugins?: { before?: Plugin[]; after?: Plugin[] }
+  ) => {
+    const iconNames = Object.keys(Icons).filter((name) => name !== "default")
+
+    return getCleanMd({
+      filePath,
+      plugins,
+      parserOptions: {
+        ComponentExample: {
+          examplesBasePath: parserOptions.examplesPath,
+        },
+        ComponentReference: {
+          specsPath: parserOptions.specsPath,
+        },
+        IconSearch: {
+          iconNames,
+        },
+        HookValues: {
+          hooksData: HookValues,
+        },
+        Colors: {
+          colors: allColors,
+        },
+      },
+    })
+  },
+  ["clean-md"],
+  {
+    revalidate: 3600,
+  }
+)

www/apps/ui/src/middleware.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server"
+import type { NextRequest } from "next/server"
+
+export function middleware(request: NextRequest) {
+  return NextResponse.rewrite(
+    new URL(
+      `${request.nextUrl.basePath}/md-content${request.nextUrl.pathname.replace("/index.html.md", "")}`,
+      request.url
+    )
+  )
+}
+
+export const config = {
+  matcher: "/:path*/index.html.md",
+}

www/apps/ui/src/props/hooks/usePrompt.tsx

@@ -1,19 +1,8 @@
 import { HookTable } from "@/components/hook-table"
-import { HookDataMap } from "@/types/hooks"
-
-const useToastValues: HookDataMap = [
-  {
-    value: "dialog",
-    type: {
-      type: "function",
-      signature: `async (props: PromptProps): Promise<boolean>`,
-    },
-    description: "Async function used to display a new confirmation dialog.",
-  },
-]
+import { usePrompt } from "../../registries/hook-values"
 
 const Props = () => {
-  return <HookTable props={useToastValues} />
+  return <HookTable props={usePrompt} />
 }
 
 export default Props

www/apps/ui/src/props/hooks/useToggleState.tsx

@@ -1,20 +1,8 @@
 import { HookTable } from "@/components/hook-table"
-import { HookDataMap } from "@/types/hooks"
-
-const useToggleStateValuesArray: HookDataMap = [
-  {
-    value: "state",
-    type: {
-      type: "object",
-      name: "StateData",
-      shape:
-        "[\n  state: boolean,\n  open: () => void,\n  close: () => void,\n  toggle: () => void\n]",
-    },
-  },
-]
+import { useToggleState } from "../../registries/hook-values"
 
 const Props = () => {
-  return <HookTable props={useToggleStateValuesArray} />
+  return <HookTable props={useToggleState} />
 }
 
 export default Props

www/apps/ui/src/registries/example-registry.tsx

@@ -1,12 +1,7 @@
 import * as React from "react"
+import { ExampleRegistry as ExampleRegistryType } from "types"
 
-type ExampleType = {
-  name: string
-  component: React.LazyExoticComponent<() => React.JSX.Element>
-  file: string
-}
-
-export const ExampleRegistry: Record<string, ExampleType> = {
+export const ExampleRegistry: ExampleRegistryType = {
   "alert-demo": {
     name: "alert-demo",
     component: React.lazy(async () => import("@/examples/alert-demo")),

www/apps/ui/src/registries/hook-registry.tsx

@@ -1,6 +1,9 @@
-import { HookRegistryItem } from "@/types/hooks"
 import * as React from "react"
 
+export type HookRegistryItem = {
+  table: React.LazyExoticComponent<React.ComponentType>
+}
+
 export const HookRegistry: Record<string, HookRegistryItem> = {
   usePrompt: {
     table: React.lazy(async () => import("../props/hooks/usePrompt")),

www/apps/ui/src/registries/hook-values.ts

@@ -0,0 +1,24 @@
+import { HookDataMap } from "../types/hooks"
+
+export const useToggleState: HookDataMap = [
+  {
+    value: "state",
+    type: {
+      type: "object",
+      name: "StateData",
+      shape:
+        "[\n  state: boolean,\n  open: () => void,\n  close: () => void,\n  toggle: () => void\n]",
+    },
+  },
+]
+
+export const usePrompt: HookDataMap = [
+  {
+    value: "dialog",
+    type: {
+      type: "function",
+      signature: `async (props: PromptProps): Promise<boolean>`,
+    },
+    description: "Async function used to display a new confirmation dialog.",
+  },
+]

www/apps/ui/src/types/hooks.ts

@@ -1,4 +1,3 @@
-import { ComponentType, LazyExoticComponent } from "react"
 import { PropType } from "./props"
 
 export type HookData = {
@@ -8,7 +7,3 @@ export type HookData = {
 }
 
 export type HookDataMap = HookData[]
-
-export type HookRegistryItem = {
-  table: LazyExoticComponent<ComponentType>
-}