configure loadmdx

Author: jderochervlk

app/routes/MdxRoute.res

@@ -122,7 +122,7 @@ let apiTableOfContents = () => {
 let loader: Loader.t<loaderData> = async ({request}) => {
   let {pathname} = WebAPI.URL.make(~url=request.url)
   Console.log(pathname)
-  let mdx = await loadMdx(request)
+  let mdx = await loadMdx(request, ~options={remarkPlugins: [Mdx.gfm]})
 
   // TODO: actually render the blog pages
   if pathname->String.includes("blog") {

package-lock.json

@@ -44,6 +44,8 @@
     "highlightjs-rescript": "^0.2.2",
     "isbot": "^5",
     "lz-string": "^1.4.4",
+    "mdast-util-from-markdown": "^2.0.2",
+    "mdast-util-toc": "^7.1.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
@@ -76,4 +78,4 @@
     "tailwindcss": "^4",
     "vite": "^7.0.6"
   }
-}
+}

package.json

@@ -109,8 +109,12 @@ module Mdx = {
   @module("react-router-mdx/server")
   external routes: string => array<Routes.t> = "routes"
 
+  type remarkPlugin
+
+  type loadMdxOptions = {remarkPlugins?: array<remarkPlugin>}
+
   @module("react-router-mdx/server")
-  external loadMdx: FetchAPI.request => promise<t> = "loadMdx"
+  external loadMdx: (FetchAPI.request, ~options: loadMdxOptions=?) => promise<t> = "loadMdx"
 
   @module("react-router-mdx/client")
   external useMdxAttributes: unit => attributes = "useMdxAttributes"
@@ -124,4 +128,7 @@ module Mdx = {
 
   @module("react-router-mdx/client")
   external useMdxFiles: unit => {..} = "useMdxFiles"
+
+  @module("remark-gfm")
+  external gfm: remarkPlugin = "default"
 }