Add new layout for the React docs, prepare work for more generic DocsLayout

Author: ryyppy

common/App.re

@@ -110,6 +110,10 @@ let default = (props: props): React.element => {
     }
   | {base: [|"docs", "reason-compiler"|], version: Latest} =>
     <ReasonCompilerDocsLayout> content </ReasonCompilerDocsLayout>
+  | {base: [|"docs", "react"|], version: Latest} =>
+    <ReactDocsLayout frontmatter={component->frontmatter}>
+      content
+    </ReactDocsLayout>
   | {base: [|"docs", "gentype"|], version: Latest} =>
     <GenTypeDocsLayout> content </GenTypeDocsLayout>
   // common routes
@@ -123,12 +127,17 @@ let default = (props: props): React.element => {
       // to keep the frontmatter parsing etc in one place
       content
     | _ =>
+      let title =
+        switch (url) {
+        | {base: [|"docs"|]} => Some("Overview | ReScript Documentation")
+        | _ => None
+        };
       <MainLayout>
-        <Meta />
+        <Meta ?title />
         <div className="flex justify-center">
           <div className="max-w-705 w-full"> content </div>
         </div>
-      </MainLayout>
+      </MainLayout>;
     }
   };
 };

components/VersionSelect.re

@@ -17,7 +17,7 @@ let make =
       },
     );
   <select
-    className="text-14 border border-fire inline-block rounded px-4 py-1  font-semibold "
+    className="text-14 border border-fire inline-block rounded px-4 py-1 font-semibold "
     name="versionSelection"
     value=version
     onChange>

layouts/CommunityLayout.re

@@ -61,7 +61,7 @@ let make = (~components=Markdown.default, ~children) => {
 
   let title = "Community";
 
-  <DocsLayout theme=`Reason components categories title ?activeToc breadcrumbs>
+  <DocsLayout theme=`Reason components metaTitleCategory="ReScript Documentation" categories title ?activeToc breadcrumbs>
     children
   </DocsLayout>;
 };

layouts/DocsLayout.re

@@ -11,7 +11,6 @@ module Category = Sidebar.Category;
 
 let makeBreadcrumbsFromPaths =
     (~basePath: string, paths: array(string)): list(Url.breadcrumb) => {
-      Js.log(paths);
   let (_, rest) =
     Belt.Array.reduce(
       paths,
@@ -21,8 +20,7 @@ let makeBreadcrumbsFromPaths =
 
         let href = baseHref ++ "/" ++ path;
 
-        Js.Array2.push(ret, Url.{name: prettyString(path), href})
-        ->ignore;
+        Js.Array2.push(ret, Url.{name: prettyString(path), href})->ignore;
         (href, ret);
       },
     );
@@ -42,8 +40,7 @@ let makeBreadcrumbs =
 
           let href = baseHref ++ "/" ++ path;
 
-          Js.Array2.push(ret,Url.{name: prettyString(path), href})
-          ->ignore;
+          Js.Array2.push(ret, Url.{name: prettyString(path), href})->ignore;
           (href, ret);
         },
       );
@@ -55,6 +52,7 @@ let make =
     (
       ~breadcrumbs: option(list(Url.breadcrumb))=?,
       ~title: string,
+      ~metaTitleCategory: option(string)=?, // e.g. Introduction | My Meta Title Category
       ~frontmatter: option(Js.Json.t)=?,
       ~version: option(string)=?,
       ~availableVersions: option(array(string))=?,
@@ -139,7 +137,12 @@ let make =
       route
     />;
 
-  let metaTitle = title ++ " | ReScript Documentation";
+  let metaTitle =
+    switch (metaTitleCategory) {
+    | Some(titleCategory) =>
+      titleCategory ++ " | " ++ "ReScript Documentation"
+    | None => title
+    };
 
   let metaElement =
     switch (frontmatter) {
@@ -148,7 +151,11 @@ let make =
       | Ok(fm) =>
         let canonical = Js.Null.toOption(fm.canonical);
         let description = Js.Null.toOption(fm.description);
-        let title = fm.title ++ " | ReScript Language Manual";
+        let title =
+          switch (metaTitleCategory) {
+          | Some(titleCategory) => fm.title ++ " | " ++ titleCategory
+          | None => title
+          };
         <Meta title ?description ?canonical />;
       | Error(_) => React.null
       }
@@ -166,3 +173,92 @@ let make =
     children
   </SidebarLayout>;
 };
+
+module type StaticContent = {
+  /*let categories: array(SidebarLayout.Sidebar.Category.t);*/
+  let tocData: SidebarLayout.Toc.raw;
+};
+
+module Make = (Content: StaticContent) => {
+  [@react.component]
+  let make =
+      (
+        ~breadcrumbs: option(list(Url.breadcrumb))=?,
+        ~title: string,
+        ~metaTitleCategory: option(string)=?,
+        ~frontmatter: option(Js.Json.t)=?,
+        ~version: option(string)=?,
+        ~availableVersions: option(array(string))=?,
+        ~latestVersionLabel: option(string)=?,
+        /*~activeToc: option(SidebarLayout.Toc.t)=?,*/
+        ~components: option(Mdx.Components.t)=?,
+        ~theme: option(ColorTheme.t)=?,
+        ~children: React.element,
+      ) => {
+    let router = Next.Router.useRouter();
+    let route = router.route;
+
+    let activeToc: option(SidebarLayout.Toc.t) =
+      Belt.Option.(
+        Js.Dict.get(Content.tocData, route)
+        ->map(data => {
+            open SidebarLayout.Toc;
+            let title = data##title;
+            let entries =
+              Belt.Array.map(data##headers, header =>
+                {header: header##name, href: "#" ++ header##href}
+              );
+            {title, entries};
+          })
+      );
+
+    let categories = {
+      let groups =
+        Js.Dict.entries(Content.tocData)
+        ->Belt.Array.reduce(
+            Js.Dict.empty(),
+            (acc, next) => {
+              let (_, value) = next;
+              switch (Js.Nullable.toOption(value##category)) {
+              | Some(category) =>
+                switch (acc->Js.Dict.get(category)) {
+                | None => acc->Js.Dict.set(category, [|next|])
+                | Some(arr) =>
+                  Js.Array2.push(arr, next)->ignore;
+                  acc->Js.Dict.set(category, arr);
+                }
+              | None => 
+              Js.log2("has NO category", next);
+              ()
+              };
+              acc;
+            },
+          );
+      Js.Dict.entries(groups)
+      ->Belt.Array.map(((name, values)) => {
+          Category.{
+            name,
+            items:
+              Belt.Array.map(values, ((href, value)) => {
+                {NavItem.name: value##title, href}
+              }),
+          }
+        });
+    };
+
+    make({
+      "breadcrumbs": breadcrumbs,
+      "title": title,
+      "metaTitleCategory": metaTitleCategory,
+      "frontmatter": frontmatter,
+      "version": version,
+      "availableVersions": availableVersions,
+      "latestVersionLabel": latestVersionLabel,
+      "activeToc": activeToc,
+      "categories": categories,
+      "components": components,
+      "theme": theme,
+      "children": children,
+    });
+  };
+};

layouts/ManualDocsLayout.re

@@ -200,6 +200,7 @@ module Docs = {
       categories
       version
       title
+      metaTitleCategory="ReScript Language Manual"
       availableVersions=allManualVersions
       latestVersionLabel
       ?frontmatter

layouts/ManualDocsLayout8_0_0.re

@@ -220,6 +220,7 @@ module Docs = {
       latestVersionLabel=ManualDocsLayout.latestVersionLabel
       ?frontmatter
       title
+      metaTitleCategory="ReScript Language Manual"
       ?activeToc
       breadcrumbs>
       warnBanner

layouts/ReactDocsLayout.re

@@ -0,0 +1,69 @@
+module Link = Next.Link;
+
+module NavItem = SidebarLayout.Sidebar.NavItem;
+module Category = SidebarLayout.Sidebar.Category;
+module Toc = SidebarLayout.Toc;
+
+let overviewNavs = [|
+  {NavItem.name: "Introduction", href: "/docs/react/latest/introduction"},
+|];
+
+module CategoryDocsLayout =
+  // Structure defined by `scripts/extract-tocs.js`
+  DocsLayout.Make({
+    /*let categories = [|Category.{name: "Overview", items: overviewNavs}|];*/
+    let tocData: SidebarLayout.Toc.raw = [%raw
+      "require('../index_data/react_latest_toc.json')"
+    ];
+  });
+
+[@react.component]
+let make = (~frontmatter: option(Js.Json.t)=?, ~components=Markdown.default, ~children) => {
+  let router = Next.Router.useRouter();
+  let route = router.route;
+
+  let url = route->Url.parse;
+
+  let version =
+    switch (url.version) {
+    | Version(version) => version
+    | NoVersion => "latest"
+    | Latest => "latest"
+    };
+
+  let prefix = [
+    Url.{name: "Docs", href: "/docs/latest"},
+    Url.{
+      name: "ReasonReact",
+      href: "/docs/react/" ++ version ++ "/introduction",
+    },
+  ];
+
+  let breadcrumbs =
+    Belt.List.concat(
+      prefix,
+      DocsLayout.makeBreadcrumbs(
+        ~basePath="/docs/gentype/" ++ version,
+        route,
+      ),
+    );
+
+  let title = "ReasonReact";
+
+  let availableVersions = [|"latest"|];
+  let latestVersionLabel = "v0.9";
+  let version = "latest";
+
+  <CategoryDocsLayout
+    theme=`Reason
+    components
+    metaTitleCategory="React"
+    availableVersions
+    latestVersionLabel
+    version
+    title
+    breadcrumbs
+    ?frontmatter>
+    children
+  </CategoryDocsLayout>;
+};

layouts/SidebarLayout.re

@@ -8,6 +8,19 @@ open Util.ReactStuff;
 module Link = Next.Link;
 
 module Toc = {
+  type raw =
+    Js.Dict.t({
+      .
+      "title": string,
+      "category": Js.Nullable.t(string),
+      "headers":
+        array({
+          .
+          "name": string,
+          "href": string,
+        }),
+    });
+
   type entry = {
     header: string,
     href: string,
@@ -123,7 +136,6 @@ module Sidebar = {
     };
   };
 
-
   // subitems: list of functions inside given module (defined by route)
   [@react.component]
   let make =