feat: add/update page og images

Author: wackerow

src/lib/utils/metadata.ts

@@ -4,9 +4,11 @@ import { DEFAULT_OG_IMAGE } from "@/lib/constants"
  * List of default og images for different sections
  */
 const imageForSlug = [
-  { section: "developers", image: "/enterprise-eth.png" },
-  { section: "dapps", image: "/doge-computer.png" },
-  { section: "roadmap", image: "/upgrades/upgrade_doge.png" },
+  { section: "developers", image: "/heroes/developers-hub-hero.jpg" },
+  { section: "roadmap", image: "/heroes/roadmap-hub-hero.jpg" },
+  { section: "guides", image: "/heroes/guides-hub-hero.jpg" },
+  { section: "community", image: "/heroes/community-hero.png" },
+  { section: "staking", image: "/upgrades/upgrade_rhino.png" },
 ] as const
 
 /**

src/pages/community.tsx

@@ -226,6 +226,7 @@ const CommunityPage = () => {
       <PageMetadata
         title={t("page-community-meta-title")}
         description={t("page-community-meta-description")}
+        image="/heroes/community-hero.png"
       />
       <HubHero {...heroContent} />
       <Divider />

src/pages/dapps.tsx

@@ -115,7 +115,6 @@ import zapper from "@/public/dapps/zapper.png"
 import zerion from "@/public/dapps/zerion.png"
 import developers from "@/public/developers-eth-blocks.png" // Handled inside Callout => height=200
 import doge from "@/public/doge-computer.png" // HERO, full? 624px
-import ogImage from "@/public/doge-computer.png" // PageMetadata, src only
 import oneinch from "@/public/exchanges/1inch.png"
 import magicians from "@/public/magicians.png"
 import wallet from "@/public/wallet.png" // width=300
@@ -1335,7 +1334,7 @@ const DappsPage = () => {
       <PageMetadata
         title={t("common:decentralized-applications-dapps")}
         description={t("common:page-dapps-desc")}
-        image={ogImage.src}
+        image="/doge-computer.png"
       />
       <PageHero content={heroContent} />
       <Divider />

src/pages/developers/index.tsx

@@ -217,6 +217,7 @@ const DevelopersPage = () => {
       <PageMetadata
         title={t("page-developers-index:page-developer-meta-title")}
         description={t("page-developers-index:page-developers-meta-desc")}
+        image="/heroes/developers-hub-hero.jpg"
       />
       <HubHero
         heroImg={HeroImage}

src/pages/eth.tsx

@@ -37,7 +37,6 @@ import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import eth from "@/public/eth.png"
-import ogImage from "@/public/eth.png"
 import ethCat from "@/public/eth-gif-cat.png"
 import defi from "@/public/finance_transparent.png"
 import ethereum from "@/public/what-is-ethereum.png"
@@ -385,7 +384,7 @@ const EthPage = () => {
       <PageMetadata
         title={t("page-eth-whats-eth-meta-title")}
         description={t("page-eth-whats-eth-meta-desc")}
-        image={ogImage.src}
+        image="/eth.png"
       />
       <Content>
         <HeroContainer>

src/pages/layer-2.tsx

@@ -253,6 +253,7 @@ const Layer2Page = () => {
       <PageMetadata
         title={t("layer-2-hero-title")}
         description={t("layer-2-metadata-description")}
+        image="/heroes/layer-2-hub-hero.jpg"
       />
       {/* Hero Section */}
       <HubHero {...heroContent} />

src/pages/learn.tsx

@@ -213,6 +213,7 @@ const LearnPage = () => {
       <PageMetadata
         title={t("common:learn-hub")}
         description={t("hero-subtitle")}
+        image="/heroes/learn-hub-hero.png"
       />
 
       <HubHero {...heroContent} />

src/pages/quizzes.tsx

@@ -77,6 +77,7 @@ const QuizzesHubPage: NextPage<
       <PageMetadata
         title={t("quizzes-title")}
         description={t("quizzes-subtitle")}
+        image="/heroes/quizzes-hub-hero.png"
       />
       <HubHero
         title={t("quizzes-title")}

src/pages/run-a-node.tsx

@@ -446,6 +446,7 @@ const RunANodePage = () => {
       <PageMetadata
         title={t("page-run-a-node-title")}
         description={t("page-run-a-node-meta-description")}
+        image="/run-a-node/ethereum-inside.png"
       />
       <HeroContainer>
         <Box pb="8">

src/pages/stablecoins.tsx

@@ -403,6 +403,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       <PageMetadata
         title={t("page-stablecoins-title")}
         description={t("page-stablecoins-meta-description")}
+        image="/stablecoins/hero.png"
       />
       <PageHero isReverse content={heroContent} />
       <Divider />