Use Lang in GlobalData and MainLayout (ocaml#540)

Author: rdavison

src/App.res

@@ -17,6 +17,8 @@ type props = {"Component": PageComponent.t, "pageProps": pageProps}
 // We are not using `[@react.component]` since we will never
 // use <App/> within our Reason code. It's only used within `pages/_app.js`
 let make = (props: props): React.element => {
+  // TODO: Figure out how to get a lang value as a prop, or from the HTTP request
+  let lang = #en
   let component = props["Component"]
   let pageProps = props["pageProps"]
 
@@ -25,6 +27,6 @@ let make = (props: props): React.element => {
   let content = React.createElement(component, pageProps)
   // debug with: Js.log(router.route)
   switch router.route {
-  | _ => <MainLayout> content </MainLayout>
+  | _ => <MainLayout lang> content </MainLayout>
   }
 }

src/GlobalData.res

@@ -117,36 +117,53 @@ let navContentEn = {
   }
 }
 
-let headerContentEn: HeaderNavigation.content = {
-  principlesSection: {
-    header: navContentEn.principlesSection.header,
-    entries: [
-      navContentEn.principlesSection.whatIsOcaml,
-      navContentEn.principlesSection.industrialUsers,
-      navContentEn.principlesSection.academicExcellence,
-      navContentEn.principlesSection.successStories,
-    ],
-  },
-  resourcesSection: {
-    header: navContentEn.resourcesSection.header,
-    entries: [
-      navContentEn.resourcesSection.language,
-      navContentEn.resourcesSection.packages,
-      navContentEn.resourcesSection.applications,
-      navContentEn.resourcesSection.bestPractices,
-    ],
-  },
-  communitySection: {
-    header: navContentEn.communitySection.header,
-    entries: [
-      navContentEn.communitySection.opportunities,
-      navContentEn.communitySection.news,
-      navContentEn.communitySection.aroundTheWeb,
-      navContentEn.communitySection.archive,
-    ],
-  },
-  search: `Search ocaml.org`,
-  openMenu: `Open menu`,
+let navContent: Lang.t => navContent = lang => {
+  switch lang {
+  | #en => navContentEn
+  | (_: Lang.t) => navContentEn
+  }
+}
+
+let headerContent: Lang.t => HeaderNavigation.content = lang => {
+  let searchEn = `Search ocaml.org`
+  let openMenuEn = `Open menu`
+  {
+    principlesSection: {
+      header: navContentEn.principlesSection.header,
+      entries: [
+        navContent(lang).principlesSection.whatIsOcaml,
+        navContent(lang).principlesSection.industrialUsers,
+        navContent(lang).principlesSection.academicExcellence,
+        navContent(lang).principlesSection.successStories,
+      ],
+    },
+    resourcesSection: {
+      header: navContent(lang).resourcesSection.header,
+      entries: [
+        navContent(lang).resourcesSection.language,
+        navContent(lang).resourcesSection.packages,
+        navContent(lang).resourcesSection.applications,
+        navContent(lang).resourcesSection.bestPractices,
+      ],
+    },
+    communitySection: {
+      header: navContent(lang).communitySection.header,
+      entries: [
+        navContent(lang).communitySection.opportunities,
+        navContent(lang).communitySection.news,
+        navContent(lang).communitySection.aroundTheWeb,
+        navContent(lang).communitySection.archive,
+      ],
+    },
+    search: switch lang {
+    | #en => searchEn
+    | (_: Lang.t) => searchEn
+    },
+    openMenu: switch lang {
+    | #en => openMenuEn
+    | (_: Lang.t) => openMenuEn
+    },
+  }
 }
 
 let footerContentEn: Footer.t = {
@@ -301,3 +318,17 @@ let milestonesContentEn: Milestones.t = {
     },
   ],
 }
+
+let footerContent: Lang.t => Footer.t = lang => {
+  switch lang {
+  | #en => footerContentEn
+  | (_: Lang.t) => footerContentEn
+  }
+}
+
+let milestonesContent: Lang.t => Milestones.t = lang => {
+  switch lang {
+  | #en => milestonesContentEn
+  | (_: Lang.t) => milestonesContentEn
+  }
+}

src/GlobalData.resi

@@ -30,10 +30,10 @@ type navContent = {
   communitySection: communitySection,
 }
 
-let navContentEn: navContent
+let navContent: Lang.t => navContent
 
-let headerContentEn: HeaderNavigation.content
+let headerContent: Lang.t => HeaderNavigation.content
 
-let footerContentEn: Footer.t
+let footerContent: Lang.t => Footer.t
 
-let milestonesContentEn: Milestones.t
+let milestonesContent: Lang.t => Milestones.t

src/MainLayout.res

@@ -1,14 +1,16 @@
 open! Import
 
 @react.component
-let make = (~children) =>
+let make = (~lang, ~children) =>
   // TODO: change element to body, move to document.res
   <div className="bg-white">
-    <Milestones content=GlobalData.milestonesContentEn />
-    <div className="relative shadow"> <HeaderNavigation content=GlobalData.headerContentEn /> </div>
+    <Milestones content={GlobalData.milestonesContent(lang)} />
+    <div className="relative shadow">
+      <HeaderNavigation content={GlobalData.headerContent(lang)} />
+    </div>
     <main className="relative bg-graylight pb-1">
       // pb-1 is used to prevent margin-bottom from collapsing on last child
       children
     </main>
-    <div className="relative"> <Footer content=GlobalData.footerContentEn /> </div>
+    <div className="relative"> <Footer content={GlobalData.footerContent(lang)} /> </div>
   </div>

src/MainLayout.resi

@@ -1,4 +1,4 @@
 open! Import
 
 @react.component
-let make: (~children: React.element) => React.element
+let make: (~lang: Lang.t, ~children: React.element) => React.element