Merge pull request #15633 from ethereum/master

Master

Author: corwintines

.all-contributorsrc

@@ -11685,7 +11685,8 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/6020891?v=4",
       "profile": "http://www.edukids.cz",
       "contributions": [
-        "eventOrganizing"
+        "eventOrganizing",
+        "maintenance"
       ]
     },
     {
@@ -12770,6 +12771,15 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "Nik-EpicWeb3",
+      "name": "Nik-EpicWeb3",
+      "avatar_url": "https://avatars.githubusercontent.com/u/214466248?v=4",
+      "profile": "https://github.com/Nik-EpicWeb3",
+      "contributions": [
+        "eventOrganizing"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.env.example

@@ -14,7 +14,7 @@
 # NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME=insertValue
 
 # Github token for read-only use with api functions
-# NEXT_PUBLIC_GITHUB_TOKEN_READ_ONLY=insertValue
+# GITHUB_TOKEN_READ_ONLY=insertValue
 
 # Etherscan API key (required for Etherscan API fetches)
 # ETHERSCAN_API_KEY=insertValue

README.md

@@ -1836,7 +1836,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://hector.im"><img src="https://avatars.githubusercontent.com/u/12469549?v=4?s=100" width="100px;" alt="Héctor Chong"/><br /><sub><b>Héctor Chong</b></sub></a><br /><a href="#content-Hector-Chong" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/nakmr"><img src="https://avatars.githubusercontent.com/u/145886319?v=4?s=100" width="100px;" alt="nace.kimura"/><br /><sub><b>nace.kimura</b></sub></a><br /><a href="#content-nakmr" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/WuRuiLei2023"><img src="https://avatars.githubusercontent.com/u/149141323?v=4?s=100" width="100px;" alt="WuRuiLei2023"/><br /><sub><b>WuRuiLei2023</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3AWuRuiLei2023" title="Bug reports">🐛</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="http://www.edukids.cz"><img src="https://avatars.githubusercontent.com/u/6020891?v=4?s=100" width="100px;" alt="Radek"/><br /><sub><b>Radek</b></sub></a><br /><a href="#eventOrganizing-radeksvarz" title="Event Organizing">📋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.edukids.cz"><img src="https://avatars.githubusercontent.com/u/6020891?v=4?s=100" width="100px;" alt="Radek"/><br /><sub><b>Radek</b></sub></a><br /><a href="#eventOrganizing-radeksvarz" title="Event Organizing">📋</a> <a href="#maintenance-radeksvarz" title="Maintenance">🚧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/bhargavkakadiya"><img src="https://avatars.githubusercontent.com/u/26486494?v=4?s=100" width="100px;" alt="Bhargav kakadiya"/><br /><sub><b>Bhargav kakadiya</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Abhargavkakadiya" title="Bug reports">🐛</a></td>
     </tr>
     <tr>
@@ -1990,6 +1990,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/smithrashell"><img src="https://avatars.githubusercontent.com/u/36465023?v=4?s=100" width="100px;" alt="Rashell Smith"/><br /><sub><b>Rashell Smith</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asmithrashell" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/aolson078"><img src="https://avatars.githubusercontent.com/u/69769089?v=4?s=100" width="100px;" alt="Alex Olson"/><br /><sub><b>Alex Olson</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Aaolson078" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.suci.io/"><img src="https://avatars.githubusercontent.com/u/155696196?v=4?s=100" width="100px;" alt="SUCI - Blockchain Hub Team"/><br /><sub><b>SUCI - Blockchain Hub Team</b></sub></a><br /><a href="#maintenance-adminsuci" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Nik-EpicWeb3"><img src="https://avatars.githubusercontent.com/u/214466248?v=4?s=100" width="100px;" alt="Nik-EpicWeb3"/><br /><sub><b>Nik-EpicWeb3</b></sub></a><br /><a href="#eventOrganizing-Nik-EpicWeb3" title="Event Organizing">📋</a></td>
     </tr>
   </tbody>
 </table>

app/[locale]/10years/_components/AdoptionSwiper.tsx

@@ -11,13 +11,20 @@ import {
 
 import { cn } from "@/lib/utils/cn"
 
-import { adoptionCards, adoptionStyles } from "./data"
+import { AdoptionCard } from "./types"
 
-const AdoptionSwiper = () => {
+type AdoptionCardProps = {
+  adoptionCards: AdoptionCard[]
+  adoptionStyles: string[]
+}
+const AdoptionSwiper = ({
+  adoptionCards,
+  adoptionStyles,
+}: AdoptionCardProps) => {
   return (
     <div className="flex flex-1 flex-col gap-6 md:hidden">
       <SwiperContainer className="mx-auto w-full max-w-[550px]">
-        <Swiper>
+        <Swiper spaceBetween={32}>
           {adoptionCards.map((card, index) => (
             <SwiperSlide key={card.title}>
               <div

app/[locale]/10years/_components/InnovationSwiper.tsx

@@ -14,7 +14,10 @@ export default function InnovationSwiper() {
   return (
     <div className="w-[100%]">
       <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
-        <Swiper className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
+        <Swiper
+          className="mx-auto w-full max-w-[550px] xl:max-w-[700px]"
+          spaceBetween={32}
+        >
           {innovationCards.map((card, index) => (
             <SwiperSlide
               key={index}
@@ -23,7 +26,7 @@ export default function InnovationSwiper() {
               <Image
                 src={card.image}
                 alt={card.title}
-                className="mx-auto my-4 h-auto max-w-full"
+                className="mx-auto my-4 h-auto max-h-48 object-contain"
               />
               <div>
                 <h3 className="mb-4">{card.title}</h3>

app/[locale]/10years/_components/TenYearGlobe.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useTheme } from "next-themes"
 import Globe from "react-globe.gl"
 import { type GlobeMethods } from "react-globe.gl"
@@ -12,6 +12,7 @@ import Link from "@/components/ui/Link"
 import countries from "./countries.json"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
 import EthLogo from "@/public/images/assets/eth-glyph-colored.png"
 
 // Define a type for event data
@@ -42,11 +43,12 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
   const globeRef = useRef<GlobeMethods>()
   const globeContainerRef = useRef<HTMLDivElement>(null)
   const { resolvedTheme } = useTheme()
+  const { prefersReducedMotion } = usePrefersReducedMotion()
 
   const atmosphereColor = resolvedTheme === "dark" ? "#B38DF0" : "#945AF4"
 
   const width = useBreakpointValue({
-    base: 260,
+    base: window?.innerWidth - 64 || 260, // Full width on mobile with padding
     sm: 400,
     md: 500,
     lg: 600,
@@ -61,7 +63,7 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
       const b = Math.min(255, Math.floor((basePurple & 0xff) * 1.3))
       return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
     })
-  }, [countries.features, resolvedTheme])
+  }, [resolvedTheme])
 
   const hexPolygonColor = (feature: object) => {
     const idx = countries.features.indexOf(
@@ -78,10 +80,18 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
     return hexPolygonColors[idx]
   }
 
+  // Function to safely set auto-rotate based on motion preferences
+  const setAutoRotate = useCallback(
+    (controls: ExtendedOrbitControls, value: boolean) => {
+      controls.autoRotate = value && !prefersReducedMotion
+    },
+    [prefersReducedMotion]
+  )
+
   useEffect(() => {
     if (globeRef.current) {
       const controls = globeRef.current.controls() as ExtendedOrbitControls
-      controls.autoRotate = true
+      setAutoRotate(controls, true)
       controls.enablePan = false
       controls.enableZoom = false
       controls.autoRotateSpeed = 2.0
@@ -90,7 +100,7 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
       const ambientLight = new THREE.AmbientLight(0xffffff, 1)
       globeRef.current.scene().add(ambientLight)
     }
-  }, [])
+  }, [setAutoRotate])
 
   // Prepare htmlElementsData for EthLogo
   const htmlElementsData = events.map((event) => ({
@@ -176,7 +186,7 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
           }
           // Stop rotation immediately
           const controls = globeRef.current.controls() as ExtendedOrbitControls
-          controls.autoRotate = false
+          setAutoRotate(controls, false)
           if ("autoRotateSpeed" in controls) controls.autoRotateSpeed = 0
           if (controls._sphericalDelta) {
             controls._sphericalDelta.theta = 0
@@ -193,15 +203,15 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
           if (globeRef.current) {
             const controls =
               globeRef.current.controls() as ExtendedOrbitControls
-            controls.autoRotate = true
+            setAutoRotate(controls, true)
             if ("autoRotateSpeed" in controls) controls.autoRotateSpeed = 2.0
           }
         }
       }}
       onPointClick={() => {
         if (globeRef.current) {
           const controls = globeRef.current.controls() as ExtendedOrbitControls
-          controls.autoRotate = false
+          setAutoRotate(controls, false)
           if ("autoRotateSpeed" in controls) controls.autoRotateSpeed = 0
           if (controls._sphericalDelta) {
             controls._sphericalDelta.theta = 0
@@ -227,8 +237,8 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
   return (
     <div
       ref={globeContainerRef}
-      className="relative cursor-grab"
-      style={{ width: width, height: width }}
+      className="relative w-full max-w-full cursor-grab active:cursor-grabbing"
+      style={{ height: width }}
     >
       {MemoizedGlobe}
       {hoveredEvent && tooltipPos && (

app/[locale]/10years/_components/TenYearHero.tsx

@@ -8,30 +8,32 @@ import ParallaxImage from "@/components/Image/ParallaxImage"
 import TenYearBackgroundImage from "@/public/images/10-year-anniversary/10-year-background.png"
 import TenYearGraphicImage from "@/public/images/10-year-anniversary/10-year-graphic.png"
 
+const [initialText, ...initialWords] = [
+  "censorship resistance",
+  "100% uptime",
+  "decentralization",
+  "community building",
+  "developer growth",
+  "global collaboration",
+  "cypherpunk values",
+  "hackathons",
+  "censorship resistance",
+  "permissionless finance",
+  "credible neutrality",
+  "the infinite garden",
+  "client diversity",
+]
+
 const TenYearHero = () => {
   const [words, setWords] = useState<{ text: string; words: string[] }>({
-    text: "censorship resistance",
-    words: [
-      "censorship resistance",
-      "100% uptime",
-      "decentralization",
-      "community building",
-      "developer growth",
-      "global collaboration",
-      "cypherpunk values",
-      "hackathons",
-      "censorship resistance",
-      "permissionless finance",
-      "credible neutrality",
-      "the infinite garden",
-      "client diversity",
-    ],
+    text: initialText,
+    words: initialWords,
   })
 
   // loops over chars to morph a text to another
   const morpher = (start: string, end: string): void => {
     // array of chars to randomly morph the text between start and end
-    const chars = "abcdefghijklmnopqrstuvwxyz".split("")
+    const chars = "abcdfgijklnopqsvwxyz".split("")
     // duration of the global morph
     const duration = 3
     // speed of the morph for each letter
@@ -136,7 +138,17 @@ const TenYearHero = () => {
       </div>
       <p className="text-center text-3xl">
         Celebrating 10 years of{" "}
-        <span className="font-bold text-accent-b">{words.text}</span>
+        <span className="relative max-md:block md:w-fit">
+          <span
+            className="select-none opacity-0 max-md:hidden"
+            data-label="space-holder"
+          >
+            {initialText}
+          </span>
+          <span className="font-bold text-accent-b md:absolute md:start-0 md:text-nowrap">
+            {words.text}
+          </span>
+        </span>
       </p>
     </div>
   )

app/[locale]/10years/_components/TenYearHomeBanner.tsx

@@ -15,11 +15,11 @@ const TenYearHomeBanner = () => {
         <ParallaxImage
           src={TenYearGraphicImage}
           alt=""
-          className="mx-auto -mb-2 -mt-16 max-w-[500px] object-contain sm:-mt-24 md:-mt-32"
+          className="mx-auto -mb-2 -mt-16 max-w-[min(100%,500px)] object-contain sm:-mt-24 md:-mt-32"
         />
-        <div className="flex justify-center">
+        <div className="mt-4 flex justify-center">
           <TenYearDesktopText className="mb-4 hidden object-contain text-body md:block" />
-          <TenYearMobileText className="mb-4 block object-contain text-body md:hidden" />
+          <TenYearMobileText className="mb-4 block object-contain text-5xl text-body md:hidden" />
         </div>
         <div className="mb-4 flex flex-col gap-2">
           <p>

app/[locale]/10years/_components/data.tsx

@@ -1,19 +1,21 @@
 import Link from "@/components/ui/Link"
 
+import { AdoptionCard } from "./types"
+
 import Adoption1Image from "@/public/images/10-year-anniversary/adoption-1.png"
 import Adoption2Image from "@/public/images/10-year-anniversary/adoption-2.png"
 import Adoption3Image from "@/public/images/10-year-anniversary/adoption-3.png"
 import DefiSummerImage from "@/public/images/10-year-anniversary/defi-summer.png"
 import EthETFImage from "@/public/images/10-year-anniversary/eth-etf.png"
 import EthereumLaunchImage from "@/public/images/10-year-anniversary/ethereum-launch.png"
 import NftImage from "@/public/images/10-year-anniversary/nft-frontier.png"
+import TheMergeImage from "@/public/images/10-year-anniversary/robot-and-crowd-cheering.png"
 import Adoption5Image from "@/public/images/10-year-anniversary/robot-walking.png"
-import TheMergeImage from "@/public/images/10-year-anniversary/the-merge.png"
 import StableCoinImage from "@/public/images/10-year-anniversary/the-pioneer-stablecoin.png"
 import Adoption4Image from "@/public/images/10-year-anniversary/walking-talking-1.png"
 import Adoption6Image from "@/public/images/10-year-anniversary/walking-talking-2.png"
 
-const adoptionCards = [
+const adoptionCards: AdoptionCard[] = [
   {
     image: Adoption1Image,
     title: "Decade of Decentralization",
@@ -102,12 +104,12 @@ const adoptionCards = [
 
 // duplicate 1 2 3, 1 2 3 to fix mobile slider bug where styles are not applied
 const adoptionStyles = [
-  "bg-background bg-gradient-to-t from-20% to-60% from-accent-c/10 to-accent-c/5 dark:from-accent-c/20 dark:to-accent-c/10 border-accent-c/10",
+  "bg-background bg-gradient-to-b from-20% to-60% from-accent-c/10 to-accent-c/5 dark:from-accent-c/20 dark:to-accent-c/10 border-accent-c/10",
   "bg-background bg-gradient-to-b from-20% to-60% from-accent-b/10 to-accent-b/5 dark:from-accent-b/20 dark:to-accent-b/10 border-accent-b/10",
-  "bg-background bg-gradient-to-r from-20% to-60% from-accent-a/10 to-accent-a/5 dark:from-accent-a/20 dark:to-accent-a/10 border-accent-a/10",
-  "bg-background bg-gradient-to-t from-20% to-60% from-accent-c/10 to-accent-c/5 dark:from-accent-c/20 dark:to-accent-c/10 border-accent-c/10",
+  "bg-background bg-gradient-to-b from-20% to-60% from-accent-a/10 to-accent-a/5 dark:from-accent-a/20 dark:to-accent-a/10 border-accent-a/10",
+  "bg-background bg-gradient-to-b from-20% to-60% from-accent-c/10 to-accent-c/5 dark:from-accent-c/20 dark:to-accent-c/10 border-accent-c/10",
   "bg-background bg-gradient-to-b from-20% to-60% from-accent-b/10 to-accent-b/5 dark:from-accent-b/20 dark:to-accent-b/10 border-accent-b/10",
-  "bg-background bg-gradient-to-r from-20% to-60% from-accent-a/10 to-accent-a/5 dark:from-accent-a/20 dark:to-accent-a/10 border-accent-a/10",
+  "bg-background bg-gradient-to-b from-20% to-60% from-accent-a/10 to-accent-a/5 dark:from-accent-a/20 dark:to-accent-a/10 border-accent-a/10",
 ]
 
 const innovationCards = [

app/[locale]/10years/_components/types.ts

@@ -0,0 +1,20 @@
+import { StaticImageData } from "next/image"
+
+export type Story = {
+  storyEnglish: string
+  storyOriginal: string
+  category: string
+  name: string
+  date: string
+  country: string
+  twitter: string
+  region: string
+}
+
+export type AdoptionCard = {
+  image: StaticImageData
+  title: string
+  description: React.ReactNode
+  href: string
+  linkText: string
+}