Merge pull request #166 from ethereum/community-page

feat: Community page

Author: pettinarip

src/components/Hero/ContentHero/ContentHero.stories.tsx

@@ -5,14 +5,16 @@ import ContentHeroComponent, { ContentHeroProps } from "."
 
 type ContentHeroType = typeof ContentHeroComponent
 
+import contentHeroImg from "../../../../public/mainnet.png"
+
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: ContentHeroComponent,
   parameters: {
     layout: "none",
   },
   argTypes: {
-    heroImgSrc: {
+    heroImg: {
       table: {
         disable: true,
       },
@@ -22,9 +24,6 @@ const meta = {
 
 export default meta
 
-// TODO: Double-check correct way to mock Next.js image data
-const mockImgData = "/mainnet.png"
-
 export const ContentHero: StoryObj = {
   render: () => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -52,7 +51,7 @@ export const ContentHero: StoryObj = {
     return (
       <ContentHeroComponent
         breadcrumbs={{ slug: "/en/run-a-node/" }}
-        heroImgSrc={mockImgData}
+        heroImg={contentHeroImg}
         title={t("hero-header")}
         description={t("hero-subtitle")}
         buttons={buttons}

src/components/Hero/ContentHero/index.tsx

@@ -1,58 +1,54 @@
 import { Box, Heading, HStack, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 
-import type { CommonHeroProps } from "@/lib/types"
+import { CommonHeroProps } from "@/lib/types"
 
-import Breadcrumbs, { type BreadcrumbsProps } from "@/components/Breadcrumbs"
-import { CallToAction } from "@/components/Hero/CallToAction"
+import Breadcrumbs, { BreadcrumbsProps } from "@/components/Breadcrumbs"
 import { Image } from "@/components/Image"
 
+import { CallToAction } from "../CallToAction"
+
 export interface ContentHeroProps extends Omit<CommonHeroProps, "header"> {
   breadcrumbs: BreadcrumbsProps
 }
 
-const ContentHero = ({
-  breadcrumbs,
-  heroImgSrc,
-  buttons,
-  title,
-  description,
-}: ContentHeroProps) => (
-  <Box bgImg="bgMainGradient">
-    <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
-      <Box
-        height={{ base: "300px", md: "400px", lg: "full" }}
-        order={{ lg: 1 }}
-      >
-        <Image
-          alt=""
-          src={heroImgSrc}
-          priority
-          style={{ objectFit: "contain" }}
-          boxSize="full"
-        />
-      </Box>
-      <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
-        <Breadcrumbs {...breadcrumbs} />
-        <Stack spacing="6">
-          <Heading as="h1" size="2xl">
-            {title}
-          </Heading>
-          <Text fontSize="lg">{description}</Text>
-          {buttons && (
+const ContentHero = (props: ContentHeroProps) => {
+  const { breadcrumbs, heroImg, buttons, title, description } = props
+  return (
+    <Box bgImg="bgMainGradient">
+      <SimpleGrid columns={{ base: 1, lg: 2 }} maxW="1536px" mx="auto" gap="4">
+        <Box
+          height={{ base: "300px", md: "400px", lg: "full" }}
+          order={{ lg: 1 }}
+        >
+          <Image
+            src={heroImg}
+            alt=""
+            priority
+            style={{ objectFit: "contain" }}
+            boxSize="full"
+          />
+        </Box>
+        <Stack p={{ base: "8", lg: "16" }} spacing="9" justify="center">
+          <Breadcrumbs {...breadcrumbs} />
+          <Stack spacing="6">
+            <Heading as="h1" size="2xl">
+              {title}
+            </Heading>
+            <Text fontSize="lg">{description}</Text>
             <HStack spacing="4">
-              {buttons.map((button, idx) => {
+              {buttons!.map((button, idx) => {
                 if (!button) return
                 return <CallToAction key={idx} {...button} />
               })}
             </HStack>
-          )}
+          </Stack>
+          {/* TODO:
+           * Add conditional Big Stat box here
+           */}
         </Stack>
-        {/* TODO:
-         * Add conditional Big Stat box here
-         */}
-      </Stack>
-    </SimpleGrid>
-  </Box>
-)
+      </SimpleGrid>
+    </Box>
+  )
+}
 
 export default ContentHero

src/components/Hero/HomeHero/HomeHero.stories.tsx

@@ -1,3 +1,4 @@
+import * as React from "react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import HomeHeroComponent from "."
@@ -11,7 +12,7 @@ const meta = {
     layout: "none",
   },
   argTypes: {
-    heroImgSrc: {
+    heroImg: {
       table: {
         disable: true,
       },
@@ -21,10 +22,11 @@ const meta = {
 
 export default meta
 
-// TODO: Double-check correct way to mock Next.js image data
-const mockImgData = "/home/hero.png"
+import homeHeroImg from "../../../../public/home/hero.png"
 
 export const HomeHero: StoryObj<typeof meta> = {
-  args: { heroImgSrc: mockImgData },
+  args: {
+    heroImg: homeHeroImg,
+  },
   render: (args) => <HomeHeroComponent {...args} />,
 }

src/components/Hero/HomeHero/index.tsx

@@ -7,15 +7,15 @@ import { ButtonLink } from "@/components/Buttons"
 import { Image } from "@/components/Image"
 import Morpher from "@/components/Morpher"
 
-export type HomeHeroProps = Pick<CommonHeroProps, "heroImgSrc">
+export type HomeHeroProps = Pick<CommonHeroProps, "heroImg">
 
-const HomeHero = ({ heroImgSrc }: HomeHeroProps) => {
+const HomeHero = ({ heroImg }: HomeHeroProps) => {
   const { t } = useTranslation("page-index")
   return (
     <Box>
       <Box h={440}>
         <Image
-          src={heroImgSrc}
+          src={heroImg}
           alt={t("page-index:page-index-hero-image-alt")}
           w="full"
           h="full"
@@ -34,11 +34,11 @@ const HomeHero = ({ heroImgSrc }: HomeHeroProps) => {
           <Morpher />
           <VStack spacing="6">
             <Heading as="h1" size="2xl">
-              {t("page-index-title")}
+              {t("page-index:page-index-title")}
             </Heading>
-            <Text size="xl">{t("page-index-description")}</Text>
+            <Text size="xl">{t("page-index:page-index-description")}</Text>
             <ButtonLink href="/learn/">
-              {t("page-index-title-button")}
+              {t("page-index:page-index-title-button")}
             </ButtonLink>
           </VStack>
         </Stack>

src/components/Hero/HubHero/HubHero.stories.tsx

@@ -3,8 +3,6 @@ import { useTranslation } from "next-i18next"
 import { Box } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
-import type { CommonHeroProps as HubHeroProps } from "@/lib/types"
-
 import HubHeroComponent from "./"
 
 type HubHeroType = typeof HubHeroComponent
@@ -26,22 +24,23 @@ const meta = {
 
 export default meta
 
-// TODO: Double-check correct way to mock Next.js image data
-const mockImgData = "/heroes/learn-hub-hero.png"
+import { CommonHeroProps } from "@/lib/types"
+
+import learnHubHeroImg from "../../../../public/heroes/learn-hub-hero.png"
 
 export const HubHero: StoryObj<typeof meta> = {
   args: {
     title: "learn-hub",
     header: "hero-header",
     description: "hero-subtitle",
-    heroImgSrc: mockImgData,
+    heroImg: learnHubHeroImg,
   },
 
   render: ({ title, header, description, ...props }) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { t } = useTranslation()
 
-    const buttons: HubHeroProps["buttons"] = [
+    const buttons: CommonHeroProps["buttons"] = [
       {
         content: t("hero-button-lets-get-started"),
         toId: "what-is-crypto-ethereum",

src/components/Hero/HubHero/index.tsx

@@ -12,24 +12,27 @@ import type { CommonHeroProps } from "@/lib/types"
 import { CallToAction } from "@/components/Hero/CallToAction"
 import { Image } from "@/components/Image"
 
-const HubHero = ({
-  heroImgSrc,
-  title,
-  header,
-  description,
-  buttons,
-}: CommonHeroProps) => {
+const HubHero = (props: CommonHeroProps) => {
+  const { heroImg, title, header, description, buttons } = props
+
+  if (buttons && buttons.length > 2) {
+    throw Error(
+      "Can not have more than two call-to-action buttons in this hero component."
+    )
+  }
+
   const height = useBreakpointValue({
     base: "192px",
     md: "256px",
     lg: "320px",
     xl: "576px",
     "2xl": "672px",
   })
+
   return (
     <Box position="relative">
       <Image
-        src={heroImgSrc}
+        src={heroImg}
         alt=""
         priority
         sizes="100vw"

src/components/Hero/MdxHero/index.tsx

@@ -1,6 +1,6 @@
 import { Heading, Stack } from "@chakra-ui/react"
 
-import type { CommonHeroProps } from "@/lib/types"
+import { CommonHeroProps } from "@/lib/types"
 
 import Breadcrumbs, { type BreadcrumbsProps } from "@/components/Breadcrumbs"
 

src/layouts/Roadmap.tsx

@@ -133,66 +133,66 @@ export const RoadmapLayout: React.FC<IProps> = ({
     <Box position="relative">
       {slug === "/roadmap/" ? (
         <HubHero
-          heroImgSrc={RoadmapHubHeroImage}
+          heroImg={RoadmapHubHeroImage}
           header={frontmatter.title}
           title={""}
           description={frontmatter.description}
         />
       ) : (
         <HeroContainer>
-        <Flex
-          w="full"
-          flexDirection={{ base: "column", lg: "row" }}
-          justify="space-between"
-        >
-          <TitleCard>
-            {/* TODO: Double check this slug works */}
-            <Breadcrumbs slug={slug} mb="8" />
-            <Title>{frontmatter.title}</Title>
-            <OldText>{frontmatter.description}</OldText>
-            {frontmatter?.buttons && (
-              // FIXME: remove the `ul` override once removed the corresponding
-              // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
-              <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
-                {frontmatter.buttons.map((button, idx) => {
-                  if (button?.to) {
+          <Flex
+            w="full"
+            flexDirection={{ base: "column", lg: "row" }}
+            justify="space-between"
+          >
+            <TitleCard>
+              {/* TODO: Double check this slug works */}
+              <Breadcrumbs slug={slug} mb="8" />
+              <Title>{frontmatter.title}</Title>
+              <OldText>{frontmatter.description}</OldText>
+              {frontmatter?.buttons && (
+                // FIXME: remove the `ul` override once removed the corresponding
+                // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
+                <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
+                  {frontmatter.buttons.map((button, idx) => {
+                    if (button?.to) {
+                      return (
+                        <WrapItem key={idx}>
+                          <ButtonLink variant={button?.variant} to={button?.to}>
+                            {button.label}
+                          </ButtonLink>
+                        </WrapItem>
+                      )
+                    }
                     return (
                       <WrapItem key={idx}>
-                        <ButtonLink variant={button?.variant} to={button?.to}>
-                          {button.label}
-                        </ButtonLink>
+                        <Button variant={button?.variant} toId={button?.toId}>
+                          {button?.label}
+                        </Button>
                       </WrapItem>
                     )
-                  }
-                  return (
-                    <WrapItem key={idx}>
-                      <Button variant={button?.variant} toId={button?.toId}>
-                        {button?.label}
-                      </Button>
-                    </WrapItem>
-                  )
-                })}
-              </Wrap>
-            )}
-            <TableOfContents
-              position="relative"
-              zIndex="2"
-              items={tocItems}
-              isMobile
-            />
-          </TitleCard>
-          <Center>
-            <Image
-              src={frontmatter.image}
-              alt={frontmatter.alt ?? ""}
-              style={{ objectFit: "contain" }}
-              width={700}
-              height={345}
-              priority
-            />
-          </Center>
-        </Flex>
-      </HeroContainer>
+                  })}
+                </Wrap>
+              )}
+              <TableOfContents
+                position="relative"
+                zIndex="2"
+                items={tocItems}
+                isMobile
+              />
+            </TitleCard>
+            <Center>
+              <Image
+                src={frontmatter.image}
+                alt={frontmatter.alt ?? ""}
+                style={{ objectFit: "contain" }}
+                width={700}
+                height={345}
+                priority
+              />
+            </Center>
+          </Flex>
+        </HeroContainer>
       )}
       <Page>
         {/* TODO: Switch to `above="lg"` after completion of Chakra Migration */}