Merge pull request #15114 from ethereum/app-router-pages

App router pages

Author: wackerow

.storybook/manager.ts

@@ -1,6 +1,6 @@
 import { addons } from "@storybook/manager-api"
 
-import favicon from "../public/images/favicon.png"
+import favicon from "../public/images/eth-home-icon.png"
 
 import theme from "./theme"
 

.storybook/preview-head.html

@@ -1,5 +1,6 @@
 import isChromatic from "chromatic/isChromatic"
 import { MotionGlobalConfig } from "framer-motion"
+import { IBM_Plex_Mono, Inter } from "next/font/google"
 import type { Preview } from "@storybook/react"
 
 import ThemeProvider from "@/components/ThemeProvider"
@@ -9,11 +10,24 @@ import nextIntl, { baseLocales } from "./next-intl"
 import { withNextThemes } from "./withNextThemes"
 
 import "../src/styles/global.css"
-import "../src/styles/fonts.css"
 import "../src/styles/docsearch.css"
 
 import "@docsearch/css"
 
+const inter = Inter({
+  subsets: ["latin"],
+  display: "swap",
+  variable: "--font-inter",
+  preload: true,
+})
+
+const ibmPlexMono = IBM_Plex_Mono({
+  subsets: ["latin"],
+  weight: ["400"],
+  display: "swap",
+  variable: "--font-mono",
+})
+
 MotionGlobalConfig.skipAnimations = isChromatic()
 
 export const breakpointSet: [token: string, value: string][] = [
@@ -39,11 +53,13 @@ const preview: Preview = {
       defaultTheme: "light",
     }),
     (Story) => (
-      <ThemeProvider>
-        <TooltipProvider>
-          <Story />
-        </TooltipProvider>
-      </ThemeProvider>
+      <div className={`${inter.variable} ${ibmPlexMono.variable}`}>
+        <ThemeProvider>
+          <TooltipProvider>
+            <Story />
+          </TooltipProvider>
+        </ThemeProvider>
+      </div>
     ),
   ],
   parameters: {

.storybook/preview.tsx

@@ -1,5 +1,6 @@
+"use client"
+
 import { Fragment, lazy, Suspense } from "react"
-import type { GetStaticProps, InferGetStaticPropsType } from "next"
 import { FaDiscord, FaGithub } from "react-icons/fa6"
 import { IoMdCopy } from "react-icons/io"
 import { MdCheck } from "react-icons/md"
@@ -8,10 +9,9 @@ import type {
   AllMetricData,
   BasePageProps,
   CommunityBlog,
-  Lang,
-  Params,
   RSSItem,
 } from "@/lib/types"
+import { CommunityEvent } from "@/lib/interfaces"
 
 import { ChevronNext } from "@/components/Chevron"
 import CodeModal from "@/components/CodeModal"
@@ -24,8 +24,13 @@ import Calendar from "@/components/icons/calendar.svg"
 import CalendarAdd from "@/components/icons/calendar-add.svg"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
-import PageMetadata from "@/components/PageMetadata"
 import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
 import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 import SvgButtonLink, {
   type SvgButtonLinkProps,
@@ -56,43 +61,13 @@ import {
 import WindowBox from "@/components/WindowBox"
 
 import { cn } from "@/lib/utils/cn"
-import { dataLoader } from "@/lib/utils/data/dataLoader"
 import { isValidDate } from "@/lib/utils/date"
-import { existsNamespace } from "@/lib/utils/existsNamespace"
-import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { trackCustomEvent } from "@/lib/utils/matomo"
-import { polishRSSList } from "@/lib/utils/rss"
 import { breakpointAsNumber } from "@/lib/utils/screen"
-import { getLocaleTimestamp } from "@/lib/utils/time"
-import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
-
-import {
-  BASE_TIME_UNIT,
-  BLOG_FEEDS,
-  BLOGS_WITHOUT_FEED,
-  CALENDAR_DISPLAY_COUNT,
-  DEFAULT_LOCALE,
-  GITHUB_REPO_URL,
-  LOCALES_CODES,
-  RSS_DISPLAY_COUNT,
-} from "@/lib/constants"
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "../../components/ui/accordion"
+import { GITHUB_REPO_URL } from "@/lib/constants"
 
 import { useClipboard } from "@/hooks/useClipboard"
-import loadNamespaces from "@/i18n/loadNamespaces"
-import { fetchCommunityEvents } from "@/lib/api/calendarEvents"
-import { fetchEthPrice } from "@/lib/api/fetchEthPrice"
-import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
-import { fetchAttestantPosts } from "@/lib/api/fetchPosts"
-import { fetchRSS } from "@/lib/api/fetchRSS"
-import { fetchTotalEthStaked } from "@/lib/api/fetchTotalEthStaked"
-import { fetchTotalValueLocked } from "@/lib/api/fetchTotalValueLocked"
 import EventFallback from "@/public/images/events/event-placeholder.png"
 import BuildersImage from "@/public/images/heroes/developers-hub-hero.jpg"
 import ActivityImage from "@/public/images/heroes/layer-2-hub-hero.jpg"
@@ -111,110 +86,17 @@ const Codeblock = lazy(() =>
 
 const StatsBoxGrid = lazy(() => import("@/components/StatsBoxGrid"))
 
-// API calls
-const fetchXmlBlogFeeds = async () => {
-  return await fetchRSS(BLOG_FEEDS)
-}
-
 type Props = BasePageProps & {
+  calendar: CommunityEvent[]
   metricResults: AllMetricData
   rssData: { rssItems: RSSItem[]; blogLinks: CommunityBlog[] }
 }
 
-// In seconds
-const REVALIDATE_TIME = BASE_TIME_UNIT * 1
-
-const loadData = dataLoader(
-  [
-    ["ethPrice", fetchEthPrice],
-    ["totalEthStaked", fetchTotalEthStaked],
-    ["totalValueLocked", fetchTotalValueLocked],
-    ["growThePieData", fetchGrowThePie],
-    ["communityEvents", fetchCommunityEvents],
-    ["attestantPosts", fetchAttestantPosts],
-    ["rssData", fetchXmlBlogFeeds],
-  ],
-  REVALIDATE_TIME * 1000
-)
-
-export async function getStaticPaths() {
-  return {
-    paths: LOCALES_CODES.map((locale) => ({ params: { locale } })),
-    fallback: false,
-  }
-}
-
-export const getStaticProps = (async ({ params }) => {
-  const { locale = DEFAULT_LOCALE } = params || {}
-
-  const [
-    ethPrice,
-    totalEthStaked,
-    totalValueLocked,
-    growThePieData,
-    communityEvents,
-    attestantPosts,
-    xmlBlogs,
-  ] = await loadData()
-
-  const metricResults: AllMetricData = {
-    ethPrice,
-    totalEthStaked,
-    totalValueLocked,
-    txCount: growThePieData.txCount,
-    txCostsMedianUsd: growThePieData.txCostsMedianUsd,
-  }
-
-  const calendar = communityEvents.upcomingEventData
-    .sort((a, b) => {
-      const dateA = isValidDate(a.date) ? new Date(a.date).getTime() : -Infinity
-      const dateB = isValidDate(b.date) ? new Date(b.date).getTime() : -Infinity
-      return dateA - dateB
-    })
-    .slice(0, CALENDAR_DISPLAY_COUNT)
-
-  // load i18n required namespaces for the given page
-  const requiredNamespaces = getRequiredNamespacesForPage("/")
-
-  // check if the translated page content file exists for locale
-  const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[0])
-
-  // load last deploy date to pass to Footer in RootLayout
-  const lastDeployDate = getLastDeployDate()
-  const lastDeployLocaleTimestamp = getLocaleTimestamp(
-    locale as Lang,
-    lastDeployDate
-  )
-
-  // RSS feed items
-  const polishedRssItems = polishRSSList(attestantPosts, ...xmlBlogs)
-  const rssItems = polishedRssItems.slice(0, RSS_DISPLAY_COUNT)
-
-  const blogLinks = polishedRssItems.map(({ source, sourceUrl }) => ({
-    name: source,
-    href: sourceUrl,
-  })) as CommunityBlog[]
-  blogLinks.push(...BLOGS_WITHOUT_FEED)
-
-  const messages = await loadNamespaces(locale, requiredNamespaces)
-
-  return {
-    props: {
-      messages,
-      calendar,
-      contentNotTranslated,
-      lastDeployLocaleTimestamp,
-      metricResults,
-      rssData: { rssItems, blogLinks },
-    },
-  }
-}) satisfies GetStaticProps<Props, Params>
-
 const HomePage = ({
   calendar,
   metricResults,
   rssData: { rssItems, blogLinks },
-}: InferGetStaticPropsType<typeof getStaticProps>) => {
+}: Props) => {
   const {
     t,
     locale,
@@ -236,10 +118,6 @@ const HomePage = ({
 
   return (
     <MainArticle className="flex w-full flex-col items-center" dir={dir}>
-      <PageMetadata
-        title={t("page-index:page-index-meta-title")}
-        description={t("page-index:page-index-meta-description")}
-      />
       <TranslatathonBanner />
       <HomeHero heroImg={Hero} className="w-full" />
       <div className="w-full space-y-32 px-4 md:mx-6 lg:space-y-48">
@@ -504,7 +382,7 @@ const HomePage = ({
                   <button
                     key={title}
                     className={cn(
-                      "flex flex-col gap-y-0.5 border-t px-6 py-4 text-start hover:bg-background-highlight max-md:hidden",
+                      "flex flex-col gap-y-0.5 border-t px-6 py-4 hover:bg-background-highlight max-md:hidden",
                       isModalOpen &&
                         idx === activeCode &&
                         "bg-background-highlight"

src/pages/[locale]/index.tsx renamed to app/[locale]/_components/home.tsx

@@ -1,19 +1,16 @@
+"use client"
+
 import { HTMLAttributes } from "react"
-import type { GetStaticProps } from "next/types"
 
-import type { BasePageProps, ChildOnlyProp, Lang, Params } from "@/lib/types"
+import type { ChildOnlyProp } from "@/lib/types"
 
 import AssetDownload from "@/components/AssetDownload"
 import FeedbackCard from "@/components/FeedbackCard"
 import { Image } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
-import PageMetadata from "@/components/PageMetadata"
 import { Center, Flex } from "@/components/ui/flex"
 import InlineLink from "@/components/ui/Link"
 
-import { existsNamespace } from "@/lib/utils/existsNamespace"
-import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
-import { getLocaleTimestamp } from "@/lib/utils/time"
 // import efLogo from "@/public/images/ef-logo.png"
 // import efLogoWhite from "@/public/images/ef-logo-white.png"
 // import ethDiamondBlackHero from "@/public/images/assets/eth-diamond-black.png"
@@ -24,13 +21,8 @@ import { getLocaleTimestamp } from "@/lib/utils/time"
 // import ethGifWaves from "@/public/images/eth-gif-waves.png"
 // import ethPortraitPurpleWhite from "@/public/images/assets/ethereum-logo-portrait-purple-white.png"
 // import leslieTheRhino from "@/public/images/upgrades/upgrade_rhino.png"
-import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
-
-import { DEFAULT_LOCALE, LOCALES_CODES } from "@/lib/constants"
-
 import useColorModeValue from "@/hooks/useColorModeValue"
 import { useTranslation } from "@/hooks/useTranslation"
-import loadNamespaces from "@/i18n/loadNamespaces"
 import ethDiamondBlack from "@/public/images/assets/eth-diamond-black.png"
 import ethDiamondBlackGray from "@/public/images/assets/eth-diamond-black-gray.png"
 import ethDiamondBlackWhite from "@/public/images/assets/eth-diamond-black-white.jpg"
@@ -98,37 +90,6 @@ const H3 = (props: ChildOnlyProp) => (
   <h3 className="mb-0 mt-10 leading-xs" {...props} />
 )
 
-export async function getStaticPaths() {
-  return {
-    paths: LOCALES_CODES.map((locale) => ({ params: { locale } })),
-    fallback: false,
-  }
-}
-
-export const getStaticProps = (async ({ params }) => {
-  const { locale = DEFAULT_LOCALE } = params || {}
-
-  const requiredNamespaces = getRequiredNamespacesForPage("assets")
-
-  const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[2])
-
-  const lastDeployDate = getLastDeployDate()
-  const lastDeployLocaleTimestamp = getLocaleTimestamp(
-    locale as Lang,
-    lastDeployDate
-  )
-
-  const messages = await loadNamespaces(locale, requiredNamespaces)
-
-  return {
-    props: {
-      messages,
-      contentNotTranslated,
-      lastDeployLocaleTimestamp,
-    },
-  }
-}) satisfies GetStaticProps<BasePageProps, Params>
-
 const AssetsPage = () => {
   // Ignore locale in the URL for SVG path in public directory to fix broken link
   // SVG path changes from /en/images => /images
@@ -141,10 +102,6 @@ const AssetsPage = () => {
   )
   return (
     <Flex className="w-full flex-col">
-      <PageMetadata
-        title={t("page-assets-meta-title")}
-        description={t("page-assets-meta-desc")}
-      />
       <MainArticle className="px-8 py-4">
         <Flex className="flex-col px-8 py-4">
           <Center>