Add scaffold for React doc pages & layout

Author: ryyppy

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

scripts/extract-tocs.js

@@ -179,6 +179,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 SIDEBAR_JSON = path.join(__dirname, "../data/sidebar_gentype_latest.json");
@@ -238,5 +269,6 @@ debugToc();
 createLatestManualToc();
 createV800ManualToc();
 createReasonCompilerToc();
+createReactToc();
 createGenTypeToc();
 createCommunityToc();