Merge pull request #95 from reason-association/improve-layouting

Extracted infra changes from the new React docs working branch

Author: ryyppy

common/App.re

@@ -18,6 +18,7 @@
   let res = require('../plugins/res-syntax-highlightjs');
   let bash = require('highlight.js/lib/languages/bash');
   let json = require('highlight.js/lib/languages/json');
+  let html = require('highlight.js/lib/languages/xml');
   let ts = require('highlight.js/lib/languages/typescript');
   let text = require('highlight.js/lib/languages/plaintext');
   let diff = require('highlight.js/lib/languages/diff');
@@ -30,6 +31,7 @@
   hljs.registerLanguage('sh', bash);
   hljs.registerLanguage('json', json);
   hljs.registerLanguage('text', text);
+  hljs.registerLanguage('html', html);
   hljs.registerLanguage('diff', diff);
 |};
 
@@ -123,12 +125,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>;
     }
   };
 };

common/HighlightJs.re

@@ -25,9 +25,12 @@ let renderHLJS =
       Js.String2.split(highlighted, "\n")
       ->Belt.Array.mapWithIndex((i, line) =>
           if (Js.Array2.find(highlightedLines, lnum => lnum === i + 1) !== None) {
-            "<span class=\"hljs-line-highlight\">" ++ line ++ "</span>";
+            let content = line === "" ? "&nbsp;" : line;
+            "<span class=\"inline-block\">" ++ content ++ "</span>";
           } else {
-            line;
+            "<span class=\"inline-block text-inherit opacity-50\">"
+            ++ line
+            ++ "</span>";
           }
         )
       ->Js.Array2.joinWith("\n");
@@ -37,15 +40,8 @@ let renderHLJS =
 
   let dark = darkmode ? "dark" : "";
 
-  ReactDOMRe.createElementVariadic(
-    "code",
-    ~props=
-      ReactDOMRe.objToDOMProps({
-        "className": "hljs lang-" ++ lang ++ " " ++ dark,
-        "dangerouslySetInnerHTML": {
-          "__html": highlighted,
-        },
-      }),
-    [||],
-  );
+  <code
+    className={"hljs lang-" ++ lang ++ " " ++ dark}
+    dangerouslySetInnerHTML={"__html": highlighted}
+  />;
 };

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/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,
@@ -20,25 +33,16 @@ module Toc = {
 
   [@react.component]
   let make = (~entries: array(entry)) => {
-    let router = Next.Router.useRouter();
     <ul className="mt-2 py-1 mb-4 border-l border-primary">
-      {Belt.Array.map(
-         entries,
-         ({header, href}) => {
-           let isActive = router.pathname ++ href == router.asPath;
-           let activeClassName = isActive ? "text-fire" : "";
-           <li key=header className="pl-2 mt-3 first:mt-1">
-             <Link href>
-               <a
-                 className={
-                   "font-medium block text-sm text-night-light leading-tight tracking-tight hover:text-primary "
-                   ++ activeClassName
-                 }>
-                 header->s
-               </a>
-             </Link>
-           </li>;
-         },
+      {Belt.Array.map(entries, ({header, href}) =>
+         <li key=header className="pl-2 mt-3 first:mt-1">
+           <Link href>
+             <a
+               className="font-medium block text-sm text-night-light leading-tight tracking-tight hover:text-primary">
+               header->s
+             </a>
+           </Link>
+         </li>
        )
        ->ate}
     </ul>;
@@ -324,4 +328,4 @@ let make =
       </div>
     </div>
   </>;
-};
+};

package.json

@@ -27,7 +27,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "reason-promise": "^1.0.2",
-    "reason-react": "^0.7.0",
+    "reason-react": "^0.9.1",
     "remark-parse": "^7.0.1",
     "remark-slug": "^5.1.2",
     "remark-stringify": "^7.0.3",