Merge remote-tracking branch 'upstream/dev' into add-lychee-ci

Author: brossetti1

.all-contributorsrc

@@ -12715,6 +12715,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "JJOptimist",
+      "name": "JJOptimist",
+      "avatar_url": "https://avatars.githubusercontent.com/u/86833563?v=4",
+      "profile": "https://github.com/JJOptimist",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.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

@@ -1945,6 +1945,9 @@ 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/jenish-thapa"><img src="https://avatars.githubusercontent.com/u/141203631?v=4?s=100" width="100px;" alt="Jenish Thapa"/><br /><sub><b>Jenish Thapa</b></sub></a><br /><a href="#ideas-jenish-thapa" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://jiangxue.org/~ritsu"><img src="https://avatars.githubusercontent.com/u/57232813?v=4?s=100" width="100px;" alt="iusx"/><br /><sub><b>iusx</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=iusx" title="Code">💻</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/JJOptimist"><img src="https://avatars.githubusercontent.com/u/86833563?v=4?s=100" width="100px;" alt="JJOptimist"/><br /><sub><b>JJOptimist</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AJJOptimist" title="Bug reports">🐛</a></td>
+    </tr>
   </tbody>
 </table>
 

README.md

@@ -6,6 +6,7 @@ import I18nProvider from "@/components/I18nProvider"
 import mdComponents from "@/components/MdComponents"
 
 import { dataLoader } from "@/lib/utils/data/dataLoader"
+import { dateToString } from "@/lib/utils/date"
 import { getPostSlugs } from "@/lib/utils/md"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
@@ -18,6 +19,18 @@ import { getMdMetadata } from "@/lib/md/metadata"
 
 const loadData = dataLoader([["gfissues", fetchGFIs]])
 
+function getLayoutFromSlug(slug: string) {
+  if (slug.includes("developers/docs")) {
+    return "docs"
+  }
+
+  if (slug.includes("developers/tutorials")) {
+    return "tutorial"
+  }
+
+  return "static"
+}
+
 export default async function Page({
   params,
 }: {
@@ -49,6 +62,7 @@ export default async function Page({
     tocItems,
     lastEditLocaleTimestamp,
     isTranslated,
+    contributors,
   } = await getPageData({
     locale,
     slug,
@@ -61,9 +75,14 @@ export default async function Page({
   })
 
   // Determine the actual layout after we have the frontmatter
-  const layout = frontmatter.template || "static"
+  const layout = frontmatter.template || getLayoutFromSlug(slug)
   const Layout = layoutMapping[layout]
 
+  // If the page has a published date, format it
+  if ("published" in frontmatter) {
+    frontmatter.published = dateToString(frontmatter.published)
+  }
+
   // Get i18n messages
   const allMessages = await getMessages({ locale })
   const requiredNamespaces = getRequiredNamespacesForPage(slug, layout)
@@ -77,6 +96,9 @@ export default async function Page({
         tocItems={tocItems}
         lastEditLocaleTimestamp={lastEditLocaleTimestamp}
         contentNotTranslated={!isTranslated}
+        contributors={contributors}
+        // TODO: Remove this once we have a real timeToRead value
+        timeToRead={2}
       >
         {content}
       </Layout>
@@ -85,7 +107,7 @@ export default async function Page({
 }
 
 export async function generateStaticParams() {
-  const slugs = await getPostSlugs("/", /\/developers/)
+  const slugs = await getPostSlugs("/")
 
   return LOCALES_CODES.flatMap((locale) =>
     slugs.map((slug) => ({
@@ -95,6 +117,8 @@ export async function generateStaticParams() {
   )
 }
 
+export const dynamicParams = false
+
 export async function generateMetadata({
   params,
 }: {

app/[locale]/[...slug]/page.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"