Skip to content

Commit 3e528ae

Browse files
author
kanishka-work
authored
Start modeling Tailwind Margin utility classes (ocaml#367)
* model the margin bottom parameter * remove webpack fs shim, not needed now
1 parent 9f08cec commit 3e528ae

22 files changed

+250
-109
lines changed

‎site/next.config.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,6 @@ const withTM = require("next-transpile-modules")(transpileModules);
55

66
const config = {
77
webpack: (config, options) => {
8-
const { isServer } = options;
9-
if (!isServer) {
10-
// We shim fs for things like the blog slugs component
11-
// where we need fs access in the server-side part
12-
config.resolve.fallback = {
13-
fs: false
14-
}
15-
}
168
config.experiments = {
179
topLevelAwait: true,
1810
}

‎site/pages/community/aroundweb.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@ let make = (~content) => <>
175175
/>
176176
<Page.Basic
177177
title=content.title pageDescription=content.pageDescription addContainer=Page.Basic.NoContainer>
178-
<SectionContainer.NoneFilled margins="mb-16">
178+
<SectionContainer.NoneFilled marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
179179
<div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
180180
<h2 className="text-3xl font-extrabold text-white sm:text-4xl">
181181
<span className="block"> {s(content.engageHeader)} </span>

‎site/pages/community/event/oud2020.res

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@ let make = (~content) => <>
2929
/>
3030
<Page.Basic title=content.title pageDescription=content.pageDescription>
3131
{<>
32-
<SectionContainer.SmallCentered otherLayout="px-6" margins="mb-16">
32+
<SectionContainer.SmallCentered
33+
otherLayout="px-6" marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
3334
<h2> {s(content.introduction)} </h2>
3435
</SectionContainer.SmallCentered>
35-
<SectionContainer.SmallCentered otherLayout="px-6" margins="mb-16">
36+
<SectionContainer.SmallCentered
37+
otherLayout="px-6" marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
3638
<h2 className="text-4xl font-bold mb-8"> {s("Important Dates")} </h2>
3739
<div className="flow-root rounded bg-white p-6">
3840
<ul className="-mb-8">
@@ -66,7 +68,7 @@ let make = (~content) => <>
6668
</ul>
6769
</div>
6870
</SectionContainer.SmallCentered>
69-
<SectionContainer.SmallCentered margins="mb-16">
71+
<SectionContainer.SmallCentered marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
7072
<h2 className="text-4xl font-bold mb-8"> {s("Presentations")} </h2>
7173
<Table.Simple
7274
content={{
@@ -92,7 +94,7 @@ let make = (~content) => <>
9294
}}
9395
/>
9496
</SectionContainer.SmallCentered>
95-
<SectionContainer.SmallCentered margins="mb-16">
97+
<SectionContainer.SmallCentered marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
9698
<h2 className="text-4xl font-bold mb-8 px-6"> {s("Papers")} </h2>
9799
<Table.Simple
98100
content={{

‎site/pages/community/events.res

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ let make = (~content) => <>
2424
figmaLink=`https://www.figma.com/file/36JnfpPe1Qoc8PaJq8mGMd/V1-Pages-Next-Step?node-id=1176%3A0`
2525
/>
2626
<Page.TopImage title=content.title pageDescription=content.pageDescription>
27-
<SectionContainer.MediumCentered margins="mb-16">
27+
<SectionContainer.MediumCentered marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())}>
2828
<Table.Simple
2929
content={{
3030
headers: ["Date", "Event Name", "Location", "Description"],

‎site/pages/community/news.res

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ module CategorizedNews = {
2424
}
2525

2626
@react.component
27-
let make = (~margins, ~content) =>
28-
<SectionContainer.MediumCentered margins paddingX="px-12">
27+
let make = (~marginBottom=?, ~content) =>
28+
<SectionContainer.MediumCentered ?marginBottom paddingX="px-12">
2929
<h2 className="text-orangedark text-3xl mb-5 lg:text-4xl font-bold text-center">
3030
{s(content.otherNewsStories)}
3131
</h2>
@@ -237,8 +237,8 @@ module WeeklyNews = {
237237
}
238238

239239
@react.component
240-
let make = (~content, ~margins) =>
241-
<SectionContainer.MediumCentered margins>
240+
let make = (~content, ~marginBottom=?) =>
241+
<SectionContainer.MediumCentered ?marginBottom>
242242
<div className="lg:grid lg:grid-cols-2 items-center">
243243
<div className="lg:order-2">
244244
<h2 className="text-orangedark text-2xl font-bold text-center lg:text-4xl mb-9">
@@ -400,8 +400,11 @@ let make = (~content=contentEn) => <>
400400
title=content.title
401401
pageDescription=content.pageDescription
402402
highlightContent=content.highlightContent>
403-
<CategorizedNews margins=`mb-10 lg:mb-32` content=content.categorizedNews />
404-
<WeeklyNews margins=`mb-4` content=content.weeklyNews />
403+
<CategorizedNews
404+
marginBottom={Tailwind.ByBreakpoint.make(#mb10, ~lg=#mb32, ())}
405+
content=content.categorizedNews
406+
/>
407+
<WeeklyNews marginBottom={Tailwind.ByBreakpoint.make(#mb4, ())} content=content.weeklyNews />
405408
</Page.HighlightItem>
406409
</>
407410

‎site/pages/index.res

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -244,10 +244,12 @@ module Quote = {
244244
</blockquote>
245245
}
246246

247+
// TODO: move this into general contaienrs?
247248
module TestimonialContainer = {
248249
@react.component
249-
let make = (~margins, ~children) =>
250-
<section className={margins ++ ` py-12 overflow-hidden md:py-20 lg:py-24 `}>
250+
let make = (~marginBottom=?, ~children) =>
251+
<section
252+
className={marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty ++ ` py-12 overflow-hidden md:py-20 lg:py-24 `}>
251253
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> children </div>
252254
</section>
253255
}
@@ -261,8 +263,8 @@ module TestimonialSection = {
261263
}
262264

263265
@react.component
264-
let make = (~content, ~margins) =>
265-
<TestimonialContainer margins>
266+
let make = (~content, ~marginBottom=?) =>
267+
<TestimonialContainer ?marginBottom>
266268
<FillPattern
267269
organizationName=content.organizationName
268270
position=`absolute`
@@ -327,7 +329,10 @@ let make = (~content=contentEn) =>
327329
<HeroSection content=content.heroContent />
328330
<StatsSection content=content.statsContent />
329331
<OpamSection content=content.opamContent margins=`mt-12 sm:mt-16` />
330-
<TestimonialSection content=content.testimonialContent margins=`mb-6 md:mb-4 lg:mb-6` />
332+
<TestimonialSection
333+
content=content.testimonialContent
334+
marginBottom={Tailwind.ByBreakpoint.make(#mb6, ~md=#mb4, ~lg=#mb6, ())}
335+
/>
331336
</Page.Unstructured>
332337

333338
let default = make

‎site/pages/principles/users.res

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,8 @@ let contentEn = {
6767

6868
module LogoSection = {
6969
@react.component
70-
let make = (~margins, ~companies) =>
71-
<SectionContainer.ResponsiveCentered margins>
70+
let make = (~companies, ~marginBottom=?, ()) =>
71+
<SectionContainer.ResponsiveCentered ?marginBottom>
7272
// TODO: try switching to a grid
7373
<div className="flex flex-wrap justify-center lg:justify-between ">
7474
{companies
@@ -106,14 +106,13 @@ let make = (~content=contentEn) => <>
106106
/>
107107
<Page.Basic
108108
marginTop=`mt-2`
109-
headingMarginBottom=`mb-6`
110109
title=content.title
111110
pageDescription=content.pageDescription
112111
callToAction={
113112
TitleHeading.Large.label: "Success Stories",
114113
url: InternalUrls.principlesSuccesses,
115114
}>
116-
<LogoSection margins=`` companies=content.companies />
115+
<LogoSection companies=content.companies />
117116
</Page.Basic>
118117
</>
119118

‎site/pages/resources/applications.res

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ let s = React.string
44

55
module ApiDocumentation = {
66
@react.component
7-
let make = (~margins) =>
7+
let make = (~marginBottom=?) =>
88
// TODO: factor out and define content type
9-
<SectionContainer.MediumCentered margins paddingX="px-4 sm:px-32">
9+
<SectionContainer.MediumCentered ?marginBottom paddingX="px-4 sm:px-32">
1010
<MediaObject imageHeight="h-56" image="api-img.jpeg" imageSide=MediaObject.Right>
1111
<h4 className="text-4xl font-bold mb-8"> {s(`API Documentation`)} </h4>
1212
<p className="mt-1 mb-8">
@@ -31,15 +31,17 @@ module DeveloperGuides = {
3131
}
3232

3333
@react.component
34-
let make = (~margins, ~content) =>
35-
<div className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++ margins}>
34+
let make = (~marginBottom=?, ~content) =>
35+
<div
36+
className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++
37+
marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty}>
3638
<div className="px-4 py-5 sm:p-6">
3739
// TODO: factor out and define content type
3840
<h2 className="text-center text-orangedark text-4xl font-bold mb-8">
3941
{s(content.developerGuidesLabel)}
4042
</h2>
4143
<MediaObject
42-
marginBottom="mb-11"
44+
marginBottom={Tailwind.ByBreakpoint.make(#mb11, ())}
4345
imageHeight=content.topDeveloperGuide.imageHeight
4446
image=content.topDeveloperGuide.image
4547
imageSide=MediaObject.Right>
@@ -55,7 +57,7 @@ module DeveloperGuides = {
5557
</div>
5658
</MediaObject>
5759
<MediaObject
58-
marginBottom="mb-11"
60+
marginBottom={Tailwind.ByBreakpoint.make(#mb11, ())}
5961
imageHeight=content.bottomDeveloperGuide.imageHeight
6062
image=content.bottomDeveloperGuide.image
6163
imageSide=MediaObject.Left>
@@ -104,9 +106,11 @@ module UsingOcaml = {
104106
}
105107

106108
@react.component
107-
let make = (~margins, ~content) =>
109+
let make = (~marginBottom=?, ~content) =>
108110
// TODO: factor out and define content type
109-
<div className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++ margins}>
111+
<div
112+
className={"bg-white overflow-hidden shadow rounded-lg mx-auto max-w-3xl " ++
113+
marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty}>
110114
<div className="px-4 py-5 sm:py-8 sm:px-24">
111115
<h2 className="text-center text-orangedark text-4xl font-bold mb-8">
112116
{s(content.usingOcamlLabel)}
@@ -178,16 +182,13 @@ let make = (~title, ~pageDescription, ~developerGuidesContent, ~usingOcamlConten
178182
playgroundLink=`/play/resources/applications`
179183
/>
180184
<Page.Basic
181-
marginTop=`mt-1`
182-
headingMarginBottom=`mb-24`
183-
addBottomBar=true
184-
addContainer=Page.Basic.NoContainer
185-
title
186-
pageDescription>
187-
<ApiDocumentation margins=`mb-24` />
188-
<DeveloperGuides margins=`mb-2` content=developerGuidesContent />
185+
marginTop=`mt-1` addBottomBar=true addContainer=Page.Basic.NoContainer title pageDescription>
186+
<ApiDocumentation marginBottom={Tailwind.ByBreakpoint.make(#mb24, ())} />
187+
<DeveloperGuides
188+
marginBottom={Tailwind.ByBreakpoint.make(#mb2, ())} content=developerGuidesContent
189+
/>
189190
<PlatformTools />
190-
<UsingOcaml margins=`mb-16` content=usingOcamlContent />
191+
<UsingOcaml marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} content=usingOcamlContent />
191192
</Page.Basic>
192193
</>
193194

‎site/pages/resources/bestpractices.res

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ let make = (~content=contentEn) => <>
1313
<ConstructionBanner />
1414
<Page.Basic
1515
marginTop=`mt-1`
16-
headingMarginBottom=`mb-24`
1716
addBottomBar=true
1817
addContainer=Page.Basic.NoContainer
1918
title=content.title

‎site/pages/resources/language.res

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ module UserLevelIntroduction = {
77
}
88

99
@react.component
10-
let make = (~content, ~margins) =>
11-
<SectionContainer.SmallCentered margins otherLayout="flex items-center space-x-20">
10+
let make = (~content, ~marginBottom=?, ()) =>
11+
<SectionContainer.SmallCentered ?marginBottom otherLayout="flex items-center space-x-20">
1212
<div className="text-5xl font-bold text-orangedark flex-shrink-0">
1313
{s(content.level ++ ` -`)}
1414
</div>
@@ -23,11 +23,12 @@ module Books = {
2323
}
2424

2525
@react.component
26-
let make = (~margins, ~content) =>
26+
let make = (~marginBottom=?, ~content) =>
2727
// TODO: define content type; extract content
2828
// TODO: use generic container
2929
<div
30-
className={"bg-white overflow-hidden shadow rounded-lg mx-10 mx-auto max-w-5xl " ++ margins}>
30+
className={"bg-white overflow-hidden shadow rounded-lg mx-10 mx-auto max-w-5xl " ++
31+
Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty(marginBottom)}>
3132
<div className="px-4 py-5 sm:px-6 sm:py-9">
3233
<h2 className="text-center text-orangedark text-7xl font-bold mb-8 uppercase">
3334
{s(content.booksLabel)}
@@ -77,9 +78,9 @@ module Books = {
7778

7879
module Manual = {
7980
@react.component
80-
let make = (~margins) =>
81+
let make = (~marginBottom=?) =>
8182
// TODO: define content type; factor out content
82-
<SectionContainer.MediumCentered margins paddingY="pt-8 pb-14" filled=true>
83+
<SectionContainer.MediumCentered ?marginBottom paddingY="pt-8 pb-14" filled=true>
8384
<h2 className="text-center text-white text-7xl font-bold mb-8"> {s(`The OCaml Manual`)} </h2>
8485
<div className="mx-24 grid grid-cols-3 px-28 mx-auto max-w-4xl">
8586
<div className="border-r-4 border-b-4">
@@ -136,8 +137,8 @@ module Manual = {
136137

137138
module Applications = {
138139
@react.component
139-
let make = (~margins) =>
140-
<SectionContainer.VerySmallCentered margins>
140+
let make = (~marginBottom=?) =>
141+
<SectionContainer.VerySmallCentered ?marginBottom>
141142
<h2 className="text-center text-orangedark text-7xl font-bold mb-8"> {s(`Applications`)} </h2>
142143
<div className="sm:flex items-center space-x-32 mb-20">
143144
<div className="mb-4 sm:mb-0 sm:mr-4">
@@ -157,11 +158,12 @@ module Applications = {
157158

158159
module Papers = {
159160
@react.component
160-
let make = (~margins) =>
161+
let make = (~marginBottom=?, ()) =>
161162
// TODO: define content type and factor out content
162163
// TODO: use generic container
163164
<div
164-
className={"bg-white overflow-hidden shadow rounded-lg py-3 mx-auto max-w-5xl " ++ margins}>
165+
className={"bg-white overflow-hidden shadow rounded-lg py-3 mx-auto max-w-5xl " ++
166+
marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty}>
165167
<div className="px-4 py-5 sm:p-6">
166168
<h2 className="text-center text-orangedark text-7xl font-bold mb-8"> {s(`PAPERS`)} </h2>
167169
<div className="grid grid-cols-3 mb-14 px-9 space-x-6 px-14">
@@ -225,23 +227,26 @@ let make = (~content) => <>
225227
playgroundLink=`/play/resources/language`
226228
/>
227229
// TODO: define a more narrow page type with preset params
228-
<Page.Basic
229-
marginTop=`mt-1`
230-
headingMarginBottom=`mb-24`
231-
addBottomBar=true
232-
addContainer=Page.Basic.NoContainer
233-
title=content.title
234-
pageDescription=content.pageDescription>
235-
<UserLevelIntroduction content=content.beginning margins=`mb-20` />
236-
<UserLevelIntroduction content=content.growing margins=`mb-20` />
237-
<Books margins=`mb-16` content=content.booksContent />
238-
<UserLevelIntroduction content=content.expanding margins=`mb-20` />
239-
<Manual margins=`mb-20` />
240-
<UserLevelIntroduction content=content.diversifying margins=`mb-20` />
241-
<Applications margins=`mb-36` />
242-
<UserLevelIntroduction content=content.researching margins=`mb-20` />
243-
<Papers margins=`mb-16` />
244-
</Page.Basic>
230+
231+
{
232+
let introMarginBottom = Tailwind.ByBreakpoint.make(#mb20, ())
233+
<Page.Basic
234+
marginTop=`mt-1`
235+
addBottomBar=true
236+
addContainer=Page.Basic.NoContainer
237+
title=content.title
238+
pageDescription=content.pageDescription>
239+
<UserLevelIntroduction content=content.beginning marginBottom=introMarginBottom />
240+
<UserLevelIntroduction content=content.growing marginBottom=introMarginBottom />
241+
<Books marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} content=content.booksContent />
242+
<UserLevelIntroduction content=content.expanding marginBottom=introMarginBottom />
243+
<Manual marginBottom={Tailwind.ByBreakpoint.make(#mb20, ())} />
244+
<UserLevelIntroduction content=content.diversifying marginBottom=introMarginBottom />
245+
<Applications marginBottom={Tailwind.ByBreakpoint.make(#mb36, ())} />
246+
<UserLevelIntroduction content=content.researching marginBottom=introMarginBottom />
247+
<Papers marginBottom={Tailwind.ByBreakpoint.make(#mb16, ())} />
248+
</Page.Basic>
249+
}
245250
</>
246251

247252
let getStaticProps = _ctx => {

‎site/src/ClassNames.res

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
let make = classnames => Js.Array.joinWith(" ", classnames)

‎site/src/ClassNames.resi

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
let make: array<string> => string

‎site/src/MediaObject.res

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ type imageSide = Left | Right
22

33
@react.component
44
let make = (
5-
~marginBottom="",
5+
~marginBottom=?,
66
~imageHeight,
77
~imageWidth="",
88
~isRounded=false,
@@ -11,6 +11,7 @@ let make = (
1111
~children,
1212
(),
1313
) => {
14+
let marginBottom = marginBottom->Tailwind.MarginBottomByBreakpoint.toClassNamesOrEmpty
1415
<div className={`flex flex-col items-center sm:flex-row sm:justify-evenly ${marginBottom}`}>
1516
{
1617
let rounded = switch isRounded {

‎site/src/MediaObject.resi

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ type imageSide = Left | Right
22

33
@react.component
44
let make: (
5-
~marginBottom: string=?,
5+
~marginBottom: Tailwind.ByBreakpoint.t<Tailwind.MarginBottom.t>=?,
66
~imageHeight: string,
77
~imageWidth: string=?,
88
~isRounded: bool=?,

0 commit comments

Comments
 (0)