Add post-merge banner and remove pre-merge banner

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/blocks/index.md

@@ -3,7 +3,6 @@ title: Blocks
 description: An overview of blocks in the Ethereum blockchain – their data structure, why they're needed, and how they're made.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 Blocks are batches of transactions with a hash of the previous block in the chain. This links blocks together (in a chain) because hashes are cryptographically derived from the block data. This prevents fraud, because one change in any block in history would invalidate all the following blocks as all subsequent hashes would change and everyone running the blockchain would notice.

src/content/developers/docs/consensus-mechanisms/pow/mining-algorithms/index.md

@@ -3,13 +3,12 @@ title: Mining algorithms
 description: A detailed look at the algorithms used for Ethereum mining.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 <InfoBanner emoji=":wave:">
 
 Proof-of-work is no longer underlying Ethereum's consensus mechanism, meaning mining has been switched off. Instead, Ethereum is secured by validators who stake ETH. You can start staking your ETH today. Read more on [The Merge](/upgrades/merge/), [proof-of-stake](/developers/docs/consensus-mechanisms/pos/), and [staking](/staking/). This page is for historical interest only.
-   
+
 </InfoBanner>
 
 

src/content/developers/docs/dapps/index.md

@@ -3,7 +3,6 @@ title: Introduction to dapps
 description:
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 A decentralized application (dapp) is an application built on a decentralized network that combines a [smart contract](/developers/docs/smart-contracts/) and a frontend user interface. On Ethereum, smart contracts are accessible and transparent – like open APIs – so your dapp can even include a smart contract that someone else has written.

src/content/developers/docs/data-and-analytics/block-explorers/index.md

@@ -4,7 +4,6 @@ description: An introduction to block explorers, your portal into the world of b
 lang: en
 sidebar: true
 sidebarDepth: 3
-preMergeBanner: true
 ---
 
 Block explorers are your portal to Ethereum's data. You can use them to see real-time data on blocks, transactions, miners, accounts, and other on-chain activity.

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/gas/index.md

@@ -3,7 +3,6 @@ title: Gas and fees
 description:
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 Gas is essential to the Ethereum network. It is the fuel that allows it to operate, in the same way that a car needs gasoline to run.

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

@@ -3,7 +3,6 @@ title: Intro to ether
 description: A developer's introduction to the ether cryptocurrency.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 ## Prerequisites {#prerequisites}

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/mev/index.md

@@ -3,7 +3,6 @@ title: Maximal extractable value (MEV)
 description: An introduction to maximal extractable value (MEV)
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 Maximal extractable value (MEV) refers to the maximum value that can be extracted from block production in excess of the standard block reward and gas fees by including, excluding, and changing the order of transactions in a block.

src/content/developers/docs/networking-layer/index.md

@@ -4,7 +4,6 @@ description: An introduction to Ethereum's networking layer.
 lang: en
 sidebar: true
 sidebarDepth: 2
-preMergeBanner: true
 ---
 
 Ethereum is a peer-to-peer network with thousands of nodes that must be able to communicate with one another using standardized protocols. The "networking layer" is the stack of protocols that allow those nodes to find each other and exchange information. This includes "gossiping" information (one-to-many communication) over the network as well as swapping requests and responses between specific nodes (one-to-one communication). Each node must adhere to specific networking rules to ensure they are sending and receiving the correct information.

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

@@ -3,7 +3,6 @@ title: Networks
 description: An overview of Ethereum's networks and where to get testnet ether (ETH) for testing your application.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 Networks are different Ethereum environments you can access for development, testing, or production use cases. Since Ethereum is a protocol, there can be multiple independent "networks" that conform to the protocol without interacting with each other.

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

@@ -4,7 +4,6 @@ description: A high level explanation of the importance of Ethereum client diver
 lang: en
 sidebar: true
 sidebarDepth: 2
-preMergeBanner: true
 ---
 
 The behavior of an Ethereum node is controlled by the client software it runs. There are several production-level Ethereum clients, each one developed and maintained in different languages by separate teams. The clients are built to a common spec that ensures the clients seamlessly communicate with each other and have the same functionality and provide an equivalent user experience. However, at the moment the distribution of clients across nodes is not equal enough to realize this network fortification to its full potential. Ideally, users divide roughly equally across the various clients to bring as much client diversity as possible to the network.

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/nodes-as-a-service/index.md

@@ -4,7 +4,6 @@ description: An entry-level overview of node services, the pros and cons, and po
 lang: en
 sidebar: true
 sidebarDepth: 2
-preMergeBanner: true
 ---
 
 ## Introduction {#Introduction}

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/docs/transactions/index.md

@@ -3,7 +3,6 @@ title: Transactions
 description: An overview of Ethereum transactions – how they work, their data structure, and how to send them via an application.
 lang: en
 sidebar: true
-preMergeBanner: true
 ---
 
 Transactions are cryptographically signed instructions from accounts. An account will initiate a transaction to update the state of the Ethereum network. The simplest transaction is transferring ETH from one account to another.

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/content/nft/index.md

@@ -11,7 +11,6 @@ alt: An Eth logo being displayed via hologram.
 summaryPoint1: A way to represent anything unique as an Ethereum-based asset.
 summaryPoint2: NFTs are giving more power to content creators than ever before.
 summaryPoint3: Powered by smart contracts on the Ethereum blockchain.
-preMergeBanner: true
 ---
 
 NFTs are currently taking the digital art and collectibles world by storm. Digital artists are seeing their lives change thanks to huge sales to a new crypto-audience. And celebrities are joining in as they spot a new opportunity to connect with fans. But digital art is only one way to use NFTs. Really they can be used to represent ownership of any unique asset, like a deed for an item in the digital or physical realm.

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

@@ -562,7 +562,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