Make syntax highlighting work for signatures and examples

rescript-association · Oct 8, 2019 · 88a6471 · 88a6471
1 parent a61fc37
commit 88a6471
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 127 deletions.
diff --git a/components/CodeExample.bs.js b/components/CodeExample.bs.js
@@ -2,18 +2,25 @@
 
 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-main-black py-3 px-3 mt-10 overflow-x-auto"
+              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: "font-montserrat text-sm mb-3 font-bold text-primary-dark-10"
-                }, Util.ReactStuff.s(langStr)), React.createElement("div", {
-                  className: "pl-3 text-base pb-4"
+                }, Util.ReactStuff.s(lang.toUpperCase())), React.createElement("div", {
+                  className: "pl-5 text-base pb-4"
                 }, children));
 }
 

diff --git a/components/CodeExample.re b/components/CodeExample.re
@@ -1,21 +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-main-black py-3 px-3 mt-10 overflow-x-auto">
+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="font-montserrat text-sm mb-3 font-bold text-primary-dark-10">
-      langStr->s
-    </div>
-    <div className="pl-3 text-base pb-4">
-    children
+      {Js.String2.toUpperCase(lang)->s}
     </div>
+    <div className="pl-5 text-base pb-4"> children </div>
   </div>;
 };
diff --git a/components/CodeSignature.bs.js b/components/CodeSignature.bs.js
@@ -1,13 +1,18 @@
 
 
-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 CodeSignature(Props) {
-  var children = Props.children;
-  return React.createElement("div", {
-              className: "font-bold"
-            }, Util.ReactStuff.s(children));
+  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;
@@ -16,4 +21,4 @@ export {
   make ,
 
 }
-/* Util Not a pure module */
+/* ReactDOMRe Not a pure module */
diff --git a/components/CodeSignature.re b/components/CodeSignature.re
@@ -1,6 +1,18 @@
 open Util.ReactStuff;
 
 [@react.component]
-let make = (~children) => {
-  <div className="font-bold"> children->s </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,
+        },
+      }),
+    [||],
+  );
 };
diff --git a/components/Text.bs.js b/components/Text.bs.js
@@ -4,12 +4,9 @@ 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 CodeSignature from "./CodeSignature.bs.js";
-import * as Highlight from "highlight.js/lib/highlight";
 
 var inline = "no-underline border-b border-main-black hover:border-bs-purple text-inherit";
 
@@ -167,55 +164,27 @@ function Text$Md$Code(Props) {
   } else {
     lang = "re";
   }
-  var langClass = "lang-" + lang;
-  var baseClass = langClass + " font-mono block leading-tight";
+  var baseClass = "font-mono block leading-tight";
   var codeElement;
-  var exit = 0;
-  var exit$1 = 0;
-  switch (lang) {
-    case "re" :
-    case "reason" :
-        exit$1 = 2;
-        break;
-    default:
-      exit = 1;
-  }
-  if (exit$1 === 2) {
-    if (metastring !== undefined && metastring === "example") {
-      var highlighted = Highlight.highlight(lang, children).value;
-      var finalProps = Object.assign({
-            className: baseClass + " hljs"
-          }, {
-            dangerouslySetInnerHTML: {
-              __html: highlighted
-            }
-          });
-      codeElement = ReactDOMRe.createElementVariadic("code", Caml_option.some(finalProps), /* array */[]);
-    } else {
-      exit = 1;
-    }
-  }
-  if (exit === 1) {
-    codeElement = ReactDOMRe.createElementVariadic("code", {
-          className: baseClass
-        }, children);
-  }
   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 if (Belt_List.has(metaSplits, "sig", Caml_obj.caml_equal)) {
-      return React.createElement(CodeSignature.make, {
-                  children: children
-                });
-    } 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("code", undefined, Util.ReactStuff.ate(children))
+      );
   } else {
-    return codeElement;
+    codeElement = React.createElement("code", {
+          className: baseClass
+        }, Util.ReactStuff.ate(children));
   }
+  return React.createElement("div", {
+              className: baseClass
+            }, codeElement);
 }
 
 var Code = {

diff --git a/components/Text.re b/components/Text.re
@@ -140,59 +140,25 @@ module Md = {
           | _ => "none"
           }
         };
-      let langClass = "lang-" ++ lang;
 
-      let baseClass = langClass ++ " font-mono block leading-tight";
-
-      /* 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 baseClass = "font-mono block leading-tight";
       let codeElement =
-        switch (lang, metastring) {
-        | ("re", Some("example"))
-        | ("reason", Some("example")) =>
-          let highlighted =
-            HighlightJs.(
-              highlight(~lang, ~value=children->Obj.magic)->valueGet
-            );
-          let finalProps =
-            Js.Obj.assign(
-              {"className": baseClass ++ " hljs"},
-              {
-                "dangerouslySetInnerHTML": {
-                  "__html": highlighted,
-                },
-              },
-            );
-          ReactDOMRe.createElementVariadic(
-            "code",
-            ~props=ReactDOMRe.objToDOMProps(finalProps),
-            [||],
-          );
-        | _ =>
-          ReactDOMRe.createElementVariadic(
-            "code",
-            ~props=ReactDOMRe.objToDOMProps({"className": baseClass}),
-            children,
-          )
+        switch (metastring) {
+        | None => <code className=baseClass> children->ate </code>
+        | Some(metastring) =>
+          let metaSplits =
+            Js.String.split(" ", metastring)->Belt.List.fromArray;
+
+          if (Belt.List.has(metaSplits, "example", (==))) {
+            <CodeExample code={children->Obj.magic} lang />;
+          } else if (Belt.List.has(metaSplits, "sig", (==))) {
+            <CodeSignature code={children->Obj.magic} lang />;
+          } else {
+            <code> children->ate </code>;
+          };
         };
 
-      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 if (Belt.List.has(metaSplits, "sig", (==))) {
-          <CodeSignature> children->Obj.magic </CodeSignature>;
-        } else {
-          codeElement;
-        };
-      };
+      <div className=baseClass> codeElement </div>;
     };
   };
 

diff --git a/pages/belt_docs/list.mdx b/pages/belt_docs/list.mdx
@@ -534,6 +534,8 @@ let mapReverse2: (t('a), t('b), ('a, 'b) => 'c) => t('c);
 Equivalent to: `zipBy(xs, ys, f)->reverse`
 
 ```re example
+
+mapReverse2([1,3,4]);
 Belt.List.mapReverse2([1, 2, 3], [1, 2], (+)); /* [4, 2] */
 ````
 

diff --git a/styles/_hljs.css b/styles/_hljs.css
@@ -6,8 +6,6 @@ Docco style used in http://jashkenas.github.com/docco/ converted by Simon Madine
 .hljs {
   display: block;
   overflow-x: auto;
-  padding: 0.5em;
-  @apply text-lighter-grey;
   /*background: #f8f8ff;*/
 }