Merge branch 'dev' into 10yearintl

Author: wackerow

.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/TenYearHero.tsx

@@ -1,125 +1,30 @@
 "use client"
 
-import { useEffect, useState } from "react"
-
 import { Image } from "@/components/Image"
 import ParallaxImage from "@/components/Image/ParallaxImage"
+import Morpher from "@/components/Morpher"
 
 import { useTranslation } from "@/hooks/useTranslation"
 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 TenYearHero = () => {
   const { t } = useTranslation("page-10-year-anniversary")
-  const [words, setWords] = useState<{ text: string; words: string[] }>({
-    text: t("page-10-year-censorship-resistance"),
-    words: [
-      t("page-10-year-censorship-resistance"),
-      t("page-10-year-uptime"),
-      t("page-10-year-decentralization"),
-      t("page-10-year-community-building"),
-      t("page-10-year-developer-growth"),
-      t("page-10-year-global-collaboration"),
-      t("page-10-year-cypherpunk-values"),
-      t("page-10-year-hackathons"),
-      t("page-10-year-permissionless-finance"),
-      t("page-10-year-credible-neutrality"),
-      t("page-10-year-infinite-garden"),
-      t("page-10-year-client-diversity"),
-    ],
-  })
-
-  // 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 = "abcdfgijklnopqsvwxyz".split("")
-    // duration of the global morph
-    const duration = 3
-    // speed of the morph for each letter
-    const frameRate = 30
-
-    // text variables
-    const textString = start.split("")
-    const result = end.split("")
-    const slen = textString.length
-    const rlen = result.length
-
-    // time variables
-    let present = new Date()
-    let past = present.getTime()
-    let count = 0
-    let spentTime = 0
-    // splitTime  = milliseconds / letters
-    const splitTime = (duration * 70) / Math.max(slen, rlen)
-
-    function update() {
-      // Update present date and spent time
-      present = new Date()
-      spentTime += present.getTime() - past
-
-      // Random letters
-      for (let i = count; i < Math.min(slen, rlen, 18); i++) {
-        const random = Math.floor(Math.random() * (chars.length - 1))
-        // Change letter
-        textString[i] = chars[random]
-      }
-
-      // Morph letters from start to end
-      if (spentTime >= splitTime) {
-        // Update count of letters to morph
-        count += Math.floor(spentTime / splitTime)
-        // Morphing
-        for (let j = 0; j < count; j++) {
-          textString[j] = result[j] || ""
-        }
-        // Reset spent time
-        spentTime = 0
-      }
-
-      // Update DOM
-      setWords({ ...words, text: textString.join("") })
-
-      // Save present date
-      past = present.getTime()
 
-      // Loop
-      if (count < Math.max(slen, rlen)) {
-        // Only use a setTimeout if the frameRate is lower than 60FPS
-        // Remove the setTimeout if the frameRate is equal to 60FPS
-        morphTimeout = setTimeout(() => {
-          window.requestAnimationFrame(update)
-        }, 1000 / frameRate)
-      }
-    }
-
-    // Start loop
-    update()
-  }
-
-  let morphTimeout: NodeJS.Timeout
-
-  useEffect(() => {
-    let counter = 0
-
-    const morphInterval = setInterval(() => {
-      const start = words.text
-      const end = words.words[counter]
-
-      morpher(start, end)
-
-      if (counter < words.words.length - 1) {
-        counter++
-      } else {
-        counter = 0
-      }
-    }, 3000)
-
-    return () => {
-      clearInterval(morphInterval)
-      clearTimeout(morphTimeout)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  const WORDS = [
+    t("page-10-year-censorship-resistance"),
+    t("page-10-year-uptime"),
+    t("page-10-year-decentralization"),
+    t("page-10-year-community-building"),
+    t("page-10-year-developer-growth"),
+    t("page-10-year-global-collaboration"),
+    t("page-10-year-cypherpunk-values"),
+    t("page-10-year-hackathons"),
+    t("page-10-year-permissionless-finance"),
+    t("page-10-year-credible-neutrality"),
+    t("page-10-year-infinite-garden"),
+    t("page-10-year-client-diversity"),
+  ]
 
   return (
     <div>
@@ -136,11 +41,20 @@ const TenYearHero = () => {
         />
       </div>
       <p className="text-center text-3xl">
-        {t("page-10-year-celebrating")}{" "}
-        <span className="font-bold text-accent-b">{words.text}</span>
+        Celebrating 10 years of{" "}
+        <span className="relative max-md:block md:w-fit">
+          <span
+            className="select-none opacity-0 max-md:hidden"
+            data-label="space-holder"
+          >
+            {WORDS[0]}
+          </span>
+          <span className="text-3xl font-bold text-accent-b md:absolute md:start-0 md:text-nowrap">
+            <Morpher words={WORDS} charSet="abcdfgijklnopqsvwxyz" />
+          </span>
+        </span>
       </p>
     </div>
   )
 }
-
 export default TenYearHero

app/[locale]/10years/page.tsx

@@ -1,4 +1,6 @@
+import { Suspense } from "react"
 import { pick } from "lodash"
+import dynamic from "next/dynamic"
 import {
   getMessages,
   getTranslations,
@@ -14,6 +16,7 @@ import MainArticle from "@/components/MainArticle"
 import Translation from "@/components/Translation"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 import { cn } from "@/lib/utils/cn"
@@ -28,14 +31,17 @@ import CountDown from "./_components/CountDown"
 import { adoptionCards, adoptionStyles } from "./_components/data"
 import InnovationSwiper from "./_components/InnovationSwiper"
 import Stories from "./_components/Stories"
-import TenYearGlobe from "./_components/TenYearGlobe"
 import TenYearHero from "./_components/TenYearHero"
 import { parseStoryDates } from "./_components/utils"
 
 import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
 import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
 import TenYearLogo from "@/public/images/10-year-anniversary/10-year-logo.png"
 
+const TenYearGlobe = dynamic(() => import("./_components/TenYearGlobe"), {
+  ssr: false,
+})
+
 // In seconds
 const REVALIDATE_TIME = BASE_TIME_UNIT * 1
 
@@ -100,16 +106,22 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
                 {t("page-10-year-join-party-description")}
               </p>
             </div>
-            <div>
-              <TenYearGlobe
-                events={Object.values(fetched10YearEvents).flatMap((region) =>
-                  region.events.map((event) => ({
-                    ...event,
-                    lat: Number(event.lat),
-                    lng: Number(event.lng),
-                  }))
-                )}
-              />
+            <div className="h-[max(fit,260px)] sm:h-[400px] md:h-[500px] lg:h-[600px]">
+              <Suspense
+                fallback={
+                  <Skeleton className="mx-auto aspect-square h-full rounded-full bg-primary/20 blur-2xl" />
+                }
+              >
+                <TenYearGlobe
+                  events={Object.values(fetched10YearEvents).flatMap((region) =>
+                    region.events.map((event) => ({
+                      ...event,
+                      lat: Number(event.lat),
+                      lng: Number(event.lng),
+                    }))
+                  )}
+                />
+              </Suspense>
             </div>
           </div>
         </div>
@@ -358,7 +370,7 @@ export async function generateMetadata({
 
   return await getMetadata({
     locale,
-    slug: ["10-year-anniversary"],
+    slug: ["10years"],
     title: t("page-10-year-anniversary-meta-title"),
     description: t("page-10-year-anniversary-meta-description"),
   })