Merge branch 'dev' into quiz-types

.all-contributorsrc

@@ -10700,7 +10700,7 @@
       "login": "g0rbe",
       "name": "Dániel Görbe",
       "avatar_url": "https://avatars.githubusercontent.com/u/36860942?v=4",
-      "profile": "http://www.danielgorbe.com",
+      "profile": "https://www.gorbe.io",
       "contributions": [
         "doc"
       ]

README.md

@@ -1673,7 +1673,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/costgallo"><img src="https://avatars.githubusercontent.com/u/49433698?v=4?s=100" width="100px;" alt="Costanza"/><br /><sub><b>Costanza</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=costgallo" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/joaolago1113"><img src="https://avatars.githubusercontent.com/u/22820692?v=4?s=100" width="100px;" alt="joao"/><br /><sub><b>joao</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=joaolago1113" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://p2p.org"><img src="https://avatars.githubusercontent.com/u/3310192?v=4?s=100" width="100px;" alt="Eugene"/><br /><sub><b>Eugene</b></sub></a><br /><a href="#content-rgb2hsl" title="Content">🖋</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://www.danielgorbe.com"><img src="https://avatars.githubusercontent.com/u/36860942?v=4?s=100" width="100px;" alt="Dániel Görbe"/><br /><sub><b>Dániel Görbe</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=g0rbe" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.gorbe.io"><img src="https://avatars.githubusercontent.com/u/36860942?v=4?s=100" width="100px;" alt="Dániel Görbe"/><br /><sub><b>Dániel Görbe</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=g0rbe" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://blog.insubli.me"><img src="https://avatars.githubusercontent.com/u/41712656?v=4?s=100" width="100px;" alt="s-crypt"/><br /><sub><b>s-crypt</b></sub></a><br /><a href="#content-s-crypt" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/tudorpintea999"><img src="https://avatars.githubusercontent.com/u/87604944?v=4?s=100" width="100px;" alt="iwantanode"/><br /><sub><b>iwantanode</b></sub></a><br /><a href="#content-tudorpintea999" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/shak58"><img src="https://avatars.githubusercontent.com/u/150069539?v=4?s=100" width="100px;" alt="shak58"/><br /><sub><b>shak58</b></sub></a><br /><a href="#content-shak58" title="Content">🖋</a></td>

docs/api-keys.md

@@ -11,7 +11,7 @@ We recommend setting this up when running the project locally, as we use the Git
 
 ```sh
 # .env Example:
-GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
+NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY=48f84de812090000demo00000000697cf6e6a059
 ```
 
 2. Add Etherscan API token (free)

docs/best-practices.md

@@ -85,7 +85,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 // Example
 import React, { useState, useEffect } from "react"
 
-const ComponentName: React.FC = (props) => {
+const ComponentName = () => {
   // useState hook for managing state variables
   const [greeting, setGreeting] = useState("")
 

docs/code-conventions.md

@@ -61,7 +61,7 @@ For the props type signature use the naming convention `<ComponentName>Props` to
 
 **Do not use `React.FC`** and instead annotate the props object directly. `React.FC` implies the `children` prop, but this is not always desired when there is a component that should not accept this prop. `React.FC` also does not allow for use of Generic types, or use of Generic type when doing type guarding like function overloading. It is also not generally recommended to use and [was removed from the create-react-app template](https://github.com/facebook/create-react-app/pull/8177).
 
-A positive side-effect to directly annoting the props object is for IDE intellisense where you can view the props when hovering over the component name to see it's signature.
+A positive side-effect to directly annotating the props object is for IDE intellisense where you can view the props when hovering over the component name to see it's signature.
 
 i.e. `const Component: ({ label, title, ...props }: ComponentProps) => React.JSX.Element`
 

package.json

@@ -20,7 +20,6 @@
     "markdown-checker": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/markdownChecker.ts"
   },
   "dependencies": {
-    "@chakra-ui/next-js": "^2.1.5",
     "@chakra-ui/react": "^2.8.0",
     "@crowdin/crowdin-api-client": "^1.25.0",
     "@docsearch/react": "^3.5.2",

public/content/about/index.md

@@ -95,7 +95,7 @@ This means the website needs to handle many different user journeys, from “a d
 
 To make our work more accessible and to foster more community collaboration, the ethereum.org core team publishes an overview of our quarterly roadmap goals.
 
-[View our 2023 Q1 product roadmap](https://github.com/ethereum/ethereum-org-website/issues/9090)
+[View our 2024 Q1 product roadmap](https://github.com/ethereum/ethereum-org-website/issues/12005)
 
 **How's that sound?** We always appreciate feedback on our roadmap - if there's something you think we should work on, please let us know! We welcome ideas and PRs from anyone in the community.
 

public/content/developers/docs/nodes-and-clients/nodes-as-a-service/index.md

@@ -110,7 +110,7 @@ Here is a list of some of the most popular Ethereum node providers, feel free to
     - Analytics
 - [**BlockPI**](https://blockpi.io/)
   - [Docs](https://docs.blockpi.io/)
-  - Fetures
+  - Features
     - Robust & distributed node structure
     - Up to 40 HTTPS and WSS endpoints
     - Free signup package and monthly package

src/components/BannerGrid/index.tsx

@@ -1,11 +1,9 @@
 import React from "react"
 import { Box, Flex, Grid, useToken } from "@chakra-ui/react"
 
-export type Props = {
-  children: React.ReactNode
-}
+import { ChildOnlyProp } from "@/lib/types"
 
-export const Banner: React.FC<Props> = ({ children }) => {
+export const Banner = ({ children }: ChildOnlyProp) => {
   return (
     <Flex
       w="full"
@@ -26,23 +24,23 @@ export const Banner: React.FC<Props> = ({ children }) => {
   )
 }
 
-export const BannerBody: React.FC<Props> = ({ children }) => {
+export const BannerBody = ({ children }: ChildOnlyProp) => {
   return (
     <Box flex={4} p={10}>
       {children}
     </Box>
   )
 }
 
-export const BannerImage: React.FC<Props> = ({ children }) => {
+export const BannerImage = ({ children }: ChildOnlyProp) => {
   return (
     <Flex justifyContent="end" flex={2} alignSelf="end">
       {children}
     </Flex>
   )
 }
 
-export const BannerGrid: React.FC<Props> = ({ children }) => {
+export const BannerGrid = ({ children }: ChildOnlyProp) => {
   return (
     <Grid
       templateColumns={{
@@ -62,7 +60,7 @@ export const BannerGrid: React.FC<Props> = ({ children }) => {
   )
 }
 
-export const BannerGridCell: React.FC<Props> = ({ children }) => {
+export const BannerGridCell = ({ children }: ChildOnlyProp) => {
   const [medBp, lgBp] = useToken("breakpoints", ["md", "lg"])
 
   return (

src/components/BannerNotification/index.tsx

@@ -3,15 +3,15 @@ import { Center, FlexProps, useMediaQuery } from "@chakra-ui/react"
 
 import { lightTheme as oldTheme } from "../../theme"
 
-export interface IProps extends FlexProps {
+export type BannerNotificationProps = FlexProps & {
   shouldShow?: boolean
 }
 
-const BannerNotification: React.FC<IProps> = ({
+const BannerNotification = ({
   children,
   shouldShow = false,
   ...props
-}) => {
+}: BannerNotificationProps) => {
   const [isLGScreen] = useMediaQuery(`min-width: ${oldTheme.breakpoints.l}`)
   return (
     <>

src/components/Banners/BugBountyBanner.tsx

@@ -5,7 +5,7 @@ import { Center, Text } from "@chakra-ui/react"
 // Components
 import BannerNotification from "../BannerNotification"
 
-const BugBountyBanner: React.FC = () => (
+const BugBountyBanner = () => (
   <BannerNotification shouldShow>
     <Center>
       <Text m={0} p={0}>

src/components/Banners/DismissableBanner.tsx

@@ -6,12 +6,15 @@ import { Center, CloseButton } from "@chakra-ui/react"
 import BannerNotification from "../BannerNotification"
 
 // Interface
-export interface IProps {
+export type DismissableBannerProps = {
   children: JSX.Element
   storageKey: string
 }
 
-const DismissableBanner: React.FC<IProps> = ({ children, storageKey }) => {
+const DismissableBanner = ({
+  children,
+  storageKey,
+}: DismissableBannerProps) => {
   const [show, setShow] = useState<boolean>(false)
 
   useEffect(() => {

src/components/Banners/PostMergeBanner.tsx

@@ -6,11 +6,11 @@ import type { TranslationKey } from "@/lib/types"
 import BannerNotification from "../BannerNotification"
 import Translation from "../Translation"
 
-export interface IProps {
+export type PostMergeBannerProps = {
   translationString: TranslationKey
 }
 
-const PostMergeBanner: React.FC<IProps> = ({ translationString }) => (
+const PostMergeBanner = ({ translationString }: PostMergeBannerProps) => (
   <BannerNotification
     shouldShow
     zIndex={1}

src/components/BeaconChainActions.tsx

@@ -1,6 +1,8 @@
 import { useTranslation } from "next-i18next"
 import { Box, Flex } from "@chakra-ui/react"
 
+import { ChildOnlyProp } from "@/lib/types"
+
 import { ButtonLink } from "@/components/Buttons"
 import Card from "@/components/Card"
 import CardList, { type CardListItem } from "@/components/CardList"
@@ -10,7 +12,7 @@ import Translation from "@/components/Translation"
 import beaconchain from "@/public/upgrades/beaconchainemoji.png"
 import beaconscan from "@/public/upgrades/etherscan.png"
 
-const H3: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+const H3 = ({ children }: ChildOnlyProp) => (
   <OldHeading
     as="h3"
     fontSize="2xl"
@@ -22,7 +24,7 @@ const H3: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </OldHeading>
 )
 
-const BeaconChainActions: React.FC = () => {
+const BeaconChainActions = () => {
   const { t } = useTranslation(["page-upgrades-index", "page-upgrades"])
 
   const datapoints: CardListItem[] = [

src/components/BoxGrid.tsx

@@ -7,15 +7,15 @@ import Emoji from "./Emoji"
 import OldHeading from "./OldHeading"
 import Text from "./OldText"
 
-export interface IBoxItem {
+export interface BoxItem {
   emoji: string
   title: string
   description: string
   matomo: MatomoEventOptions
 }
 
-export interface IProps {
-  items: Array<IBoxItem>
+export type BoxGridProps = {
+  items: Array<BoxItem>
 }
 
 // Represent string as 32-bit integer
@@ -40,7 +40,7 @@ const colors = [
   "gridPurple",
 ]
 
-const BoxGrid: React.FC<IProps> = ({ items }) => {
+const BoxGrid = ({ items }: BoxGridProps) => {
   const [indexOpen, setOpenIndex] = useState(0)
 
   return (

src/components/ButtonDropdown.tsx

@@ -33,11 +33,11 @@ export interface List {
   items: Array<ListItem>
 }
 
-export interface IProps extends ButtonProps {
+export type ButtonDropdownProps = ButtonProps & {
   list: List
 }
 
-const ButtonDropdown: React.FC<IProps> = ({ list, ...rest }) => {
+const ButtonDropdown = ({ list, ...rest }: ButtonDropdownProps) => {
   const { t } = useTranslation("common")
   const handleClick = (
     e: MouseEvent<HTMLElement>,

src/components/CallToContribute.tsx

@@ -2,20 +2,18 @@ import React, { ReactNode } from "react"
 import { FaGithub } from "react-icons/fa"
 import { Flex, FlexProps, Icon, useToken } from "@chakra-ui/react"
 
+import { ChildOnlyProp } from "@/lib/types"
+
 import { ButtonLink } from "./Buttons"
 import InlineLink from "./Link"
 import OldHeading from "./OldHeading"
 import Text from "./OldText"
 import Translation from "./Translation"
 
-export interface IProps {
+export type CallToContributeProps = {
   editPath: string
 }
 
-export type ChildOnlyType = {
-  children: ReactNode
-}
-
 const ContentColumn = (props: {
   children: ReactNode
   hideBelow?: FlexProps["hideBelow"]
@@ -32,13 +30,13 @@ const ContentColumn = (props: {
   />
 )
 
-const DescriptionParagraph = ({ children }: ChildOnlyType) => (
+const DescriptionParagraph = ({ children }: ChildOnlyProp) => (
   <Text lineHeight="140%" color="text" fontFamily="monospace">
     {children}
   </Text>
 )
 
-const CallToContribute: React.FC<IProps> = ({ editPath }) => {
+const CallToContribute = ({ editPath }: CallToContributeProps) => {
   /**
    * TODO: After completion of the UI migration,
    * Remove this and pass the token value directly

src/components/Callout.tsx

@@ -8,7 +8,7 @@ import { Image, type ImageProps } from "@/components/Image"
 import OldHeading from "@/components/OldHeading"
 import Text from "@/components/OldText"
 
-export interface IProps extends FlexProps {
+export type CalloutProps = FlexProps & {
   children?: React.ReactNode
   image?: ImageProps["src"]
   emoji?: string
@@ -18,7 +18,7 @@ export interface IProps extends FlexProps {
   className?: string
 }
 
-const Callout: React.FC<IProps> = ({
+const Callout = ({
   image,
   emoji,
   alt,
@@ -27,7 +27,7 @@ const Callout: React.FC<IProps> = ({
   children,
   className,
   ...rest
-}) => {
+}: CalloutProps) => {
   const { t } = useTranslation("common")
 
   return (

src/components/Card/Card.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryFn } from "@storybook/react"
 
 import { Button } from "@/components/Buttons"
 
-import Card, { IProps } from "."
+import Card, { CardProps } from "."
 
 export default {
   component: Card,
@@ -20,7 +20,7 @@ export default {
 export const Default: StoryFn<typeof Card> = (args) => {
   const { t } = useTranslation("page-developers-index")
 
-  const defaultProps: IProps = {
+  const defaultProps: CardProps = {
     emoji: ":woman_student:",
     title: t("page-developers-learn"),
     description: t("page-developers-learn-desc"),

src/components/Card/index.tsx

@@ -3,20 +3,14 @@ import { Heading, Stack, StackProps, Text } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
 
-export interface IProps extends Omit<StackProps, "children" | "title"> {
+export type CardProps = Omit<StackProps, "children" | "title"> & {
   children?: ReactNode
   emoji?: string
   title?: ReactNode
   description?: ReactNode
 }
 
-const Card: React.FC<IProps> = ({
-  emoji,
-  title,
-  description,
-  children,
-  ...props
-}) => (
+const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
   <Stack
     spacing="4"
     justifyContent="space-between"

src/components/CardList.tsx

@@ -52,7 +52,7 @@ const Card = ({
   caption,
   link,
   image,
-  imageWidth = 20, // Set 20px as default image width, can be overrided if needed
+  imageWidth = 20, // Set 20px as default image width, can be overridden if needed
   alt,
   ...props
 }: CardProps) => {

src/components/Codeblock.tsx

@@ -204,19 +204,19 @@ const getValidChildrenForCodeblock = (child) => {
   }
 }
 
-export interface IProps {
+export type CodeblockProps = {
   allowCollapse?: boolean
   codeLanguage: string
   fromHomepage?: boolean
   children: React.ReactNode
 }
 
-const Codeblock: React.FC<IProps> = ({
+const Codeblock = ({
   children,
   allowCollapse = true,
   codeLanguage,
   fromHomepage = false,
-}) => {
+}: CodeblockProps) => {
   const { t } = useTranslation("common")
   const selectedTheme = useColorModeValue(codeTheme.light, codeTheme.dark)