Add scaffold for React doc pages & layout

Author: ryyppy

common/App.re

@@ -112,6 +112,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

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>;
+};

re_pages/DocsOverview.re

@@ -42,7 +42,8 @@ let default = (~showVersionSelect=true) => {
 
   let ecosystem = [|
     ("GenType", "/docs/gentype/latest/introduction"),
-    ("ReasonReact", "https://reasonml.github.io/reason-react"),
+    ("ReasonReact (official)", "https://reasonml.github.io/reason-react"),
+    ("ReasonReact (new docs WIP)", "/docs/react/latest/introduction"),
     ("Reanalyze", "https://github.com/reason-association/reanalyze"),
   |];
 
@@ -76,7 +77,6 @@ let default = (~showVersionSelect=true) => {
     };
 
   <>
-    <Meta title="Overview | ReScript Documentation" />
     <div>
       versionSelect
       <div className="mb-6" />

scripts/extract-tocs.js

@@ -143,6 +143,37 @@ const createV800ManualToc = () => {
   fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");
 };
 
+
+const createReactToc = () => {
+  const MD_DIR = path.join(__dirname, "../pages/docs/react/latest");
+  const TARGET_FILE = path.join(__dirname, "../index_data/react_latest_toc.json");
+
+  const FILE_ORDER = [
+    "introduction",
+    "installation",
+    "elements-and-jsx",
+    "rendering-elements",
+    "components-and-props",
+    "arrays-and-keys",
+    "refs-and-the-dom",
+    "hooks-overview",
+    "hooks-state",
+    "hooks-reducer",
+    "hooks-effect",
+    "hooks-context",
+    "hooks-ref",
+    "hooks-custom",
+  ];
+
+  const files = glob.sync(`${MD_DIR}/*.md?(x)`);
+  const ordered = orderFiles(files, FILE_ORDER);
+
+  const result = ordered.map(processFile);
+  const toc = createTOC(result);
+
+  fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");
+};
+
 const createGenTypeToc = () => {
   const MD_DIR = path.join(__dirname, "../pages/docs/gentype/latest");
   const TARGET_FILE = path.join(__dirname, "../index_data/gentype_toc.json");
@@ -184,5 +215,6 @@ debugToc();
 createLatestManualToc();
 createV800ManualToc();
 createReasonCompilerToc();
+createReactToc();
 createGenTypeToc();
 createCommunityToc();