Builder hub blog

.gitignore

@@ -43,7 +43,7 @@ pnpm-lock.yaml.bak
 next-env.d.ts
 
 # rss feeds
-feed.xml
+/feed.xml
 
 # Sitemaps
 sitemap*.xml

app/[locale]/developers/page.tsx

@@ -29,11 +29,14 @@ import { VStack } from "@/components/ui/flex"
 import Link from "@/components/ui/Link"
 import InlineLink from "@/components/ui/Link"
 import { Section } from "@/components/ui/section"
+import { TagsInlineText } from "@/components/ui/tag"
 import { TerminalTypewriter } from "@/components/ui/terminal-typewriter"
 
+import { getBlogFallbackHero } from "@/lib/utils/blog"
 import { cn } from "@/lib/utils/cn"
 import { getAppPageContributorInfo } from "@/lib/utils/contributors"
-import { formatDateRange } from "@/lib/utils/date"
+import { formatDate, formatDateRange } from "@/lib/utils/date"
+import { getBlogPostsData } from "@/lib/utils/md"
 import { getMetadata } from "@/lib/utils/metadata"
 import { screens } from "@/lib/utils/screen"
 
@@ -52,6 +55,7 @@ import tutorialTagsBanner from "@/public/images/developers/tutorial-tags-banner.
 import dogeImage from "@/public/images/doge-computer.png"
 import fallbackThumbnail from "@/public/images/eth-glyph-thumbnail.png"
 import heroImage from "@/public/images/heroes/developers-hub-hero.png"
+
 const H3 = (props: ChildOnlyProp) => <h3 className="mt-10 mb-8" {...props} />
 
 const Text = (props: ChildOnlyProp) => <p className="mb-6" {...props} />
@@ -140,6 +144,8 @@ const DevelopersPage = async (props: { params: Promise<PageParams> }) => {
 
   const hackathons = (await getHackathons()).slice(0, 5)
 
+  const recentPosts = (await getBlogPostsData(locale)).slice(0, 3)
+
   const { contributors } = await getAppPageContributorInfo(
     "developers",
     locale as Lang
@@ -459,6 +465,85 @@ const DevelopersPage = async (props: { params: Promise<PageParams> }) => {
             </div>
           </Section>
 
+          {recentPosts.length > 0 && (
+            <Section id="blog" className="space-y-4 py-10 md:py-12">
+              <h2>{t("page-developers-blog-title")}</h2>
+              <p>{t("page-developers-blog-desc")}</p>
+
+              <EdgeScrollContainer className="[--edge-spacing:2rem]">
+                {recentPosts.map((post) => (
+                  <EdgeScrollItem
+                    key={post.href}
+                    asChild
+                    className="ms-6 w-[calc(100%-4rem)] max-w-md md:min-w-96 md:flex-1 lg:max-w-[33%]"
+                  >
+                    <Card
+                      href={post.href}
+                      customEventOptions={{
+                        eventCategory: "builder-blog",
+                        eventAction: "click",
+                        eventName: post.title,
+                      }}
+                      variant="ghost"
+                      size="sm"
+                    >
+                      <CardHeader>
+                        <CardBanner size="sm">
+                          {post.image ? (
+                            <Image
+                              src={post.image}
+                              alt=""
+                              width={1200}
+                              height={630}
+                              sizes="448px"
+                            />
+                          ) : (
+                            <Image
+                              src={getBlogFallbackHero(post.href)}
+                              alt=""
+                              sizes="448px"
+                            />
+                          )}
+                        </CardBanner>
+                      </CardHeader>
+                      <CardContent>
+                        <CardTitle className="line-clamp-2">
+                          {post.title}
+                        </CardTitle>
+                        <TagsInlineText
+                          list={[post.author, post.team]}
+                          variant="light"
+                          className="italic"
+                        />
+                        <CardParagraph size="sm" className="line-clamp-3">
+                          {post.description}
+                        </CardParagraph>
+                      </CardContent>
+                      <CardFooter>
+                        <CardParagraph size="sm">
+                          {formatDate(post.published, locale)}
+                        </CardParagraph>
+                      </CardFooter>
+                    </Card>
+                  </EdgeScrollItem>
+                ))}
+              </EdgeScrollContainer>
+
+              <div className="flex justify-center max-sm:*:w-full">
+                <ButtonLink
+                  href="/latest/"
+                  customEventOptions={{
+                    eventCategory: "builder-blog",
+                    eventAction: "click",
+                    eventName: "view-all-updates",
+                  }}
+                >
+                  {t("page-developers-blog-view-all")}
+                </ButtonLink>
+              </div>
+            </Section>
+          )}
+
           <Section
             id="docs"
             className={cn(

app/[locale]/latest/feed.xml/route.ts

@@ -0,0 +1,85 @@
+import type { NextRequest } from "next/server"
+import { getTranslations } from "next-intl/server"
+
+import { getBlogPostsData } from "@/lib/utils/md"
+import { getFullUrl } from "@/lib/utils/url"
+
+export const dynamic = "force-static"
+
+const XML_ESCAPE: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&apos;",
+}
+
+const escapeXml = (value: string): string =>
+  value.replace(/[&<>"']/g, (c) => XML_ESCAPE[c])
+
+export async function GET(
+  _: NextRequest,
+  { params }: { params: Promise<{ locale: string }> }
+) {
+  const { locale } = await params
+
+  const t = await getTranslations({
+    locale,
+    namespace: "page-latest",
+  })
+
+  const posts = await getBlogPostsData(locale)
+
+  // Strip trailing slash for the .xml file URL (getFullUrl appends one for
+  // directory-style URLs, but feed.xml is a file).
+  const feedUrl = getFullUrl(locale, "/latest/feed.xml").replace(/\/$/, "")
+  const channelLink = getFullUrl(locale, "/latest/")
+  const channelTitle = t("page-latest-title")
+  const channelDescription = t("page-latest-subtitle")
+
+  const items = posts
+    .map((post) => {
+      const link = getFullUrl(locale, post.href)
+      const pubDate = new Date(post.published).toUTCString()
+      const creator = post.author
+        ? `<dc:creator>${escapeXml(post.author)}</dc:creator>`
+        : ""
+      const categories = (post.tags ?? [])
+        .map((tag) => `<category>${escapeXml(tag)}</category>`)
+        .join("")
+      return [
+        "<item>",
+        `<title>${escapeXml(post.title)}</title>`,
+        `<link>${link}</link>`,
+        `<guid isPermaLink="true">${link}</guid>`,
+        `<description>${escapeXml(post.description)}</description>`,
+        creator,
+        `<pubDate>${pubDate}</pubDate>`,
+        categories,
+        "</item>",
+      ].join("")
+    })
+    .join("")
+
+  const lastBuildDate = new Date().toUTCString()
+  const xml = [
+    '<?xml version="1.0" encoding="UTF-8"?>',
+    '<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">',
+    "<channel>",
+    `<title>${escapeXml(channelTitle)}</title>`,
+    `<link>${channelLink}</link>`,
+    `<atom:link href="${feedUrl}" rel="self" type="application/rss+xml" />`,
+    `<description>${escapeXml(channelDescription)}</description>`,
+    `<language>${locale}</language>`,
+    `<lastBuildDate>${lastBuildDate}</lastBuildDate>`,
+    items,
+    "</channel>",
+    "</rss>",
+  ].join("")
+
+  return new Response(xml, {
+    headers: {
+      "Content-Type": "application/rss+xml; charset=utf-8",
+    },
+  })
+}

app/[locale]/latest/page-jsonld.tsx

@@ -0,0 +1,82 @@
+import type { BlogPost, FileContributor } from "@/lib/types"
+
+import PageJsonLD from "@/components/PageJsonLD"
+
+import { normalizeUrlForJsonLd } from "@/lib/utils/url"
+
+import { BASE_GRAPH_NODES } from "@/lib/jsonld/constants"
+import { REFERENCE } from "@/lib/jsonld/references"
+
+export default async function BlogPageJsonLD({
+  locale,
+  blogPosts,
+  contributors,
+}: {
+  locale: string
+  blogPosts: BlogPost[]
+  contributors: FileContributor[]
+}) {
+  const url = normalizeUrlForJsonLd(locale, "/latest")
+
+  const contributorList = contributors.map((contributor) => ({
+    "@type": "Person",
+    name: contributor.login,
+    url: contributor.html_url,
+  }))
+
+  const blogPostItems = blogPosts.map((post, index) => ({
+    "@type": "ListItem",
+    position: index + 1,
+    url: normalizeUrlForJsonLd(locale, post.href),
+    name: post.title,
+  }))
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@graph": [
+      ...BASE_GRAPH_NODES,
+      {
+        "@type": "CollectionPage",
+        "@id": url,
+        name: "Builder updates",
+        description:
+          "Builder resources, tools, and developments from the Ethereum ecosystem.",
+        url,
+        inLanguage: locale,
+        isPartOf: REFERENCE.ETHEREUM_ORG_WEBSITE,
+        publisher: REFERENCE.ETHEREUM_FOUNDATION,
+        contributor: contributorList,
+        breadcrumb: {
+          "@type": "BreadcrumbList",
+          itemListElement: [
+            {
+              "@type": "ListItem",
+              position: 1,
+              name: "Home",
+              item: normalizeUrlForJsonLd(locale, "/"),
+            },
+            {
+              "@type": "ListItem",
+              position: 2,
+              name: "Developers",
+              item: normalizeUrlForJsonLd(locale, "/developers"),
+            },
+            {
+              "@type": "ListItem",
+              position: 3,
+              name: "Builder updates",
+              item: url,
+            },
+          ],
+        },
+        mainEntity: {
+          "@type": "ItemList",
+          numberOfItems: blogPosts.length,
+          itemListElement: blogPostItems,
+        },
+      },
+    ],
+  }
+
+  return <PageJsonLD structuredData={jsonLd} />
+}