Skip to content

Commit 33e44c6

Browse files
corwintinescorwintines
authored
Merge pull request ethereum#147 from ethereum/page-home
Home page
2 parents 714d95f + 5f75502 commit 33e44c6

21 files changed

+869
-252
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
"mdast-util-toc": "^7.0.0",
7272
"minimist": "^1.2.8",
7373
"polished": "^4.2.2",
74+
"raw-loader": "^4.0.2",
7475
"storybook": "7.5.3",
7576
"storybook-react-i18next": "^2.0.9",
7677
"ts-node": "^10.9.1",

‎src/components/ActionCard.tsx‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import React, { ReactNode } from "react"
2-
import { IGatsbyImageData } from "gatsby-plugin-image"
2+
import { StaticImageData } from "next/image"
33
import {
44
Box,
55
BoxProps,
66
Flex,
77
Heading,
8-
Image,
98
LinkBox,
109
LinkBoxProps,
1110
LinkOverlay,
1211
useColorModeValue,
1312
} from "@chakra-ui/react"
1413

15-
import GatsbyImage from "./GatsbyImage"
16-
import { BaseLink } from "./Link"
17-
import Text from "./OldText"
14+
import { Image } from "@/components/Image"
15+
import { BaseLink } from "@/components/Link"
16+
import Text from "@/components/OldText"
1817

1918
const linkBoxFocusStyles: BoxProps = {
2019
borderRadius: "base",
@@ -32,7 +31,7 @@ export interface IProps extends Omit<LinkBoxProps, "title"> {
3231
children?: React.ReactNode
3332
to: string
3433
alt?: string
35-
image: IGatsbyImageData | string
34+
image: StaticImageData
3635
title: ReactNode
3736
description?: ReactNode
3837
className?: string
@@ -52,7 +51,6 @@ const ActionCard: React.FC<IProps> = ({
5251
isBottom = true,
5352
...rest
5453
}) => {
55-
const isImageURL = typeof image === "string"
5654
const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
5755

5856
return (
@@ -69,37 +67,24 @@ const ActionCard: React.FC<IProps> = ({
6967
{...rest}
7068
>
7169
<Flex
72-
minH="260px"
70+
h="260px"
7371
bg="cardGradient"
7472
direction="row"
7573
justify={isRight ? "flex-end" : "center"}
7674
align={isBottom ? "flex-end" : "center"}
7775
className="action-card-image-wrapper"
7876
boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
7977
>
80-
{!isImageURL && (
81-
<GatsbyImage
82-
alt={alt || ""}
83-
maxH="257px"
84-
maxW={{ base: "311px", sm: "372px" }}
85-
minW="100px"
86-
minH="100px"
87-
image={image}
88-
sizes="full"
89-
/>
90-
)}
91-
{isImageURL && (
92-
<Image
93-
alt={alt || ""}
94-
maxH="257px"
95-
maxW={{ base: "311px", sm: "372px" }}
96-
minW="100px"
97-
minH="100px"
98-
src={image}
99-
sizes="full"
100-
className="action-card-image"
101-
/>
102-
)}
78+
<Image
79+
src={image}
80+
width={320}
81+
alt={alt || ""}
82+
maxH="257px"
83+
maxW={{ base: "311px", sm: "372px" }}
84+
minW="100px"
85+
minH="100px"
86+
style={{ objectFit: "cover" }}
87+
/>
10388
</Flex>
10489
<Box p={6} className="action-card-content">
10590
<Heading

‎src/components/Breadcrumbs/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const Breadcrumbs = ({
5151
? [
5252
{
5353
fullPath: "/",
54-
text: t("page-index-meta-title"),
54+
text: t("page-index:page-index-meta-title"),
5555
},
5656
]
5757
: []),

‎src/components/Codeblock.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,12 @@ import Highlight, {
77
import Prism from "prism-react-renderer/prism"
88
import { Box, BoxProps, Flex, useColorModeValue } from "@chakra-ui/react"
99

10-
import CopyToClipboard from "./CopyToClipboard"
11-
import Emoji from "./Emoji"
12-
import Translation from "./Translation"
10+
import CopyToClipboard from "@/components/CopyToClipboard"
11+
import Emoji from "@/components/Emoji"
12+
13+
// https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
14+
;(typeof global !== "undefined" ? global : window).Prism = Prism
15+
require("prismjs/components/prism-solidity")
1316

1417
const LINES_BEFORE_COLLAPSABLE = 8
1518

@@ -214,14 +217,6 @@ const Codeblock: React.FC<IProps> = ({
214217
codeLanguage,
215218
fromHomepage = false,
216219
}) => {
217-
useEffect(() => {
218-
;(typeof global !== "undefined" ? global : window).Prism = Prism
219-
220-
// Default languages included:
221-
// https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js
222-
require("prismjs/components/prism-solidity")
223-
})
224-
225220
const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)
226221

227222
const codeText = React.Children.toArray(children)

‎src/components/CommunityEvents/index.tsx‎

Lines changed: 63 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,15 @@ import {
1212
Icon,
1313
} from "@chakra-ui/react"
1414

15-
import { trackCustomEvent } from "../../utils/matomo"
16-
import { ButtonLink } from "../Buttons"
17-
import InlineLink from "../Link"
18-
import OldHeading from "../OldHeading"
19-
import Text from "../OldText"
20-
import Translation from "../Translation"
15+
import type { CommunityEvent } from "@/lib/interfaces"
2116

22-
import {
23-
type Event as EventType,
24-
useCommunityEvents,
25-
} from "./useCommunityEvents"
17+
import { ButtonLink } from "@/components/Buttons"
18+
import InlineLink from "@/components/Link"
19+
import OldHeading from "@/components/OldHeading"
20+
import Text from "@/components/OldText"
21+
import Translation from "@/components/Translation"
22+
23+
import { trackCustomEvent } from "@/lib/utils/matomo"
2624

2725
const matomoEvent = (buttonType: string) => {
2826
trackCustomEvent({
@@ -48,7 +46,7 @@ const renderEventDateTime = (
4846
}
4947

5048
interface EventProps {
51-
event: EventType
49+
event: CommunityEvent
5250
language: string
5351
type: "upcoming" | "past"
5452
}
@@ -77,11 +75,17 @@ const Event = ({ event, language, type }: EventProps) => {
7775
)
7876
}
7977

80-
const CommunityEvents = () => {
78+
type CommunityEventsProps = {
79+
events: {
80+
pastEventData: CommunityEvent[]
81+
upcomingEventData: CommunityEvent[]
82+
}
83+
}
84+
85+
const CommunityEvents = ({ events }: CommunityEventsProps) => {
8186
const { locale } = useRouter()
8287
const { t } = useTranslation("page-index")
83-
const { pastEventData, upcomingEventData, loading, hasError } =
84-
useCommunityEvents()
88+
const { pastEventData, upcomingEventData } = events
8589

8690
return (
8791
<Flex
@@ -96,13 +100,13 @@ const CommunityEvents = () => {
96100
<Center w={{ base: "100%", lg: "40%" }}>
97101
<Box pe={8} ps={{ base: 8, lg: 0 }}>
98102
<OldHeading>
99-
<Translation id="community-events-content-heading" />
103+
{t("page-index:community-events-content-heading")}
100104
</OldHeading>
101105
<Text>
102-
<Translation id="community-events-content-1" />
106+
<Translation id="page-index:community-events-content-1" />
103107
</Text>
104108
<Text>
105-
<Translation id="community-events-content-2" />
109+
{t("page-index:community-events-content-2")}
106110
</Text>
107111
</Box>
108112
</Center>
@@ -118,54 +122,44 @@ const CommunityEvents = () => {
118122
textAlign="center"
119123
flexDir="column"
120124
>
121-
{loading ? (
122-
<Text>
123-
<Translation id="loading" />
124-
</Text>
125-
) : (
126-
<Flex direction="column" h="full" gap={8}>
127-
{hasError ? (
128-
<Text color="error.base">
129-
<Translation id="loading-error-try-again-later" />
125+
<Flex direction="column" h="full" gap={8}>
126+
{upcomingEventData.length ? (
127+
<Box flex={1}>
128+
<Text fontSize="3xl" fontWeight="bold" lineHeight={1.4}>
129+
{upcomingEventData[0].title}
130130
</Text>
131-
) : upcomingEventData.length ? (
132-
<Box flex={1}>
133-
<Text fontSize="3xl" fontWeight="bold" lineHeight={1.4}>
134-
{upcomingEventData[0].title}
135-
</Text>
136-
<Text m={0} fontSize="xl">
137-
{renderEventDateTime(upcomingEventData[0].date, locale!)}
138-
</Text>
139-
<Text color="body.medium" fontSize="md">
140-
({Intl.DateTimeFormat().resolvedOptions().timeZone})
141-
</Text>
142-
</Box>
143-
) : (
144-
<Text fontSize="3xl" fontWeight="bold" mb={8}>
145-
<Translation id="community-events-no-events-planned" />
131+
<Text m={0} fontSize="xl">
132+
{renderEventDateTime(upcomingEventData[0].date, locale!)}
146133
</Text>
147-
)}
148-
<Flex flexDirection="column" gap={2}>
149-
<ButtonLink
150-
to="/discord/"
151-
gap={2}
152-
onClick={() => matomoEvent("discord")}
134+
<Text color="body.medium" fontSize="md">
135+
({Intl.DateTimeFormat().resolvedOptions().timeZone})
136+
</Text>
137+
</Box>
138+
) : (
139+
<Text fontSize="3xl" fontWeight="bold" mb={8}>
140+
{t("page-index:community-events-no-events-planned")}
141+
</Text>
142+
)}
143+
<Flex flexDirection="column" gap={2}>
144+
<ButtonLink
145+
to="/discord/"
146+
gap={2}
147+
onClick={() => matomoEvent("discord")}
148+
>
149+
<Icon as={FaDiscord} fontSize={25} />
150+
Join Discord
151+
</ButtonLink>
152+
{upcomingEventData[0] && (
153+
<InlineLink
154+
to={upcomingEventData[0].calendarLink}
155+
onClick={() => matomoEvent("Add to calendar")}
156+
fontWeight={700}
153157
>
154-
<Icon as={FaDiscord} fontSize={25} />
155-
Join Discord
156-
</ButtonLink>
157-
{upcomingEventData[0] && (
158-
<InlineLink
159-
to={upcomingEventData[0].calendarLink}
160-
onClick={() => matomoEvent("Add to calendar")}
161-
fontWeight={700}
162-
>
163-
{t("community-events-add-to-calendar")}
164-
</InlineLink>
165-
)}
166-
</Flex>
158+
{t("community-events-add-to-calendar")}
159+
</InlineLink>
160+
)}
167161
</Flex>
168-
)}
162+
</Flex>
169163
</Flex>
170164
<Flex
171165
w={{ base: "100%", lg: "50%" }}
@@ -174,54 +168,38 @@ const CommunityEvents = () => {
174168
flexDir="column"
175169
>
176170
<Text fontSize="lg" fontWeight="bold" mb={2}>
177-
<Translation id="community-events-upcoming-calls" />
171+
{t("page-index:community-events-upcoming-calls")}
178172
</Text>
179173
<Divider mb={4} />
180-
{loading ? (
181-
<Text>
182-
<Translation id="loading" />
183-
</Text>
184-
) : hasError ? (
185-
<Text color="error.base">
186-
<Translation id="loading-error-try-again-later" />
187-
</Text>
188-
) : upcomingEventData.slice(1).length ? (
174+
{upcomingEventData.slice(1).length ? (
189175
upcomingEventData.slice(1).map((item, idx) => {
190176
return (
191177
<Event
192178
key={idx}
193179
event={item}
194-
language={language}
180+
language={locale!}
195181
type="upcoming"
196182
/>
197183
)
198184
})
199185
) : (
200186
<Text mx="auto">
201-
<Translation id="community-events-no-upcoming-calls" />
187+
{t("page-index:community-events-no-upcoming-calls")}
202188
</Text>
203189
)}
204190
<Text fontSize="lg" fontWeight="bold" mb={2} mt={4}>
205-
<Translation id="community-events-previous-calls" />
191+
{t("page-index:community-events-previous-calls")}
206192
</Text>
207193
<Divider mb={4} />
208-
{loading ? (
209-
<Text>
210-
<Translation id="loading" />
211-
</Text>
212-
) : hasError ? (
213-
<Text color="error.base">
214-
<Translation id="loading-error-try-again-later" />
215-
</Text>
216-
) : pastEventData.length ? (
194+
{pastEventData.length ? (
217195
pastEventData.map((item, idx) => {
218196
return (
219-
<Event key={idx} event={item} language={language} type="past" />
197+
<Event key={idx} event={item} language={locale!} type="past" />
220198
)
221199
})
222200
) : (
223201
<Text mx="auto">
224-
<Translation id="community-events-there-are-no-past-calls" />
202+
{t("page-index:community-events-there-are-no-past-calls")}
225203
</Text>
226204
)}
227205
</Flex>

0 commit comments

Comments
 (0)