Start modeling Tailwind Margin utility classes (ocaml#367)

* model the margin bottom parameter * remove webpack fs shim, not needed now
EmileTrotignon · Jun 10, 2021 · 3e528ae · 3e528ae
1 parent 9f08cec
commit 3e528ae
Show file tree

Hide file tree

Showing 22 changed files with 250 additions and 109 deletions.
diff --git a/site/next.config.js b/site/next.config.js
@@ -5,14 +5,6 @@ const withTM = require("next-transpile-modules")(transpileModules);
 
 const config = {
   webpack: (config, options) => {
-    const { isServer } = options;
-    if (!isServer) {
-      // We shim fs for things like the blog slugs component
-      // where we need fs access in the server-side part
-      config.resolve.fallback = {
-        fs: false
-      }
-    }
     config.experiments = {
       topLevelAwait: true,
     }

diff --git a/site/pages/community/aroundweb.res b/site/pages/community/aroundweb.res
@@ -175,7 +175,7 @@ let make = (~content) => <>
   />
   <Page.Basic
     title=content.title pageDescription=content.pageDescription addContainer=Page.Basic.NoContainer>
-    <SectionContainer.NoneFilled margins="mb-16">
+    <SectionContainer.NoneFilled marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
       <div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
         <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
           <span className="block"> {s(content.engageHeader)} </span>

diff --git a/site/pages/community/event/oud2020.res b/site/pages/community/event/oud2020.res
@@ -29,10 +29,12 @@ let make = (~content) => <>
   />
   <Page.Basic title=content.title pageDescription=content.pageDescription>
     {<>
-      <SectionContainer.SmallCentered otherLayout="px-6" margins="mb-16">
+      <SectionContainer.SmallCentered
+        otherLayout="px-6" marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
         <h2> {s(content.introduction)} </h2>
       </SectionContainer.SmallCentered>
-      <SectionContainer.SmallCentered otherLayout="px-6" margins="mb-16">
+      <SectionContainer.SmallCentered
+        otherLayout="px-6" marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
         <h2 className="text-4xl font-bold mb-8"> {s("Important Dates")} </h2>
         <div className="flow-root rounded bg-white p-6">
           <ul className="-mb-8">
@@ -66,7 +68,7 @@ let make = (~content) => <>
           </ul>
         </div>
       </SectionContainer.SmallCentered>
-      <SectionContainer.SmallCentered margins="mb-16">
+      <SectionContainer.SmallCentered marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
         <h2 className="text-4xl font-bold mb-8"> {s("Presentations")} </h2>
         <Table.Simple
           content={{
@@ -92,7 +94,7 @@ let make = (~content) => <>
           }}
         />
       </SectionContainer.SmallCentered>
-      <SectionContainer.SmallCentered margins="mb-16">
+      <SectionContainer.SmallCentered marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
         <h2 className="text-4xl font-bold mb-8 px-6"> {s("Papers")} </h2>
         <Table.Simple
           content={{

diff --git a/site/pages/community/events.res b/site/pages/community/events.res
@@ -24,7 +24,7 @@ let make = (~content) => <>
     figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=1176%3A0`
   />
   <Page.TopImage title=content.title pageDescription=content.pageDescription>
-    <SectionContainer.MediumCentered margins="mb-16">
+    <SectionContainer.MediumCentered marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
       <Table.Simple
         content={{
           headers: ["Date", "Event Name", "Location", "Description"],

diff --git a/site/pages/community/news.res b/site/pages/community/news.res
@@ -24,8 +24,8 @@ module CategorizedNews = {
   }
 
   @react.component
-  let make = (~margins, ~content) =>
-    <SectionContainer.MediumCentered margins paddingX="px-12">
+  let make = (~marginBottom=?, ~content) =>
+    <SectionContainer.MediumCentered ?marginBottom paddingX="px-12">
       <h2 className="text-orangedark text-3xl mb-5 lg:text-4xl font-bold text-center">
         {s(content.otherNewsStories)}
       </h2>
@@ -237,8 +237,8 @@ module WeeklyNews = {
   }
 
   @react.component
-  let make = (~content, ~margins) =>
-    <SectionContainer.MediumCentered margins>
+  let make = (~content, ~marginBottom=?) =>
+    <SectionContainer.MediumCentered ?marginBottom>
       <div className="lg:grid lg:grid-cols-2 items-center">
         <div className="lg:order-2">
           <h2 className="text-orangedark text-2xl font-bold text-center lg:text-4xl mb-9">
@@ -400,8 +400,11 @@ let make = (~content=contentEn) => <>
     title=content.title
     pageDescription=content.pageDescription
     highlightContent=content.highlightContent>
-    <CategorizedNews margins=`mb-10 lg:mb-32` content=content.categorizedNews />
-    <WeeklyNews margins=`mb-4` content=content.weeklyNews />
+    <CategorizedNews
+      marginBottom={Tailwind.ByBreakpoint.make(#mb10, ~lg=#mb32, ())}
+      content=content.categorizedNews
+    />
+    <WeeklyNews marginBottom={Tailwind.ByBreakpoint.make(#mb4, ())} content=content.weeklyNews />
   </Page.HighlightItem>
 </>
 

diff --git a/site/pages/index.res b/site/pages/index.res
@@ -244,10 +244,12 @@ module Quote = {
     </blockquote>
 }
 
+// TODO: move this into general contaienrs?
 module TestimonialContainer = {
   @react.component
-  let make = (~margins, ~children) =>
-    <section className={margins ++ ` py-12 overflow-hidden md:py-20 lg:py-24 `}>
+  let make = (~marginBottom=?, ~children) =>
+    <section
+      className={marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty ++ ` py-12 overflow-hidden md:py-20 lg:py-24 `}>
       <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> children </div>
     </section>
 }
@@ -261,8 +263,8 @@ module TestimonialSection = {
   }
 
   @react.component
-  let make = (~content, ~margins) =>
-    <TestimonialContainer margins>
+  let make = (~content, ~marginBottom=?) =>
+    <TestimonialContainer ?marginBottom>
       <FillPattern
         organizationName=content.organizationName
         position=`absolute`
@@ -327,7 +329,10 @@ let make = (~content=contentEn) =>
     <HeroSection content=content.heroContent />
     <StatsSection content=content.statsContent />
     <OpamSection content=content.opamContent margins=`mt-12 sm:mt-16` />
-    <TestimonialSection content=content.testimonialContent margins=`mb-6 md:mb-4 lg:mb-6` />
+    <TestimonialSection
+      content=content.testimonialContent
+      marginBottom={Tailwind.ByBreakpoint.make(#mb6, ~md=#mb4, ~lg=#mb6, ())}
+    />
   </Page.Unstructured>
 
 let default = make
diff --git a/site/pages/principles/users.res b/site/pages/principles/users.res
@@ -67,8 +67,8 @@ let contentEn = {
 
 module LogoSection = {
   @react.component
-  let make = (~margins, ~companies) =>
-    <SectionContainer.ResponsiveCentered margins>
+  let make = (~companies, ~marginBottom=?, ()) =>
+    <SectionContainer.ResponsiveCentered ?marginBottom>
       // TODO: try switching to a grid
       <div className="flex flex-wrap justify-center lg:justify-between ">
         {companies
@@ -106,14 +106,13 @@ let make = (~content=contentEn) => <>
   />
   <Page.Basic
     marginTop=`mt-2`
-    headingMarginBottom=`mb-6`
     title=content.title
     pageDescription=content.pageDescription
     callToAction={
       TitleHeading.Large.label: "Success Stories",
       url: InternalUrls.principlesSuccesses,
     }>
-    <LogoSection margins=`` companies=content.companies />
+    <LogoSection companies=content.companies />
   </Page.Basic>
 </>
 

diff --git a/site/pages/resources/applications.res b/site/pages/resources/applications.res
@@ -4,9 +4,9 @@ let s = React.string
 
 module ApiDocumentation = {
   @react.component
-  let make = (~margins) =>
+  let make = (~marginBottom=?) =>
     // TODO: factor out and define content type
-    <SectionContainer.MediumCentered margins paddingX="px-4 sm:px-32">
+    <SectionContainer.MediumCentered ?marginBottom paddingX="px-4 sm:px-32">
       <MediaObject imageHeight="h-56" image="api-img.jpeg" imageSide=MediaObject.Right>
         <h4 className="text-4xl font-bold mb-8"> {s(`API Documentation`)} </h4>
         <p className="mt-1 mb-8">
@@ -31,15 +31,17 @@ module DeveloperGuides = {
   }
 
   @react.component
-  let make = (~margins, ~content) =>
-    <div className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++ margins}>
+  let make = (~marginBottom=?, ~content) =>
+    <div
+      className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++
+      marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty}>
       <div className="px-4 py-5 sm:p-6">
         // TODO: factor out and define content type
         <h2 className="text-center text-orangedark text-4xl font-bold mb-8">
           {s(content.developerGuidesLabel)}
         </h2>
         <MediaObject
-          marginBottom="mb-11"
+          marginBottom={Tailwind.ByBreakpoint.make(#mb11, ())}
           imageHeight=content.topDeveloperGuide.imageHeight
           image=content.topDeveloperGuide.image
           imageSide=MediaObject.Right>
@@ -55,7 +57,7 @@ module DeveloperGuides = {
           </div>
         </MediaObject>
         <MediaObject
-          marginBottom="mb-11"
+          marginBottom={Tailwind.ByBreakpoint.make(#mb11, ())}
           imageHeight=content.bottomDeveloperGuide.imageHeight
           image=content.bottomDeveloperGuide.image
           imageSide=MediaObject.Left>
@@ -104,9 +106,11 @@ module UsingOcaml = {
   }
 
   @react.component
-  let make = (~margins, ~content) =>
+  let make = (~marginBottom=?, ~content) =>
     // TODO: factor out and define content type
-    <div className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++ margins}>
+    <div
+      className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++
+      marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty}>
       <div className="px-4 py-5 sm:py-8 sm:px-24">
         <h2 className="text-center text-orangedark text-4xl font-bold mb-8">
           {s(content.usingOcamlLabel)}
@@ -178,16 +182,13 @@ let make = (~title, ~pageDescription, ~developerGuidesContent, ~usingOcamlConten
     playgroundLink=`/play/resources/applications`
   />
   <Page.Basic
-    marginTop=`mt-1`
-    headingMarginBottom=`mb-24`
-    addBottomBar=true
-    addContainer=Page.Basic.NoContainer
-    title
-    pageDescription>
-    <ApiDocumentation margins=`mb-24` />
-    <DeveloperGuides margins=`mb-2` content=developerGuidesContent />
+    marginTop=`mt-1` addBottomBar=true addContainer=Page.Basic.NoContainer title pageDescription>
+    <ApiDocumentation marginBottom={Tailwind.ByBreakpoint.make(#mb24, ())} />
+    <DeveloperGuides
+      marginBottom={Tailwind.ByBreakpoint.make(#mb2, ())} content=developerGuidesContent
+    />
     <PlatformTools />
-    <UsingOcaml margins=`mb-16` content=usingOcamlContent />
+    <UsingOcaml marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} content=usingOcamlContent />
   </Page.Basic>
 </>
 

diff --git a/site/pages/resources/bestpractices.res b/site/pages/resources/bestpractices.res
@@ -13,7 +13,6 @@ let make = (~content=contentEn) => <>
   <ConstructionBanner />
   <Page.Basic
     marginTop=`mt-1`
-    headingMarginBottom=`mb-24`
     addBottomBar=true
     addContainer=Page.Basic.NoContainer
     title=content.title

diff --git a/site/pages/resources/language.res b/site/pages/resources/language.res
@@ -7,8 +7,8 @@ module UserLevelIntroduction = {
   }
 
   @react.component
-  let make = (~content, ~margins) =>
-    <SectionContainer.SmallCentered margins otherLayout="flex items-center space-x-20">
+  let make = (~content, ~marginBottom=?, ()) =>
+    <SectionContainer.SmallCentered ?marginBottom otherLayout="flex items-center space-x-20">
       <div className="text-5xl font-bold text-orangedark flex-shrink-0">
         {s(content.level ++ ` -`)}
       </div>
@@ -23,11 +23,12 @@ module Books = {
   }
 
   @react.component
-  let make = (~margins, ~content) =>
+  let make = (~marginBottom=?, ~content) =>
     // TODO: define content type; extract content
     // TODO: use generic container
     <div
-      className={"bg-white overflow-hidden shadow rounded-lg mx-10 mx-auto max-w-5xl " ++ margins}>
+      className={"bg-white overflow-hidden shadow rounded-lg mx-10 mx-auto max-w-5xl " ++
+      Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty(marginBottom)}>
       <div className="px-4 py-5 sm:px-6 sm:py-9">
         <h2 className="text-center text-orangedark text-7xl font-bold mb-8 uppercase">
           {s(content.booksLabel)}
@@ -77,9 +78,9 @@ module Books = {
 
 module Manual = {
   @react.component
-  let make = (~margins) =>
+  let make = (~marginBottom=?) =>
     // TODO: define content type; factor out content
-    <SectionContainer.MediumCentered margins paddingY="pt-8 pb-14" filled=true>
+    <SectionContainer.MediumCentered ?marginBottom paddingY="pt-8 pb-14" filled=true>
       <h2 className="text-center text-white text-7xl font-bold mb-8"> {s(`The OCaml Manual`)} </h2>
       <div className="mx-24 grid grid-cols-3 px-28 mx-auto max-w-4xl">
         <div className="border-r-4 border-b-4">
@@ -136,8 +137,8 @@ module Manual = {
 
 module Applications = {
   @react.component
-  let make = (~margins) =>
-    <SectionContainer.VerySmallCentered margins>
+  let make = (~marginBottom=?) =>
+    <SectionContainer.VerySmallCentered ?marginBottom>
       <h2 className="text-center text-orangedark text-7xl font-bold mb-8"> {s(`Applications`)} </h2>
       <div className="sm:flex items-center space-x-32 mb-20">
         <div className="mb-4 sm:mb-0 sm:mr-4">
@@ -157,11 +158,12 @@ module Applications = {
 
 module Papers = {
   @react.component
-  let make = (~margins) =>
+  let make = (~marginBottom=?, ()) =>
     // TODO: define content type and factor out content
     // TODO: use generic container
     <div
-      className={"bg-white overflow-hidden shadow rounded-lg py-3 mx-auto max-w-5xl " ++ margins}>
+      className={"bg-white overflow-hidden shadow rounded-lg py-3 mx-auto max-w-5xl " ++
+      marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty}>
       <div className="px-4 py-5 sm:p-6">
         <h2 className="text-center text-orangedark text-7xl font-bold mb-8"> {s(`PAPERS`)} </h2>
         <div className="grid grid-cols-3 mb-14 px-9 space-x-6 px-14">
@@ -225,23 +227,26 @@ let make = (~content) => <>
     playgroundLink=`/play/resources/language`
   />
   // TODO: define a more narrow page type with preset params
-  <Page.Basic
-    marginTop=`mt-1`
-    headingMarginBottom=`mb-24`
-    addBottomBar=true
-    addContainer=Page.Basic.NoContainer
-    title=content.title
-    pageDescription=content.pageDescription>
-    <UserLevelIntroduction content=content.beginning margins=`mb-20` />
-    <UserLevelIntroduction content=content.growing margins=`mb-20` />
-    <Books margins=`mb-16` content=content.booksContent />
-    <UserLevelIntroduction content=content.expanding margins=`mb-20` />
-    <Manual margins=`mb-20` />
-    <UserLevelIntroduction content=content.diversifying margins=`mb-20` />
-    <Applications margins=`mb-36` />
-    <UserLevelIntroduction content=content.researching margins=`mb-20` />
-    <Papers margins=`mb-16` />
-  </Page.Basic>
+
+  {
+    let introMarginBottom = Tailwind.ByBreakpoint.make(#mb20, ())
+    <Page.Basic
+      marginTop=`mt-1`
+      addBottomBar=true
+      addContainer=Page.Basic.NoContainer
+      title=content.title
+      pageDescription=content.pageDescription>
+      <UserLevelIntroduction content=content.beginning marginBottom=introMarginBottom />
+      <UserLevelIntroduction content=content.growing marginBottom=introMarginBottom />
+      <Books marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} content=content.booksContent />
+      <UserLevelIntroduction content=content.expanding marginBottom=introMarginBottom />
+      <Manual marginBottom={Tailwind.ByBreakpoint.make(#mb20, ())} />
+      <UserLevelIntroduction content=content.diversifying marginBottom=introMarginBottom />
+      <Applications marginBottom={Tailwind.ByBreakpoint.make(#mb36, ())} />
+      <UserLevelIntroduction content=content.researching marginBottom=introMarginBottom />
+      <Papers marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} />
+    </Page.Basic>
+  }
 </>
 
 let getStaticProps = _ctx => {

diff --git a/site/src/ClassNames.res b/site/src/ClassNames.res
@@ -0,0 +1 @@
+let make = classnames => Js.Array.joinWith(" ", classnames)
diff --git a/site/src/ClassNames.resi b/site/src/ClassNames.resi
@@ -0,0 +1 @@
+let make: array<string> => string
diff --git a/site/src/MediaObject.res b/site/src/MediaObject.res
@@ -2,7 +2,7 @@ type imageSide = Left | Right
 
 @react.component
 let make = (
-  ~marginBottom="",
+  ~marginBottom=?,
   ~imageHeight,
   ~imageWidth="",
   ~isRounded=false,
@@ -11,6 +11,7 @@ let make = (
   ~children,
   (),
 ) => {
+  let marginBottom = marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty
   <div className={`flex flex-col items-center sm:flex-row sm:justify-evenly ${marginBottom}`}>
     {
       let rounded = switch isRounded {

diff --git a/site/src/MediaObject.resi b/site/src/MediaObject.resi
@@ -2,7 +2,7 @@ type imageSide = Left | Right
 
 @react.component
 let make: (
-  ~marginBottom: string=?,
+  ~marginBottom: Tailwind.ByBreakpoint.t<Tailwind.MarginBottom.t>=?,
   ~imageHeight: string,
   ~imageWidth: string=?,
   ~isRounded: bool=?,