From 00b4c91f13f3bd434f168f21dd84c247ab9f54e5 Mon Sep 17 00:00:00 2001 From: kanishka-work <1385802+kanishka-work@users.noreply.github.com> Date: Wed, 23 Dec 2020 18:41:54 -0500 Subject: [PATCH] Factor Header into a separate component (#34) * break off navigation bar from the MainLayout component --- site/components/HeaderNavigation.js | 62 ++++++++++++++++++++++++++++ site/components/HeaderNavigation.res | 39 +++++++++++++++++ site/layouts/MainLayout.js | 59 +------------------------- site/layouts/MainLayout.res | 54 +++++------------------- 4 files changed, 113 insertions(+), 101 deletions(-) create mode 100644 site/components/HeaderNavigation.js create mode 100644 site/components/HeaderNavigation.res diff --git a/site/components/HeaderNavigation.js b/site/components/HeaderNavigation.js new file mode 100644 index 000000000..7ba50841a --- /dev/null +++ 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 new file mode 100644 index 000000000..aba2606cf --- /dev/null +++ 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; + ; +} diff --git a/site/layouts/MainLayout.js b/site/layouts/MainLayout.js index 71d8f5781..444b891e5 100644 --- 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 index dff6f1f35..1c11a3d61 100644 --- 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; - ; - } -}; - @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