Adapt GenType & Community docs to new layout architecture

- Create sidebar files
- Also adds missing frontmatters

Author: ryyppy

data/sidebar_community.json

@@ -0,0 +1,6 @@
+{
+  "Resources": [
+    "overview",
+    "code-of-conduct"
+  ]
+}

data/sidebar_gentype_latest.json

@@ -0,0 +1,10 @@
+{
+  "Overview": [
+    "introduction",
+    "getting-started",
+    "usage"
+  ],
+  "Advanced": [
+    "supported-types"
+  ]
+}

next.config.js

@@ -28,7 +28,16 @@ const config = {
       }
     }
     return config
-  }
+  },
+  async redirects() {
+    return [
+      {
+        source: '/community',
+        destination: '/community/overview',
+        permanent: true,
+      },
+    ]
+  },
 };
 
 module.exports = withMdx(withTM(withCSS(config)));

pages/community/code-of-conduct.mdx

@@ -1,3 +1,9 @@
+---
+title: "Code of Conduct"
+description: "Our working codex for the ReScript community"
+canonical: "/community/code-of-conduct"
+---
+
 # Code of Conduct
 
 ## Our Pledge

pages/community.mdx renamed to pages/community/overview.mdx

@@ -1,3 +1,9 @@
+---
+title: "Overview"
+description: "Community Resources Overview"
+canonical: "/community/overview"
+---
+
 # Community
 
 ## Core Team

pages/docs/gentype/latest/getting-started.mdx

@@ -1,3 +1,9 @@
+---
+title: "Getting Started"
+description: "How to get started with genType in your ReScript projects"
+canonical: "/docs/gentype/latest/getting-started"
+---
+
 # Getting Started
 
 `genType` is tightly integrated in the ReScript Compiler. It only requires minimal setup.

pages/docs/gentype/latest/introduction.mdx

@@ -1,3 +1,9 @@
+---
+title: "Introduction"
+description: "GenType - Interoperability between ReScript and TypeScript / Flow"
+canonical: "/docs/gentype/latest/introduction"
+---
+
 # GenType
 
 `genType` is a code generation tool that lets you export ReScript values and types to use in JavaScript, and import JavaScript values and types into ReScript.

pages/docs/gentype/latest/supported-types.mdx

@@ -1,3 +1,9 @@
+---
+title: "Supported Types"
+description: "Supported types and value convertion in GenType"
+canonical: "/docs/gentype/latest/supported-types"
+---
+
 # Supported Types
 
 <Intro>

scripts/extract-tocs.js

@@ -181,21 +181,39 @@ const createV800ManualToc = () => {
 
 const createGenTypeToc = () => {
   const MD_DIR = path.join(__dirname, "../pages/docs/gentype/latest");
-  const TARGET_FILE = path.join(__dirname, "../index_data/gentype_toc.json");
+  const SIDEBAR_JSON = path.join(__dirname, "../data/sidebar_gentype_latest.json");
+  const TARGET_FILE = path.join(__dirname, "../index_data/gentype_latest_toc.json");
 
-  const files = glob.sync(`${MD_DIR}/*.md?(x)`);
-  const result = files.map(processFile);
+  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}/*.?(js|md?(x))`);
+  const ordered = orderFiles(files, FILE_ORDER);
+
+  const result = ordered.map((filepath) => processFile(filepath, sidebarJson));
   const toc = createTOC(result);
 
   fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");
 };
 
 const createCommunityToc = () => {
   const MD_DIR = path.join(__dirname, "../pages/community");
+  const SIDEBAR_JSON = path.join(__dirname, "../data/sidebar_community.json");
   const TARGET_FILE = path.join(__dirname, "../index_data/community_toc.json");
 
-  const files = glob.sync(`${MD_DIR}/*.md?(x)`);
-  const result = files.map(processFile);
+  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}/*.?(js|md?(x))`);
+  const ordered = orderFiles(files, FILE_ORDER);
+
+  const result = ordered.map((filepath) => processFile(filepath, sidebarJson));
   const toc = createTOC(result);
 
   fs.writeFileSync(TARGET_FILE, JSON.stringify(toc), "utf8");

src/common/App.js

@@ -6,8 +6,7 @@
 // https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/
 
 // Register all the highlightjs stuff for the whole application
-%%raw(
-  `
+%%raw(`
   let hljs = require('highlight.js/lib/highlight');
   let js = require('highlight.js/lib/languages/javascript');
   let ocaml = require('highlight.js/lib/languages/ocaml');
@@ -29,8 +28,7 @@
   hljs.registerLanguage('text', text);
   hljs.registerLanguage('html', html);
   hljs.registerLanguage('diff', diff);
-`
-)
+`)
 
 type pageComponent = React.component<{.}>
 type pageProps = {.}
@@ -96,11 +94,13 @@ let make = (props: props): React.element => {
     }
   | {base: ["docs", "reason-compiler"], version: Latest} =>
     <ReasonCompilerDocsLayout> content </ReasonCompilerDocsLayout>
-  | {base: ["docs", "gentype"], version: Latest} => <GenTypeDocsLayout> content </GenTypeDocsLayout>
+  | {base: ["docs", "gentype"], version: Latest} =>
+    <GenTypeDocsLayout frontmatter={component->frontmatter}> content </GenTypeDocsLayout>
   // common routes
   | {base} =>
     switch Belt.List.fromArray(base) {
-    | list{"community", ..._rest} => <CommunityLayout> content </CommunityLayout>
+    | list{"community", ..._rest} =>
+      <CommunityLayout frontmatter={component->frontmatter}> content </CommunityLayout>
     | list{"try"} => content
     | list{"blog"} => content // Blog implements its own layout as well
     | list{"packages"} => content

src/common/App.res

@@ -1,70 +1,16 @@
-// Structure defined by `scripts/extract-tocs.js`
-let tocData: Js.Dict.t<{
-  "title": string,
-  "headers": array<{
-    "name": string,
-    "href": string,
-  }>,
-}> = %raw("require('index_data/community_toc.json')")
-
-module NavItem = SidebarLayout.Sidebar.NavItem
-module Category = SidebarLayout.Sidebar.Category
-module Toc = SidebarLayout.Toc
-
-let overviewNavs = [
-  {
-    open NavItem
-    {name: "Overview", href: "/community"}
-  },
-  {name: "Code of Conduct", href: "/community/code-of-conduct"},
-  /* {name: "Events & Meetups", href: "/community/events"}, */
-  /* {name: "Articles & Videos", href: "/community/articles-and-videos"}, */
-  /* {name: "Get involved", href: "/community/get-involved"}, */
-]
-
-let categories = [
-  {
-    open Category
-    {name: "Resources", items: overviewNavs}
-  },
-]
+module CommunityLayout = DocsLayout.Make({
+  // Structure defined by `scripts/extract-tocs.js`
+  let tocData: SidebarLayout.Toc.raw = %raw("require('index_data/community_toc.json')")
+})
 
 @react.component
-let make = (~components=Markdown.default, ~children) => {
-  let router = Next.Router.useRouter()
-  let route = router.route
-
-  let activeToc: option<Toc.t> = {
-    open Belt.Option
-    Js.Dict.get(tocData, route)->map(data => {
-      let title = data["title"]
-      let entries = Belt.Array.map(data["headers"], header => {
-        Toc.header: header["name"],
-        href: "#" ++ header["href"],
-      })
-      {Toc.title: title, entries: entries}
-    })
-  }
-
-  let url = Url.parse(route)
-
-  let breadcrumbs = if route === "/community" {
-    open Url
-    list{{name: "Community", href: "/community"}, {name: "Overview", href: ""}}
-  } else {
-    DocsLayout.makeBreadcrumbsFromPaths(~basePath="", url.base)
-  }
+let make = (~frontmatter: option<Js.Json.t>=?, ~components=Markdown.default, ~children) => {
+  let breadcrumbs = list{{Url.name: "Community", href: "/community"}}
 
   let title = "Community"
 
-  <DocsLayout
-    theme=#Reason
-    components
-    metaTitleCategory="ReScript Documentation"
-    categories
-    title
-    ?activeToc
-    breadcrumbs>
+  <CommunityLayout
+    theme=#Reason components metaTitleCategory="ReScript Community" title breadcrumbs ?frontmatter>
     children
-  </DocsLayout>
+  </CommunityLayout>
 }

src/layouts/CommunityLayout.js

@@ -1,2 +1,6 @@
 @react.component
-let make: (~components: Mdx.Components.t=?, ~children: React.element) => React.element
+let make: (
+  ~frontmatter: Js.Json.t=?,
+  ~components: Mdx.Components.t=?,
+  ~children: React.element,
+) => React.element