Skip to content

Commit c67a0d7

Browse files
pettinarippettinarip
committed
pull out hero section to the consumer side
1 parent 27d8be6 commit c67a0d7

File tree

6 files changed

+95
-81
lines changed

6 files changed

+95
-81
lines changed

‎src/layouts/ContentLayout.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { HTMLAttributes } from "react"
22

33
import FeedbackCard from "@/components/FeedbackCard"
4-
import { ContentHero, type ContentHeroProps } from "@/components/Hero"
54
import LeftNavBar, { LeftNavBarProps } from "@/components/LeftNavBar"
65
import {
76
ContentContainer,
@@ -13,20 +12,20 @@ import {
1312
type ContentLayoutProps = HTMLAttributes<HTMLDivElement> &
1413
Pick<LeftNavBarProps, "dropdownLinks" | "tocItems" | "maxDepth"> & {
1514
children: React.ReactNode
16-
heroProps: ContentHeroProps
15+
heroSection: React.ReactNode
1716
}
1817

1918
export const ContentLayout = ({
2019
children,
2120
dropdownLinks,
2221
tocItems,
2322
maxDepth,
24-
heroProps,
23+
heroSection,
2524
...props
2625
}: ContentLayoutProps) => {
2726
return (
2827
<div {...props}>
29-
<ContentHero {...heroProps} />
28+
{heroSection}
3029

3130
<Page>
3231
<LeftNavBar

‎src/layouts/md/Roadmap.tsx

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type { ChildOnlyProp } from "@/lib/types"
44
import type { MdPageContent, RoadmapFrontmatter } from "@/lib/interfaces"
55

66
import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
7+
import { ContentHero } from "@/components/Hero"
78
import Pill from "@/components/Pill"
89
import RoadmapActionCard from "@/components/Roadmap/RoadmapActionCard"
910
import RoadmapImageContent from "@/components/Roadmap/RoadmapImageContent"
@@ -85,17 +86,19 @@ export const RoadmapLayout = ({
8586
],
8687
}
8788

89+
const heroProps = {
90+
...frontmatter,
91+
breadcrumbs: { slug, startDepth: 1 },
92+
heroImg: frontmatter.image,
93+
}
94+
8895
return (
8996
<ContentLayout
9097
dir={contentNotTranslated ? "ltr" : "unset"}
9198
tocItems={tocItems}
9299
dropdownLinks={dropdownLinks}
93100
maxDepth={frontmatter.sidebarDepth}
94-
heroProps={{
95-
...frontmatter,
96-
breadcrumbs: { slug, startDepth: 1 },
97-
heroImg: frontmatter.image,
98-
}}
101+
heroSection={<ContentHero {...heroProps} />}
99102
>
100103
{children}
101104
</ContentLayout>

‎src/layouts/md/Staking.tsx

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import type { MdPageContent, StakingFrontmatter } from "@/lib/interfaces"
1313

1414
import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
1515
import DocLink from "@/components/DocLink"
16+
import { ContentHero } from "@/components/Hero"
1617
import {
1718
Heading1 as MdHeading1,
1819
Heading4 as MdHeading4,
@@ -207,28 +208,30 @@ export const StakingLayout = ({
207208
],
208209
}
209210

211+
const heroProps = {
212+
...frontmatter,
213+
breadcrumbs: { slug, startDepth: 1 },
214+
heroImg: frontmatter.image,
215+
description: (
216+
<>
217+
<div>
218+
<List>
219+
{summaryPoints.map((point, idx) => (
220+
<ListItem key={idx}>{point}</ListItem>
221+
))}
222+
</List>
223+
</div>
224+
</>
225+
),
226+
}
227+
210228
return (
211229
<ContentLayout
212230
dir={contentNotTranslated ? "ltr" : "unset"}
213231
tocItems={tocItems}
214232
dropdownLinks={dropdownLinks}
215233
maxDepth={frontmatter.sidebarDepth}
216-
heroProps={{
217-
...frontmatter,
218-
breadcrumbs: { slug, startDepth: 1 },
219-
heroImg: frontmatter.image,
220-
description: (
221-
<>
222-
<div>
223-
<List>
224-
{summaryPoints.map((point, idx) => (
225-
<ListItem key={idx}>{point}</ListItem>
226-
))}
227-
</List>
228-
</div>
229-
</>
230-
),
231-
}}
234+
heroSection={<ContentHero {...heroProps} />}
232235
>
233236
{children}
234237
<StakingCommunityCallout my={16} />

‎src/layouts/md/Translatathon.tsx

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { MdPageContent, SharedFrontmatter } from "@/lib/interfaces"
55

66
import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
77
import Card from "@/components/Card"
8+
import { ContentHero, ContentHeroProps } from "@/components/Hero"
89
import { Image } from "@/components/Image"
910
import { ApplyNow } from "@/components/Translatathon/ApplyNow"
1011
import { APPLICATION_URL } from "@/components/Translatathon/constants"
@@ -184,33 +185,35 @@ export const TranslatathonLayout = ({
184185
],
185186
}
186187

188+
const heroProps = {
189+
...frontmatter,
190+
breadcrumbs: { slug, startDepth: 1 },
191+
heroImg: "/images/heroes/translatathon-hero.svg",
192+
blurDataURL: "",
193+
description: (
194+
<>
195+
<Text>Welcome to the ethereum.org Translatathon!</Text>
196+
<Text>
197+
The translatathon is a competitive hackathon-style event where you can
198+
compete for prizes by translating ethereum.org content into different
199+
languages.
200+
</Text>
201+
</>
202+
),
203+
buttons: [
204+
{
205+
content: "Apply to translate",
206+
href: APPLICATION_URL,
207+
},
208+
],
209+
} satisfies ContentHeroProps
210+
187211
return (
188212
<ContentLayout
189213
dir="ltr"
190214
tocItems={tocItems}
191215
dropdownLinks={dropdownLinks}
192-
heroProps={{
193-
...frontmatter,
194-
breadcrumbs: { slug, startDepth: 1 },
195-
heroImg: "/images/heroes/translatathon-hero.svg",
196-
blurDataURL: "",
197-
description: (
198-
<>
199-
<Text>Welcome to the ethereum.org Translatathon!</Text>
200-
<Text>
201-
The translatathon is a competitive hackathon-style event where you
202-
can compete for prizes by translating ethereum.org content into
203-
different languages.
204-
</Text>
205-
</>
206-
),
207-
buttons: [
208-
{
209-
content: "Apply to translate",
210-
href: APPLICATION_URL,
211-
},
212-
],
213-
}}
216+
heroSection={<ContentHero {...heroProps} />}
214217
>
215218
{children}
216219
</ContentLayout>

‎src/layouts/md/Upgrade.tsx

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { MdPageContent, UpgradeFrontmatter } from "@/lib/interfaces"
55

66
import BeaconChainActions from "@/components/BeaconChainActions"
77
import type { List as ButtonDropdownList } from "@/components/ButtonDropdown"
8+
import { ContentHero } from "@/components/Hero"
89
import MergeArticleList from "@/components/MergeArticleList"
910
import MergeInfographic from "@/components/MergeInfographic"
1011
import { List, ListItem } from "@/components/ui/list"
@@ -66,31 +67,33 @@ export const UpgradeLayout = ({
6667
],
6768
}
6869

70+
const heroProps = {
71+
...frontmatter,
72+
breadcrumbs: { slug, startDepth: 1 },
73+
heroImg: frontmatter.image,
74+
description: (
75+
<>
76+
<div>
77+
<List>
78+
{summaryPoints.map((point, idx) => (
79+
<ListItem key={idx}>{point}</ListItem>
80+
))}
81+
</List>
82+
</div>
83+
84+
<p className="border-t pt-4 italic">
85+
{t("common:page-last-updated")}: {lastEditLocaleTimestamp}
86+
</p>
87+
</>
88+
),
89+
}
90+
6991
return (
7092
<ContentLayout
7193
dir={contentNotTranslated ? "ltr" : "unset"}
7294
tocItems={tocItems}
7395
dropdownLinks={dropdownLinks}
74-
heroProps={{
75-
...frontmatter,
76-
breadcrumbs: { slug, startDepth: 1 },
77-
heroImg: frontmatter.image,
78-
description: (
79-
<>
80-
<div>
81-
<List>
82-
{summaryPoints.map((point, idx) => (
83-
<ListItem key={idx}>{point}</ListItem>
84-
))}
85-
</List>
86-
</div>
87-
88-
<p className="border-t pt-4 italic">
89-
{t("common:page-last-updated")}: {lastEditLocaleTimestamp}
90-
</p>
91-
</>
92-
),
93-
}}
96+
heroSection={<ContentHero {...heroProps} />}
9497
>
9598
{children}
9699
</ContentLayout>

‎src/layouts/md/UseCases.tsx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { MdPageContent, UseCasesFrontmatter } from "@/lib/interfaces"
55

66
// import BannerNotification from "@/components/Banners/BannerNotification"
77
import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
8+
import { ContentHero } from "@/components/Hero"
89
import { List, ListItem } from "@/components/ui/list"
910

1011
import { getSummaryPoints } from "@/lib/utils/getSummaryPoints"
@@ -104,26 +105,28 @@ export const UseCasesLayout = ({
104105
],
105106
}
106107

108+
const heroProps = {
109+
...frontmatter,
110+
breadcrumbs: { slug, startDepth: 1 },
111+
heroImg: frontmatter.image,
112+
description: (
113+
<div>
114+
<List>
115+
{summaryPoints.map((point, idx) => (
116+
<ListItem key={idx}>{point}</ListItem>
117+
))}
118+
</List>
119+
</div>
120+
),
121+
}
122+
107123
return (
108124
<ContentLayout
109125
dir={contentNotTranslated ? "ltr" : "unset"}
110126
tocItems={tocItems}
111127
dropdownLinks={dropdownLinks}
112128
maxDepth={frontmatter.sidebarDepth}
113-
heroProps={{
114-
...frontmatter,
115-
breadcrumbs: { slug, startDepth: 1 },
116-
heroImg: frontmatter.image,
117-
description: (
118-
<div>
119-
<List>
120-
{summaryPoints.map((point, idx) => (
121-
<ListItem key={idx}>{point}</ListItem>
122-
))}
123-
</List>
124-
</div>
125-
),
126-
}}
129+
heroSection={<ContentHero {...heroProps} />}
127130
>
128131
{/* TODO: Add back in when we figure out how to handle this case inside the ContentLayout */}
129132
{/* <BannerNotification shouldShow className="z-sticky max-lg:hidden">

0 commit comments

Comments
 (0)