Merge pull request #10362 from ethereum/staging

Deploy v7.13.0

Author: corwintines

.storybook/main.js

@@ -12,6 +12,7 @@ module.exports = {
     "@storybook/addon-a11y",
     "@chakra-ui/storybook-addon",
   ],
+  staticDirs: ["../static"],
   babel: async (options) => ({
     ...babelConfig,
   }),

.storybook/preview.js

@@ -2,6 +2,9 @@ import { action } from "@storybook/addon-actions"
 
 import theme from "../src/@chakra-ui/gatsby-plugin/theme"
 
+import "../static/fonts/inter-font-face.css"
+import "../static/fonts/ibm-plex-font-face.css"
+
 const chakraBreakpointArray = Object.entries(theme.breakpoints)
 
 // Gatsby's Link overrides:

gatsby-node.ts

@@ -291,6 +291,7 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
               isOutdated: false,
               isContentEnglish: true,
               relativePath, // Use English path for template MDX query
+              isDefaultLang: lang === defaultLanguage,
               // gatsby i18n plugin
               i18n: {
                 language: lang,
@@ -366,6 +367,7 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
             slug,
             isContentEnglish,
             isOutdated,
+            isDefaultLang: lang === defaultLanguage,
             // gatsby i18n plugin
             i18n: {
               language: lang,
@@ -391,6 +393,8 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
   actions,
 }) => {
   const { createPage, deletePage, createRedirect } = actions
+  const rootPath = page.path.slice(3)
+  const is404Page = rootPath.match(/^\/404(\/|.html)$/)
 
   if (!page.context) {
     return
@@ -417,9 +421,11 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
       context: {
         ...page.context,
         languagesToFetch: [language],
-        isOutdated,
-        //display TranslationBanner for translation-component pages that are still in English
+        // hide the outdated content banner for 404 pages
+        isOutdated: is404Page ? false : isOutdated,
+        // display TranslationBanner for translation-component pages that are still in English
         isContentEnglish,
+        isDefaultLang,
       },
     }
 
@@ -445,8 +451,7 @@ export const onCreatePage: GatsbyNode<any, Context>["onCreatePage"] = async ({
     if (!IS_DEV && i18n.routed) {
       createPage<Context>(newPage)
 
-      const rootPath = page.path.slice(3)
-      if (isDefaultLang && !rootPath.match(/^\/404(\/|.html)$/)) {
+      if (isDefaultLang && !is404Page) {
         createRedirect({
           ...commonRedirectProps,
           fromPath: rootPath,

gatsby-ssr.tsx

@@ -18,5 +18,21 @@ export const onRenderBody = ({ setHeadComponents }: RenderBodyArgs) => {
       crossOrigin="anonymous"
       key="interFont"
     />,
+    <link
+      rel="preload"
+      href="/fonts/Inter-Regular.woff"
+      as="font"
+      type="font/woff"
+      crossOrigin="anonymous"
+      key="interFont"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/IBMPlexMono-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="interFont"
+    />,
   ])
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "7.12.2",
+  "version": "7.13.0",
   "description": "Website of ethereum.org",
   "main": "index.js",
   "repository": "git@github.com:ethereum/ethereum-org-website.git",

src/@chakra-ui/gatsby-plugin/components/Tag.ts

@@ -0,0 +1,123 @@
+import {
+  createMultiStyleConfigHelpers,
+  theme,
+  defineStyle,
+} from "@chakra-ui/react"
+import { tagAnatomy } from "@chakra-ui/anatomy"
+import { $badgeColor, STATUS_COLORS } from "./utils"
+import { defineMergeStyles } from "../components.utils"
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(tagAnatomy.keys)
+
+const { Tag: tagTheme } = theme.components
+
+const baseStyleContainer = defineMergeStyles(tagTheme.baseStyle?.container, {
+  border: "1px",
+  borderColor: "transparent",
+  gap: 1,
+  borderRadius: "full",
+  px: 2,
+  minH: 8,
+  fontWeight: 300,
+  "&:any-link": {
+    textDecor: "none",
+    _focusWithin: {
+      outline: "4px solid",
+      outlineColor: "transparent",
+      outlineOffset: 0,
+    },
+  },
+})
+
+const baseStyleLabel = defineStyle({
+  ...tagTheme.baseStyle?.label,
+  fontSize: "xs",
+  textTransform: "uppercase",
+  textAlign: "center",
+  lineHeight: 1,
+})
+
+const baseStyleCloseButton = defineStyle({
+  ...tagTheme.baseStyle?.closeButton,
+  opacity: 1,
+  m: 0,
+  // Clear default
+  _focusVisible: null,
+  "&:focus-visible, &:hover": {
+    outline: "3px solid",
+    outlineOffset: "-2px",
+  },
+})
+
+const baseStyle = definePartsStyle({
+  container: baseStyleContainer,
+  label: baseStyleLabel,
+  closeButton: baseStyleCloseButton,
+})
+
+const getStatusStyles = (status: string, variant: string) => {
+  const statusStyles = STATUS_COLORS[status][variant]
+
+  return {
+    container: statusStyles,
+  }
+}
+
+const variantSubtle = definePartsStyle((props) => {
+  const { status = "normal" } = props
+  const defaultStyles = tagTheme.variants?.subtle(props)
+  const statusStyles = getStatusStyles(status, "subtle")
+  return {
+    container: {
+      ...defaultStyles?.container,
+      // Remove default dark mode styles
+      _dark: {},
+      ...statusStyles.container,
+    },
+  }
+})
+
+const variantSolid = definePartsStyle((props) => {
+  const { status = "normal" } = props
+  const defaultStyles = tagTheme.variants?.solid(props)
+  const statusStyles = getStatusStyles(status, "solid")
+  return {
+    container: {
+      ...defaultStyles?.container,
+      // Remove default dark mode styles
+      _dark: {},
+      ...statusStyles.container,
+    },
+  }
+})
+
+const variantOutline = definePartsStyle((props) => {
+  const { status = "normal" } = props
+  const defaultStyles = tagTheme.variants?.outline(props)
+  const statusStyles = getStatusStyles(status, "outline")
+  return {
+    container: {
+      ...defaultStyles?.container,
+      boxShadow: "none",
+      borderColor: $badgeColor.reference,
+      // Remove default dark mode styles
+      _dark: {},
+      ...statusStyles.container,
+    },
+  }
+})
+
+const variants = {
+  subtle: variantSubtle,
+  solid: variantSolid,
+  outline: variantOutline,
+}
+
+export const Tag = defineMultiStyleConfig({
+  baseStyle,
+  variants,
+  defaultProps: {
+    variant: "subtle",
+  },
+})