Skip to content

Commit 3f1e525

Browse files
wackerowwackerow
committed
Merge branch 'dev' into rm-rtl-logic
2 parents 9260cd8 + c279519 commit 3f1e525

28 files changed

+1450
-392
lines changed

‎.env.example

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
11
# rename this file to .env and supply the values listed below
22
# also make sure they are available to the build tool (e.g. Netlify)
3-
# warning: variables prefixed with GATSBY_ will be made available to client-side code
3+
# warning: variables prefixed with NEXT_PUBLIC_ will be made available to client-side code
44
# be careful not to expose sensitive data (e.g. your Algolia admin key)
5-
# ALGOLIA_ADMIN_KEY=insertValue
5+
6+
# Algolia environment (app ID, search key and base search index name required for search)
7+
# NEXT_PUBLIC_ALGOLIA_APP_ID=insertValue
8+
# NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=insertValue
9+
# NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME=insertValue
10+
# NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY=insertValue
11+
12+
# Etherscan API key (required for Etherscan API fetches)
613
# ETHERSCAN_API_KEY=insertValue
7-
# GATSBY_ALGOLIA_APP_ID=insertValue
8-
# GATSBY_ALGOLIA_SEARCH_KEY=insertValue
9-
# GATSBY_ALGOLIA_BASE_SEARCH_INDEX_NAME=insertValue
10-
NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY=insertValue
11-
# GATSBY_FUNCTIONS_PATH=insertValue
1214

13-
# Folders or files to ignore from the `public/content` folder
14-
IGNORE_CONTENT=**/docs,**/tutorials
15+
# Google API key and Calendar ID (required to fetch Calendar events)
16+
# GOOGLE_API_KEY=
17+
# GOOGLE_CALENDAR_ID=
1518

1619
# Used to avoid loading Matomo in our preview deploys
1720
IS_PREVIEW_DEPLOY=false

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@emotion/react": "^11.11.1",
2323
"@emotion/styled": "^11.11.0",
2424
"clipboard": "^2.0.11",
25+
"embla-carousel-react": "^7.0.0",
2526
"ethereum-blockies-base64": "^1.0.2",
2627
"focus-trap-react": "^10.2.3",
2728
"framer-motion": "^10.13.0",
@@ -31,7 +32,7 @@
3132
"lodash.merge": "^4.6.2",
3233
"lodash.shuffle": "^4.2.0",
3334
"luxon": "^3.4.3",
34-
"next": "^14.0.0",
35+
"next": "13.4.8",
3536
"next-i18next": "^14.0.3",
3637
"next-mdx-remote": "^3.0.8",
3738
"next-sitemap": "^4.2.3",
@@ -51,7 +52,7 @@
5152
},
5253
"devDependencies": {
5354
"@chakra-ui/storybook-addon": "5.1.0",
54-
"@netlify/plugin-nextjs": "^4.40.2",
55+
"@netlify/plugin-nextjs": "^4.41.3",
5556
"@storybook/addon-essentials": "7.5.3",
5657
"@storybook/addon-interactions": "7.5.3",
5758
"@storybook/addon-links": "7.5.3",
@@ -66,7 +67,7 @@
6667
"@types/react": "^18.2.15",
6768
"@types/react-dom": "^18.2.7",
6869
"eslint": "^8.45.0",
69-
"eslint-config-next": "^14.0.0",
70+
"eslint-config-next": "^13.0.0",
7071
"eslint-config-prettier": "^9.0.0",
7172
"eslint-plugin-simple-import-sort": "^10.0.0",
7273
"eslint-plugin-storybook": "^0.6.15",

‎src/components/ActionCard.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { StaticImageData } from "next/image"
12
import type { ReactNode } from "react"
23
import {
34
Box,
@@ -10,7 +11,7 @@ import {
1011
useColorModeValue,
1112
} from "@chakra-ui/react"
1213

13-
import { Image, type ImageProps } from "@/components/Image"
14+
import { Image } from "@/components/Image"
1415
import { BaseLink } from "@/components/Link"
1516
import Text from "@/components/OldText"
1617

@@ -30,7 +31,8 @@ export type ActionCardProps = Omit<LinkBoxProps, "title"> & {
3031
children?: ReactNode
3132
to: string
3233
alt?: string
33-
image: ImageProps["src"]
34+
image: StaticImageData
35+
imageWidth?: number
3436
title: ReactNode
3537
description?: ReactNode
3638
className?: string
@@ -42,6 +44,7 @@ const ActionCard = ({
4244
to,
4345
alt,
4446
image,
47+
imageWidth = 220,
4548
title,
4649
description,
4750
children,
@@ -76,7 +79,8 @@ const ActionCard = ({
7679
>
7780
<Image
7881
src={image}
79-
width={220}
82+
width={imageWidth}
83+
maxH="full"
8084
alt={alt || ""}
8185
style={{ objectFit: "cover" }}
8286
/>

‎src/components/AdoptionChart.tsx

Lines changed: 58 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,53 @@
1-
// Libraries
2-
import React, { ReactNode } from "react"
3-
import { Box, BoxProps, Flex, useColorMode } from "@chakra-ui/react"
1+
import { useTranslation } from "next-i18next"
2+
import { Box, type BoxProps, Flex, useColorMode } from "@chakra-ui/react"
43

5-
// Components
6-
import Translation from "./Translation"
4+
import type { ChildOnlyProp } from "@/lib/types"
75

8-
const Column: React.FC<{ children: ReactNode }> = ({ children }) => {
9-
return (
10-
<Flex
11-
flexDirection="column-reverse"
12-
ms={{ base: 2, md: 4 }}
13-
_first={{ ms: 0 }}
14-
>
15-
{children}
16-
</Flex>
17-
)
18-
}
6+
const Column = ({ children }: ChildOnlyProp) => (
7+
<Flex
8+
flexDirection="column-reverse"
9+
ms={{ base: 2, md: 4 }}
10+
_first={{ ms: 0 }}
11+
>
12+
{children}
13+
</Flex>
14+
)
1915

20-
const Cell: React.FC<BoxProps> = ({ children, color, ...props }) => {
21-
return (
22-
<Box
23-
border="1px solid"
24-
borderColor={color || "text"}
25-
color={color || "text"}
26-
py="0.8rem"
27-
px={{ base: 2, md: "1.2rem" }}
28-
fontSize="0.9rem"
29-
fontWeight="bold"
30-
lineHeight="none"
31-
textAlign="center"
32-
_last={{
33-
borderTopStartRadius: "2xl",
34-
borderTopEndRadius: "2xl",
35-
}}
36-
sx={{
37-
"&:nth-child(-n + 2)": {
38-
borderBottomStartRadius: "2xl",
39-
borderBottomEndRadius: "2xl",
40-
},
41-
}}
42-
{...props}
43-
>
44-
{children}
45-
</Box>
46-
)
47-
}
48-
49-
const ColumnName: React.FC<{ children: ReactNode }> = ({ children }) => {
50-
return (
51-
<Cell border="none" pt={6}>
52-
{children}
53-
</Cell>
54-
)
55-
}
16+
const Cell = ({ children, color, ...props }: BoxProps) => (
17+
<Box
18+
border="1px solid"
19+
borderColor={color || "text"}
20+
color={color || "text"}
21+
py="0.8rem"
22+
px={{ base: 2, md: "1.2rem" }}
23+
fontSize="0.9rem"
24+
fontWeight="bold"
25+
lineHeight="none"
26+
textAlign="center"
27+
_last={{
28+
borderTopStartRadius: "2xl",
29+
borderTopEndRadius: "2xl",
30+
}}
31+
sx={{
32+
"&:nth-child(-n + 2)": {
33+
borderBottomStartRadius: "2xl",
34+
borderBottomEndRadius: "2xl",
35+
},
36+
}}
37+
{...props}
38+
>
39+
{children}
40+
</Box>
41+
)
5642

57-
interface IProps {}
43+
const ColumnName = ({ children }: ChildOnlyProp) => (
44+
<Cell border="none" pt={6}>
45+
{children}
46+
</Cell>
47+
)
5848

59-
const AdoptionChart: React.FC<IProps> = () => {
49+
const AdoptionChart = () => {
50+
const { t } = useTranslation("page-what-is-ethereum")
6051
const { colorMode } = useColorMode()
6152
const isDark = colorMode === "dark"
6253

@@ -65,50 +56,48 @@ const AdoptionChart: React.FC<IProps> = () => {
6556
<Column>
6657
<ColumnName>2010</ColumnName>
6758
<Cell color={isDark ? "#FBF9A5" : "#95935B"}>
68-
<Translation id="adoption-chart-investors-label" />
59+
{t("adoption-chart-investors-label")}
6960
</Cell>
7061
</Column>
7162

7263
<Column>
7364
<ColumnName>2014</ColumnName>
7465
<Cell color={isDark ? "#FBF9A5" : "#95935B"}>
75-
<Translation id="adoption-chart-investors-label" />
66+
{t("adoption-chart-investors-label")}
7667
</Cell>
7768
<Cell color={isDark ? "#9EC885" : "#67954C"}>
78-
<Translation id="adoption-chart-developers-label" />
69+
{t("adoption-chart-developers-label")}
7970
</Cell>
8071
<Cell color={isDark ? "#E78F6E" : "#CB7C5E"}>
81-
<Translation id="adoption-chart-companies-label" />
72+
{t("adoption-chart-companies-label")}
8273
</Cell>
8374
</Column>
8475

8576
<Column>
86-
<ColumnName>
87-
<Translation id="adoption-chart-column-now-label" />
88-
</ColumnName>
77+
<ColumnName>{t("adoption-chart-column-now-label")}</ColumnName>
8978
<Cell color={isDark ? "#FBF9A5" : "#95935B"}>
90-
<Translation id="adoption-chart-investors-label" />
79+
{t("adoption-chart-investors-label")}
9180
</Cell>
9281
<Cell color={isDark ? "#9EC885" : "#67954C"}>
93-
<Translation id="adoption-chart-developers-label" />
82+
{t("adoption-chart-developers-label")}
9483
</Cell>
9584
<Cell color={isDark ? "#E78F6E" : "#CB7C5E"}>
96-
<Translation id="adoption-chart-companies-label" />
85+
{t("adoption-chart-companies-label")}
9786
</Cell>
9887
<Cell color={isDark ? "#8EA8CA" : "#5E7492"}>
99-
<Translation id="adoption-chart-artists-label" />
88+
{t("adoption-chart-artists-label")}
10089
</Cell>
10190
<Cell color={isDark ? "#AC85C2" : "#88669B"}>
102-
<Translation id="adoption-chart-musicians-label" />
91+
{t("adoption-chart-musicians-label")}
10392
</Cell>
10493
<Cell color={isDark ? "#CA928E" : "#985955"}>
105-
<Translation id="adoption-chart-writers-label" />
94+
{t("adoption-chart-writers-label")}
10695
</Cell>
10796
<Cell color={isDark ? "#B9B9B9" : "#9E9E9E"}>
108-
<Translation id="adoption-chart-gamers-label" />
97+
{t("adoption-chart-gamers-label")}
10998
</Cell>
11099
<Cell color={isDark ? "#E2B79E" : "#E78A54"}>
111-
<Translation id="adoption-chart-refugees-label" />
100+
{t("adoption-chart-refugees-label")}
112101
</Cell>
113102
</Column>
114103
</Flex>

‎src/components/EnergyConsumptionChart.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ import {
2121

2222
import type { Lang } from "@/lib/types"
2323

24-
import Translation from "@/components/Translation"
25-
2624
import { isLangRightToLeft } from "@/lib/utils/translations"
2725

2826
interface ITickProps {
@@ -77,7 +75,7 @@ const CustomTick: React.FC<ITickProps> = ({ x, y, payload }) => {
7775
}
7876

7977
const EnergyConsumptionChart: React.FC = () => {
80-
const { t } = useTranslation(["page-about", "page-what-is-ethereum"])
78+
const { t } = useTranslation("page-what-is-ethereum")
8179
const textColor = useToken("colors", "text")
8280
const { locale } = useRouter()
8381
const isRtl = isLangRightToLeft(locale as Lang)
@@ -216,7 +214,7 @@ const EnergyConsumptionChart: React.FC = () => {
216214
<Legend
217215
content={
218216
<Box textAlign="center" color="text" fontWeight="600" mt={8}>
219-
{t("page-what-is-ethereum:page-what-is-ethereum-energy-consumption-chart-legend")}
217+
{t("page-what-is-ethereum-energy-consumption-chart-legend")}
220218
</Box>
221219
}
222220
/>

‎src/components/EthPriceCard.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ const EthPriceCard = ({ isLeftAlign = false, ...props }: EthPriceCardProps) => {
170170
_after={{
171171
content: isNegativeChange ? '"↘"' : '"↗"',
172172
transform: flipForRtl,
173+
display: "inline-block",
173174
}}
174175
>
175176
{change}

‎src/components/Hero/HomeHero/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const HomeHero = ({ heroImg }: HomeHeroProps) => {
1717
<Image
1818
src={heroImg}
1919
alt={t("page-index:page-index-hero-image-alt")}
20+
sizes="100vw"
2021
w="full"
2122
h="full"
2223
priority

‎src/components/Leaderboard.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,9 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
130130
ms: 0.5,
131131
me: 1.5,
132132
transform: flipForRtl,
133+
display: "inline-block",
133134
}}
134-
></Box>
135+
/>
135136
</LinkBox>
136137
</ListItem>
137138
)

‎src/components/MdComponents.tsx

Lines changed: 20 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -43,40 +43,39 @@ import InfoBanner from "./InfoBanner"
4343
/**
4444
* Base HTML elements
4545
*/
46-
const headingPropsForAnchor = (id?: string): HeadingProps =>
47-
id
48-
? ({
49-
scrollMarginTop: 28,
50-
id,
51-
"data-group": true,
52-
position: "relative",
53-
} as HeadingProps)
54-
: {}
46+
const headingPropsForAnchor = (id?: string): HeadingProps => {
47+
if (!id) return {}
48+
return {
49+
scrollMarginTop: 28,
50+
id,
51+
"data-group": true,
52+
position: "relative",
53+
} as HeadingProps
54+
}
5555

5656
export const commonHeadingProps = (id?: string): HeadingProps => ({
5757
fontWeight: 700,
5858
lineHeight: 1.4,
5959
...headingPropsForAnchor(id),
6060
})
6161

62-
const IdAnchor: React.FC<{ id?: string }> = ({ id }) =>
63-
id ? (
62+
const IdAnchor: React.FC<{ id?: string }> = ({ id }) => {
63+
if (!id) return null
64+
return (
6465
<Link
65-
href={`#${id}`}
66+
href={"#" + id}
6667
position="absolute"
6768
insetInlineEnd="100%"
6869
aria-label={id.replaceAll("-", " ") + " permalink"}
70+
opacity={0}
71+
_groupHover={{ opacity: 1 }}
72+
_focus={{ opacity: 1 }}
73+
transition="opacity 0.1s ease-in-out"
6974
>
70-
<Icon
71-
as={CiLink}
72-
opacity={0}
73-
_groupHover={{ opacity: 1 }}
74-
transition="opacity 0.1s ease-in-out"
75-
fontSize="xl"
76-
me={1}
77-
/>
75+
<Icon as={CiLink} fontSize="xl" me="1" />
7876
</Link>
79-
) : null
77+
)
78+
}
8079

8180
export const Heading1 = ({ children, ...rest }: HeadingProps) => (
8281
<OldHeading as="h1" {...commonHeadingProps()} fontSize="2.5rem" {...rest}>

0 commit comments

Comments
 (0)