Factor Header into a separate component (ocaml#34)

* break off navigation bar from the MainLayout component
dra27 · Dec 23, 2020 · 00b4c91 · 00b4c91
1 parent 0c3ffce
commit 00b4c91
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 101 deletions.
diff --git a/site/components/HeaderNavigation.js b/site/components/HeaderNavigation.js
@@ -0,0 +1,62 @@
+
+
+import * as React from "react";
+import Link from "next/link";
+
+function HeaderNavigation(Props) {
+  var editpath = Props.editpath;
+  var editUrl = "https://github.com/ocaml/ocaml.org/edit/master/" + editpath;
+  return React.createElement("nav", {
+              className: "p-2 h-12 flex border-b border-gray-200 items-center text-sm"
+            }, React.createElement(Link, {
+                  href: "/",
+                  children: React.createElement("a", {
+                        className: "flex items-center w-1/3"
+                      }, null, React.createElement("span", {
+                            className: "text-xl ml-2 align-middle font-semibold text-ocamlorange"
+                          }, "OCaml"))
+                }), React.createElement("div", {
+                  className: "flex w-2/3 justify-end"
+                }, React.createElement(Link, {
+                      href: "/learn",
+                      children: React.createElement("a", {
+                            className: "px-3"
+                          }, "Learn")
+                    }), React.createElement(Link, {
+                      href: "/documentation",
+                      children: React.createElement("a", {
+                            className: "px-3"
+                          }, "Documentation")
+                    }), React.createElement("a", {
+                      className: "px-3 font-bold",
+                      href: "https://opam.ocaml.org",
+                      target: "_blank"
+                    }, "Packages"), React.createElement(Link, {
+                      href: "/community",
+                      children: React.createElement("a", {
+                            className: "px-3"
+                          }, "Community")
+                    }), React.createElement(Link, {
+                      href: "/news",
+                      children: React.createElement("a", {
+                            className: "px-3"
+                          }, "News")
+                    }), React.createElement("span", {
+                      className: "px-3"
+                    }, "Search"), React.createElement("a", {
+                      className: "px-3 font-bold",
+                      href: editUrl,
+                      target: "_blank"
+                    }, "Edit")));
+}
+
+var Link$1;
+
+var make = HeaderNavigation;
+
+export {
+  Link$1 as Link,
+  make ,
+
+}
+/* react Not a pure module */
diff --git a/site/components/HeaderNavigation.res b/site/components/HeaderNavigation.res
@@ -0,0 +1,39 @@
+module Link = Next.Link;
+
+@react.component
+let make = (~editpath) => {
+    let editUrl = "https://github.com/ocaml/ocaml.org/edit/master/" ++ editpath;
+    <nav
+      className="p-2 h-12 flex border-b border-gray-200 items-center text-sm">
+
+      <Link href="/">
+        <a className="flex items-center w-1/3">
+          {/* TODO: add ocaml logo */ React.null}
+          <span className="text-xl ml-2 align-middle font-semibold text-ocamlorange">
+          {React.string("OCaml")}
+          </span>
+        </a>
+      </Link>
+
+      <div className="flex w-2/3 justify-end">
+        <Link href="/learn"> <a className="px-3"> {React.string("Learn")} </a> </Link>
+        <Link href="/documentation"> <a className="px-3"> {React.string("Documentation")} </a> </Link>
+        <a 
+          className="px-3 font-bold"
+          target="_blank"
+          href="https://opam.ocaml.org">
+          {React.string("Packages")} 
+        </a>
+        <Link href="/community"> <a className="px-3"> {React.string("Community")} </a> </Link>
+        <Link href="/news"> <a className="px-3"> {React.string("News")} </a> </Link>
+        <span className="px-3"> {React.string("Search")} </span>
+        <a 
+          className="px-3 font-bold"
+          target="_blank"
+          href={editUrl}>
+          {React.string("Edit")}
+        </a>
+      </div>
+
+    </nav>;
+}
diff --git a/site/layouts/MainLayout.js b/site/layouts/MainLayout.js
@@ -1,58 +1,7 @@
 
 
 import * as React from "react";
-import Link from "next/link";
-
-function MainLayout$Navigation(Props) {
-  var editpath = Props.editpath;
-  var editUrl = "https://github.com/ocaml/ocaml.org/edit/master/" + editpath;
-  return React.createElement("nav", {
-              className: "p-2 h-12 flex border-b border-gray-200 justify-between items-center text-sm"
-            }, React.createElement(Link, {
-                  href: "/",
-                  children: React.createElement("a", {
-                        className: "flex items-center w-1/3"
-                      }, null, React.createElement("span", {
-                            className: "text-xl ml-2 align-middle font-semibold text-ocamlorange"
-                          }, "OCaml"))
-                }), React.createElement("div", {
-                  className: "flex w-2/3 justify-end"
-                }, React.createElement(Link, {
-                      href: "/learn",
-                      children: React.createElement("a", {
-                            className: "px-3"
-                          }, "Learn")
-                    }), React.createElement(Link, {
-                      href: "/documentation",
-                      children: React.createElement("a", {
-                            className: "px-3"
-                          }, "Documentation")
-                    }), React.createElement("a", {
-                      className: "px-3 font-bold",
-                      href: "https://opam.ocaml.org",
-                      target: "_blank"
-                    }, "Packages"), React.createElement(Link, {
-                      href: "/community",
-                      children: React.createElement("a", {
-                            className: "px-3"
-                          }, "Community")
-                    }), React.createElement(Link, {
-                      href: "/news",
-                      children: React.createElement("a", {
-                            className: "px-3"
-                          }, "News")
-                    }), React.createElement("span", {
-                      className: "px-3"
-                    }, "Search"), React.createElement("a", {
-                      className: "px-3 font-bold",
-                      href: editUrl,
-                      target: "_blank"
-                    }, "Edit")));
-}
-
-var Navigation = {
-  make: MainLayout$Navigation
-};
+import * as HeaderNavigation from "../components/HeaderNavigation.js";
 
 function MainLayout(Props) {
   var children = Props.children;
@@ -65,20 +14,16 @@ function MainLayout(Props) {
               style: minWidth
             }, React.createElement("div", {
                   className: "max-w-5xl w-full lg:w-3/4 text-gray-900 font-base"
-                }, React.createElement(MainLayout$Navigation, {
+                }, React.createElement(HeaderNavigation.make, {
                       editpath: editpath
                     }), React.createElement("main", {
                       className: "mt-4 mx-4"
                     }, children)));
 }
 
-var Link$1;
-
 var make = MainLayout;
 
 export {
-  Link$1 as Link,
-  Navigation ,
   make ,
 
 }

diff --git a/site/layouts/MainLayout.res b/site/layouts/MainLayout.res
@@ -1,51 +1,17 @@
-module Link = Next.Link;
-
-// Converting this file to rescript causes the stylesheets
-//  to fail to load. Need to troubleshoot further.
-module Navigation = {
-  @react.component
-  let make = (~editpath) => {
-    let editUrl = "https://github.com/ocaml/ocaml.org/edit/master/" ++ editpath;
-    <nav
-      className="p-2 h-12 flex border-b border-gray-200 justify-between items-center text-sm">
-      <Link href="/">
-        <a className="flex items-center w-1/3">
-          {/* TODO: add ocaml logo */ React.null}
-          <span className="text-xl ml-2 align-middle font-semibold text-ocamlorange">
-          {React.string("OCaml")}
-          </span>
-        </a>
-      </Link>
-      <div className="flex w-2/3 justify-end">
-        <Link href="/learn"> <a className="px-3"> {React.string("Learn")} </a> </Link>
-        <Link href="/documentation"> <a className="px-3"> {React.string("Documentation")} </a> </Link>
-        <a 
-          className="px-3 font-bold"
-          target="_blank"
-          href="https://opam.ocaml.org">
-          {React.string("Packages")} 
-        </a>
-        <Link href="/community"> <a className="px-3"> {React.string("Community")} </a> </Link>
-        <Link href="/news"> <a className="px-3"> {React.string("News")} </a> </Link>
-        <span className="px-3"> {React.string("Search")} </span>
-        <a 
-          className="px-3 font-bold"
-          target="_blank"
-          href={editUrl}>
-          {React.string("Edit")}
-        </a>
-      </div>
-    </nav>;
-  }
-};
-
 @react.component
 let make = (~children, ~editpath) => {
-  let minWidth = ReactDOMRe.Style.make(~minWidth="20rem", ());
+  let minWidth = ReactDOMRe.Style.make(~minWidth="20rem", ()); // TODO: replace w/tailwind class
   <div style=minWidth className="flex lg:justify-center">
+
     <div className="max-w-5xl w-full lg:w-3/4 text-gray-900 font-base">
-      <Navigation editpath={editpath} />
-      <main className="mt-4 mx-4"> children </main>
+
+      <HeaderNavigation editpath={editpath} />
+
+      <main className="mt-4 mx-4">
+        children 
+      </main>
+
     </div>
+
   </div>;
 };