Parameterize internal routes by lang

pages/[lang]/community/aroundweb.res

@@ -63,7 +63,7 @@ module T = {
     }
 
     @react.component
-    let make = (~content) =>
+    let make = (~content, ~lang) =>
       <SectionContainer.LargeCentered>
         <div className="relative bg-white">
           <div className="pt-12 h-56 sm:h-72 md:absolute md:left-0 md:h-full md:w-1/2">
@@ -110,7 +110,7 @@ module T = {
                 t={
                   CallToAction.title: content.title,
                   body: content.description,
-                  buttonLink: Route(InternalUrls.communityEvents),
+                  buttonLink: Route(#communityEvents, lang),
                   buttonText: content.callToAction,
                 }
               />
@@ -149,7 +149,7 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
+  let make = (~content, ~params as {Params.lang: lang}) => <>
     <ConstructionBanner
       figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=1040%3A104`
       playgroundLink=`/play/community/aroundweb`
@@ -169,7 +169,7 @@ module T = {
         marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}
       />
       <LatestNews content=content.latestNewsContent />
-      <Events content=content.events />
+      <Events content=content.events lang />
       <SectionContainer.LargeCentered
         paddingY="pt-16 pb-3 lg:pt-24 lg:pb-8" paddingX="px-4 sm:px-6 lg:px-8">
         <div className="text-center">

pages/[lang]/community/blog.res

@@ -33,31 +33,41 @@ module T = {
       goToNewsArchive: string,
     }
 
-    let toHighlightsInQuadrantsContent = t => {
-      HighlightsInQuadrants.title: t.otherNewsStories,
+    let toHighlightsInQuadrantsContent = (
+      {
+        otherNewsStories,
+        communityCategory,
+        releasesCategory,
+        industryCategory,
+        eventsCategory,
+        goToNewsArchive,
+      }: t,
+      lang,
+    ) => {
+      HighlightsInQuadrants.title: otherNewsStories,
       topLeftCategory: NewsCategory.toHighlightsCategory(
-        t.communityCategory,
-        InternalUrls.communityNewsarchive, // TODO: should we use a query parameter for the category?
+        communityCategory,
+        #communityNewsarchive->Route.toString(lang), // TODO: should we use a query parameter for the category?
         HighlightsInQuadrants.CategoryHeaderIcon.Meet,
       ),
       topRightCategory: NewsCategory.toHighlightsCategory(
-        t.releasesCategory,
-        InternalUrls.communityNewsarchive,
+        releasesCategory,
+        #communityNewsarchive->Route.toString(lang),
         HighlightsInQuadrants.CategoryHeaderIcon.Package,
       ),
       bottomLeftCategory: NewsCategory.toHighlightsCategory(
-        t.industryCategory,
-        InternalUrls.communityNewsarchive,
+        industryCategory,
+        #communityNewsarchive->Route.toString(lang),
         HighlightsInQuadrants.CategoryHeaderIcon.Profit,
       ),
       bottomRightCategory: NewsCategory.toHighlightsCategory(
-        t.eventsCategory,
-        InternalUrls.communityNewsarchive,
+        eventsCategory,
+        #communityNewsarchive->Route.toString(lang),
         HighlightsInQuadrants.CategoryHeaderIcon.Calendar,
       ),
       goToArchive: {
-        label: t.goToNewsArchive,
-        link: InternalUrls.communityNewsarchive,
+        label: goToNewsArchive,
+        link: #communityNewsarchive->Route.toString(lang),
       },
     }
   }
@@ -266,7 +276,7 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
+  let make = (~content, ~params as {Params.lang: lang}) => <>
     <ConstructionBanner
       figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=952%3A422`
       playgroundLink=`/play/community/blog`
@@ -276,7 +286,7 @@ module T = {
       pageDescription=content.pageDescription
       highlightContent=content.highlightContent>
       <HighlightsInQuadrants
-        t={CategorizedNews.toHighlightsInQuadrantsContent(content.categorizedNews)}
+        t={CategorizedNews.toHighlightsInQuadrantsContent(content.categorizedNews, lang)}
         marginBottom={Tailwind.ByBreakpoint.make(#mb10, ~lg=#mb32, ())}
       />
       <WeeklyNews marginBottom={Tailwind.ByBreakpoint.make(#mb4, ())} content=content.weeklyNews />

pages/[lang]/community/events.res

@@ -10,12 +10,12 @@ module T = {
   }
   include Jsonable.Unsafe
 
-  let dedicated_page = (event: Ood.Event.t) => {
+  let dedicatedPage = (event: Ood.Event.t) => {
     // OCaml workshop pages
     switch List.find_opt(String.equal("ocaml-workshop"), event.tags) {
     | Some(_) =>
       switch Js.Date.fromString(event.date)->Js.Date.getFullYear {
-      | 2020. => Some(InternalUrls.communityEventOud2020)
+      | 2020. => Some(#communityEventOud2020)
       | _ => None
       }
     | None => None
@@ -25,7 +25,7 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
+  let make = (~content, ~params as {Params.lang: lang}) => <>
     <ConstructionBanner
       figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=1176%3A0`
     />
@@ -36,9 +36,9 @@ module T = {
             headers: ["Date", "Event Name", "Location", "Description"],
             data: Array.map((event: Ood.Event.t) => [
               <p> {s(event.date |> Js.Date.fromString |> Js.Date.toDateString)} </p>,
-              switch dedicated_page(event) {
+              switch dedicatedPage(event) {
               | Some(page) =>
-                <Next.Link href={page}>
+                <Next.Link href={page->Route.toString(lang)}>
                   <a className="text-orangedark underline"> {s(event.title)} </a>
                 </Next.Link>
               | None => <p> {s(event.title)} </p>

pages/[lang]/index.res

@@ -52,7 +52,7 @@ module T = {
     }
 
     @react.component
-    let make = (~content) =>
+    let make = (~content, ~lang) =>
       <div className="lg:relative">
         <HeroTextContainer textAlign=`text-center lg:text-left`>
           <div className="px-4 lg:w-1/2 sm:px-8 xl:pr-16">
@@ -61,13 +61,13 @@ module T = {
             <div className="mt-10 sm:flex sm:justify-center lg:justify-start">
               <Button
                 colors=`text-white bg-orangedark hover:bg-orangedarker`
-                href=InternalUrls.resourcesInstallocaml
+                href={#resourcesInstallocaml->Route.toString(lang)}
                 text=content.installOcaml
                 margins=``
               />
               <Button
                 colors=`text-orangedark bg-white hover:bg-gray-50`
-                href=InternalUrls.principlesWhatisocaml
+                href={#principlesWhatisocaml->Route.toString(lang)}
                 text=content.aboutOcaml
                 margins=`mt-3 sm:mt-0 sm:ml-3`
               />
@@ -299,13 +299,16 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) =>
+  let make = (
+    ~content as {heroContent, statsContent, opamContent, testimonialContent},
+    ~params as {Params.lang: lang},
+  ) =>
     <Page.Unstructured>
-      <HeroSection content=content.heroContent />
-      <StatsSection content=content.statsContent />
-      <OpamSection content=content.opamContent margins=`mt-12 sm:mt-16` />
+      <HeroSection content=heroContent lang />
+      <StatsSection content=statsContent />
+      <OpamSection content=opamContent margins=`mt-12 sm:mt-16` />
       <TestimonialSection
-        content=content.testimonialContent
+        content=testimonialContent
         marginBottom={Tailwind.ByBreakpoint.make(#mb6, ~md=#mb4, ~lg=#mb6, ())}
       />
     </Page.Unstructured>

pages/[lang]/principles/academic.res

@@ -9,7 +9,7 @@ module T = {
   //PageBasicDetail Module
   module PageBasic = {
     @react.component
-    let make = () => <>
+    let make = (~lang) => <>
       <div
         className={"bg-acad-bg bg-center bg-no-repeat flex flex-wrap align-bottom sm:h-160 bg-cover "}>
         <div
@@ -36,7 +36,7 @@ module T = {
             </p>
             //CallToAction Button
             <div className="text-center mt-7">
-              <Link href=InternalUrls.principlesSuccesses>
+              <Link href={#principlesSuccesses->Route.toString(lang)}>
                 <a
                   className="justify-center inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-orangedark hover:bg-orangedarker focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orangedarker">
                   {s("Success Stories")}
@@ -148,8 +148,8 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
-    <PageBasic />
+  let make = (~content, ~params as {Params.lang: lang}) => <>
+    <PageBasic lang />
     <University marginBottom={Tailwind.ByBreakpoint.make(#mb10, ~lg=#mb32, ())} content />
     <Map marginBottom={Tailwind.ByBreakpoint.make(#mb10, ~lg=#mb32, ())} />
   </>

pages/[lang]/principles/users.res

@@ -101,7 +101,7 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
+  let make = (~content, ~params as {Params.lang: lang}) => <>
     <ConstructionBanner
       figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=430%3A36400`
       playgroundLink=`/play/industry/users`
@@ -112,7 +112,7 @@ module T = {
       pageDescription=content.pageDescription
       callToAction={
         TitleHeading.Large.label: "Success Stories",
-        url: InternalUrls.principlesSuccesses,
+        url: #principlesSuccesses->Route.toString(lang),
       }>
       <LogoSection companies=content.companies />
     </Page.Basic>

pages/[lang]/resources/applications.res

@@ -1,7 +1,5 @@
 open! Import
 
-module Link = Next.Link
-
 let s = React.string
 
 module T = {
@@ -146,7 +144,7 @@ module T = {
     }
 
     @react.component
-    let make = (~marginBottom=?, ~content) =>
+    let make = (~marginBottom=?, ~content, ~lang) =>
       // TODO: factor out and define content type
       <div
         className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++
@@ -199,10 +197,10 @@ module T = {
             </div>
           </div>
           <p className="text-right font-bold">
-            <Link href=InternalUrls.resourcesUsingocaml>
+            <Route _to={#resourcesUsingocaml} lang>
               // TODO: descriptive link text
               <a className="text-orangedark underline"> {s(content.seeMore ++ ` >`)} </a>
-            </Link>
+            </Route>
           </p>
         </div>
       </div>
@@ -219,7 +217,7 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
+  let make = (~content, ~params as {Params.lang: lang}) => <>
     <ConstructionBanner
       figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=745%3A1`
       playgroundLink=`/play/resources/applications`
@@ -239,12 +237,12 @@ module T = {
         t={
           CallToAction.title: "Platform Tools",
           body: `The OCaml Platform is a collection of tools that allow programmers to be productive in the OCaml language. It has been an iterative process of refinement as new tools are added and older tools are updated. Different tools accomplish different workflows and are used at different points of a project's life.`,
-          buttonLink: Route(InternalUrls.resourcesPlatform),
+          buttonLink: Route(#resourcesPlatform, lang),
           buttonText: `Visit Platform Tools`,
         }
       />
       <UsingOcaml
-        marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} content=content.usingOcamlContent
+        marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} content=content.usingOcamlContent lang
       />
     </Page.Basic>
   </>

pages/[lang]/resources/language.res

@@ -153,7 +153,7 @@ module T = {
 
   module Applications = {
     @react.component
-    let make = (~marginBottom=?) =>
+    let make = (~marginBottom=?, ~lang) =>
       <SectionContainer.VerySmallCentered ?marginBottom>
         <h2 className="text-center text-orangedark text-7xl font-bold mb-8">
           {s(`Applications`)}
@@ -164,9 +164,9 @@ module T = {
               {s(`Looking to learn more about the ways in which OCaml is used in real-world applications? Visit our Applications page to find out about different ways of using OCaml.`)}
             </p>
             <p className="text-right">
-              <a href=InternalUrls.resourcesApplications className="text-orangedark underline">
-                {s(`Go to Applications >`)}
-              </a>
+              <Route _to={#resourcesApplications} lang>
+                <a className="text-orangedark underline"> {s(`Go to Applications >`)} </a>
+              </Route>
             </p>
           </div>
           <div className="flex-shrink-0">
@@ -178,7 +178,7 @@ module T = {
 
   module Papers = {
     @react.component
-    let make = (~marginBottom=?, ()) =>
+    let make = (~marginBottom=?, ~lang, ()) =>
       // TODO: define content type and factor out content
       // TODO: use generic container
       <div
@@ -217,11 +217,12 @@ module T = {
             </div>
           </div>
           <div className="flex justify-center">
-            <a
-              href=InternalUrls.resourcesPapers
-              className="font-bold inline-flex items-center px-10 py-3 border border-transparent text-base leading-4 font-medium rounded-md shadow-sm text-white bg-orangedark hover:bg-orangedarker">
-              {s(`Go to Papers`)}
-            </a>
+            <Route _to={#resourcesPapers} lang>
+              <a
+                className="font-bold inline-flex items-center px-10 py-3 border border-transparent text-base leading-4 font-medium rounded-md shadow-sm text-white bg-orangedark hover:bg-orangedarker">
+                {s(`Go to Papers`)}
+              </a>
+            </Route>
           </div>
         </div>
       </div>
@@ -242,7 +243,7 @@ module T = {
   module Params = Pages.Params.Lang
 
   @react.component
-  let make = (~content, ~params as {Params.lang: _}) => <>
+  let make = (~content, ~params as {Params.lang: lang}) => <>
     <ConstructionBanner
       figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=1085%3A121`
       playgroundLink=`/play/resources/language`
@@ -263,9 +264,9 @@ module T = {
         <UserLevelIntroduction content=content.expanding marginBottom=introMarginBottom />
         <Manual marginBottom={Tailwind.ByBreakpoint.make(#mb20, ())} />
         <UserLevelIntroduction content=content.diversifying marginBottom=introMarginBottom />
-        <Applications marginBottom={Tailwind.ByBreakpoint.make(#mb36, ())} />
+        <Applications marginBottom={Tailwind.ByBreakpoint.make(#mb36, ())} lang />
         <UserLevelIntroduction content=content.researching marginBottom=introMarginBottom />
-        <Papers marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} />
+        <Papers marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} lang />
       </Page.Basic>
     }
   </>

src/CallToAction.res

@@ -1,14 +1,12 @@
-module Link = Next.Link
-
 let s = React.string
 
 // TODO: move this into a future Link component once the Url and Link types have been thought out
 module LinkUrl = {
-  type t = Route(string) | External(string)
+  type t = Route(Route.t, Lang.t) | External(string)
 
   let render = (~t, ~buttonText, ~styling) =>
     switch t {
-    | Route(url) => <Link href=url> <a className=styling> {s(buttonText)} </a> </Link>
+    | Route(_to, lang) => <Route _to lang> <a className=styling> {s(buttonText)} </a> </Route>
     | External(url) => <a href=url target="_blank" className=styling> {s(buttonText)} </a>
     }
 }

src/CallToAction.resi

@@ -1,5 +1,5 @@
 module LinkUrl: {
-  type t = Route(string) | External(string)
+  type t = Route(Route.t, Lang.t) | External(string)
 }
 
 type t = {