Merge branch 'dev' into shadcn-lang-picker

Author: pettinarip

.all-contributorsrc

@@ -12362,6 +12362,33 @@
       "contributions": [
         "content"
       ]
+    },
+    {
+      "login": "tr1sm0s1n",
+      "name": "Mobin Mohanan",
+      "avatar_url": "https://avatars.githubusercontent.com/u/47410557?v=4",
+      "profile": "https://github.com/tr1sm0s1n",
+      "contributions": [
+        "content"
+      ]
+    },
+    {
+      "login": "Baystef",
+      "name": "Adebayo Steve",
+      "avatar_url": "https://avatars.githubusercontent.com/u/36106823?v=4",
+      "profile": "https://github.com/Baystef",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "sanjanaynvsdl",
+      "name": "Sanjana",
+      "avatar_url": "https://avatars.githubusercontent.com/u/142678317?v=4",
+      "profile": "https://github.com/sanjanaynvsdl",
+      "contributions": [
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.env.example

@@ -33,4 +33,11 @@ BUILD_LOCALES=
 
 # If resource constraints are being hit during builds, change LIMIT_CPUS to a
 # fixed number of CPUs (e.g. 2) to limit the demand during build time
-LIMIT_CPUS=
+LIMIT_CPUS=
+
+# Sentry auth token required for error tracking
+SENTRY_AUTH_TOKEN=
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Enables the bundle analyzer
+ANALYZE=false

.storybook/i18next.ts

@@ -21,6 +21,7 @@ export const ns = [
   "page-upgrades",
   "page-developers-index",
   "page-what-is-ethereum",
+  "page-upgrades-index",
 ] as const
 const supportedLngs = Object.keys(baseLocales)
 

.storybook/main.ts

@@ -47,6 +47,9 @@ const config: StorybookConfig = {
     },
   },
   webpackFinal: async (config) => {
+    config.module = config.module || {}
+    config.module.rules = config.module.rules || []
+
     if (config.resolve) {
       config.resolve.plugins = [
         ...(config.resolve.plugins || []),
@@ -55,6 +58,22 @@ const config: StorybookConfig = {
         }),
       ]
     }
+
+    // This modifies the existing image rule to exclude .svg files
+    // since you want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) =>
+      rule?.["test"]?.test(".svg")
+    )
+    if (imageRule) {
+      imageRule["exclude"] = /\.svg$/
+    }
+
+    // Configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    })
+
     return config
   },
   typescript: {

README.md

@@ -96,6 +96,8 @@ yarn dev
 - Pro Tip:
   - Explore scripts within `package.json` for more build options
   - Get **faster** production builds by building only one language. E.g. in your `.env` file, set `BUILD_LOCALES=en` to build the content only in English
+  - To build the site in other selected languages too, you need to set them in `BUILD_LOCALES`, eg: `BUILD_LOCALES=en,es` if you also want to build only English (required) and Spanish.
+  - To build all languages, simply comment this line out with a hash mark, eg: `# BUILD_LOCALES=`
 
 By default the script will build all the languages (complete list in `i18n.config.json`).
 
@@ -1889,6 +1891,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/krishchvn"><img src="https://avatars.githubusercontent.com/u/58606754?v=4?s=100" width="100px;" alt="Krishnakumar Chavan"/><br /><sub><b>Krishnakumar Chavan</b></sub></a><br /><a href="#content-krishchvn" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/0xV4L3NT1N3"><img src="https://avatars.githubusercontent.com/u/33112835?v=4?s=100" width="100px;" alt="0xV4L3NT1N3"/><br /><sub><b>0xV4L3NT1N3</b></sub></a><br /><a href="#tool-0xV4L3NT1N3" title="Tools">🔧</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/JoshDavisLight"><img src="https://avatars.githubusercontent.com/u/82784104?v=4?s=100" width="100px;" alt="Josh Davis"/><br /><sub><b>Josh Davis</b></sub></a><br /><a href="#content-JoshDavisLight" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/tr1sm0s1n"><img src="https://avatars.githubusercontent.com/u/47410557?v=4?s=100" width="100px;" alt="Mobin Mohanan"/><br /><sub><b>Mobin Mohanan</b></sub></a><br /><a href="#content-tr1sm0s1n" title="Content">🖋</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Baystef"><img src="https://avatars.githubusercontent.com/u/36106823?v=4?s=100" width="100px;" alt="Adebayo Steve"/><br /><sub><b>Adebayo Steve</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Baystef" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/sanjanaynvsdl"><img src="https://avatars.githubusercontent.com/u/142678317?v=4?s=100" width="100px;" alt="Sanjana"/><br /><sub><b>Sanjana</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/issues?q=author%3Asanjanaynvsdl" title="Bug reports">🐛</a></td>
     </tr>
   </tbody>
 </table>

instrumentation.ts

@@ -0,0 +1,28 @@
+import * as Sentry from "@sentry/nextjs"
+
+export async function register() {
+  const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+
+  if (!dsn) {
+    console.warn("Sentry DSN not found, skipping")
+    return
+  }
+
+  const commonSentryOptions = {
+    dsn,
+    enabled: process.env.NODE_ENV === "production",
+    tracesSampleRate: 1.0,
+  }
+
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    Sentry.init({
+      ...commonSentryOptions,
+    })
+  }
+}

next.config.js

@@ -1,5 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { PHASE_DEVELOPMENT_SERVER } = require("next/constants")
+const { withSentryConfig } = require("@sentry/nextjs")
+
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+})
 
 const { i18n } = require("./next-i18next.config")
 
@@ -22,15 +27,47 @@ module.exports = (phase, { defaultConfig }) => {
   let nextConfig = {
     ...defaultConfig,
     reactStrictMode: true,
-    webpack: (config) => {
+    webpack: (config, { webpack }) => {
       config.module.rules.push({
         test: /\.ya?ml$/,
         use: "yaml-loader",
       })
-      config.module.rules.push({
-        test: /\.svg$/,
-        use: "@svgr/webpack",
-      })
+
+      // SVG loader
+      // Grab the existing rule that handles SVG imports
+      const fileLoaderRule = config.module.rules.find((rule) =>
+        rule.test?.test?.(".svg")
+      )
+
+      config.module.rules.push(
+        // Reapply the existing rule, but only for svg imports ending in ?url
+        {
+          ...fileLoaderRule,
+          test: /\.svg$/i,
+          resourceQuery: /url/, // *.svg?url
+        },
+        // Convert all other *.svg imports to React components
+        {
+          test: /\.svg$/i,
+          issuer: fileLoaderRule.issuer,
+          resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+          use: ["@svgr/webpack"],
+        }
+      )
+
+      // Modify the file loader rule to ignore *.svg, since we have it handled now.
+      fileLoaderRule.exclude = /\.svg$/i
+
+      // Tree shake Sentry debug code
+      // ref. https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs
+      config.plugins.push(
+        new webpack.DefinePlugin({
+          __SENTRY_DEBUG__: false,
+          __RRWEB_EXCLUDE_IFRAME__: true,
+          __RRWEB_EXCLUDE_SHADOW_DOM__: true,
+          __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
+        })
+      )
 
       return config
     },
@@ -39,6 +76,12 @@ module.exports = (phase, { defaultConfig }) => {
     images: {
       deviceSizes: [640, 750, 828, 1080, 1200, 1504, 1920],
     },
+    env: {
+      NEXT_PUBLIC_CONTEXT: process.env.CONTEXT,
+    },
+    experimental: {
+      instrumentationHook: true,
+    },
   }
 
   if (phase !== PHASE_DEVELOPMENT_SERVER) {
@@ -67,5 +110,15 @@ module.exports = (phase, { defaultConfig }) => {
     }
   }
 
-  return nextConfig
+  return withBundleAnalyzer(
+    withSentryConfig(nextConfig, {
+      // TODO: temp config, update this to the correct org & project
+      org: "ethereumorg-ow",
+      project: "javascript-nextjs",
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      release: `${process.env.BUILD_ID}_${process.env.REVIEW_ID}`,
+      disableLogger: true,
+      silent: true,
+    })
+  )
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -34,14 +34,17 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
+    "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-visually-hidden": "^1.1.0",
+    "@sentry/nextjs": "^8.19.0",
     "@socialgouv/matomo-next": "^1.8.0",
     "chart.js": "^4.4.2",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -78,6 +81,7 @@
     "remark-gfm": "^3.0.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.0",
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
@@ -126,8 +130,7 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "^5.5.2",
     "unified": "^10.0.0",
-    "unist-util-visit": "^5.0.0",
-    "usehooks-ts": "^3.1.0"
+    "unist-util-visit": "^5.0.0"
   },
   "resolutions": {
     "jackspeak": "2.1.1",

public/content/contributing/translation-program/translatathon/details/index.md

@@ -71,11 +71,14 @@ All translations will also be subject to a thorough review before being added to
   </ul>
 </ExpandableCard>
 
-<ExpandableCard title="Which languages can I translate into?">
-    You can translate into any language! It is recommended to only translate into your native language to ensure sufficient quality, but in short, all language available in Crowdin are in scope for the Translatathon.
-
-    If you want to translate into a language that isn't available in Crowdin, reach out to us and we will add any language per request.
+<ExpandableCard title="Can I compete as part of a team?">
+    <p>No. This year, the Translatathon will only have one main individual track and there will be no team competition.</p>
+    <p>You can still team up with your friends and translate together, however everyone will be competing in the Translatathon as an individual and only the number of your individual translated words will count towards your final score.</p>
+</ExpandableCard>
 
+<ExpandableCard title="Which languages can I translate into?">
+    <p>You can translate into any language! It is recommended to only translate into your native language to ensure sufficient quality, but in short, all language available in Crowdin are in scope for the Translatathon.</p>
+    <p>If you want to translate into a language that isn't available in Crowdin, reach out to us and we will add any language per request.</p>
 </ExpandableCard>
 
 <ApplyNow />

public/content/contributing/translation-program/translatathon/index.md

@@ -79,16 +79,17 @@ For more details, [see the full Terms & conditions](/contributing/translation-pr
 
 <StepByStepInstructions />
 
+## Prizes
+
+<TranslatathonPrizes />
+
 ## Stay up to date
 
-<!-- TODO: Uncomment when the hubs page is ready -->
-<!-- <TranslationHubCallout>
+<TranslationHubCallout>
   <h3 style={{margin:0}}>Translataton hubs</h3>
 
-  THis year we bring IRL community hugs to join local communities and help translate.
-
-  this hubs are located all over the world, find out if there is one close to you and join the community
-</TranslationHubCallout> -->
+  This year we bring IRL community hugs to join local communities and help translate. These hubs are located all over the world, find out if there is one close to you and join the community!
+</TranslationHubCallout>
 
 <TranslatathonCalendar />