From 1c841a2147909eb380a2d41c22de323cc4cdfe27 Mon Sep 17 00:00:00 2001 From: kanishka-work <1385802+kanishka-work@users.noreply.github.com> Date: Wed, 3 Feb 2021 16:49:05 -0500 Subject: [PATCH 1/3] Update MainLayout.res --- layouts/MainLayout.res | 1 + 1 file changed, 1 insertion(+) diff --git a/layouts/MainLayout.res b/layouts/MainLayout.res index 4c5674f5..b939dba5 100644 --- a/layouts/MainLayout.res +++ b/layouts/MainLayout.res @@ -2,6 +2,7 @@ let make = (~children /*, ~editpath */ ) =>
{ /* TODO: change element to body, move to document.res */ React.null }
+ { /* */ React.null }
From 9ef9095741a955a26c77c58a0063a1890118248e Mon Sep 17 00:00:00 2001 From: Kanishka Azimi Date: Wed, 3 Feb 2021 17:16:01 -0500 Subject: [PATCH 2/3] Minimal header added --- components/HeaderNavigation.js | 140 ++++++++++++++++++++------------ components/HeaderNavigation.res | 83 +++++++++++-------- layouts/MainLayout.js | 3 +- layouts/MainLayout.res | 3 +- 4 files changed, 142 insertions(+), 87 deletions(-) diff --git a/components/HeaderNavigation.js b/components/HeaderNavigation.js index d3e09a75..39cdc680 100644 --- a/components/HeaderNavigation.js +++ b/components/HeaderNavigation.js @@ -1,64 +1,104 @@ // Generated by ReScript, PLEASE EDIT WITH CARE import * as React from "react"; -import Link from "next/link"; +import * as Caml_option from "bs-platform/lib/es6/caml_option.js"; + +function s(prim) { + return prim; +} + +var contentEn = { + industry: "Industry", + resources: "Resources", + community: "Community", + search: "Search", + openMenu: "Open menu" +}; function HeaderNavigation(Props) { - var editpath = Props.editpath; - var editUrl = "https://github.com/ocaml/ocaml.org/edit/master/" + editpath; - return React.createElement("nav", { - "aria-label": "Main", - className: "p-2 h-12 flex border-b border-gray-200 items-center text-sm", - role: "navigation" - }, 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", - role: "search" - }, "Search"), React.createElement("a", { - className: "px-3 font-bold", - href: editUrl, - target: "_blank" - }, "Edit"))); + var contentOpt = Props.content; + var content = contentOpt !== undefined ? Caml_option.valFromOption(contentOpt) : contentEn; + return React.createElement("div", { + className: "max-w-7xl mx-auto px-4 sm:px-6" + }, React.createElement("div", { + className: "flex justify-between items-center md:justify-start py-6 md:space-x-10 " + }, React.createElement("div", { + className: "flex justify-start " + }, React.createElement("a", { + className: "bg-blue-100", + href: "/" + }, React.createElement("img", { + className: "h-8 w-auto sm:h-10", + alt: "", + src: "https://kanishka.codeberg.page/logo1.jpeg" + }))), React.createElement("nav", { + className: "hidden md:flex space-x-10 " + }, React.createElement("a", { + className: "text-base font-medium text-gray-500 hover:text-gray-900", + href: "/play/industry" + }, content.industry), React.createElement("a", { + className: "text-base font-medium text-gray-500 hover:text-gray-900", + href: "/play/resources" + }, content.resources), React.createElement("a", { + className: "text-base font-medium text-gray-500 hover:text-gray-900", + href: "/play/community" + }, content.community)), React.createElement("div", { + className: "flex-1 flex items-center justify-center px-2 md:justify-end " + }, React.createElement("div", { + className: "max-w-lg w-full md:max-w-xs" + }, React.createElement("label", { + className: "sr-only", + htmlFor: "search" + }, content.search), React.createElement("div", { + className: "relative" + }, React.createElement("div", { + className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none" + }, React.createElement("svg", { + "aria-hidden": true, + className: "h-5 w-5 text-gray-400", + fill: "currentColor", + viewBox: "0 0 20 20", + xmlns: "http://www.w3.org/2000/svg" + }, React.createElement("path", { + clipRule: "evenodd", + d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", + fillRule: "evenodd" + }))), React.createElement("input", { + className: "block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-orangedark focus:border-orangedarker sm:text-sm", + id: "search", + name: "search", + placeholder: content.search, + type: "search" + })))), React.createElement("div", { + className: "-mr-2 -my-2 md:hidden " + }, React.createElement("button", { + className: "bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500", + type: "button" + }, React.createElement("span", { + className: "sr-only" + }, content.openMenu), React.createElement("svg", { + "aria-hidden": true, + className: "h-6 w-6", + fill: "none", + stroke: "currentColor", + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" + }, React.createElement("path", { + d: "M4 6h16M4 12h16M4 18h16", + strokeLinecap: "round", + strokeLinejoin: "round", + strokeWidth: "2" + })))))); } -var Link$1; +var Link; var make = HeaderNavigation; export { - Link$1 as Link, + Link , + s , + contentEn , make , } diff --git a/components/HeaderNavigation.res b/components/HeaderNavigation.res index a8b34a60..8ac41335 100644 --- a/components/HeaderNavigation.res +++ b/components/HeaderNavigation.res @@ -1,41 +1,56 @@ module Link = Next.Link; -@react.component -let make = (~editpath) => { - let editUrl = "https://github.com/ocaml/ocaml.org/edit/master/" ++ editpath; - ; -} +
+ diff --git a/layouts/MainLayout.js b/layouts/MainLayout.js index e19d5594..1985ef78 100644 --- a/layouts/MainLayout.js +++ b/layouts/MainLayout.js @@ -2,6 +2,7 @@ import * as React from "react"; import * as Footer$Ocamlorg from "../components/Footer.js"; +import * as HeaderNavigation$Ocamlorg from "../components/HeaderNavigation.js"; function MainLayout(Props) { var children = Props.children; @@ -9,7 +10,7 @@ function MainLayout(Props) { className: "bg-white" }, null, React.createElement("div", { className: "relative shadow" - }, null), React.createElement("main", { + }, React.createElement(HeaderNavigation$Ocamlorg.make, {})), React.createElement("main", { className: "relative bg-graylight" }, children), React.createElement("div", { className: "relative" diff --git a/layouts/MainLayout.res b/layouts/MainLayout.res index b939dba5..b0c1f966 100644 --- a/layouts/MainLayout.res +++ b/layouts/MainLayout.res @@ -2,8 +2,7 @@ let make = (~children /*, ~editpath */ ) =>
{ /* TODO: change element to body, move to document.res */ React.null }
- - { /* */ React.null } +
children From 758cfef93177a02c343f183eb118fa23c1e1a148 Mon Sep 17 00:00:00 2001 From: Kanishka Azimi Date: Wed, 3 Feb 2021 17:19:02 -0500 Subject: [PATCH 3/3] Add logo image --- components/HeaderNavigation.js | 2 +- components/HeaderNavigation.res | 2 +- public/static/logo1.jpeg | Bin 0 -> 107566 bytes 3 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 public/static/logo1.jpeg diff --git a/components/HeaderNavigation.js b/components/HeaderNavigation.js index 39cdc680..0d6b8bb6 100644 --- a/components/HeaderNavigation.js +++ b/components/HeaderNavigation.js @@ -30,7 +30,7 @@ function HeaderNavigation(Props) { }, React.createElement("img", { className: "h-8 w-auto sm:h-10", alt: "", - src: "https://kanishka.codeberg.page/logo1.jpeg" + src: "/static/logo1.jpeg" }))), React.createElement("nav", { className: "hidden md:flex space-x-10 " }, React.createElement("a", { diff --git a/components/HeaderNavigation.res b/components/HeaderNavigation.res index 8ac41335..042dbe67 100644 --- a/components/HeaderNavigation.res +++ b/components/HeaderNavigation.res @@ -17,7 +17,7 @@ let make = (~content=contentEn) =>
- +