Merge branch 'dev' into style-guide-patches

Author: corwintines

.github/ISSUE_TEMPLATE/suggest_staking_product.yaml

@@ -166,13 +166,18 @@ body:
   - type: textarea
     id: staking_product_signing_keys
     attributes:
-      label: If listing as staking-as-a-service, who holds the signing keys, and withdrawal keys?
+      label: If listing as staking-as-a-service, who has access to the signing keys?
       description: What keys does the user maintain access to? What keys does the service gain access to?
+  - type: textarea
+    id: staking_product_withdrawal_credentials
+    attributes:
+      label: If a pooled staking service or SaaS provider, what type of withdrawal credentials are being utilized / who holds the withdrawal keys?
+      description: Are withdrawal credentials utilizing `0x01` type credentials that point to an execution layer address? If so, is this an account chosen by the user, or a pre-determined smart contract?
   - type: textarea
     id: staking_product_supermajority
     attributes:
-      label: If a pooled staking service, what percent of node operators are running a super-majority consensus layer client?
-      description: As of last edit, Prysm is the consensus layer client being run by a super-majority of the node operators, which is dangerous for the network. If there is currently a super-majority and this data is known, please list it here with a link to evidence.
+      label: If a pooled staking service or SaaS provider, what percent of node operators are running a super-majority client?
+      description: As of last edit, Prysm and Lighthouse are the consensus clients being run by >75% of the node operators, and Geth is the execution client being run by >60% of node operators. This presents risks to the network. If there is currently a super-majority and this data is known, please list it here with a link to evidence.
   - type: textarea
     id: staking_product_consensus_layer_client_support
     attributes:

docs/applying-storybook.md

@@ -18,11 +18,11 @@ It's as easy as running `yarn storybook` to boot up a dedicated localhost to see
 
 ## Setting up a component's stories
 
-A Storybook "story" is an instance of a component in a certain state or with certain parameters applied to show an alternative version of the component.
+> 🚨 NOTE: This project has version 7, which is currently still in beta. The following documentation outlines preferences in setup as it relates to this version. You can refer to the [7.0 beta docs](https://storybook.js.org/docs/7.0/react/) if you need any additional details
 
-Each component will only need one file containing all the stories, and should follow the naming convention of the component.
+A Storybook "story" is an instance of a component in a certain state or with certain parameters applied to show an alternative version of the component.
 
-So for the component `ExpandableCard.tsx`, the stories file will be named `ExpandableCard.stories.tsx`.
+Each component will only need one file containing all the stories.
 
 The stories file will reside with each component. So the base folder structure in `src` will look like this:
 
@@ -40,45 +40,60 @@ The initial structure of each story file will look something like this (in types
 ```tsx
 import ComponentA from "."
 
-export default {
-  title: "ComponentA", // Generates the nav structure in the Storybook server
-} as ComponentMeta<typeof ComponentA>
+type ComponentAType = typeof ComponentA
+
+const meta: Meta<ComponentAType> {
+  title: "ComponentA",
+  component: ComponentA
+}
 
-export const Basic = () => <ComponentA />
+export default meta
+type Story = StoryObj<ComponentAType>;
+
+export const Basic: Story = {
+  render: () => <ComponentA />
+}
 ```
 
-Should the component accept props on all or some renders, a template can be created.
+**Note**: with the `title` option, we write this based on the groupings set by the Design System. Groupings are declared with forward slashes. (i.e. `Atoms / Form / Input`). See the Storybook docs for details on [Naming conventions](https://storybook.js.org/docs/7.0/react/writing-stories/naming-components-and-hierarchy)
+
+We will maintain this structure for every story file, regardless of simplicity.
+
+Should the component accept props on all or some renders, you can provide an `args` prop for each story and supply the necessary data. And if there is children, use the `render` prop to pass the args and supply children elements.
 
 Let's say for a `Button` component with different style variants...
 
 ```tsx
 import Button from "."
 
-export default {
+type ButtonType = typeof Button
+
+const meta: Meta<ButtonType> {
   title: "Button",
-} as ComponentMeta<typeof Button>
+  component: Button
+}
 
-const Template: ComponentStory<typeof Button> = (args) => (
-  <ComponentA {...args} />
-)
+export default meta
+type Story = StoryObj<ButtonType>;
 
-export const Solid = Template.bind({})
-Solid.args = {
-  variant: "solid",
-  children: "A Button", // Assuming the `children` prop takes text content only
+export const Solid: Story = {
+  render: (args) => <Button {...args}>A Button</Button>,
+  args: {
+    variant: 'solid',
+  }
 }
-
-export const Outline = Template.bind({})
-Outline.args = {
-  variant: "outline",
-  children: "A Button", // Assuming the `children` prop takes text content only
+export const Outline: Story = {
+  render: (args) => <Button {...args}>A Button</Button>,
+  args: {
+    variant: 'outline',
+  }
 }
 
 /**
  * For practical purposes, if you are displaying different "variants",
  * they should be shown under one story, so they can be seen side-by-side in the GUI
  * for reviewers to easily compare.
- * This can be done for various sizes or other like alterations
+ * This can also be done for various sizes or other like alterations
  */
 
 // Assuming `solid` is the default variant in the Chakra theme config
@@ -91,4 +106,27 @@ export const Variants = () => (
 )
 ```
 
+If only one story is provided for a component, the name of the exported object should match the name in the `title` meta option. (If the title is `Atoms / Form / Button` then the object should be named `Button`) This will hoist the display name up to the parent level in the Storybook dashboard's sidebar.
+
 As you go and make adjustments to the component itself or it's variant styles, Storybook will hot reload and those changes will appear in the stories that emphasize them.
+
+## Storybook Dashboard
+
+The dashboard where you view each story has a number of different addons available to check the story thoroughly.
+
+Outlined below are each area going from left to right in the selections.
+
+| Sidebar above the preview                | Dashboard below the preview                                                                                                                                                                                                                                                |
+| ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 1. Rerender preview                      | 1. Controls - allows you to interact with a component’s args (inputs) dynamically. Experiment with alternate configurations of the component to discover edge cases. See [Controls addon docs](https://storybook.js.org/docs/7.0/react/essentials/controls)                |
+| 2. Zoom In                               | 2. Actions (if applicable) - help you verify interactions produce the correct outputs via callbacks. See [Actions addon docs](https://storybook.js.org/docs/7.0/react/essentials/actions)                                                                                  |
+| 3. Zoom Out                              | 3. Interactions (if applicable) - In conjunction with the `play` function in a story object, this section allows you to simulate user interactions after the story renders. See [Interactions addon docs](https://storybook.js.org/docs/7.0/react/essentials/interactions) |
+| 4. Reset Zoom                            | 4. Accessibility provides visual A11y results for each story.<br><br>**NOTE**: To check accessibility for light and dark mode, you will need to toggle the mode, then rerender the preview to update the results.                                                          |
+| 5. Change background                     |
+| 6. Apply grid to preview                 |
+| 7. Change viewport size                  |
+| 8. Enable measuring of elements on hover |
+| 9. Apply element outlines to preview     |
+| 10. A11y Visualization Simulator         |
+| 11. Set layout direction (left or right) |
+| 12. Toggle color mode                    |

gatsby-node.ts

@@ -210,13 +210,13 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
         edges {
           node {
             fields {
-              isOutdated
               slug
               relativePath
             }
             frontmatter {
               lang
               template
+              isOutdated
             }
           }
         }
@@ -314,7 +314,7 @@ export const createPages: GatsbyNode<any, Context>["createPages"] = async ({
         language,
         languagesToFetch: [language],
         slug,
-        isOutdated: !!node.fields.isOutdated,
+        isOutdated: !!node.frontmatter?.isOutdated,
         isDefaultLang: language === defaultLanguage,
         relativePath,
         // gatsby i18n plugin

gatsby-ssr.tsx

@@ -0,0 +1,22 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+import React from "react"
+
+import type { RenderBodyArgs } from "gatsby"
+
+export const onRenderBody = ({ setHeadComponents }: RenderBodyArgs) => {
+  setHeadComponents([
+    <link
+      rel="preload"
+      href="/fonts/Inter-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossOrigin="anonymous"
+      key="interFont"
+    />,
+  ])
+}

i18n/config.json

@@ -127,6 +127,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "he",
+    "hrefLang": "he",
+    "name": "Hebrew",
+    "localName": "עִבְרִית",
+    "langDir": "rtl",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "hi",
     "hrefLang": "hi",
@@ -383,6 +391,14 @@
     "langDir": "ltr",
     "dateFormat": "MM/DD/YYYY"
   },
+  {
+    "code": "ur-in",
+    "hrefLang": "ur-in",
+    "name": "Urdu (India)",
+    "localName": "اردو",
+    "langDir": "rtl",
+    "dateFormat": "MM/DD/YYYY"
+  },
   {
     "code": "uz",
     "hrefLang": "uz",

package.json

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

redirects.json

@@ -216,17 +216,61 @@
     "toPath": "/en/roadmap/danksharding/"
   },
   {
-    "fromPath": "/*/eth2/staking/",
-    "toPath": "/:splat/staking/"
+    "fromPath": "/upgrades/merge",
+    "toPath": "/en/roadmap/merge/"
   },
   {
-    "fromPath": "/*/eth2/vision/",
-    "toPath": "/:splat/roadmap/vision/"
+    "fromPath": "/*/upgrades/merge",
+    "toPath": "/:splat/roadmap/merge/"
+  },
+  {
+    "fromPath": "/upgrades/merge/issuance",
+    "toPath": "/en/roadmap/merge/issuance"
+  },
+  {
+    "fromPath": "/*/upgrades/merge/issuance",
+    "toPath": "/:splat/roadmap/merge/issuance"
+  },
+  {
+    "fromPath": "/upgrades/beacon-chain",
+    "toPath": "/en/roadmap/beacon-chain"
+  },
+  {
+    "fromPath": "/*/upgrades/beacon-chain",
+    "toPath": "/:splat/roadmap/beacon-chain"
+  },
+  {
+    "fromPath": "/upgrades/vision/",
+    "toPath": "/en/roadmap/vision/"
   },
   {
     "fromPath": "/*/upgrades/vision/",
     "toPath": "/:splat/roadmap/vision/"
   },
+  {
+    "fromPath": "/upgrades",
+    "toPath": "/en/roadmap"
+  },
+  {
+    "fromPath": "/*/upgrades",
+    "toPath": "/:splat/roadmap"
+  },
+  {
+    "fromPath": "/upgrades/get-involved",
+    "toPath": "/contributing"
+  },
+  {
+    "fromPath": "/*/upgrades/get-involved",
+    "toPath": "/:splat/contributing"
+  },
+  {
+    "fromPath": "/*/eth2/staking/",
+    "toPath": "/:splat/staking/"
+  },
+  {
+    "fromPath": "/*/eth2/vision/",
+    "toPath": "/:splat/roadmap/vision/"
+  },
   {
     "fromPath": "/*/eth2/get-involved/",
     "toPath": "/:splat/upgrades/get-involved/"

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

@@ -1,25 +1,30 @@
-import { ComponentStyleConfig, SystemStyleObject } from "@chakra-ui/react"
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+import { badgeDefaultTheme, defineMergeStyles } from "./components.utils"
 
-const variantSecondary: SystemStyleObject = {
+const { baseStyle: defaultBaseStyle } = badgeDefaultTheme
+
+const baseStyle = defineMergeStyles(defaultBaseStyle, {
+  borderRadius: "base",
+  border: "1px solid",
+  borderColor: "transparent",
+  fontWeight: "initial",
+  py: 1,
+  px: 2,
+  textTransform: "uppercase",
+})
+
+const variantSecondary = defineStyle({
   borderColor: "primary100",
   color: "text",
-}
+})
 
-const variantSolid: SystemStyleObject = {
+const variantSolid = defineStyle({
   color: "black300",
   background: "primary100",
-}
+})
 
-export const Badge: ComponentStyleConfig = {
-  baseStyle: {
-    borderRadius: "base",
-    border: "1px solid",
-    borderColor: "transparent",
-    fontWeight: "initial",
-    py: 1,
-    px: 2,
-    textTransform: "uppercase",
-  },
+export const Badge = defineStyleConfig({
+  baseStyle,
   variants: {
     solid: variantSolid,
     secondary: variantSecondary,
@@ -33,7 +38,6 @@ export const Badge: ComponentStyleConfig = {
     },
   },
   defaultProps: {
-    // Remove the default from Chakra
     variant: "solid",
   },
-}
+})