Merge pull request #7176 from ethereum/dev

Deploy v4.9.0

Author: corwintines

.all-contributorsrc

@@ -8142,6 +8142,42 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "chendatony31",
+      "name": "Tony Chen",
+      "avatar_url": "https://avatars.githubusercontent.com/u/2173383?v=4",
+      "profile": "https://tokenpocket.pro",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "metalc",
+      "name": "metalc",
+      "avatar_url": "https://avatars.githubusercontent.com/u/102876192?v=4",
+      "profile": "https://github.com/metalc",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "Tuongg2312",
+      "name": "Tuongg2312",
+      "avatar_url": "https://avatars.githubusercontent.com/u/107551539?v=4",
+      "profile": "https://github.com/Tuongg2312",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "ErikSaunier",
+      "name": "Ξrik Saunier",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1122363?v=4",
+      "profile": "https://github.com/ErikSaunier",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -158,14 +158,14 @@ In case you want to test them as if you were in a Netlify env, you can install t
 
 > The Proof of Attendance Protocol is a dapp that distributes badges in the form of ERC-721 tokens to prove you participated in an event. [More on POAPs](https://www.poap.xyz/).
 
-### ethereum.org 2021 Contributor POAP
+### ethereum.org 2022 Contributor POAP
 
-- If you have committed any changes in 2021 so far that were merged into our repo, you have a POAP waiting!
+- If you have committed any changes in 2022 so far that were merged into our repo, you have a POAP waiting!
 - This includes our dedicated translators on Crowdin
 
   [![Discord](https://img.shields.io/discord/714888181740339261?color=1C1CE1&label=Claim%20Your%20POAP!%20%7C%20Discord%20%F0%9F%91%8B%20&style=flat)](https://discord.gg/CetY6Y4)
 
-- 👆 To claim your Contributor POAP, join our Discord server and paste a link to your contribution in the #poaps-🏆 channel
+- 👆 To claim your Contributor POAP, join our Discord server and paste a link to your contribution in the `#🥇 | poaps` [channel](https://discord.com/channels/714888181740339261/804005643211898911)
 
 - A member of our team will verify the request and DM you with a personalized link to claim your own freshly minted POAP collectible!
 
@@ -1305,6 +1305,12 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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>
+    <td align="center"><a href="https://tokenpocket.pro"><img src="https://avatars.githubusercontent.com/u/2173383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tony Chen</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=chendatony31" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/metalc"><img src="https://avatars.githubusercontent.com/u/102876192?v=4?s=100" width="100px;" alt=""/><br /><sub><b>metalc</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=metalc" title="Documentation">📖</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Tuongg2312"><img src="https://avatars.githubusercontent.com/u/107551539?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tuongg2312</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=Tuongg2312" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/ErikSaunier"><img src="https://avatars.githubusercontent.com/u/1122363?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ξrik Saunier</b></sub></a><br /><a href="https://github.com/ethereum/ethereum-org-website/commits?author=ErikSaunier" title="Documentation">📖</a></td>
   </tr>
 </table>
 

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

@@ -22,6 +22,7 @@ import {
   defaultLanguage,
   isLang,
 } from "./src/utils/languages"
+import { IS_DEV } from "./src/utils/env"
 import { Context } from "./src/types"
 
 // Default languages included:
@@ -42,7 +43,7 @@ export const wrapPageElement: GatsbyBrowser<
 
   // 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)) {
+  if (IS_DEV && !isLang(pathLocale)) {
     let detected =
       window.localStorage.getItem("eth-org-language") ||
       browserLang({

gatsby-config.ts

@@ -230,9 +230,19 @@ const config: GatsbyConfig = {
       },
     },
     // Needed for Gatsby Cloud redirect support
-    `gatsby-plugin-gatsby-cloud`,
+    {
+      resolve: `gatsby-plugin-gatsby-cloud`,
+      options: {
+        generateMatchPathRewrites: false,
+      },
+    },
     // Creates `_redirects` & `_headers` build files for Netlify
-    `gatsby-plugin-netlify`,
+    {
+      resolve: `gatsby-plugin-netlify`,
+      options: {
+        generateMatchPathRewrites: false,
+      },
+    },
   ],
   // https://www.gatsbyjs.com/docs/reference/release-notes/v2.28/#feature-flags-in-gatsby-configjs
   flags: {

gatsby-node.ts

@@ -23,6 +23,12 @@ import redirects from "./redirects.json"
 
 const exec = util.promisify(child_process.exec)
 
+const commonRedirectProps = {
+  isPermanent: true,
+  ignoreCase: true,
+  force: true,
+}
+
 /**
  * Markdown isOutdated check
  * Parse header ids in markdown file (both translated and english) and compare their info structure.
@@ -190,13 +196,11 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
 }) => {
   const { createPage, createRedirect } = actions
 
-  // server side redirects
+  // custom redirects defined in `redirects.json`
   redirects.forEach((redirect) => {
     createRedirect({
+      ...commonRedirectProps,
       ...redirect,
-      isPermanent: true,
-      ignoreCase: true,
-      force: true,
     })
   })
 
@@ -260,6 +264,12 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
     // e.g. English file: "src/content/community/index.md"
     // e.g. corresponding German file: "src/content/translations/de/community/index.md"
     if (language === defaultLanguage) {
+      createRedirect({
+        ...commonRedirectProps,
+        fromPath: slug.slice(3),
+        toPath: slug,
+      })
+
       for (const lang of supportedLanguages) {
         const splitPath = relativePath.split("/")
         splitPath.splice(2, 0, `translations/${lang}`)
@@ -315,6 +325,14 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
   // we can remove this logic and the `/pages-conditional/` directory.
   const outdatedMarkdown = [`eth`, `dapps`, `wallets`, `what-is-ethereum`]
   outdatedMarkdown.forEach((page) => {
+    const originalPath = `/${page}/`
+
+    createRedirect({
+      ...commonRedirectProps,
+      fromPath: originalPath,
+      toPath: `/${defaultLanguage}${originalPath}`,
+    })
+
     supportedLanguages.forEach(async (lang) => {
       const markdownPath = path.resolve(
         `src/content/translations/${lang}/${page}/index.md`
@@ -326,7 +344,7 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
           page,
           lang
         )
-        const originalPath = `/${page}/`
+
         const slug = `/${lang}${originalPath}`
 
         createPage<Context>({
@@ -356,14 +374,29 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
   page,
   actions,
 }) => {
-  const { createPage, deletePage } = actions
+  const { createPage, deletePage, createRedirect } = actions
 
-  // create routes without the lang prefix e.g. `/{path}` as our i18n plugin
-  // only creates `/{lang}/{path}` routes. This is useful on dev env to avoid
-  // getting a 404 since we don't have server side redirects
-  if (IS_DEV && page.path.startsWith(`/${defaultLanguage}`)) {
+  const isDefaultLang = page.path.startsWith(`/${defaultLanguage}`)
+
+  if (isDefaultLang) {
     const path = page.path.slice(3)
-    createPage({ ...page, path })
+
+    if (IS_DEV) {
+      // create routes without the lang prefix e.g. `/{path}` as our i18n plugin
+      // only creates `/{lang}/{path}` routes. This is useful on dev env to avoid
+      // getting a 404 since we don't have server side redirects
+      createPage({ ...page, path })
+    }
+
+    if (!IS_DEV && !path.match(/^\/404(\/|.html)$/)) {
+      // on prod, indicate our servers to redirect the root paths to the
+      // `/{defaultLang}/{path}`
+      createRedirect({
+        ...commonRedirectProps,
+        fromPath: path,
+        toPath: page.path,
+      })
+    }
   }
 
   const isTranslated = page.context.locale !== defaultLanguage
@@ -387,6 +420,20 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
   }
 }
 
+export const onPostBootstrap: GatsbyNode["onPostBootstrap"] = ({ actions }) => {
+  const { createRedirect } = actions
+
+  supportedLanguages.forEach((lang) => {
+    createRedirect({
+      ...commonRedirectProps,
+      fromPath: `/${lang}/*`,
+      toPath: `/${lang}/404`,
+      statusCode: 404,
+      force: false,
+    })
+  })
+}
+
 export const createSchemaCustomization: GatsbyNode["createSchemaCustomization"] =
   ({ actions, schema }) => {
     const { createTypes } = actions

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",
@@ -79,6 +79,7 @@
     "@types/node": "^17.0.23",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@types/react-instantsearch-dom": "^6.12.3",
     "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",