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/packages/remark-rehype-plugins/src/index.ts

@@ -7,6 +7,7 @@ export * from "./page-number.js"
 export * from "./prerequisites-link-fixer.js"
 export * from "./resolve-admonitions.js"
 export * from "./type-list-link-fixer.js"
+export * from "./ui-rehype-plugin.js"
 export * from "./workflow-diagram-link-fixer.js"
 
 export * from "./utils/fix-link.js"

www/packages/remark-rehype-plugins/src/ui-rehype-plugin.ts

@@ -0,0 +1,82 @@
+import fs from "fs"
+import path from "path"
+import { u } from "unist-builder"
+import { visit } from "unist-util-visit"
+import { Documentation } from "react-docgen"
+import { ExampleRegistry, UnistNode, UnistTree } from "types"
+
+type Options = {
+  exampleRegistry: ExampleRegistry
+}
+
+export function uiRehypePlugin({ exampleRegistry }: Options) {
+  return async (tree: UnistTree) => {
+    visit(tree, (node: UnistNode) => {
+      if (node.name === "ComponentExample") {
+        const name = getNodeAttributeByName(node, "name")?.value as string
+
+        if (!name) {
+          return null
+        }
+
+        try {
+          const component = exampleRegistry[name]
+          const src = component.file
+
+          const filePath = path.join(process.cwd(), src)
+          let source = fs.readFileSync(filePath, "utf8")
+
+          source = source.replaceAll("export default", "export")
+
+          // Trim newline at the end of file. It's correct, but it makes source display look off
+          if (source.endsWith("\n")) {
+            source = source.substring(0, source.length - 1)
+          }
+
+          node.children?.push(
+            u("element", {
+              tagName: "span",
+              properties: {
+                __src__: src,
+                code: source,
+              },
+            })
+          )
+        } catch (error) {
+          console.error(error)
+        }
+      } else if (node.name === "ComponentReference") {
+        const mainComponent = getNodeAttributeByName(node, "mainComponent")
+          ?.value as string
+
+        if (!mainComponent) {
+          return null
+        }
+
+        const mainSpecsDir = path.join(process.cwd(), "src/specs")
+        const componentSpecsDir = path.join(mainSpecsDir, mainComponent)
+        const specs: Documentation[] = []
+
+        const specFiles = fs.readdirSync(componentSpecsDir)
+        specFiles.map((specFileName) => {
+          // read spec file
+          const specFile = fs.readFileSync(
+            path.join(componentSpecsDir, specFileName),
+            "utf-8"
+          )
+          specs.push(JSON.parse(specFile) as Documentation)
+        })
+
+        node.attributes?.push({
+          name: "specsSrc",
+          value: JSON.stringify(specs),
+          type: "mdxJsxAttribute",
+        })
+      }
+    })
+  }
+}
+
+function getNodeAttributeByName(node: UnistNode, name: string) {
+  return node.attributes?.find((attribute) => attribute.name === name)
+}