api is rendering

Author: jderochervlk

app/routes.mjs

@@ -18,6 +18,9 @@ let $$default = Belt_Array.concatMany([
     Routes.route("docs/manual/api/stdlib", "./routes/ApiRoute.mjs", {
       id: "api-stdlib"
     }),
+    Routes.route("docs/manual/api/stdlib/bigint", "./routes/ApiRoute.mjs", {
+      id: "api-stdlib-bigint"
+    }),
     Routes.route("docs/manual/api/introduction", "./routes/ApiRoute.mjs", {
       id: "api-intro"
     }),

app/routes.res

@@ -10,6 +10,11 @@ let default = [
   route("syntax-lookup", "./routes/SyntaxLookupRoute.mjs"),
   route("blog", "./routes/BlogRoute.mjs"),
   route("docs/manual/api/stdlib", "./routes/ApiRoute.mjs", ~options={id: "api-stdlib"}),
+  route(
+    "docs/manual/api/stdlib/bigint", // TODO RR7: generate routes for all api docs
+    "./routes/ApiRoute.mjs",
+    ~options={id: "api-stdlib-bigint"},
+  ),
   route("docs/manual/api/introduction", "./routes/ApiRoute.mjs", ~options={id: "api-intro"}),
   route("docs/manual/api/belt", "./routes/ApiRoute.mjs", ~options={id: "api-belt"}),
   route("docs/manual/api/dom", "./routes/ApiRoute.mjs", ~options={id: "api-dom"}),

app/routes/ApiRoute.res

@@ -1,3 +1,18 @@
+type loaderData = ApiDocs.props
+
+let loader: ReactRouter.Loader.t<loaderData> = async args => {
+  let pathname =
+    WebAPI.URL.make(~url=args.request.url).pathname->String.replace("/docs/manual/api/", "")
+  Console.log(pathname)
+
+  let data = {
+    await ApiDocs.getStaticProps(["stdlib", "bigint"])
+  }
+
+  data["props"]
+}
+
 let default = () => {
-  <div />
+  let loaderData: loaderData = ReactRouter.useLoaderData()
+  <ApiDocs {...loaderData} />
 }

app/routes/MdxRoute.res

@@ -130,24 +130,6 @@ let reactTableOfContents = () => {
   categories
 }
 
-let apiTableOfContents = () => {
-  let groups =
-    allMdx
-    ->filterMdxPages("docs/manual/api")
-    ->groupBySection
-    ->Dict.mapValues(values => values->sortSection->convertToNavItems("/docs/manual/api"))
-
-  // these are the categories that appear in the sidebar
-  let categories: array<SidebarLayout.Sidebar.Category.t> = [
-    {name: "Overview", items: groups->Dict.get("Overview")->Option.getOr([])},
-    {
-      name: "Additional Libraries",
-      items: groups->Dict.get("Additional Libraries")->Option.getOr([]),
-    },
-  ]
-  categories
-}
-
 let loader: Loader.t<loaderData> = async ({request}) => {
   let {pathname} = WebAPI.URL.make(~url=request.url)
 
@@ -165,8 +147,8 @@ let loader: Loader.t<loaderData> = async ({request}) => {
     res
   } else {
     let categories = {
-      if pathname->String.includes("docs/manual/api") {
-        apiTableOfContents()
+      if pathname == "/docs/manual/api" {
+        []
       } else if pathname->String.includes("docs/manual") {
         manualTableOfContents()
       } else if pathname->String.includes("docs/react") {
@@ -226,7 +208,9 @@ let default = () => {
   <>
     <title> {React.string(attributes.metaTitle->Option.getOr(attributes.title))} </title>
     <meta name="description" content={attributes.description->Option.getOr("")} />
-    {if (
+    {if (pathname :> string) == "/docs/manual/api" {
+      <ApiOverviewLayout.Docs> {component()} </ApiOverviewLayout.Docs>
+    } else if (
       (pathname :> string)->String.includes("docs/manual") ||
         (pathname :> string)->String.includes("docs/react")
     ) {