Deploy v10.6.1

.all-contributorsrc

@@ -4039,7 +4039,9 @@
       "profile": "https://github.com/lukassim",
       "contributions": [
         "content",
-        "ideas"
+        "ideas",
+        "translation",
+        "bug"
       ]
     },
     {

.eslintrc.json

@@ -1,16 +1,19 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "next/core-web-vitals",
-    "prettier",
-    "plugin:storybook/recommended"
-  ],
+  "extends": ["eslint:recommended", "next/core-web-vitals", "prettier"],
   "env": {
-    "es6": true
+    "es6": true,
+    "node": true,
+    "browser": true
   },
   "plugins": ["simple-import-sort", "@typescript-eslint", "unused-imports"],
   "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "rules": {
     "simple-import-sort/imports": [
       "error",
@@ -34,7 +37,7 @@
           // From the `constants` directory.
           ["^@/lib/constants"],
           // `.storybook` directory and utils files`
-          ["^@/storybook","^@/storybook-utils"],
+          ["^@/storybook", "^@/storybook-utils"],
           // Parent imports. Put `..` last.
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.
@@ -48,13 +51,6 @@
     ],
     "simple-import-sort/exports": "error",
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": "off",
-    "@typescript-eslint/no-explicit-any": [
-      "error",
-      {
-        "fixToUnknown": true
-      }
-    ],
     "unused-imports/no-unused-vars": [
       "error",
       {
@@ -63,6 +59,37 @@
         "varsIgnorePattern": "^_$"
       }
     ],
-    "unused-imports/no-unused-imports-ts": "warn"
-  }
+    "unused-imports/no-unused-imports": "warn"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.{ts,tsx}"],
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": [
+          "error",
+          {
+            "fixToUnknown": true
+          }
+        ]
+      }
+    },
+    {
+      "files": ["**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+      "extends": ["plugin:storybook/recommended"]
+    }
+  ],
+  "ignorePatterns": [
+    "node_modules/",
+    ".next/",
+    "out/",
+    "dist/",
+    "build/",
+    ".vercel/",
+    ".netlify/",
+    "coverage/",
+    "storybook-static/",
+    "**/*.d.ts",
+    "src/intl/"
+  ]
 }

.mise.toml

@@ -0,0 +1,4 @@
+[settings]
+# tools can read the versions files used by other version managers
+# for example, .nvmrc in the case of node's nvm
+idiomatic_version_file_enable_tools = ['node']

.nvmrc

@@ -1 +1 @@
-20
+20.19.2

README.md

@@ -774,7 +774,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="http://linkedin.com/in/kamilzarzycki/"><img src="https://avatars.githubusercontent.com/u/26347436?v=4?s=100" width="100px;" alt="Kamil Zarzycki"/><br /><sub><b>Kamil Zarzycki</b></sub></a><br /><a href="#translation-Ryeore" title="Translation">🌍</a> <a href="#content-Ryeore" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.stockholmblockchain.com"><img src="https://avatars.githubusercontent.com/u/10158281?v=4?s=100" width="100px;" alt="Filip Martinsson"/><br /><sub><b>Filip Martinsson</b></sub></a><br /><a href="#content-filipmartinsson" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://www.zeroservices.eu"><img src="https://avatars.githubusercontent.com/u/78486441?v=4?s=100" width="100px;" alt="zeroservices"/><br /><sub><b>zeroservices</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Azeroservices" title="Bug reports">🐛</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/lukassim"><img src="https://avatars.githubusercontent.com/u/37338979?v=4?s=100" width="100px;" alt="LukaK"/><br /><sub><b>LukaK</b></sub></a><br /><a href="#content-lukassim" title="Content">🖋</a> <a href="#ideas-lukassim" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/lukassim"><img src="https://avatars.githubusercontent.com/u/37338979?v=4?s=100" width="100px;" alt="LukaK"/><br /><sub><b>LukaK</b></sub></a><br /><a href="#content-lukassim" title="Content">🖋</a> <a href="#ideas-lukassim" title="Ideas, Planning, & Feedback">🤔</a> <a href="#translation-lukassim" title="Translation">🌍</a> <a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Alukassim" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://lukeingalls.com"><img src="https://avatars.githubusercontent.com/u/45518011?v=4?s=100" width="100px;" alt="Luke Ingalls"/><br /><sub><b>Luke Ingalls</b></sub></a><br /><a href="#content-lukeingalls" title="Content">🖋</a></td>
     </tr>
     <tr>

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

@@ -1,6 +1,10 @@
 "use client"
 
+import type { StaticImageData } from "next/image"
+import { useTranslations } from "next-intl"
+
 import { Image } from "@/components/Image"
+import Translation from "@/components/Translation"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import {
   Swiper,
@@ -11,38 +15,50 @@ import {
 
 import { cn } from "@/lib/utils/cn"
 
-import { AdoptionCard } from "./types"
-
 type AdoptionCardProps = {
-  adoptionCards: AdoptionCard[]
+  adoptionCards: { image: StaticImageData; href: string }[]
   adoptionStyles: string[]
 }
+
 const AdoptionSwiper = ({
   adoptionCards,
   adoptionStyles,
 }: AdoptionCardProps) => {
+  const t = useTranslations("page-10-year-anniversary")
+
   return (
     <div className="flex flex-1 flex-col gap-6 md:hidden">
       <SwiperContainer className="mx-auto w-full max-w-[550px]">
         <Swiper spaceBetween={32}>
-          {adoptionCards.map((card, index) => (
-            <SwiperSlide key={card.title}>
-              <div
-                className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
-              >
-                <Image
-                  src={card.image}
-                  alt={card.title}
-                  className="mx-auto mb-4 h-36 object-contain"
-                />
-                <h3 className="mb-4 text-2xl font-bold">{card.title}</h3>
-                {card.description}
-                <ButtonLink href={card.href} hideArrow variant="outline">
-                  {card.linkText}
-                </ButtonLink>
-              </div>
-            </SwiperSlide>
-          ))}
+          {adoptionCards.map((card, index) => {
+            const title = t(`page-10-year-adoption-card-${index + 1}-title`)
+            return (
+              <SwiperSlide key={title}>
+                <div
+                  className={cn(
+                    "h-full rounded-2xl p-8",
+                    adoptionStyles[index]
+                  )}
+                >
+                  <Image
+                    src={card.image}
+                    alt={title}
+                    className="mx-auto mb-4 h-36 object-contain"
+                  />
+                  <h3 className="mb-4 text-2xl font-bold">{title}</h3>
+                  <p className="mb-8">
+                    <Translation
+                      id={`page-10-year-adoption-card-${index + 1}-description`}
+                      ns="page-10-year-anniversary"
+                    />
+                  </p>
+                  <ButtonLink href={card.href} hideArrow variant="outline">
+                    {t(`page-10-year-adoption-card-${index + 1}-link-text`)}
+                  </ButtonLink>
+                </div>
+              </SwiperSlide>
+            )
+          })}
           <SwiperNavigation />
         </Swiper>
       </SwiperContainer>

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

@@ -2,13 +2,21 @@
 
 import { useEffect, useState } from "react"
 
+import type { TimeLeftLabels } from "@/lib/types"
+
 import { cn } from "@/lib/utils/cn"
 
 interface CountDownProps {
   className?: string
+  timeLeftLabels: TimeLeftLabels
+  expiredLabel: string
 }
 
-const CountDown = ({ className }: CountDownProps) => {
+const CountDown = ({
+  className,
+  timeLeftLabels,
+  expiredLabel,
+}: CountDownProps) => {
   const [timeLeft, setTimeLeft] = useState({
     days: 0,
     hours: 0,
@@ -46,11 +54,7 @@ const CountDown = ({ className }: CountDownProps) => {
   }, [])
 
   if (isExpired) {
-    return (
-      <div className="text-center text-2xl font-bold">
-        Ethereum is 10 years old! 🚀
-      </div>
-    )
+    return <div className="text-center text-2xl font-bold">{expiredLabel}</div>
   }
 
   return (
@@ -64,7 +68,11 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.days}
         </div>
-        <div className="font-mono text-xs text-accent-a">days</div>
+        <div className="font-mono text-xs text-accent-a">
+          {timeLeft.days === 1
+            ? timeLeftLabels.days.singular
+            : timeLeftLabels.days.plural}
+        </div>
       </div>
       <div
         className={cn(
@@ -75,7 +83,11 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.hours}
         </div>
-        <div className="font-mono text-xs text-accent-a">hours</div>
+        <div className="font-mono text-xs text-accent-a">
+          {timeLeft.hours === 1
+            ? timeLeftLabels.hours.singular
+            : timeLeftLabels.hours.plural}
+        </div>
       </div>
       <div
         className={cn(
@@ -86,7 +98,11 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.minutes}
         </div>
-        <div className="font-mono text-xs text-accent-a">minutes</div>
+        <div className="font-mono text-xs text-accent-a">
+          {timeLeft.minutes === 1
+            ? timeLeftLabels.minutes.singular
+            : timeLeftLabels.minutes.plural}
+        </div>
       </div>
       <div
         className={cn(
@@ -97,7 +113,11 @@ const CountDown = ({ className }: CountDownProps) => {
         <div className="font-mono text-4xl font-bold text-accent-a">
           {timeLeft.seconds}
         </div>
-        <div className="font-mono text-xs text-accent-a">seconds</div>
+        <div className="font-mono text-xs text-accent-a">
+          {timeLeft.seconds === 1
+            ? timeLeftLabels.seconds.singular
+            : timeLeftLabels.seconds.plural}
+        </div>
       </div>
     </div>
   )

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

@@ -10,7 +10,11 @@ import {
 
 import { innovationCards } from "./data"
 
+import { useTranslation } from "@/hooks/useTranslation"
+
 export default function InnovationSwiper() {
+  const { t } = useTranslation("page-10-year-anniversary")
+
   return (
     <div className="w-[100%]">
       <SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
@@ -25,18 +29,23 @@ export default function InnovationSwiper() {
             >
               <Image
                 src={card.image}
-                alt={card.title}
+                alt={t(`page-10-year-innovation-card-${index + 1}-title`)}
                 className="mx-auto my-4 h-auto max-h-48 object-contain"
               />
               <div>
-                <h3 className="mb-4">{card.title}</h3>
-                <p className="text-body-secondary mb-4">{card.date}</p>
-              </div>
-              {card.description.map((description, index) => (
-                <p key={index} className="mb-4">
-                  {description}
+                <h3 className="mb-4">
+                  {t(`page-10-year-innovation-card-${index + 1}-title`)}
+                </h3>
+                <p className="text-body-secondary mb-4">
+                  {t(`page-10-year-innovation-card-${index + 1}-date`)}
                 </p>
-              ))}
+              </div>
+              <p className="mb-4">
+                {t(`page-10-year-innovation-card-${index + 1}-description-1`)}
+              </p>
+              <p className="mb-4">
+                {t(`page-10-year-innovation-card-${index + 1}-description-2`)}
+              </p>
             </SwiperSlide>
           ))}
           <SwiperNavigation />