feat: split API overview page out of MdxRoute into ApiOverviewRoute

app/routes.res

@@ -47,11 +47,6 @@ let blogArticleRoutes =
     route(path, "./routes/BlogArticleRoute.jsx", ~options={id: path})
   )
 
-let docsGuidelinesRoutes =
-  MdxFile.scanPaths(
-    ~dir="markdown-pages/docs/guidelines",
-    ~alias="docs/guidelines",
-  )->Array.map(path => route(path, "./routes/DocsGuidelinesRoute.jsx", ~options={id: path}))
 let communityRoutes =
   MdxFile.scanPaths(~dir="markdown-pages/community", ~alias="community")->Array.map(path =>
     route(path, "./routes/CommunityRoute.jsx", ~options={id: path})
@@ -63,8 +58,9 @@ let mdxRoutes = mdxRoutes("./routes/MdxRoute.jsx")->Array.filter(r =>
     ->Option.map(path =>
       path === "blog" ||
       String.startsWith(path, "blog/") ||
-      path === "docs/guidelines" ||
-      String.startsWith(path, "docs/guidelines/") ||
+      path === "community" ||
+      String.startsWith(path, "community/") ||
+      path === "docs/manual/api" ||
       path === "community" ||
       String.startsWith(path, "community/")
     )
@@ -80,6 +76,7 @@ let default = [
   route("blog", "./routes/BlogRoute.jsx", ~options={id: "blog-index"}),
   route("blog/archived", "./routes/BlogRoute.jsx", ~options={id: "blog-archived"}),
   route("docs", "./routes/DocsOverview.jsx", ~options={id: "docs-overview"}),
+  route("docs/manual/api", "./routes/ApiOverviewRoute.jsx", ~options={id: "api-overview"}),
   route("docs/manual/api/stdlib", "./routes/ApiRoute.jsx", ~options={id: "api-stdlib"}),
   route("docs/manual/api/introduction", "./routes/ApiRoute.jsx", ~options={id: "api-intro"}),
   route("docs/manual/api/belt", "./routes/ApiRoute.jsx", ~options={id: "api-belt"}),
@@ -88,7 +85,6 @@ let default = [
   ...beltRoutes,
   ...domRoutes,
   ...blogArticleRoutes,
-  ...docsGuidelinesRoutes,
   ...communityRoutes,
   ...mdxRoutes,
   route("*", "./routes/NotFoundRoute.jsx"),

app/routes/ApiOverviewRoute.res

@@ -0,0 +1,84 @@
+type loaderData = {
+  compiledMdx: CompiledMdx.t,
+  title: string,
+  description: string,
+}
+
+let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
+  let {pathname} = WebAPI.URL.make(~url=request.url)
+  let filePath = MdxFile.resolveFilePath(
+    (pathname :> string),
+    ~dir="markdown-pages/docs/manual",
+    ~alias="docs/manual",
+  )
+
+  let raw = await Node.Fs.readFile(filePath, "utf-8")
+  let {frontmatter}: MarkdownParser.result = MarkdownParser.parseSync(raw)
+
+  let description = switch frontmatter {
+  | Object(dict) =>
+    switch dict->Dict.get("description") {
+    | Some(String(s)) => s
+    | _ => ""
+    }
+  | _ => ""
+  }
+
+  let compiledMdx = await MdxFile.compileMdx(raw, ~filePath, ~remarkPlugins=Mdx.plugins)
+
+  {
+    compiledMdx,
+    title: "API | ReScript API",
+    description,
+  }
+}
+
+let default = () => {
+  let {pathname} = ReactRouter.useLocation()
+  let {compiledMdx, title, description} = ReactRouter.useLoaderData()
+
+  let breadcrumbs = list{
+    {Url.name: "Docs", href: `/docs/manual/api`},
+    {Url.name: "API", href: `/docs/manual/api`},
+  }
+
+  let sidebarContent =
+    <aside className="px-4 w-full block">
+      <div className="flex justify-between items-baseline">
+        <div className="flex flex-col text-fire font-medium">
+          <VersionSelect />
+        </div>
+        <button
+          className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+        >
+          <Icon.Close />
+        </button>
+      </div>
+      <div className="mb-56">
+        {ApiOverviewLayout.categories
+        ->Array.map(category => {
+          let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
+            navItem.href === (pathname :> string)
+          <div key=category.name>
+            <SidebarLayout.Sidebar.Category
+              isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+            />
+          </div>
+        })
+        ->React.array}
+      </div>
+    </aside>
+
+  <>
+    <Meta title description />
+    <NavbarSecondary />
+    <NavbarTertiary sidebar=sidebarContent>
+      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+    </NavbarTertiary>
+    <ApiOverviewLayout.Docs>
+      <div className="markdown-body">
+        <MdxContent compiledMdx />
+      </div>
+    </ApiOverviewLayout.Docs>
+  </>
+}

app/routes/ApiOverviewRoute.resi

@@ -0,0 +1,9 @@
+type loaderData = {
+  compiledMdx: CompiledMdx.t,
+  title: string,
+  description: string,
+}
+
+let loader: ReactRouter.Loader.t<loaderData>
+
+let default: unit => React.element

app/routes/MdxRoute.res

@@ -146,9 +146,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
     res
   } else {
     let categories = {
-      if pathname == "/docs/manual/api" {
-        []
-      } else if pathname->String.includes("docs/manual") {
+      if pathname->String.includes("docs/manual") {
         await manualTableOfContents()
       } else if pathname->String.includes("docs/react") {
         await reactTableOfContents()
@@ -221,8 +219,6 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
       let path = (pathname :> string)
       let title = if path->String.includes("docs/react") {
         "ReScript React"
-      } else if path->String.includes("docs/manual/api") {
-        "ReScript API"
       } else if path->String.includes("docs/manual") {
         "ReScript Language Manual"
       } else {
@@ -232,11 +228,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
       title
     }
 
-    let title = if pathname == "/docs/manual/api" {
-      "API"
-    } else {
-      mdx.attributes.title
-    }
+    let title = mdx.attributes.title
 
     let res: loaderData = {
       __raw: mdx.__raw,
@@ -261,49 +253,7 @@ let default = () => {
   let {entries, categories, title} = loaderData
 
   <>
-    {if (pathname :> string) == "/docs/manual/api" {
-      let breadcrumbs = list{
-        {Url.name: "Docs", href: `/docs/manual/api`},
-        {name: "API", href: `/docs/manual/api`},
-      }
-      let sidebarContent =
-        <aside className="px-4 w-full block">
-          <div className="flex justify-between items-baseline">
-            <div className="flex flex-col text-fire font-medium">
-              <VersionSelect />
-            </div>
-            <button
-              className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
-            >
-              <Icon.Close />
-            </button>
-          </div>
-          <div className="mb-56">
-            {ApiOverviewLayout.categories
-            ->Array.map(category => {
-              let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
-                navItem.href === (pathname :> string)
-              <div key=category.name>
-                <SidebarLayout.Sidebar.Category
-                  isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
-                />
-              </div>
-            })
-            ->React.array}
-          </div>
-        </aside>
-
-      <>
-        <Meta title=title description={attributes.description->Nullable.getOr("ReScript API")} />
-        <NavbarSecondary />
-        <NavbarTertiary sidebar=sidebarContent>
-          <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
-        </NavbarTertiary>
-        <ApiOverviewLayout.Docs>
-          <div className="markdown-body"> {component()} </div>
-        </ApiOverviewLayout.Docs>
-      </>
-    } else if (
+    {if (
       (pathname :> string)->String.includes("docs/manual") ||
       (pathname :> string)->String.includes("docs/react") ||
       (pathname :> string)->String.includes("docs/guidelines")