Merge pull request #100 from reason-association/build-schema-fixes

Add link to visualize build-schema correctly, based on rescript-compi…

Author: bobzhang

.gitignore

@@ -14,6 +14,7 @@ node_modules/
 index_data/*.json
 !index_data/blog_authors.json
 !index_data/blog_posts.json
+!index_data/build-schema.json
 
 yarn-error.log
 

components/Docson.res

@@ -0,0 +1,46 @@
+/*
+Docson is a tool to render a json schema via client side JS.
+
+Here is a list of files needed by this component:
+- Build schema is found in index_data/build-schema.json
+- Templates for rendering the content can be found in public/static/docson/.
+- Styles can be found in styles/docson.css
+
+Please note that this component cannot be rendered on SSR, so use it in conjunction with
+Next's dynamic import mechanism.
+
+*/
+
+%%raw(`import "../styles/docson.css";`)
+
+type t
+
+@module("docson") external docson: t = "default"
+
+@set external setTemplateBaseUrl: (t, string) => unit = "templateBaseUrl"
+
+@module("docson") @scope("default")
+external doc: (string, Js.Json.t, option<string>, string) => unit = "doc"
+
+@module("../index_data/build-schema.json") external schema: Js.Json.t = "default"
+
+@react.component
+let make = () => {
+  let element = React.useRef(Js.Nullable.null)
+
+  React.useEffect0(() => {
+    let segment = "https://raw.githubusercontent.com/rescript-lang/rescript-compiler/master/docs/docson/build-schema.json"
+    switch element.current->Js.Nullable.toOption {
+    | Some(_el) =>
+      setTemplateBaseUrl(docson, "/static/docson")
+
+      // The api for docson is a little bit funky, so you need to check out the source to understand what it's doing
+      // See: https://github.com/lbovet/docson/blob/master/src/index.js
+      doc("docson-root", schema, None, segment)
+
+    | None => ()
+    }
+    None
+  })
+  <div ref={ReactDOMRe.Ref.domRef(element)} id="docson-root"> </div>
+}

components/Navigation.re

@@ -471,7 +471,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     [||],
   );
 
-  let fixedNav = fixed ? "fixed z-20 top-0" : "";
+  let fixedNav = fixed ? "fixed z-30 top-0" : "";
 
   <nav
     ref={ReactDOMRe.Ref.domRef(outerRef)}
@@ -587,7 +587,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
       style={Style.make(~minWidth, ~top="4.5rem", ())}
       className={
         (isOverlayOpen ? "flex" : "hidden")
-        ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-20 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"
+        ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-30 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"
       }>
       <MobileNav route />
     </div>