more mdx work

jderochervlk · jderochervlk · commit 96d9032c065a · 2025-10-05T19:41:42.000-04:00
diff --git a/app/root.res b/app/root.res
@@ -32,6 +32,7 @@ let default = () => {
   <html>
     <head>
       <Links />
+      <Meta />
       <link rel="icon" href="data:image/x-icon;base64,AA" />
     </head>
     <body>
diff --git a/app/routes/MdxRoute.res b/app/routes/MdxRoute.res
@@ -100,6 +100,25 @@ let manualTableOfContents = () => {
   categories
 }
 
+let reactTableOfContents = () => {
+  let groups =
+    allMdx
+    ->filterMdxPages("docs/react")
+    ->groupBySection
+    ->Dict.mapValues(values => values->sortSection->convertToNavItems)
+
+  // Console.log(groups)
+
+  // these are the categories that appear in the sidebar
+  let categories: array<SidebarLayout.Sidebar.Category.t> = [
+    {name: "Overview", items: groups->Dict.getUnsafe("Overview")},
+  ]
+
+  Console.log(categories)
+
+  categories
+}
+
 let apiTableOfContents = () => {
   let groups =
     allMdx
@@ -139,10 +158,13 @@ let loader: Loader.t<loaderData> = async ({request}) => {
     let categories = {
       if pathname->String.includes("docs/manual/api") {
         Console.log(apiTableOfContents())
-        []
+        apiTableOfContents()
       } else if pathname->String.includes("docs/manual") {
         manualTableOfContents()
+      } else if pathname->String.includes("docs/react") {
+        reactTableOfContents()
       } else {
+        // TODO RR7 add react docs
         []
       }
     }
@@ -194,18 +216,21 @@ let default = () => {
     (pathname :> string)->String.includes("docs/manual")
       ? "ReScript Language Manual"
       : "Some other page"
-
-  if (
-    (pathname :> string)->String.includes("docs/manual") ||
-      (pathname :> string)->String.includes("docs/react")
-  ) {
-    <DocsLayout metaTitleCategory categories activeToc={title: "Introduction", entries}>
-      <div className="markdown-body"> {component()} </div>
-    </DocsLayout>
-  } else {
-    // TODO Handle blog pages
-    React.null
-  }
+  <>
+    <title> {React.string(attributes.metaTitle->Option.getOr(attributes.title))} </title>
+    <meta name="description" content={attributes.description->Option.getOr("")} />
+    {if (
+      (pathname :> string)->String.includes("docs/manual") ||
+        (pathname :> string)->String.includes("docs/react")
+    ) {
+      <DocsLayout metaTitleCategory categories activeToc={title: "Introduction", entries}>
+        <div className="markdown-body"> {component()} </div>
+      </DocsLayout>
+    } else {
+      // TODO Handle blog pages
+      React.null
+    }}
+  </>
 
   // </ManualDocsLayout.V1200Layout>
 }
diff --git a/app/routes/SyntaxLookupRoute.res b/app/routes/SyntaxLookupRoute.res
@@ -1,3 +1,4 @@
 let default = () => {
+  // TODO: RR7 implement syntax lookup page
   <div> {React.string("This is the Syntax Lookup Route")} </div>
 }
diff --git a/docs/react/introduction.mdx b/docs/react/introduction.mdx
@@ -2,6 +2,7 @@
 title: Introduction
 description: "Introduction to ReScript & ReactJS"
 canonical: "/docs/react/latest/introduction"
+section: "Overview"
 ---
 
 # ReScript & React
diff --git a/src/SyntaxLookup.res b/src/SyntaxLookup.res
@@ -105,7 +105,8 @@ module Tag = {
        py-1 px-3 rounded text-16
       ${deprecated
           ? "hover:bg-gray-30 bg-gray-50 text-gray-80 line-through"
-          : "hover:bg-fire hover:text-white bg-fire-5 text-fire"}`}>
+          : "hover:bg-fire hover:text-white bg-fire-5 text-fire"}`}
+    >
       {React.string(text)}
     </span>
   }
@@ -176,7 +177,7 @@ let decode = (json: JSON.t) => {
   }
 }
 
-let default = (props: props) => {
+let make = (props: props) => {
   let {mdxSources} = props
 
   let allItems = mdxSources->Array.map(mdxSource => {
diff --git a/src/SyntaxLookup.resi b/src/SyntaxLookup.resi
@@ -1,5 +1,6 @@
 type props
 type params
 
-let default: props => React.element
+// TODO RR7 pass the props correctly
+let make: props => React.element
 let getStaticProps: Next.GetStaticProps.t<props, params>
diff --git a/src/bindings/ReactRouter.res b/src/bindings/ReactRouter.res
@@ -26,6 +26,11 @@ module Outlet = {
   external make: unit => React.element = "Outlet"
 }
 
+module Meta = {
+  @module("react-router") @react.component
+  external make: unit => React.element = "Meta"
+}
+
 module Links = {
   @module("react-router") @react.component
   external make: unit => React.element = "Links"
@@ -94,6 +99,7 @@ module Mdx = {
     canonical: Path.t,
     category?: string,
     description?: string,
+    metaTitle?: string,
     order?: int,
     path: string,
     section?: string,
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
@@ -273,6 +273,8 @@ let make = (
   | Some(categories) =>
     let items = categories->Array.flatMap(c => c.items)
 
+    Console.log(items)
+
     switch items->Array.findIndex(item => item.href === location.pathname) {
     | -1 => React.null
     | i =>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`let default = () => {`
	`2`	`+ // TODO: RR7 implement syntax lookup page`
`2`	`3`	`<div> {React.string("This is the Syntax Lookup Route")} </div>`
`3`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -105,7 +105,8 @@ module Tag = {`
`105`	`105`	`py-1 px-3 rounded text-16`
`106`	`106`	`${deprecated`
`107`	`107`	`? "hover:bg-gray-30 bg-gray-50 text-gray-80 line-through"`
`108`		- : "hover:bg-fire hover:text-white bg-fire-5 text-fire"}`}>
	`108`	+ : "hover:bg-fire hover:text-white bg-fire-5 text-fire"}`}
	`109`	`+ >`
`109`	`110`	`{React.string(text)}`
`110`	`111`	`</span>`
`111`	`112`	`}`
`@@ -176,7 +177,7 @@ let decode = (json: JSON.t) => {`
`176`	`177`	`}`
`177`	`178`	`}`
`178`	`179`
`179`		`-let default = (props: props) => {`
	`180`	`+let make = (props: props) => {`
`180`	`181`	`let {mdxSources} = props`
`181`	`182`
`182`	`183`	`let allItems = mdxSources->Array.map(mdxSource => {`