getting sidebar working

Author: jderochervlk

app/routes/MdxRoute.res

@@ -6,7 +6,7 @@ module Sidebar = SidebarLayout.Sidebar
 module NavItem = Sidebar.NavItem
 module Category = Sidebar.Category
 
-type loaderData = {...Mdx.t}
+type loaderData = {...Mdx.t, categories: array<SidebarLayout.Sidebar.Category.t>}
 
 /**
  This configures the MDX component to use our custom markdown components
@@ -45,15 +45,35 @@ let components = {
 
 let loader: Loader.t<loaderData> = async ({request}) => {
   let mdx = await loadMdx(request)
-  let res: loaderData = {__raw: mdx.__raw, attributes: mdx.attributes}
+  Console.log(
+    (await loadAllMdx())->Array.filter(page =>
+      (page.path :> string)->String.includes("docs/manual")
+    ),
+  )
+  let res: loaderData = {
+    __raw: mdx.__raw,
+    attributes: mdx.attributes,
+    categories: [
+      {
+        name: "overview",
+        items: [{name: "Introduction", href: #"/docs/manual/installation"}],
+      },
+    ],
+  }
   res
 }
 
 let default = () => {
+  let {pathname} = useLocation()
   let component = useMdxComponent(~components)
   let attributes = useMdxAttributes()
-  let _ = Toc.useToc(~category="manual")
 
+  let {categories} = useLoaderData()
+
+  let metaTitleCategory =
+    (pathname :> string)->String.includes("docs/manual")
+      ? "ReScript Language Manual"
+      : "Some other page"
   // TODO directly use layout and pass props
 
   // Console.log(attributes)
@@ -64,7 +84,7 @@ let default = () => {
   //   nextVersion=?Constants.nextVersion>
   //   // {React.string(attributes.title)} </h1>
   <div>
-    <DocsLayout metaTitleCategory="Foo" categories=[]>
+    <DocsLayout metaTitleCategory categories>
       <div className="markdown-body"> {component()} </div>
     </DocsLayout>
   </div>

docs/react/installation.mdx

@@ -2,6 +2,7 @@
 title: Installation
 description: "Installation and Setup"
 canonical: "/docs/react/latest/installation"
+category: "manual"
 ---
 
 # Installation

src/bindings/ReactRouter.res

@@ -10,6 +10,9 @@ external useNavigate: unit => string => unit = "useNavigate"
 @module("react-router")
 external useSearchParams: unit => ({..}, {..} => unit) = "useSearchParams"
 
+@module("react-router")
+external useLoaderData: unit => 'a = "useLoaderData"
+
 /* The types for this are auto-generated from the react-router.config.mjs file */
 type path = {pathname: Path.t, search?: string, hash?: string}
 
@@ -83,11 +86,14 @@ module Routes = {
 
 module Mdx = {
   type attributes = {
-    title: string,
-    description?: string,
+    canonical: Path.t,
     category?: string,
-    section?: string,
+    description?: string,
     order?: int,
+    path: Path.t,
+    section?: string,
+    slug: string,
+    title: string,
   }
 
   type t = {
@@ -108,5 +114,9 @@ module Mdx = {
   external useMdxComponent: (~components: {..}=?) => Jsx.component<'a> = "useMdxComponent"
 
   @module("react-router-mdx/server")
-  external loadAllMdx: (~filterByPaths: array<string>=?) => promise<array<t>> = "loadAllMdx"
+  external loadAllMdx: (~filterByPaths: array<string>=?) => promise<array<attributes>> =
+    "loadAllMdx"
+
+  @module("react-router-mdx/client")
+  external useMdxFiles: unit => {..} = "useMdxFiles"
 }

src/layouts/SidebarLayout.res

@@ -31,12 +31,13 @@ module Toc = {
     <ul className="mt-3 py-1 mb-4 border-l border-fire-10">
       {Array.map(entries, ({header, href}) =>
         <li key=header className="pl-2 mt-2 first:mt-1">
-          // <Link
-          //   to=Url(href)
-          //   className="font-normal block text-14 text-gray-40 leading-tight hover:text-gray-80">
-          //   {//links, nested
-          //   React.string(header)}
-          // </Link>
+          <Link.String
+            to=href
+            className="font-normal block text-14 text-gray-40 leading-tight hover:text-gray-80"
+          >
+            {//links, nested
+            React.string(header)}
+          </Link.String>
         </li>
       )->React.array}
     </ul>
@@ -78,12 +79,13 @@ module Sidebar = {
           }
 
           <li key=m.name className={hidden ++ " mt-1 leading-4"}>
-            // <Link
-            //   to=Url(m.href)
-            //   className={"truncate block py-1 md:h-auto tracking-tight text-gray-60 rounded-sm hover:bg-gray-20 hover:-ml-2 hover:py-1 hover:pl-2 " ++
-            //   active}>
-            //   {React.string(m.name)}
-            // </Link>
+            <Link
+              to=m.href
+              className={"truncate block py-1 md:h-auto tracking-tight text-gray-60 rounded-sm hover:bg-gray-20 hover:-ml-2 hover:py-1 hover:pl-2 " ++
+              active}
+            >
+              {React.string(m.name)}
+            </Link>
             {switch activeToc {
             | Some({entries}) =>
               if Array.length(entries) === 0 {
@@ -138,16 +140,19 @@ module Sidebar = {
         id="sidebar"
         className={(
           isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
-        ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible bg-white mt-28 md:mt-0"}>
+        ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible bg-white mt-28 md:mt-0"}
+      >
         <aside
           id="sidebar-content"
-          className="relative top-0 px-4 w-full block md:pt-10 md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 h-auto max-h-[calc(100vh-7rem)]">
+          className="relative top-0 px-4 w-full block md:pt-10 md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 h-auto max-h-[calc(100vh-7rem)]"
+        >
           <button
             onClick={evt => {
               ReactEvent.Mouse.preventDefault(evt)
               toggle()
             }}
-            className="md:hidden h-16 flex pt-2 right-4 absolute">
+            className="md:hidden h-16 flex pt-2 right-4 absolute"
+          >
             <Icon.Close />
           </button>
           <div className="flex justify-between">
@@ -182,8 +187,9 @@ module BreadCrumbs = {
         let item = if i === List.length(crumbs) - 1 {
           <span key={Int.toString(i)}> {React.string(crumb.name)} </span>
         } else {
-          React.null
-          // <Link key={Int.toString(i)} to=Url(crumb.href)> {React.string(crumb.name)} </Link>
+          <Link.String key={Int.toString(i)} to=crumb.href>
+            {React.string(crumb.name)}
+          </Link.String>
         }
         if i > 0 {
           <span key={Int.toString(i)}>
@@ -241,7 +247,7 @@ let make = (
   }
 
   React.useEffect(() => {
-    // TODO: figure out how to watch for route changes
+    // TODO RR7: figure out how to watch for route changes
     // open Next.Router.Events
     // let {Next.Router.events: events} = router
 
@@ -283,20 +289,22 @@ let make = (
       | Some({name, href}) =>
         <Link
           to=href
-          className={"flex items-center text-fire hover:text-fire-70 border-2 border-red-300 rounded py-1.5 px-3"}>
+          className={"flex items-center text-fire hover:text-fire-70 border-2 border-red-300 rounded py-1.5 px-3"}
+        >
           <Icon.ArrowRight className={"rotate-180 mr-2"} />
           {React.string(name)}
         </Link>
       | None => React.null
       }
       let next = switch items->Array.get(i + 1) {
-      | Some({name, href}) => React.null
-      // <Link
-      //   to=Url(href)
-      //   className={"flex items-center text-fire hover:text-fire-70 ml-auto border-2 border-red-300 rounded py-1.5 px-3"}>
-      //   {React.string(name)}
-      //   <Icon.ArrowRight className={"ml-2"} />
-      // </Link>
+      | Some({name, href}) =>
+        <Link
+          to=href
+          className={"flex items-center text-fire hover:text-fire-70 ml-auto border-2 border-red-300 rounded py-1.5 px-3"}
+        >
+          {React.string(name)}
+          <Icon.ArrowRight className={"ml-2"} />
+        </Link>
       | None => React.null
       }
       <div className={"flex justify-between mt-9"}>
@@ -309,7 +317,7 @@ let make = (
 
   <>
     <Meta title=metaTitle />
-    <EnableCollapsibleNavbar isEnabled={!isSidebarOpen && !isNavOpen}>
+    <EnableCollapsibleNavbar isEnabled={isSidebarOpen && isNavOpen}>
       <div className={"mt-16 min-w-320 " ++ theme}>
         <div className="w-full">
           <Navigation isOverlayOpen=isNavOpen setOverlayOpen=setNavOpen />
@@ -319,10 +327,12 @@ let make = (
               <main className="px-4 w-full pt-20 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
                 //width of the right content part
                 <div
-                  className={"z-10 fixed border-b shadow top-[112px] left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:-translate-y-0"}>
+                  className={"z-10 fixed border-b shadow top-[112px] left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:-translate-y-0"}
+                >
                   <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
                   <div
-                    className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full">
+                    className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full"
+                  >
                     breadcrumbs
                     editLinkEl
                   </div>