feat: add DocsReactRoute and fix sortSection comparator

- Create DocsReactRoute.res/.resi for /docs/react/* pages, following the
  same pattern as DocsManualRoute with React-specific sidebar categories
  (Overview, Main Concepts, Hooks & State Management, Guides) and
  breadcrumbs (Docs > rescript-react)
- Register docsReactRoutes in app/routes.res via MdxFile.scanPaths and
  filter docs/react paths out of the legacy mdxRoutes
- Fix inconsistent comparator in Mdx.sortSection: items with an order
  field now always sort before items without one, and items without order
  preserve their relative position (was _ => -1.0, now handles all four
  cases explicitly)

Author: jderochervlk

app/routes.res

@@ -38,9 +38,16 @@ let docsManualRoutes =
   ->Array.filter(path => !String.includes(path, "docs/manual/api"))
   ->Array.map(path => route(path, "./routes/DocsManualRoute.jsx", ~options={id: path}))
 
+let docsReactRoutes =
+  MdxFile.scanPaths(~dir="markdown-pages/docs/react", ~alias="docs/react")->Array.map(path =>
+    route(path, "./routes/DocsReactRoute.jsx", ~options={id: path})
+  )
+
 let mdxRoutes = mdxRoutes("./routes/MdxRoute.jsx")->Array.filter(r => {
   let path = r.path->Option.getOr("")
-  !(path->String.startsWith("blog")) && !(path->String.startsWith("docs/manual"))
+  !(path->String.startsWith("blog")) &&
+  !(path->String.startsWith("docs/manual")) &&
+  !(path->String.startsWith("docs/react"))
 })
 
 let default = [
@@ -59,6 +66,7 @@ let default = [
   ...beltRoutes,
   ...blogArticleRoutes,
   ...docsManualRoutes,
+  ...docsReactRoutes,
   ...mdxRoutes,
   route("*", "./routes/NotFoundRoute.jsx"),
 ]

app/routes/DocsReactRoute.res

@@ -0,0 +1,152 @@
+type loaderData = {
+  compiledMdx: CompiledMdx.t,
+  categories: array<SidebarLayout.Sidebar.Category.t>,
+  entries: array<TableOfContents.entry>,
+  title: string,
+  description: string,
+  filePath: string,
+}
+
+// Build sidebar categories from all React docs, sorted by their "order" field in frontmatter
+let reactTableOfContents = async () => {
+  let groups =
+    (await MdxFile.loadAllAttributes(~dir="markdown-pages/docs"))
+    ->Mdx.filterMdxPages("docs/react")
+    ->Mdx.groupBySection
+    ->Dict.mapValues(values =>
+      values->Mdx.sortSection->SidebarHelpers.convertToNavItems("/docs/react")
+    )
+
+  SidebarHelpers.getAllGroups(
+    groups,
+    ["Overview", "Main Concepts", "Hooks & State Management", "Guides"],
+  )
+}
+
+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/react",
+    ~alias="docs/react",
+  )
+
+  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 title = switch frontmatter {
+  | Object(dict) =>
+    switch dict->Dict.get("title") {
+    | Some(String(s)) => s
+    | _ => ""
+    }
+  | _ => ""
+  }
+
+  let categories = await reactTableOfContents()
+
+  let compiledMdx = await MdxFile.compileMdx(raw, ~filePath, ~remarkPlugins=Mdx.plugins)
+
+  // Build table of contents entries from markdown headings
+  let markdownTree = Mdast.fromMarkdown(raw)
+  let tocResult = Mdast.toc(markdownTree, {maxDepth: 2})
+
+  let headers = Dict.make()
+  Mdast.reduceHeaders(tocResult.map, headers)
+
+  let entries =
+    headers
+    ->Dict.toArray
+    ->Array.map(((header, url)): TableOfContents.entry => {
+      header,
+      href: (url :> string),
+    })
+    ->Array.slice(~start=2) // skip document entry and H1 title, keep h2 sections
+
+  {
+    compiledMdx,
+    categories,
+    entries,
+    title: `${title} | ReScript React`,
+    description,
+    filePath,
+  }
+}
+
+let default = () => {
+  let {pathname} = ReactRouter.useLocation()
+  let {compiledMdx, categories, entries, title, description, filePath} = ReactRouter.useLoaderData()
+
+  let breadcrumbs = list{
+    {Url.name: "Docs", href: "/docs/react/introduction"},
+    {
+      Url.name: "rescript-react",
+      href: "/docs/react/introduction",
+    },
+  }
+
+  let editHref = `https://github.com/rescript-lang/rescript-lang.org/blob/master/${filePath}`
+
+  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">
+        {categories
+        ->Array.map(category => {
+          let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
+            navItem.href === (pathname :> string)
+          let getActiveToc = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
+            if navItem.href === (pathname :> string) {
+              Some({TableOfContents.title, entries})
+            } else {
+              None
+            }
+          <div key=category.name>
+            <SidebarLayout.Sidebar.Category
+              isItemActive
+              getActiveToc
+              category
+              onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+            />
+          </div>
+        })
+        ->React.array}
+      </div>
+    </aside>
+
+  <>
+    <Meta title description />
+    <NavbarSecondary />
+    <NavbarTertiary sidebar=sidebarContent>
+      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+      <a
+        href=editHref className="inline text-14 hover:underline text-fire" rel="noopener noreferrer"
+      >
+        {React.string("Edit")}
+      </a>
+    </NavbarTertiary>
+    <DocsLayout categories activeToc={title, entries}>
+      <div className="markdown-body">
+        <MdxContent compiledMdx />
+      </div>
+    </DocsLayout>
+  </>
+}

app/routes/DocsReactRoute.resi

@@ -0,0 +1,12 @@
+type loaderData = {
+  compiledMdx: CompiledMdx.t,
+  categories: array<SidebarLayout.Sidebar.Category.t>,
+  entries: array<TableOfContents.entry>,
+  title: string,
+  description: string,
+  filePath: string,
+}
+
+let loader: ReactRouter.Loader.t<loaderData>
+
+let default: unit => React.element

src/Mdx.res

@@ -82,7 +82,9 @@ let sortSection = mdxPages =>
   Array.toSorted(mdxPages, (a: attributes, b: attributes) =>
     switch (a.order, b.order) {
     | (Some(a), Some(b)) => a > b ? 1.0 : -1.0
-    | _ => -1.0
+    | (Some(_), None) => -1.0
+    | (None, Some(_)) => 1.0
+    | (None, None) => 0.0
     }
   )