feat: What is ethereum network page

app/[locale]/founders/page.tsx

@@ -4,6 +4,7 @@ import { getTranslations } from "next-intl/server"
 
 import type { CommitHistory, Lang, SectionNavDetails } from "@/lib/types"
 
+import CommentCard from "@/components/CommentCard"
 import ContentHero from "@/components/Hero/ContentHero"
 import { CheckCircle } from "@/components/icons/CheckCircle"
 import MainArticle from "@/components/MainArticle"
@@ -509,27 +510,16 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
 
             <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
               {stories.map(({ name, affiliation, content, className }) => (
-                <Card
+                <CommentCard
                   key={name}
+                  description={content}
+                  name={name}
+                  title={affiliation}
                   className={cn(
                     "h-fit space-y-1 rounded-2xl border bg-background p-6",
                     className
                   )}
-                >
-                  <div className="space-y-6">{content}</div>
-                  <div className="flex items-center gap-x-2">
-                    <div
-                      data-label="avatar"
-                      className="grid size-8 place-items-center rounded-full text-body-inverse"
-                    >
-                      {name[0].toUpperCase()}
-                    </div>
-                    <div>
-                      <p className="font-bold">{name}</p>
-                      <p className="text-sm text-body-medium">{affiliation}</p>
-                    </div>
-                  </div>
-                </Card>
+                />
               ))}
             </div>
           </Section>

app/[locale]/what-is-ethereum/page.tsx

@@ -1,13 +1,12 @@
 import {
-  ArrowRight,
   Castle,
   Landmark,
   LockKeyhole,
   Shield,
   SquareCode,
   User,
 } from "lucide-react"
-import { getLocale, getTranslations } from "next-intl/server"
+import { getTranslations } from "next-intl/server"
 
 import type { CommitHistory, Lang, ToCItem } from "@/lib/types"
 
@@ -22,13 +21,12 @@ import MainArticle from "@/components/MainArticle"
 import TableOfContents from "@/components/TableOfContents"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 import { Card, CardContent, CardTitle } from "@/components/ui/card"
-import Link, { LinkProps } from "@/components/ui/Link"
+import Link, { LinkWithArrow } from "@/components/ui/Link"
 import { ListItem, OrderedList, UnorderedList } from "@/components/ui/list"
 import { Section } from "@/components/ui/section"
 
 import { cn } from "@/lib/utils/cn"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { getDirection } from "@/lib/utils/direction"
 import { getMetadata } from "@/lib/utils/metadata"
 import { screens } from "@/lib/utils/screen"
 
@@ -86,21 +84,6 @@ const HighlightCardContent = ({
   <div className={cn("space-y-6 text-body-medium", className)} {...props} />
 )
 
-const LinkWithArrow = async ({ href, className, children }: LinkProps) => {
-  const locale = await getLocale()
-  const { twFlipForRtl } = getDirection(locale as Lang)
-  return (
-    <Link
-      href={href}
-      className={cn("group block w-fit no-underline", className)}
-    >
-      <ArrowRight className={cn("mb-1 inline size-[1em]", twFlipForRtl)} />
-      &nbsp;
-      <span className="group-hover:underline">{children}</span>
-    </Link>
-  )
-}
-
 const Page = async ({ params }: { params: { locale: Lang } }) => {
   const { locale } = params
   const t = await getTranslations({
@@ -353,7 +336,7 @@ const Page = async ({ params }: { params: { locale: Lang } }) => {
                 </div>
               </div>
 
-              <LinkWithArrow href="/layer-2/networks/">
+              <LinkWithArrow href="/what-is-the-ethereum-network/">
                 {t("page-what-is-ethereum-network-learn-more")}
               </LinkWithArrow>
             </Section>

app/[locale]/what-is-the-ethereum-network/page-jsonld.tsx

@@ -0,0 +1,125 @@
+import { getTranslations } from "next-intl/server"
+
+import { FileContributor, Lang } from "@/lib/types"
+
+import PageJsonLD from "@/components/PageJsonLD"
+
+import { normalizeUrlForJsonLd } from "@/lib/utils/url"
+
+export default async function WhatIsTheEthereumNetworkPageJsonLD({
+  locale,
+  lastEditLocaleTimestamp,
+  contributors,
+}: {
+  locale: Lang | undefined
+  lastEditLocaleTimestamp: string
+  contributors: FileContributor[]
+}) {
+  const t = await getTranslations({
+    namespace: "page-what-is-the-ethereum-network",
+  })
+
+  const url = normalizeUrlForJsonLd(locale, `/what-is-the-ethereum-network/`)
+
+  const contributorList = contributors.map((contributor) => ({
+    "@type": "Person",
+    name: contributor.login,
+    url: contributor.html_url,
+  }))
+
+  // JSON-LD structured data for the What is the Ethereum Network page
+  const webPageJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "@id": url,
+    name: t("page-what-is-ethereum-network-meta-title"),
+    description: t("page-what-is-ethereum-network-meta-description"),
+    url: url,
+    inLanguage: locale,
+    contributor: contributorList,
+    author: [
+      {
+        "@type": "Organization",
+        name: "ethereum.org",
+        url: "https://ethereum.org",
+      },
+    ],
+    breadcrumb: {
+      "@type": "BreadcrumbList",
+      itemListElement: [
+        {
+          "@type": "ListItem",
+          position: 1,
+          name: "Home",
+          item: normalizeUrlForJsonLd(locale, "/"),
+        },
+        {
+          "@type": "ListItem",
+          position: 2,
+          name: "Learn",
+          item: normalizeUrlForJsonLd(locale, "/learn/"),
+        },
+        {
+          "@type": "ListItem",
+          position: 3,
+          name: t("page-what-is-ethereum-network-meta-title"),
+          item: url,
+        },
+      ],
+    },
+    publisher: {
+      "@type": "Organization",
+      name: "ethereum.org",
+      url: "https://ethereum.org",
+    },
+    reviewedBy: {
+      "@type": "Organization",
+      name: "ethereum.org",
+      url: "https://ethereum.org",
+      logo: {
+        "@type": "ImageObject",
+        url: "https://ethereum.org/images/eth-home-icon.png",
+      },
+    },
+  }
+
+  // JSON-LD for the ethereum network article content
+  const articleJsonLd = {
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: t("page-what-is-ethereum-network-title"),
+    description: t("page-what-is-ethereum-network-meta-description"),
+    image: "https://ethereum.org/images/what-is-ethereum-network.png",
+    author: [
+      {
+        "@type": "Organization",
+        name: "ethereum.org",
+        url: "https://ethereum.org",
+      },
+    ],
+    publisher: {
+      "@type": "Organization",
+      name: "ethereum.org",
+      url: "https://ethereum.org",
+    },
+    contributor: contributorList,
+    reviewedBy: {
+      "@type": "Organization",
+      name: "ethereum.org",
+      url: "https://ethereum.org",
+      logo: {
+        "@type": "ImageObject",
+        url: "https://ethereum.org/images/eth-home-icon.png",
+      },
+    },
+    about: {
+      "@type": "Thing",
+      name: "Ethereum Network",
+      description:
+        "Comprehensive guide to the Ethereum network, including fees, staking, layer 2 solutions, and live network data",
+    },
+    dateModified: lastEditLocaleTimestamp,
+  }
+
+  return <PageJsonLD structuredData={[webPageJsonLd, articleJsonLd]} />
+}