Merge branch 'dev' into review-SNikhill

.all-contributorsrc

@@ -8133,6 +8133,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "smejak",
+      "name": "Jakub Smékal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/20759274?v=4",
+      "profile": "https://github.com/smejak",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1304,6 +1304,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="http://[email protected]"><img src="https://avatars.githubusercontent.com/u/40423181?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sandy</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=zyjblockchain" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/NachoRoizman"><img src="https://avatars.githubusercontent.com/u/107893772?v=4?s=100" width="100px;" alt=""/><br /><sub><b>NachoRoizman</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=NachoRoizman" title="Documentation">📖</a></td>
     <td align="center"><a href="https://linkedin.com/in/miragaya-ivan"><img src="https://avatars.githubusercontent.com/u/72365253?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Iván Miragaya</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=M-Ivan" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/smejak"><img src="https://avatars.githubusercontent.com/u/20759274?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jakub Smékal</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=smejak" title="Documentation">📖</a></td>
   </tr>
 </table>
 

docs/best-practices.md

@@ -52,7 +52,7 @@ Markdown will be translated as whole pages of content, so no specific action is
 
   - _tl;dr Each individual JSON entry should be a complete phrase by itself_
 
-- This is done using the `Translation` component. However there is an alternative method for regular JS: `gatsby-plugin-intl` with `/src/utils/translations.ts`
+- This is done using the `Translation` component. However there is an alternative method for regular JS: `gatsby-theme-i18n` with `/src/utils/translations.ts`
 
   - **Method one: `<Translation />` component (preferred if only needed in JSX)**
 
@@ -66,7 +66,7 @@ Markdown will be translated as whole pages of content, so no specific action is
   - **Method two: `translateMessageId()`**
 
     ```tsx
-    import { useIntl } from "gatsby-plugin-intl"
+    import { useIntl } from "react-intl"
     import { translateMessageId } from "src/utils/translations"
 
     // Utilize anywhere in JS using

docs/event-tracking.md

@@ -0,0 +1,97 @@
+# Event tracking on ethereum.org
+
+This is a guide on how to prepare event tracking when creating a new page or redesigning an existing page.
+
+## What are events?
+
+Events are user interactions on the application that standard pageviews cannot track within a session. We create custom code snippets in the application in order to trigger these events.
+
+Events are useful for measuring user engagement on the website. Tracking events lets us know when users interact with elements and forms and can help us understand how successful users are at accomplishing their goals.
+
+Event tracking is a great way to validate our design decisions and assumptions. We can create reports in Matomo to gather insights and improve our product.
+
+[View the Matomo guide on event tracking](https://matomo.org/guide/reports/event-tracking/).
+
+## How is event tracking implemented?
+
+ethereum.org uses Matomo, an open-source alternative to Google Analytics, allowing us to protect user privacy by not sharing any analytics with third parties.
+
+We implemented Matomo using the [JavaScript tracking client](https://developer.matomo.org/guides/tracking-javascript-guide) via the [`gatsby-matomo-plugin`](https://github.com/kremalicious/gatsby-plugin-matomo) Gatsby plugin.
+
+## What to measure?
+
+Ideally, ask yourself what design decision/assumptions have been made on the page and should/could be validated by measured performance:
+
+- clicks
+- downloads
+- site searches
+- popups viewed/dismissed
+- form fields abandoned
+- scroll behavior down a page
+
+This data can be later used to decide whether a feature is being used or is underperforming.
+
+It's helpful to ask yourself how the results of what we track and measure might influence our decision-making. For example, measuring something that won't help us make concrete product decisions is probably not worth tracking.
+
+# How to name events?
+
+Broadly, events should be grouped by specific topic (e.g. L2 page external links, selected bridge, selected cex).
+
+## Each event comprises of 4 hierarchical values:
+
+1. Category (other events may share the same category if one feature has several actions)
+2. Action
+3. Name (optional)
+4. Value (optional, can be number or text)
+
+## Category
+
+Please consider the page's visual position when deciding which events should be grouped together (under the same category). Ideally, all events related to one feature should be grouped together under the same category only if there is also a single position on the page where the event can be triggered. If in doubt, always use a different category when a feature gets used in multiple places on the page.
+
+Example:
+Find wallets page redirects to external links (wallets) in two positions: A) through the main list of wallets B) Through a modal window with detailed info about a specific wallet. In this case, we would like to have two separate categories for external links instead of one:
+
+- Matomo list view
+  - Category: WalletExternalLinkList
+  - Action: Go to wallet
+  - eventName: WalletName
+  - Value: position
+- Matomo modal view
+  - Category: WalletExternalLinkModal
+  - Action: Go to wallet
+  - eventName: WalletName
+  - Value: position
+
+Such division allows us to identify where a user clicked on the page precisely; if all external links were under one category, "ExternalLink", we would not be able to measure the performance difference between the list and the modal window.
+
+## Usage
+
+Ethereum.org has a utility function (`trackCustomEvent`) for easily creating Matomo events.
+
+```javascript
+import { trackCustomEvent } from "../utils/matomo"
+```
+
+The function requires an object of event options. See the example below.
+
+```javascript
+  const handleEvent = (): void => {
+    trackCustomEvent({
+      eventCategory: `FeedbackWidget toggled`,
+      eventAction: `Clicked`,
+      eventName: `Opened feedback widget`,
+      eventValue: `1`,
+    })
+  }
+```
+
+## Hidden gem of tracking: Value
+
+Can be used to get more info on the UX.
+
+Examples:
+
+- Use it to track the average position of clicked search result
+- What terms are entered into the search field
+- Which option is chosen from a dropdown menu
+- How many or what filters are applied when filtering the list of wallets

gatsby-browser.tsx

@@ -5,7 +5,8 @@
  */
 
 import React from "react"
-import Layout from "./src/components/Layout"
+import browserLang from "browser-lang"
+import { withPrefix, GatsbyBrowser } from "gatsby"
 
 import Prism from "prism-react-renderer/prism"
 ;(typeof global !== "undefined" ? global : window).Prism = Prism
@@ -15,12 +16,52 @@ import "@formatjs/intl-locale/polyfill"
 import "@formatjs/intl-numberformat/polyfill"
 import "@formatjs/intl-numberformat/locale-data/en"
 
+import Layout from "./src/components/Layout"
+import {
+  supportedLanguages,
+  defaultLanguage,
+  isLang,
+} from "./src/utils/languages"
+import { Context } from "./src/types"
+
 // Default languages included:
 // https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js
 require("prismjs/components/prism-solidity")
 
 // Prevents <Layout/> from unmounting on page transitions
 // https://www.gatsbyjs.com/docs/layout-components/#how-to-prevent-layout-components-from-unmounting
-export const wrapPageElement = ({ element, props }) => (
-  <Layout {...props}>{element}</Layout>
-)
+export const wrapPageElement: GatsbyBrowser<
+  any,
+  Context
+>["wrapPageElement"] = ({ element, props }) => {
+  const { location, pageContext } = props
+  const { pathname, search } = location
+  const { originalPath } = pageContext
+
+  const [, pathLocale] = pathname.split("/")
+
+  // client side redirect on paths that don't have a locale in them. Most useful
+  // on dev env where we don't have server redirects
+  if (!isLang(pathLocale)) {
+    let detected =
+      window.localStorage.getItem("eth-org-language") ||
+      browserLang({
+        languages: supportedLanguages,
+        fallback: defaultLanguage,
+      })
+
+    if (!isLang(detected)) {
+      detected = defaultLanguage
+    }
+
+    const queryParams = search || ""
+    const newUrl = withPrefix(`/${detected}${originalPath}${queryParams}`)
+    window.localStorage.setItem("eth-org-language", detected)
+    window.location.replace(newUrl)
+
+    // can't return null here, must return an element
+    return <div />
+  }
+
+  return <Layout {...props}>{element}</Layout>
+}

gatsby-config.ts

@@ -9,14 +9,14 @@ import {
   ignoreLanguages,
 } from "./src/utils/languages"
 
+import { IS_PREVIEW } from "./src/utils/env"
+
 const siteUrl = `https://ethereum.org`
 
 const ignoreContent = (process.env.IGNORE_CONTENT || "")
   .split(",")
   .filter(Boolean)
 
-const isPreviewDeploy = process.env.IS_PREVIEW_DEPLOY === "true"
-
 const ignoreTranslations = ignoreLanguages.map(
   (lang) => `**/translations\/${lang}`
 )
@@ -37,17 +37,20 @@ const config: GatsbyConfig = {
   plugins: [
     // i18n support
     {
-      resolve: `gatsby-plugin-intl`,
+      resolve: `gatsby-theme-i18n`,
+      options: {
+        defaultLang: defaultLanguage,
+        prefixDefault: true,
+        locales: supportedLanguages.length
+          ? supportedLanguages.join(" ")
+          : null,
+        configPath: path.resolve(`./i18n/config.json`),
+      },
+    },
+    {
+      resolve: `gatsby-theme-i18n-react-intl`,
       options: {
-        // language JSON resource path
-        path: path.resolve(`src/intl`),
-        // supported language
-        languages: supportedLanguages,
-        // language file path
-        defaultLanguage,
-        // redirect to `/${lang}/` when connecting to `/`
-        // based on user's browser language preference
-        redirect: true,
+        defaultLocale: `./src/intl/en.json`,
       },
     },
     // Web app manifest
@@ -239,7 +242,7 @@ const config: GatsbyConfig = {
 
 // Avoid loading Matomo in preview deploys since NODE_ENV is `production` in
 // there and it will send testing data as production otherwise
-if (!isPreviewDeploy) {
+if (!IS_PREVIEW) {
   config.plugins = [
     ...(config.plugins || []),
     // Matomo analtyics