Skip to content

Commit 7647168

Browse files
rdavisonrdavison
authored
Force 3 args to BlogCard element (ocaml#542)
1 parent fcb5351 commit 7647168

File tree

5 files changed

+44
-90
lines changed

5 files changed

+44
-90
lines changed

‎pages/[lang]/community/aroundweb.res

+6-6
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ module T = {
123123
blogSectionHeader: string,
124124
blogSectionDescription: string,
125125
blog: string,
126-
blogEntries: array<BlogCard.Entry.t>,
126+
blogEntries: (BlogCard.Entry.t, BlogCard.Entry.t, BlogCard.Entry.t),
127127
blogArchiveText: string,
128128
spacesSectionHeader: string,
129129
spaces: array<Space.t>,
@@ -157,9 +157,9 @@ module T = {
157157
header=content.blogSectionHeader
158158
description=content.blogSectionDescription
159159
blog=content.blog
160-
entries=content.blogEntries
161-
archiveText=content.blogArchiveText
162-
/>
160+
archiveText=content.blogArchiveText>
161+
{content.blogEntries}
162+
</BlogCard>
163163
<SectionContainer.LargeCentered paddingY="pb-14">
164164
<CardGrid
165165
cardData=content.spaces
@@ -226,7 +226,7 @@ module T = {
226226
blogSectionHeader: `Recent Blog Posts`,
227227
blogSectionDescription: `Be inspired by the work of OCaml programmers all over the world and stay up-to-date on the latest developments.`,
228228
blog: `Blog`,
229-
blogEntries: [
229+
blogEntries: (
230230
{
231231
title: `What I learned Coding from Home`,
232232
excerpt: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto accusantium praesentium eius,
@@ -254,7 +254,7 @@ module T = {
254254
date: `Feb 12, 2020`,
255255
readingTime: `11`,
256256
},
257-
],
257+
),
258258
blogArchiveText: `Go to the blog archive`,
259259
spacesSectionHeader: `Looking for More? Try these spaces:`,
260260
spaces: spaces,

‎pages/[lang]/community/aroundweb.resi

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ type t = {
3232
blogSectionHeader: string,
3333
blogSectionDescription: string,
3434
blog: string,
35-
blogEntries: array<BlogCard.Entry.t>,
35+
blogEntries: (BlogCard.Entry.t, BlogCard.Entry.t, BlogCard.Entry.t),
3636
blogArchiveText: string,
3737
spacesSectionHeader: string,
3838
spaces: array<Space.t>,

‎pages/storybook.res

+15-57
Original file line numberDiff line numberDiff line change
@@ -997,67 +997,25 @@ module Categories = {
997997
@react.component
998998
let make = () => {
999999
let entry = n => {
1000-
BlogCard.Entry.title: "Title" ++ n,
1001-
excerpt: "Excerpt" ++ n,
1002-
author: "Author" ++ n,
1003-
dateValue: "DateValue" ++ n,
1004-
date: "Date" ++ n,
1005-
readingTime: "ReadingTime" ++ n,
1000+
let n = string_of_int(n)
1001+
{
1002+
BlogCard.Entry.title: "Title" ++ n,
1003+
excerpt: "Excerpt" ++ n,
1004+
author: "Author" ++ n,
1005+
dateValue: "DateValue" ++ n,
1006+
date: "Date" ++ n,
1007+
readingTime: "ReadingTime" ++ n,
1008+
}
10061009
}
1007-
let entries = n => Belt.Array.makeBy(n, i => entry(string_of_int(i)))
1008-
<Item
1009-
name="BlogCard"
1010-
docs="BlogCard element. NOTE: BlogCard must have 3 elements. Any more will be ignored, any less will result in an exception.">
1010+
let entries = (entry(0), entry(1), entry(2))
1011+
<Item name="BlogCard" docs="BlogCard element.">
10111012
{[
1012-
// (
1013-
// "BlogCard with no entries.",
1014-
// <BlogCard
1015-
// header="Header"
1016-
// description="Description"
1017-
// blog="Blog"
1018-
// archiveText="ArchiveText"
1019-
// entries={entries(0)}
1020-
// />,
1021-
// ),
1022-
// (
1023-
// "BlogCard with 1 entry.",
1024-
// <BlogCard
1025-
// header="Header"
1026-
// description="Description"
1027-
// blog="Blog"
1028-
// archiveText="ArchiveText"
1029-
// entries={entries(1)}
1030-
// />,
1031-
// ),
1032-
// (
1033-
// "BlogCard with 2 entries.",
1034-
// <BlogCard
1035-
// header="Header"
1036-
// description="Description"
1037-
// blog="Blog"
1038-
// archiveText="ArchiveText"
1039-
// entries={entries(2)}
1040-
// />,
1041-
// ),
10421013
(
1043-
"BlogCard with 3 entries.",
1044-
<BlogCard
1045-
header="Header"
1046-
description="Description"
1047-
blog="Blog"
1048-
archiveText="ArchiveText"
1049-
entries={entries(3)}
1050-
/>,
1051-
),
1052-
(
1053-
"BlogCard with 10 entries.",
1014+
defaultDoc,
10541015
<BlogCard
1055-
header="Header"
1056-
description="Description"
1057-
blog="Blog"
1058-
archiveText="ArchiveText"
1059-
entries={entries(10)}
1060-
/>,
1016+
header="Header" description="Description" blog="Blog" archiveText="ArchiveText">
1017+
{entries}
1018+
</BlogCard>,
10611019
),
10621020
]}
10631021
</Item>

‎src/BlogCard.res

+21-25
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ module Entry = {
1212
}
1313

1414
@react.component
15-
let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText) =>
15+
let make = (~header, ~description, ~blog, ~archiveText, ~children: (Entry.t, Entry.t, Entry.t)) => {
16+
let (e1, e2, e3) = children
1617
<SectionContainer.LargeCentered
1718
paddingY="pt-16 pb-3 lg:pt-24 lg:pb-8" paddingX="px-4 sm:px-6 lg:px-8">
1819
<div className="text-center">
@@ -38,16 +39,14 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
3839
<a href="#" className="hover:underline"> {React.string(blog)} </a>
3940
</p>
4041
<a href="#" className="block mt-2">
41-
<h3 className="text-xl font-semibold text-gray-900">
42-
{React.string(entries[0].title)}
43-
</h3>
44-
<p className="mt-3 text-base text-gray-500"> {React.string(entries[0].excerpt)} </p>
42+
<h3 className="text-xl font-semibold text-gray-900"> {React.string(e1.title)} </h3>
43+
<p className="mt-3 text-base text-gray-500"> {React.string(e1.excerpt)} </p>
4544
</a>
4645
</div>
4746
<div className="mt-6 flex items-center">
4847
<div className="flex-shrink-0">
4948
<a href="#">
50-
<span className="sr-only"> {React.string(entries[0].author)} </span>
49+
<span className="sr-only"> {React.string(e1.author)} </span>
5150
<img
5251
className="h-10 w-10 rounded-full"
5352
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=aimuGJ4P9C&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
@@ -57,12 +56,12 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
5756
</div>
5857
<div className="ml-3">
5958
<p className="text-sm font-medium text-gray-900">
60-
<a href="#" className="hover:underline"> {React.string(entries[0].author)} </a>
59+
<a href="#" className="hover:underline"> {React.string(e1.author)} </a>
6160
</p>
6261
<div className="flex space-x-1 text-sm text-gray-500">
63-
<time dateTime=entries[0].dateValue> {React.string(entries[0].date)} </time>
62+
<time dateTime=e1.dateValue> {React.string(e1.date)} </time>
6463
<span ariaHidden=true> {React.string(`·`)} </span>
65-
<span> {React.string(entries[0].readingTime ++ ` min read`)} </span>
64+
<span> {React.string(e1.readingTime ++ ` min read`)} </span>
6665
</div>
6766
</div>
6867
</div>
@@ -82,16 +81,14 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
8281
<a href="#" className="hover:underline"> {React.string(blog)} </a>
8382
</p>
8483
<a href="#" className="block mt-2">
85-
<h3 className="text-xl font-semibold text-gray-900">
86-
{React.string(entries[1].title)}
87-
</h3>
88-
<p className="mt-3 text-base text-gray-500"> {React.string(entries[1].excerpt)} </p>
84+
<h3 className="text-xl font-semibold text-gray-900"> {React.string(e2.title)} </h3>
85+
<p className="mt-3 text-base text-gray-500"> {React.string(e2.excerpt)} </p>
8986
</a>
9087
</div>
9188
<div className="mt-6 flex items-center">
9289
<div className="flex-shrink-0">
9390
<a href="#">
94-
<span className="sr-only"> {React.string(entries[1].author)} </span>
91+
<span className="sr-only"> {React.string(e2.author)} </span>
9592
<img
9693
className="h-10 w-10 rounded-full"
9794
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=aimuGJ4P9C&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
@@ -101,12 +98,12 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
10198
</div>
10299
<div className="ml-3">
103100
<p className="text-sm font-medium text-gray-900">
104-
<a href="#" className="hover:underline"> {React.string(entries[1].author)} </a>
101+
<a href="#" className="hover:underline"> {React.string(e2.author)} </a>
105102
</p>
106103
<div className="flex space-x-1 text-sm text-gray-500">
107-
<time dateTime=entries[1].dateValue> {React.string(entries[1].date)} </time>
104+
<time dateTime=e2.dateValue> {React.string(e2.date)} </time>
108105
<span ariaHidden=true> {React.string(`·`)} </span>
109-
<span> {React.string(entries[1].readingTime ++ ` min read`)} </span>
106+
<span> {React.string(e2.readingTime ++ ` min read`)} </span>
110107
</div>
111108
</div>
112109
</div>
@@ -126,16 +123,14 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
126123
<a href="#" className="hover:underline"> {React.string(blog)} </a>
127124
</p>
128125
<a href="#" className="block mt-2">
129-
<h3 className="text-xl font-semibold text-gray-900">
130-
{React.string(entries[2].title)}
131-
</h3>
132-
<p className="mt-3 text-base text-gray-500"> {React.string(entries[2].excerpt)} </p>
126+
<h3 className="text-xl font-semibold text-gray-900"> {React.string(e3.title)} </h3>
127+
<p className="mt-3 text-base text-gray-500"> {React.string(e3.excerpt)} </p>
133128
</a>
134129
</div>
135130
<div className="mt-6 flex items-center">
136131
<div className="flex-shrink-0">
137132
<a href="#">
138-
<span className="sr-only"> {React.string(entries[2].author)} </span>
133+
<span className="sr-only"> {React.string(e3.author)} </span>
139134
<img
140135
className="h-10 w-10 rounded-full"
141136
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixqx=aimuGJ4P9C&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
@@ -145,12 +140,12 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
145140
</div>
146141
<div className="ml-3">
147142
<p className="text-sm font-medium text-gray-900">
148-
<a href="#" className="hover:underline"> {React.string(entries[2].author)} </a>
143+
<a href="#" className="hover:underline"> {React.string(e3.author)} </a>
149144
</p>
150145
<div className="flex space-x-1 text-sm text-gray-500">
151-
<time dateTime=entries[2].date> {React.string(entries[2].date)} </time>
146+
<time dateTime=e3.date> {React.string(e3.date)} </time>
152147
<span ariaHidden=true> {React.string(`·`)} </span>
153-
<span> {React.string(entries[2].readingTime ++ ` min read`)} </span>
148+
<span> {React.string(e3.readingTime ++ ` min read`)} </span>
154149
</div>
155150
</div>
156151
</div>
@@ -163,3 +158,4 @@ let make = (~header, ~description, ~blog, ~entries: array<Entry.t>, ~archiveText
163158
</a>
164159
</p>
165160
</SectionContainer.LargeCentered>
161+
}

‎src/BlogCard.resi

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ let make: (
1616
~header: string,
1717
~description: string,
1818
~blog: string,
19-
~entries: array<Entry.t>,
2019
~archiveText: string,
20+
~children: (Entry.t, Entry.t, Entry.t),
2121
) => React.element

0 commit comments

Comments
 (0)