Fix sidebar

ryyppy · ryyppy · commit f52de034d23d · 2021-01-27T19:05:17.000+01:00
diff --git a/data/sidebar_react_latest.json b/data/sidebar_react_latest.json
@@ -0,0 +1,27 @@
+{
+  "Overview": [
+    "introduction",
+    "installation"
+  ],
+  "Main Concepts": [
+    "elements-and-jsx",
+    "rendering-elements",
+    "components-and-props",
+    "arrays-and-keys",
+    "refs-and-the-dom",
+    "context"
+  ],
+  "Hooks & State Management": [
+    "hooks-overview",
+    "hooks-effect",
+    "hooks-state",
+    "hooks-reducer",
+    "hooks-context",
+    "hooks-ref",
+    "hooks-custom"
+  ],
+  "Guides": [
+    "beyond-jsx",
+    "forwarding-refs"
+  ]
+}
diff --git a/layouts/ReactDocsLayout.re b/layouts/ReactDocsLayout.re
diff --git a/pages/docs/react/latest/arrays-and-keys.mdx b/pages/docs/react/latest/arrays-and-keys.mdx
@@ -2,7 +2,6 @@
 title: Arrays and Keys
 description: "Rendering arrays and handling keys in ReScript and React"
 canonical: "/docs/react/latest/arrays-and-keys"
-category: "Main Concepts"
 ---
 
 # Arrays and Keys
diff --git a/pages/docs/react/latest/beyond-jsx.mdx b/pages/docs/react/latest/beyond-jsx.mdx
@@ -2,7 +2,6 @@
 title: Beyond JSX
 description: "Details on how to use ReScript and React without JSX"
 canonical: "/docs/react/latest/beyond-jsx"
-category: "Guides"
 ---
 
 # Beyond JSX
diff --git a/pages/docs/react/latest/components-and-props.mdx b/pages/docs/react/latest/components-and-props.mdx
@@ -2,7 +2,6 @@
 title: Components and Props
 description: "Basic concepts for components and props in ReasonReact"
 canonical: "/docs/react/latest/components-and-props"
-category: "Main Concepts"
 ---
 
 # Components and Props
diff --git a/pages/docs/react/latest/context.mdx b/pages/docs/react/latest/context.mdx
@@ -2,7 +2,6 @@
 title: Context
 description: "Details about Context in ReScript and React"
 canonical: "/docs/react/latest/context"
-category: "Main Concepts"
 ---
 
 # Context
diff --git a/pages/docs/react/latest/elements-and-jsx.mdx b/pages/docs/react/latest/elements-and-jsx.mdx
@@ -2,7 +2,6 @@
 title: Elements & JSX
 description: "Basic concepts for React elements and how to use them in JSX"
 canonical: "/docs/react/latest/elements-and-jsx"
-category: "Main Concepts"
 ---
 
 # Elements & JSX
diff --git a/pages/docs/react/latest/forwarding-refs.mdx b/pages/docs/react/latest/forwarding-refs.mdx
@@ -2,7 +2,6 @@
 title: Forwarding Refs 
 description: "Forwarding Ref values in ReScript and React"
 canonical: "/docs/react/latest/forwarding-refs"
-category: "Guides"
 ---
 
 # Forwarding Refs
diff --git a/pages/docs/react/latest/hooks-context.mdx b/pages/docs/react/latest/hooks-context.mdx
@@ -2,7 +2,6 @@
 title: useContext Hook
 description: "Details about the useContext React hook in ReScript"
 canonical: "/docs/react/latest/hooks-context"
-category: "Hooks & State Management"
 ---
 
 # useContext
diff --git a/pages/docs/react/latest/hooks-custom.mdx b/pages/docs/react/latest/hooks-custom.mdx
@@ -2,7 +2,6 @@
 title: Build A Custom Hook
 description: "How to build your own hooks in ReScript & React"
 canonical: "/docs/react/latest/hooks-custom"
-category: "Hooks & State Management"
 ---
 
 # Build A Custom Hook
diff --git a/pages/docs/react/latest/hooks-effect.mdx b/pages/docs/react/latest/hooks-effect.mdx
@@ -2,7 +2,6 @@
 title: useEffect Hook
 description: "Details about the useEffect React hook in ReScript"
 canonical: "/docs/react/latest/hooks-effect"
-category: "Hooks & State Management"
 ---
 
 # useEffect
diff --git a/pages/docs/react/latest/hooks-overview.mdx b/pages/docs/react/latest/hooks-overview.mdx
@@ -2,7 +2,6 @@
 title: Hooks & State Management Overview
 description: "Overview state management and hooks in ReScript and React"
 canonical: "/docs/react/latest/hooks-overview"
-category: "Hooks & State Management"
 ---
 
 # Hooks Overview
diff --git a/pages/docs/react/latest/hooks-reducer.mdx b/pages/docs/react/latest/hooks-reducer.mdx
@@ -2,7 +2,6 @@
 title: useReducer Hook
 description: "Details about the useReducer React hook in ReScript"
 canonical: "/docs/react/latest/hooks-reducer"
-category: "Hooks & State Management"
 ---
 
 # useReducer
diff --git a/pages/docs/react/latest/hooks-ref.mdx b/pages/docs/react/latest/hooks-ref.mdx
@@ -2,7 +2,6 @@
 title: useRef Hook
 description: "Details about the useRef React hook in ReScript"
 canonical: "/docs/react/latest/hooks-ref"
-category: "Hooks & State Management"
 ---
 
 # useRef
diff --git a/pages/docs/react/latest/hooks-state.mdx b/pages/docs/react/latest/hooks-state.mdx
@@ -2,7 +2,6 @@
 title: useState Hook
 description: "Details about the useState React hook in ReScript"
 canonical: "/docs/react/latest/hooks-state"
-category: "Hooks & State Management"
 ---
 
 # useState
diff --git a/pages/docs/react/latest/installation.mdx b/pages/docs/react/latest/installation.mdx
@@ -2,7 +2,6 @@
 title: Installation
 description: "Installation and Setup"
 canonical: "/docs/react/latest/installation"
-category: Overview
 ---
 
 # Installation
diff --git a/pages/docs/react/latest/introduction.mdx b/pages/docs/react/latest/introduction.mdx
@@ -2,7 +2,6 @@
 title: Introduction
 description: "Introduction to ReScript & ReactJS"
 canonical: "/docs/react/latest/introduction"
-category: Overview
 ---
 
 # Introduction
diff --git a/pages/docs/react/latest/refs-and-the-dom.mdx b/pages/docs/react/latest/refs-and-the-dom.mdx
@@ -2,7 +2,6 @@
 title: Refs and the DOM
 description: "Using Refs and DOM elements in ReScript and React"
 canonical: "/docs/react/latest/refs-and-the-dom"
-category: "Main Concepts"
 ---
 
 # Refs and the DOM
diff --git a/pages/docs/react/latest/rendering-elements.mdx b/pages/docs/react/latest/rendering-elements.mdx
@@ -2,7 +2,6 @@
 title: Rendering Elements
 description: "How to render React elements to the DOM"
 canonical: "/docs/react/latest/rendering-elements"
-category: "Main Concepts"
 ---
 
 # Rendering Elements
diff --git a/scripts/extract-tocs.js b/scripts/extract-tocs.js
@@ -182,29 +182,19 @@ const createV800ManualToc = () => {
 
 const createReactToc = () => {
   const MD_DIR = path.join(__dirname, "../pages/docs/react/latest");
+  const SIDEBAR_JSON = path.join(__dirname, "../data/sidebar_react_latest.json");
   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 sidebarJson = JSON.parse(fs.readFileSync(SIDEBAR_JSON));
+
+  const FILE_ORDER = Object.values(sidebarJson).reduce((acc, items) => {
+    return acc.concat(items)
+  },[]);
 
   const files = glob.sync(`${MD_DIR}/*.md?(x)`);
   const ordered = orderFiles(files, FILE_ORDER);
 
-  const result = ordered.map(processFile);
+  const result = ordered.map((filepath) => processFile(filepath, sidebarJson));
   const toc = createTOC(result);
 
   fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");
diff --git a/src/DocsOverview.js b/src/DocsOverview.js
diff --git a/src/DocsOverview.res b/src/DocsOverview.res
@@ -36,7 +36,7 @@ let default = (~showVersionSelect=true) => {
   let ecosystem = [
     ("Package Index", "/packages"),
     ("GenType", "/docs/gentype/latest/introduction"),
-    ("ReasonReact", "https://reasonml.github.io/reason-react"),
+    ("rescript-react", "/docs/react/latest/introduction"),
     ("Reanalyze", "https://github.com/reason-association/reanalyze"),
   ]
   let tools = [("Syntax Lookup", "/syntax-lookup")]
diff --git a/src/common/App.js b/src/common/App.js
diff --git a/src/common/App.res b/src/common/App.res
@@ -92,6 +92,8 @@ let make = (props: props): React.element => {
       | _ => React.null
       }
     }
+  | {base: ["docs", "react"], version: Latest} =>
+    <ReactDocsLayout frontmatter={component->frontmatter}> content </ReactDocsLayout>
   | {base: ["docs", "reason-compiler"], version: Latest} =>
     <ReasonCompilerDocsLayout> content </ReasonCompilerDocsLayout>
   | {base: ["docs", "gentype"], version: Latest} =>
diff --git a/src/layouts/ReactDocsLayout.js b/src/layouts/ReactDocsLayout.js
diff --git a/src/layouts/ReactDocsLayout.res b/src/layouts/ReactDocsLayout.res
