Merge pull request #49 from reason-association/design-update

Design update

bindings/Next.re

@@ -23,7 +23,7 @@ module Link = {
 };
 
 module Router = {
-  type router = {. "route": string};
+  type router = {. "route": string, "asPath": string};
 
   [@bs.module "next/router"] external useRouter: unit => router = "useRouter";
 };

common/Mdx.re

@@ -30,7 +30,7 @@ module Components = {
         .
         "className": option(string),
         "metastring": option(string),
-        "children": array(ReasonReact.reactElement),
+        "children": ReasonReact.reactElement,
       }),
     [@bs.optional]
     pre: React.component(props),

components/ApiIntro.bs.js

@@ -5,7 +5,7 @@ import * as React from "react";
 function ApiIntro(Props) {
   var children = Props.children;
   return React.createElement("div", {
-              className: "-ml-8 my-10"
+              className: "my-10"
             }, children);
 }
 

components/ApiIntro.re

@@ -1,4 +1,4 @@
 [@react.component]
 let make = (~children) => {
-  <div className="-ml-8 my-10"> children </div>;
+  <div className="my-10"> children </div>;
 };

components/CodeExample.bs.js

@@ -2,19 +2,26 @@
 
 import * as Util from "../common/Util.bs.js";
 import * as React from "react";
+import * as ReactDOMRe from "reason-react/src/ReactDOMRe.js";
+import * as Highlight from "highlight.js/lib/highlight";
 
 function CodeExample(Props) {
-  var children = Props.children;
-  var match = Props.lang;
-  var lang = match !== undefined ? match : /* Reason */825328612;
-  var langStr = lang >= 825328612 ? "RE" : "ML";
+  var code = Props.code;
+  var lang = Props.lang;
+  var highlighted = Highlight.highlight(lang, code).value;
+  var children = ReactDOMRe.createElementVariadic("code", {
+        className: "hljs lang-" + lang,
+        dangerouslySetInnerHTML: {
+          __html: highlighted
+        }
+      }, /* array */[]);
   return React.createElement("div", {
-              className: "flex flex-col rounded-lg bg-sand-lighten-20 py-4 px-6 mt-6"
+              className: "flex flex-col rounded-lg bg-main-black py-3 px-3 mt-10 overflow-x-auto text-lighter-grey"
             }, React.createElement("div", {
-                  className: "flex justify-between font-overpass text-main-lighten-20 font-bold text-sm mb-3"
-                }, Util.ReactStuff.s("Example"), React.createElement("span", {
-                      className: "font-montserrat text-primary-lighten-50"
-                    }, Util.ReactStuff.s(langStr))), children);
+                  className: "font-montserrat text-sm mb-3 font-bold text-primary-dark-10"
+                }, Util.ReactStuff.s(lang.toUpperCase())), React.createElement("div", {
+                  className: "pl-5 text-base pb-4"
+                }, children));
 }
 
 var make = CodeExample;

components/CodeExample.re

@@ -1,22 +1,28 @@
 open Util.ReactStuff;
 
-type lang = [ | `Reason | `OCaml];
-
 [@react.component]
-let make = (~children, ~lang=`Reason) => {
-  let langStr =
-    switch (lang) {
-    | `Reason => "RE"
-    | `OCaml => "ML"
-    };
-  <div className="flex flex-col rounded-lg bg-sand-lighten-20 py-4 px-6 mt-6">
+let make = (~code: string, ~lang) => {
+  let highlighted = HighlightJs.(highlight(~lang, ~value=code)->valueGet);
+
+  let children =
+    ReactDOMRe.createElementVariadic(
+      "code",
+      ~props=
+        ReactDOMRe.objToDOMProps({
+          "className": "hljs lang-" ++ lang,
+          "dangerouslySetInnerHTML": {
+            "__html": highlighted,
+          },
+        }),
+      [||],
+    );
+
+  <div
+    className="flex flex-col rounded-lg bg-main-black py-3 px-3 mt-10 overflow-x-auto text-lighter-grey">
     <div
-      className="flex justify-between font-overpass text-main-lighten-20 font-bold text-sm mb-3">
-      "Example"->s
-      <span className="font-montserrat text-primary-lighten-50">
-        langStr->s
-      </span>
+      className="font-montserrat text-sm mb-3 font-bold text-primary-dark-10">
+      {Js.String2.toUpperCase(lang)->s}
     </div>
-    children
+    <div className="pl-5 text-base pb-4"> children </div>
   </div>;
 };

components/CodeSignature.bs.js

@@ -1,9 +1,18 @@
 
 
-import * as React from "react";
+import * as ReactDOMRe from "reason-react/src/ReactDOMRe.js";
+import * as Highlight from "highlight.js/lib/highlight";
 
 function CodeSignature(Props) {
-  return React.createElement("div", undefined);
+  var code = Props.code;
+  var lang = Props.lang;
+  var highlighted = Highlight.highlight(lang, code).value;
+  return ReactDOMRe.createElementVariadic("code", {
+              className: "font-bold hljs lang-" + lang,
+              dangerouslySetInnerHTML: {
+                __html: highlighted
+              }
+            }, /* array */[]);
 }
 
 var make = CodeSignature;
@@ -12,4 +21,4 @@ export {
   make ,
 
 }
-/* react Not a pure module */
+/* ReactDOMRe Not a pure module */

components/CodeSignature.re

@@ -1,4 +1,18 @@
+open Util.ReactStuff;
+
 [@react.component]
-let make = () => {
-  <div />;
+let make = (~code, ~lang) => {
+  let highlighted = HighlightJs.(highlight(~lang, ~value=code)->valueGet);
+
+  ReactDOMRe.createElementVariadic(
+    "code",
+    ~props=
+      ReactDOMRe.objToDOMProps({
+        "className": "font-bold hljs lang-" ++ lang,
+        "dangerouslySetInnerHTML": {
+          "__html": highlighted,
+        },
+      }),
+    [||],
+  );
 };

components/Text.bs.js

@@ -4,13 +4,11 @@ import * as Util from "../common/Util.bs.js";
 import * as React from "react";
 import * as Caml_obj from "bs-platform/lib/es6/caml_obj.js";
 import * as Belt_List from "bs-platform/lib/es6/belt_List.js";
-import * as ReactDOMRe from "reason-react/src/ReactDOMRe.js";
-import * as Caml_option from "bs-platform/lib/es6/caml_option.js";
 import * as CodeExample from "./CodeExample.bs.js";
 import * as ReasonReact from "reason-react/src/ReasonReact.js";
-import * as Highlight from "highlight.js/lib/highlight";
+import * as CodeSignature from "./CodeSignature.bs.js";
 
-var inline = "no-underline border-b hover:text-main-lighten-20 hover:border-primary-dark-10 border-primary-lighten-50 text-inherit";
+var inline = "no-underline border-b border-main-black hover:border-bs-purple text-inherit";
 
 var Link = {
   inline: inline,
@@ -107,7 +105,7 @@ function Text$Overline(Props) {
   var match = Props.underline;
   var underline = match !== undefined ? match : false;
   var children = Props.children;
-  var className = "font-overpass font-bold text-main-lighten-50 uppercase text-xs mt-5 tracking-wide" + (
+  var className = "font-overpass font-black text-main-black text-xl mt-5" + (
     underline ? " pb-3 border-b border-main-lighten-90" : ""
   );
   return React.createElement("div", {
@@ -166,42 +164,30 @@ function Text$Md$Code(Props) {
   } else {
     lang = "re";
   }
-  var langClass = "lang-" + lang;
-  var base = {
-    className: langClass + " font-mono block overflow-x-scroll leading-tight hljs",
-    metastring: metastring
-  };
   var codeElement;
-  var exit = 0;
-  switch (lang) {
-    case "re" :
-    case "reason" :
-        exit = 1;
-        break;
-    default:
-      codeElement = ReactDOMRe.createElementVariadic("code", Caml_option.some(base), children);
-  }
-  if (exit === 1) {
-    var highlighted = Highlight.highlight(lang, children).value;
-    var finalProps = Object.assign(base, {
-          dangerouslySetInnerHTML: {
-            __html: highlighted
-          }
-        });
-    codeElement = ReactDOMRe.createElementVariadic("code", Caml_option.some(finalProps), /* array */[]);
-  }
   if (metastring !== undefined) {
     var metaSplits = Belt_List.fromArray(metastring.split(" "));
-    if (Belt_List.has(metaSplits, "example", Caml_obj.caml_equal)) {
-      return React.createElement(CodeExample.make, {
-                  children: codeElement
-                });
-    } else {
-      return codeElement;
-    }
+    codeElement = Belt_List.has(metaSplits, "example", Caml_obj.caml_equal) ? React.createElement(CodeExample.make, {
+            code: children,
+            lang: lang
+          }) : (
+        Belt_List.has(metaSplits, "sig", Caml_obj.caml_equal) ? React.createElement(CodeSignature.make, {
+                code: children,
+                lang: lang
+              }) : React.createElement(CodeExample.make, {
+                code: children,
+                lang: lang
+              })
+      );
   } else {
-    return codeElement;
+    codeElement = React.createElement(CodeExample.make, {
+          code: children,
+          lang: lang
+        });
   }
+  return React.createElement("div", {
+              className: "font-mono block leading-tight"
+            }, codeElement);
 }
 
 var Code = {
@@ -211,7 +197,7 @@ var Code = {
 function Text$Md$InlineCode(Props) {
   var children = Props.children;
   return React.createElement("code", {
-              className: "px-1 rounded-sm text-inherit font-mono bg-sand-lighten-20"
+              className: "px-1 rounded-sm text-inherit font-mono font-bold bg-yellow"
             }, children);
 }
 

components/Text.re

@@ -1,7 +1,7 @@
 open Util.ReactStuff;
 
 module Link = {
-  let inline = "no-underline border-b hover:text-main-lighten-20 hover:border-primary-dark-10 border-primary-lighten-50 text-inherit";
+  let inline = "no-underline border-b border-main-black hover:border-bs-purple text-inherit";
   let standalone = "no-underline text-primary";
 };
 
@@ -76,7 +76,7 @@ module Overline = {
   [@react.component]
   let make = (~underline=false, ~children) => {
     let className =
-      "font-overpass font-bold text-main-lighten-50 uppercase text-xs mt-5 tracking-wide"
+      "font-overpass font-black text-main-black text-xl mt-5"
       ++ (underline ? " pb-3 border-b border-main-lighten-90" : "");
 
     <div className> children </div>;
@@ -140,72 +140,39 @@ module Md = {
           | _ => "none"
           }
         };
-      let langClass = "lang-" ++ lang;
-      let base = {
-        "className":
-          langClass ++ " font-mono block overflow-x-scroll leading-tight hljs",
-        "metastring": metastring,
-      };
 
-      /* If there is a configured language for HLJS,
-         we use the highlight function to highlight the code,
-         which in this context is always a string parsed from
-         the markdown, otherwise we will just pass children down
-         without any modification */
+      let code = Unsafe.elementAsString(children);
+      let baseClass = "font-mono block leading-tight";
       let codeElement =
-        switch (lang) {
-        | "re"
-        | "reason" =>
-          let highlighted =
-            HighlightJs.(
-              highlight(~lang, ~value=children->Obj.magic)->valueGet
-            );
-          let finalProps =
-            Js.Obj.assign(
-              base,
-              {
-                "dangerouslySetInnerHTML": {
-                  "__html": highlighted,
-                },
-              },
-            );
-          ReactDOMRe.createElementVariadic(
-            "code",
-            ~props=ReactDOMRe.objToDOMProps(finalProps),
-            [||],
-          );
-        | _ =>
-          ReactDOMRe.createElementVariadic(
-            "code",
-            ~props=ReactDOMRe.objToDOMProps(base),
-            children,
-          )
+        switch (metastring) {
+        | None => <CodeExample code lang />
+        | Some(metastring) =>
+          let metaSplits =
+            Js.String.split(" ", metastring)->Belt.List.fromArray;
+
+          if (Belt.List.has(metaSplits, "example", (==))) {
+            <CodeExample code lang />;
+          } else if (Belt.List.has(metaSplits, "sig", (==))) {
+            <CodeSignature code lang />;
+          } else {
+            <CodeExample code lang />;
+          };
         };
 
-      switch (metastring) {
-      | None => codeElement
-      | Some(metastring) =>
-        let metaSplits =
-          Js.String.split(" ", metastring)->Belt.List.fromArray;
-
-        if (Belt.List.has(metaSplits, "example", (==))) {
-          <CodeExample> codeElement </CodeExample>;
-        } else {
-          codeElement;
-        };
-      };
+      <div className=baseClass> codeElement </div>;
     };
   };
 
   module InlineCode = {
     [@react.component]
     let make = (~children) => {
       <code
-        className="px-1 rounded-sm text-inherit font-mono bg-sand-lighten-20">
+        className="px-1 rounded-sm text-inherit font-mono font-bold bg-yellow">
         children
       </code>;
     };
   };
+
   module P = {
     [@react.component]
     let make = (~children) => {