Merge pull request #7544 from ethereum/postMergeBanner

Add post-merge banner and remove pre-merge banner

docs/chakra-migration-guide.md

@@ -107,7 +107,6 @@ const Text = styled.p`
 ```tsx
 import { Icon } from "@chakra-ui/react"
 import { BsQuestionSquareFill } from "react-icons/bs"
-
 ;<Icon as={BsQuestionSquareFill} />
 ```
 

src/components/Banners/PostMergeBanner.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import styled from "@emotion/styled"
+import BannerNotification from "../BannerNotification"
+import Translation from "../Translation"
+
+import { TranslationKey } from "../../utils/translations"
+
+const StyledBannerNotification = styled(BannerNotification)`
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  p {
+    max-width: 100ch;
+    margin: 0;
+    padding: 0;
+  }
+  a {
+    text-decoration: underline;
+  }
+  text-align: center;
+`
+
+export interface IProps {
+  translationString: TranslationKey
+}
+
+const PostMergeBanner: React.FC<IProps> = ({ translationString }) => (
+  <StyledBannerNotification>
+    <p>
+      <Translation id={translationString} />
+    </p>
+  </StyledBannerNotification>
+)
+
+export default PostMergeBanner

src/content/developers/docs/development-networks/index.md

@@ -3,7 +3,6 @@ title: Development Networks
 description: An overview of development networks and the tools available to help build Ethereum applications.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 When building an Ethereum application with smart contracts, you'll want to run it on a local network to see how it works before deploying it.

src/content/developers/docs/intro-to-ethereum/index.md

@@ -3,7 +3,6 @@ title: Intro to Ethereum
 description: A dapp developer's introduction to the core concepts of Ethereum.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 ## What is a blockchain? {#what-is-a-blockchain}

src/content/developers/docs/nodes-and-clients/index.md

@@ -4,7 +4,6 @@ description: An overview of Ethereum nodes and client software, plus how to set
 lang: en
 sidebar: true
 sidebarDepth: 2
-preMergeBanner: true
 ---
 
 Ethereum is a distributed network of computers (known as nodes) running software that can verify blocks and transaction data. The software application, known as a client, must be run on your computer to turn it into an Ethereum node.

src/content/developers/docs/nodes-and-clients/run-a-node/index.md

@@ -4,7 +4,6 @@ description: General introduction to running your own instance of an Ethereum cl
 lang: en
 sidebar: true
 sidebarDepth: 2
-preMergeBanner: true
 ---
 
 Running your own node provides you various benefits, opens new possibilities, and helps to support the ecosystem. This page will guide you through spinning up your own node and taking part in validating Ethereum transactions.

src/content/developers/tutorials/hello-world-smart-contract-fullstack/index.md

@@ -20,6 +20,7 @@ skill: beginner
 lang: en
 sidebar: true
 published: 2021-10-25
+postMergeBannerTranslation: page-upgrades-post-merge-banner-tutorial-ood
 ---
 
 This guide is for you if you are new to blockchain development and don't know where to start or how to deploy and interact with smart contracts. We will walk through creating and deploying a simple, smart contract on the Ropsten test network using [MetaMask](https://metamask.io), [Solidity](https://docs.soliditylang.org/en/v0.8.0/), [Hardhat](https://hardhat.org), and [Alchemy](https://alchemyapi.io/eth).

src/content/developers/tutorials/run-light-node-geth/index.md

@@ -7,7 +7,7 @@ skill: beginner
 lang: en
 sidebar: true
 published: 2022-03-04
-preMergeBanner: true
+postMergeBannerTranslation: page-upgrades-post-merge-banner-tutorial-light-node-ood
 ---
 
 **Please note that Geth light clients can be very slow to find peers. This is because they rely on full-node operators volunteering themselves as light servers from which the light clients can request data. There are usually only a small number of light servers available.**

src/content/developers/tutorials/run-node-raspberry-pi/index.md

@@ -9,7 +9,7 @@ skill: intermediate
 published: 2022-06-10
 source: Ethereum on ARM
 sourceUrl: https://ethereum-on-arm-documentation.readthedocs.io/en/latest/kiln/kiln-testnet.html
-preMergeBanner: true
+postMergeBannerTranslation: page-upgrades-post-merge-banner-tutorial-ood
 ---
 
 **Ethereum on Arm is a custom Linux image that can turn a Raspberry Pi into an Ethereum node.**

src/content/governance/index.md

@@ -3,6 +3,7 @@ title: Ethereum Governance
 description: An introduction to how decisions about Ethereum are made.
 lang: en
 sidebar: true
+postMergeBannerTranslation: page-upgrades-post-merge-banner-governance-ood
 ---
 
 # Introduction to Ethereum governance {#introduction}

src/intl/en/page-upgrades.json

@@ -6,5 +6,8 @@
   "page-upgrades-shards-date": "~2023",
   "page-upgrades-merge-banner-intro": "The Merge is approaching, and comes with changes to Ethereum.",
   "page-upgrades-merge-banner-content-outdated": "Some content on this page is out-of-date related to these changes. Updates are coming soon.",
-  "page-upgrades-merge-banner-developers-landing": "Some docs have a banner indicating they are out-of-date. Updates coming soon."
+  "page-upgrades-merge-banner-developers-landing": "Some docs have a banner indicating they are out-of-date. Updates coming soon.",
+  "page-upgrades-post-merge-banner-tutorial-ood": "This tutorial is out of date after the merge and may not work. Please raise a PR if you would like to contribute.",
+  "page-upgrades-post-merge-banner-tutorial-light-node-ood": "This tutorial is out of date after the merge. Light nodes do not currently work on proof-of-stake, but are expected to ship soon.",
+  "page-upgrades-post-merge-banner-governance-ood": "Some content on this page is out-of-date after the merge. Please raise a PR if you would like to contribute."
 }

src/pages/developers/index.tsx

@@ -9,7 +9,6 @@ import Card from "../../components/Card"
 import Callout from "../../components/Callout"
 import Link from "../../components/Link"
 import Translation from "../../components/Translation"
-import PreMergeBanner from "../../components/PreMergeBanner"
 import ButtonLink from "../../components/ButtonLink"
 import PageMetadata from "../../components/PageMetadata"
 import {
@@ -248,9 +247,6 @@ const DevelopersPage = ({
         title={translateMessageId("page-developer-meta-title", intl)}
         description={translateMessageId("page-developers-meta-desc", intl)}
       />
-      <PreMergeBanner announcementOnly>
-        <Translation id="page-upgrades-merge-banner-developers-landing" />
-      </PreMergeBanner>
       <Content>
         <HeroContainer>
           <HeroCopyContainer>

src/pages/developers/tutorials.tsx

@@ -563,7 +563,6 @@ export const query = graphql`
           skill
           published
           lang
-          preMergeBanner
         }
       }
     }

src/pages/index.tsx

@@ -24,7 +24,6 @@ import {
   LeftColumn,
 } from "../components/SharedStyledComponents"
 import { translateMessageId, isLangRightToLeft } from "../utils/translations"
-import PreMergeBanner from "../components/PreMergeBanner"
 
 import SimpleWalletContent from "!!raw-loader!../data/SimpleWallet.sol"
 import SimpleTokenContent from "!!raw-loader!../data/SimpleToken.sol"
@@ -560,7 +559,6 @@ const HomePage = ({
         title={translateMessageId("page-index-meta-title", intl)}
         description={translateMessageId("page-index-meta-description", intl)}
       />
-      <PreMergeBanner announcementOnly />
       <Hero
         image={getImage(data.hero)!}
         alt={translateMessageId("page-index-hero-image-alt", intl)}

src/schema/sdls/Frontmatter.ts

@@ -24,6 +24,5 @@ export const Frontmatter = `
     author: String
     tags: [String]
     isOutdated: Boolean
-    preMergeBanner: Boolean
   }
 `

src/templates/docs.tsx

@@ -35,7 +35,7 @@ import {
   Header4,
   ListItem,
 } from "../components/SharedStyledComponents"
-import PreMergeBanner from "../components/PreMergeBanner"
+import PostMergeBanner from "../components/Banners/PostMergeBanner"
 
 import { ZenModeContext } from "../contexts/ZenModeContext"
 import { isLangRightToLeft } from "../utils/translations"
@@ -191,7 +191,7 @@ const DocsPage = ({
   const { editContentUrl } = siteData.siteMetadata || {}
   const absoluteEditPath = `${editContentUrl}${relativePath}`
   const isDevelopersHome = relativePath.endsWith("/developers/docs/index.md")
-  const showMergeBanner = !!mdx.frontmatter.preMergeBanner || isDevelopersHome
+  const showPostMergeBanner = !!mdx.frontmatter.postMergeBanner
 
   return (
     <Page dir={isRightToLeft ? "rtl" : "ltr"}>
@@ -204,13 +204,7 @@ const DocsPage = ({
           <Translation id="banner-page-incomplete" />
         </BannerNotification>
       )}
-      {showMergeBanner && (
-        <PreMergeBanner announcementOnly={isDevelopersHome}>
-          {isDevelopersHome && (
-            <Translation id="page-upgrades-merge-banner-developers-landing" />
-          )}
-        </PreMergeBanner>
-      )}
+      {showPostMergeBanner && <PostMergeBanner />}
       <ContentContainer isZenMode={isZenMode}>
         <Content>
           <H1 id="top">{mdx.frontmatter.title}</H1>
@@ -270,7 +264,6 @@ export const query = graphql`
         sidebar
         sidebarDepth
         isOutdated
-        preMergeBanner
       }
       body
       tableOfContents

src/templates/static.tsx

@@ -44,9 +44,10 @@ import UpcomingEventsList from "../components/UpcomingEventsList"
 import Icon from "../components/Icon"
 import SocialListItem from "../components/SocialListItem"
 import YouTube from "../components/YouTube"
+import PostMergeBanner from "../components/Banners/PostMergeBanner"
 
 import { getLocaleTimestamp } from "../utils/time"
-import { isLangRightToLeft } from "../utils/translations"
+import { isLangRightToLeft, TranslationKey } from "../utils/translations"
 import { Lang } from "../utils/languages"
 import { Context } from "../types"
 
@@ -164,6 +165,10 @@ const StaticPage = ({
 
   const isRightToLeft = isLangRightToLeft(mdx.frontmatter.lang as Lang)
 
+  const showPostMergeBanner = !!mdx.frontmatter.postMergeBannerTranslation
+  const postMergeBannerTranslationString = mdx.frontmatter
+    .postMergeBannerTranslation as TranslationKey | null
+
   // FIXME: remove this any, currently not sure how to fix the ts error
   const parent: any = mdx.parent
   const lastUpdatedDate = parent.fields
@@ -181,38 +186,45 @@ const StaticPage = ({
   const slug = mdx.fields?.slug || ""
 
   return (
-    <Page dir={isRightToLeft ? "rtl" : "ltr"}>
-      <PageMetadata
-        title={mdx.frontmatter.title}
-        description={mdx.frontmatter.description}
-      />
-      <ContentContainer>
-        <Breadcrumbs slug={slug} />
-        <LastUpdated
-          dir={isLangRightToLeft(intl.locale as Lang) ? "rtl" : "ltr"}
-        >
-          <Translation id="page-last-updated" />:{" "}
-          {getLocaleTimestamp(intl.locale as Lang, lastUpdatedDate)}
-        </LastUpdated>
-        <MobileTableOfContents
-          editPath={absoluteEditPath}
-          items={tocItems}
-          isMobile={true}
-          maxDepth={mdx.frontmatter.sidebarDepth!}
-        />
-        <MDXProvider components={components}>
-          <MDXRenderer>{mdx.body}</MDXRenderer>
-        </MDXProvider>
-        <FeedbackCard isArticle />
-      </ContentContainer>
-      {mdx.frontmatter.sidebar && tocItems && (
-        <TableOfContents
-          editPath={absoluteEditPath}
-          items={tocItems}
-          maxDepth={mdx.frontmatter.sidebarDepth!}
+    <div>
+      {showPostMergeBanner && (
+        <PostMergeBanner
+          translationString={postMergeBannerTranslationString!}
         />
       )}
-    </Page>
+      <Page dir={isRightToLeft ? "rtl" : "ltr"}>
+        <PageMetadata
+          title={mdx.frontmatter.title}
+          description={mdx.frontmatter.description}
+        />
+        <ContentContainer>
+          <Breadcrumbs slug={slug} />
+          <LastUpdated
+            dir={isLangRightToLeft(intl.locale as Lang) ? "rtl" : "ltr"}
+          >
+            <Translation id="page-last-updated" />:{" "}
+            {getLocaleTimestamp(intl.locale as Lang, lastUpdatedDate)}
+          </LastUpdated>
+          <MobileTableOfContents
+            editPath={absoluteEditPath}
+            items={tocItems}
+            isMobile={true}
+            maxDepth={mdx.frontmatter.sidebarDepth!}
+          />
+          <MDXProvider components={components}>
+            <MDXRenderer>{mdx.body}</MDXRenderer>
+          </MDXProvider>
+          <FeedbackCard isArticle />
+        </ContentContainer>
+        {mdx.frontmatter.sidebar && tocItems && (
+          <TableOfContents
+            editPath={absoluteEditPath}
+            items={tocItems}
+            maxDepth={mdx.frontmatter.sidebarDepth!}
+          />
+        )}
+      </Page>
+    </div>
   )
 }
 
@@ -234,6 +246,7 @@ export const staticPageQuery = graphql`
         sidebar
         sidebarDepth
         isOutdated
+        postMergeBannerTranslation
       }
       body
       tableOfContents