failed attempt at automatic index generation

packages/docs/app/docs.tsx

@@ -1,8 +1,38 @@
+import { readFile } from "node:fs/promises"
+import remarkFrontmatter from "remark-frontmatter"
+import remarkParse from "remark-parse"
+import type { LoaderFunction } from "remix"
 import { Link, Outlet } from "remix"
+import { unified } from "unified"
 import { SideNav } from "~/components/side-nav"
 import { SidebarLayout } from "~/components/sidebar-layout"
 import { linkClass } from "~/styles"
 
+export const loader: LoaderFunction = async () => {
+  const glob = await import("fast-glob")
+
+  const contentFiles = await glob.default(["**/*.mdx", "**/*.md"], {
+    cwd: "content",
+    absolute: true,
+  })
+
+  const contentModules = await Promise.all(
+    contentFiles.map(async (filePath) => {
+      const content = await readFile(filePath, "utf8")
+      const result = await unified()
+        .use(remarkParse)
+        .use(remarkFrontmatter)
+        .process(content)
+
+      return { filePath, result: result.toString() }
+    }),
+  )
+
+  console.log(contentModules)
+
+  return {}
+}
+
 export default function Docs() {
   return (
     <SidebarLayout

packages/docs/app/filesystem.ts

@@ -0,0 +1,10 @@
+import { stat } from "node:fs/promises"
+
+export async function isFile(path: string) {
+  try {
+    const result = await stat(path)
+    return result.isFile()
+  } catch {
+    return false
+  }
+}

packages/docs/content/embeds.md

@@ -0,0 +1,9 @@
+---
+meta:
+  title: Embeds
+  description: Using dmbed components
+---
+
+# Embeds
+
+just do it lol

packages/docs/package.json

@@ -13,15 +13,21 @@
     "@heroicons/react": "^1.0.5",
     "@remix-run/react": "^1.1.1",
     "@remix-run/serve": "^1.1.1",
+    "@remix-run/server-runtime": "^1.1.1",
     "@tailwindcss/typography": "^0.5.0",
     "autoprefixer": "^10.4.1",
     "clsx": "^1.1.1",
     "postcss": "^8.4.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "rehype-stringify": "^9.0.2",
+    "remark-parse": "^10.0.1",
+    "remark-rehype": "^10.1.0",
     "remix": "^1.1.1",
     "remix-tailwind": "^0.2.1",
-    "tailwindcss": "^3.0.8"
+    "tailwindcss": "^3.0.8",
+    "unified": "^10.1.1",
+    "xdm": "^3.3.1"
   },
   "devDependencies": {
     "@itsmapleleaf/configs": "^1.1.2",
@@ -30,6 +36,7 @@
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
     "concurrently": "^6.5.1",
+    "fast-glob": "^3.2.7",
     "prettier": "^2.5.1",
     "rehype-highlight": "^5.0.2",
     "rehype-prism-plus": "^1.1.3",

packages/docs/remix.config.cjs

@@ -0,0 +1,45 @@
+/* eslint-disable unicorn/prefer-module */
+const glob = require("fast-glob")
+const { join, relative, normalize, parse } = require("path/posix")
+
+/**
+ * @type {import('@remix-run/dev/config').AppConfig}
+ */
+module.exports = {
+  appDirectory: "app",
+  assetsBuildDirectory: "public/build",
+  publicPath: "/build/",
+  serverBuildDirectory: "build",
+  devServerPort: 8002,
+  ignoredRouteFiles: [".*"],
+  serverModuleFormat: "esm",
+
+  routes: async (defineRoutes) => {
+    const contentFolder = join(__dirname, "content")
+
+    const contentFiles = await glob("**/*.{md,mdx}", {
+      cwd: contentFolder,
+      absolute: true,
+    })
+
+    return defineRoutes((route) => {
+      route("docs", "docs.tsx", () => {
+        for (const filePath of contentFiles) {
+          const localFilePath = relative(contentFolder, filePath)
+          const { dir, name } = parse(localFilePath)
+          const routePath = join(dir, name)
+          route(routePath, filePath, { index: true })
+        }
+      })
+    })
+  },
+
+  mdx: async (filename) => {
+    const highlight = await import("rehype-prism-plus").then(
+      (mod) => mod.default,
+    )
+    return {
+      rehypePlugins: [highlight],
+    }
+  },
+}

packages/docs/remix.config.js

@@ -1,21 +0,0 @@
-// @ts-nocheck
-/* eslint-disable unicorn/prefer-module */
-/**
- * @type {import('@remix-run/dev/config').AppConfig}
- */
-module.exports = {
-  appDirectory: "app",
-  assetsBuildDirectory: "public/build",
-  publicPath: "/build/",
-  serverBuildDirectory: "build",
-  devServerPort: 8002,
-  ignoredRouteFiles: [".*"],
-  mdx: async (filename) => {
-    const highlight = await import("rehype-prism-plus").then(
-      (mod) => mod.default,
-    )
-    return {
-      rehypePlugins: [highlight],
-    }
-  },
-}