Merge branch 'dev' into pr/5309

Author: wackerow

.all-contributorsrc

@@ -8,3 +8,12 @@ ETHERSCAN_API_KEY=insertValue
 GATSBY_ALGOLIA_APP_ID=insertValue
 GATSBY_ALGOLIA_SEARCH_KEY=insertValue
 GATSBY_GITHUB_TOKEN_READ_ONLY=insertValue
+GATSBY_FUNCTIONS_PATH=insertValue
+
+# Build pages only for the specified langs. Leave it empty to build all the langs
+# e.g. `en,fr` will only build english and french pages
+# Note: always include `en` as it is the default lang of the site
+GATSBY_BUILD_LANGS=
+
+# Folders or files to ignore from the `src/content` folder
+IGNORE_CONTENT=**/docs,**/tutorials

.env.example

@@ -1,10 +1,18 @@
-const translations = require("./src/utils/translations")
 require("dotenv").config()
 
-const supportedLanguages = translations.supportedLanguages
+const { supportedLanguages, allLanguages } = require("./src/utils/translations")
+
 const defaultLanguage = `en`
 const siteUrl = `https://ethereum.org`
 
+const ignoreContent = (process.env.IGNORE_CONTENT || "")
+  .split(",")
+  .filter(Boolean)
+
+const ignoreTranslations = Object.keys(allLanguages)
+  .filter((lang) => !supportedLanguages.includes(lang))
+  .map((lang) => `**/translations\/${lang}`)
+
 module.exports = {
   siteMetadata: {
     // `title` & `description` pulls from respective ${lang}.json files in PageMetadata.js
@@ -126,6 +134,10 @@ module.exports = {
         // The plugin must be listed top-level & in gatsbyRemarkPlugins
         // See: https://www.gatsbyjs.org/docs/mdx/plugins/
         gatsbyRemarkPlugins: [
+          {
+            // Local plugin to adjust the images urls of the translated md files
+            resolve: require.resolve(`./plugins/gatsby-remark-image-urls`),
+          },
           {
             resolve: `gatsby-remark-autolink-headers`,
             options: {
@@ -180,6 +192,7 @@ module.exports = {
       options: {
         name: `content`,
         path: `${__dirname}/src/content`,
+        ignore: [...ignoreContent, ...ignoreTranslations],
       },
     },
     // Source data

README.md

@@ -256,7 +256,8 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
       slug.includes(`/cookie-policy/`) ||
       slug.includes(`/privacy-policy/`) ||
       slug.includes(`/terms-of-use/`) ||
-      slug.includes(`/contributing/`)
+      slug.includes(`/contributing/`) ||
+      slug.includes(`/style-guide/`)
     const language = node.frontmatter.lang
     if (!language) {
       throw `Missing 'lang' frontmatter property. All markdown pages must have a lang property. Page slug: ${slug}`
@@ -282,6 +283,7 @@ exports.createPages = async ({ graphql, actions, reporter }) => {
             context: {
               slug: langSlug,
               ignoreTranslationBanner: isLegal,
+              isLegal: isLegal,
               isOutdated: false,
               isContentEnglish: true,
               relativePath: relativePath, // Use English path for template MDX query
@@ -413,6 +415,14 @@ exports.createSchemaCustomization = ({ actions }) => {
       location: String
       type: String
       link: String
+      address: String
+      skill: String
+      published: String
+      sourceUrl: String
+      source: String
+      author: String
+      tags: [String]
+      isOutdated: Boolean
     }
     type ConsensusBountyHuntersCsv implements Node {
       username: String,
@@ -421,6 +431,13 @@ exports.createSchemaCustomization = ({ actions }) => {
     }
   `
   createTypes(typeDefs)
+
+  // Optimization. Ref: https://www.gatsbyjs.com/docs/scaling-issues/#switch-off-type-inference-for-sitepagecontext
+  createTypes(`
+    type SitePage implements Node @dontInfer {
+      path: String!
+    }
+  `)
 }
 
 // Build lambda functions when the build is complete and the `/public` folder exists

gatsby-config.js

@@ -16,3 +16,8 @@
   # Directory with the serverless Lambda functions to deploy to AWS.
   # netlify-lambda needs this netlify.toml file in order to build
   functions = "public/functions"
+
+[[headers]]
+  for = "/*"
+  [headers.values]
+    Access-Control-Allow-Origin = "https://esp.ethereum.foundation"

gatsby-node.js

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "3.11.0",
+  "version": "3.16.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "[email protected]:ethereum/ethereum-org-website.git",
@@ -21,7 +21,7 @@
     "dotenv": "^8.2.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^4.1.3",
-    "gatsby": "^4.0.0",
+    "gatsby": "^4.6.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-intl": "^0.3.3",
@@ -43,12 +43,13 @@
     "gatsby-transformer-gitinfo": "^1.1.0",
     "gatsby-transformer-remark": "^3.0.0",
     "gatsby-transformer-sharp": "^4.0.0",
+    "is-relative-url": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^1.24.1",
     "netlify-lambda": "^2.0.3",
     "polished": "^4.1.4",
     "prism-react-renderer": "^1.1.1",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "react": "17.0.2",
     "react-countdown": "^2.3.2",
     "react-dom": "17.0.2",
@@ -59,7 +60,8 @@
     "react-select": "^4.3.0",
     "recharts": "1.8.5",
     "styled-components": "^5.1.1",
-    "styled-system": "^5.1.5"
+    "styled-system": "^5.1.5",
+    "unist-util-visit-parents": "^2.1.2"
   },
   "devDependencies": {
     "babel-jest": "^26.6.3",

netlify.toml

@@ -0,0 +1,40 @@
+const path = require("path")
+const visitWithParents = require("unist-util-visit-parents")
+const isRelativeUrl = require("is-relative-url")
+
+/**
+ * Modify the images urls on translated md files to point to the source ones.
+ *
+ * E.g.
+ * Before
+ * - Source file:     ./image.png
+ * - Translated file: ./image.png
+ *
+ * After
+ * - Source file:     ./image.png
+ * - Translated file: ../path/to/source/image.png
+ */
+module.exports = ({ markdownNode, markdownAST }) => {
+  const fileAbsoluteDir = path.dirname(markdownNode.fileAbsolutePath)
+  const sourceAbsoluteDir = fileAbsoluteDir.replace(
+    /translations\/\w{2}(-\w{2})?\//,
+    ""
+  )
+  const relativePath = path.relative(fileAbsoluteDir, sourceAbsoluteDir)
+
+  // if it is not a translated file, skip it
+  if (!fileAbsoluteDir.includes("/translations")) {
+    return markdownAST
+  }
+
+  // loop for each image node in the mdx file
+  visitWithParents(markdownAST, ["image"], (node) => {
+    const isRelativeToMdFile = isRelativeUrl(node.url)
+    if (isRelativeToMdFile) {
+      const fileName = path.basename(node.url)
+      node.url = `${relativePath}/${fileName}`
+    }
+  })
+
+  return markdownAST
+}

package.json

@@ -0,0 +1,17 @@
+{
+  "name": "gatsby-remark-image-urls",
+  "version": "1.0.0",
+  "description": "Set correct images urls in translated md files",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "echo \"No build script setup\""
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "image",
+    "markdown",
+    "remark"
+  ]
+}

plugins/gatsby-remark-image-urls/index.js

@@ -307,6 +307,10 @@
     "fromPath": "/*/developers/docs/layer-2-scaling",
     "toPath": "/:splat/developers/docs/scaling"
   },
+  {
+    "fromPath": "/*/developers/docs/scaling/layer-2-rollups",
+    "toPath": "/:splat/developers/docs/scaling"
+  },
   {
     "fromPath": "/*/about/web-developer",
     "toPath": "/:splat/about/#open-jobs"
@@ -315,6 +319,10 @@
     "fromPath": "/*/about/community-lead",
     "toPath": "/:splat/about/#open-jobs"
   },
+  {
+    "fromPath": "/*/about/product-designer",
+    "toPath": "/:splat/about/#open-jobs"
+  },
   {
     "fromPath": "/*/use",
     "toPath": "/:splat/dapps/"

plugins/gatsby-remark-image-urls/package.json

@@ -0,0 +1,8 @@
+import { lambda } from "../lambda/coinmetrics"
+
+async function handler(__req, res) {
+  const { statusCode, body } = await lambda()
+  res.status(statusCode).send(body)
+}
+
+export default handler

redirects.json

@@ -0,0 +1,10 @@
+import { lambda } from "../lambda/defipulse"
+
+async function handler(__req, res) {
+  // passing env vars as arguments due to a bug on GC functions where env vars
+  // can not be accessed by imported functions
+  const { statusCode, body } = await lambda(process.env.DEFI_PULSE_API_KEY)
+  res.status(statusCode).send(body)
+}
+
+export default handler

src/api/coinmetrics.js

@@ -0,0 +1,10 @@
+import { lambda } from "../lambda/etherscan"
+
+async function handler(__req, res) {
+  // passing env vars as arguments due to a bug on GC functions where env vars
+  // can not be accessed by imported functions
+  const { statusCode, body } = await lambda(process.env.ETHERSCAN_API_KEY)
+  res.status(statusCode).send(body)
+}
+
+export default handler

src/api/defipulse.js

@@ -0,0 +1,10 @@
+import { lambda } from "../lambda/etherscanBlock"
+
+async function handler(__req, res) {
+  // passing env vars as arguments due to a bug on GC functions where env vars
+  // can not be accessed by imported functions
+  const { statusCode, body } = await lambda(process.env.ETHERSCAN_API_KEY)
+  res.status(statusCode).send(body)
+}
+
+export default handler

src/api/etherscan.js

@@ -0,0 +1,10 @@
+import { lambda } from "../lambda/roadmap"
+
+async function handler(__req, res) {
+  // passing env vars as arguments due to a bug on GC functions where env vars
+  // can not be accessed by imported functions
+  const { statusCode, body } = await lambda(process.env.GITHUB_TOKEN)
+  res.status(statusCode).send(body)
+}
+
+export default handler

src/api/etherscanBlock.js

@@ -0,0 +1,10 @@
+import { lambda } from "../lambda/translations"
+
+async function handler(__req, res) {
+  // passing env vars as arguments due to a bug on GC functions where env vars
+  // can not be accessed by imported functions
+  const { statusCode, body } = await lambda(process.env.CROWDIN_API_KEY)
+  res.status(statusCode).send(body)
+}
+
+export default handler

src/api/roadmap.js

@@ -0,0 +1,10 @@
+import { lambda } from "../lambda/txs"
+
+async function handler(__req, res) {
+  // passing env vars as arguments due to a bug on GC functions where env vars
+  // can not be accessed by imported functions
+  const { statusCode, body } = await lambda(process.env.ETHERSCAN_API_KEY)
+  res.status(statusCode).send(body)
+}
+
+export default handler

src/api/translations.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "styled-components"
-import { GatsbyImage, getImage } from "gatsby-plugin-image"
+import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
 import Emoji from "./Emoji"
 
 import Translation from "../components/Translation"
@@ -67,9 +67,10 @@ const AssetDownload = ({
   src,
   shouldHide = false,
   title,
+  isSvg = false,
 }) => {
   const baseUrl = `https://ethereum.org`
-  const downloadUri = src ? src : getImage(image)?.images.fallback.src
+  const downloadUri = src ? src : getSrc(image)
   const downloadUrl = `${baseUrl}${downloadUri}`
 
   return (
@@ -79,7 +80,11 @@ const AssetDownload = ({
         {children && <ImageContainer>{children}</ImageContainer>}
         {!children && (
           <ImageContainer>
-            <Image image={getImage(image)} alt={alt} />
+            {isSvg ? (
+              <img src={image} alt={alt} />
+            ) : (
+              <Image image={getImage(image)} alt={alt} />
+            )}
           </ImageContainer>
         )}
         {artistName && (
@@ -94,9 +99,11 @@ const AssetDownload = ({
         )}
       </div>
       <ButtonContainer>
-        <ButtonLink to={downloadUrl}>
-          <Translation id="page-assets-download-download" />
-        </ButtonLink>
+        {!isSvg && (
+          <ButtonLink to={downloadUrl}>
+            <Translation id="page-assets-download-download" />
+          </ButtonLink>
+        )}
       </ButtonContainer>
     </Container>
   )