feat: add Releases collection with GitHub sync

package.json

@@ -70,6 +70,7 @@
     "react-markdown": "^9.0.1",
     "react-select": "5.9.0",
     "react-transition-group": "^4.4.5",
+    "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "sass": "^1.55.0",
     "sharp": "0.32.6",

src/app/(frontend)/(pages)/posts/releases/[slug]/page.tsx

@@ -0,0 +1,98 @@
+import type { Metadata } from 'next'
+
+import BreadcrumbsBar from '@components/Hero/BreadcrumbsBar/index'
+import { PayloadRedirects } from '@components/PayloadRedirects/index'
+import { RefreshRouteOnSave } from '@components/RefreshRouterOnSave/index'
+import { Release } from '@components/Release/index'
+import { fetchRelease, fetchReleases } from '@data'
+import { mergeOpenGraph } from '@root/seo/mergeOpenGraph'
+import { unstable_cache } from 'next/cache'
+import { draftMode } from 'next/headers'
+import React from 'react'
+
+const getRelease = async (slug: string, draft?: boolean) =>
+  draft
+    ? await fetchRelease(slug)
+    : await unstable_cache(fetchRelease, ['release', `release-${slug}`])(slug)
+
+const ReleasePage = async ({
+  params,
+}: {
+  params: Promise<{
+    slug: string
+  }>
+}) => {
+  const { isEnabled: draft } = await draftMode()
+  const { slug } = await params
+
+  const release = await getRelease(slug, draft)
+
+  const url = `/posts/releases/${slug}`
+
+  if (!release) {
+    return <PayloadRedirects url={url} />
+  }
+
+  return (
+    <>
+      <PayloadRedirects disableNotFound url={url} />
+      <RefreshRouteOnSave />
+      <BreadcrumbsBar breadcrumbs={[]} hero={{ type: 'default' }} />
+      <Release {...release} />
+    </>
+  )
+}
+
+export default ReleasePage
+
+export async function generateStaticParams() {
+  const getReleases = unstable_cache(fetchReleases, ['allReleases'])
+  const releases = await getReleases()
+
+  return releases
+    .filter((release) => release.slug)
+    .map(({ slug }) => ({
+      slug,
+    }))
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    slug: string
+  }>
+}): Promise<Metadata> {
+  const { isEnabled: draft } = await draftMode()
+  const { slug } = await params
+  const release = await getRelease(slug, draft)
+
+  let ogImage: null | string = null
+
+  if (release) {
+    if (release?.meta?.image && typeof release.meta.image !== 'string' && release.meta.image?.url) {
+      ogImage = release.meta.image.url
+    } else if (release.image && typeof release.image !== 'string' && release.image?.url) {
+      ogImage = release.image.url
+    } else {
+      ogImage = `${process.env.NEXT_PUBLIC_SITE_URL}/api/og?type=releases&title=${encodeURIComponent(release.title || '')}`
+    }
+  }
+
+  return {
+    description: release?.meta?.description,
+    openGraph: mergeOpenGraph({
+      description: release?.meta?.description ?? undefined,
+      images: ogImage
+        ? [
+            {
+              url: ogImage,
+            },
+          ]
+        : undefined,
+      title: release?.title ?? undefined,
+      url: `/posts/releases/${slug}`,
+    }),
+    title: release?.title ? `${release.title} | Payload` : 'Release | Payload',
+  }
+}

src/app/(frontend)/(pages)/posts/releases/page.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from 'next'
+
+import { BackgroundGrid } from '@components/BackgroundGrid'
+import { BlockWrapper } from '@components/BlockWrapper'
+import { ContentMediaCard } from '@components/cards/ContentMediaCard'
+import { Gutter } from '@components/Gutter'
+import { fetchReleases } from '@data'
+import { unstable_cache } from 'next/cache'
+import React from 'react'
+
+export default async function ReleasesPage() {
+  const getReleases = unstable_cache(fetchReleases, ['releases-archive'])
+  const releases = await getReleases()
+
+  return (
+    <BlockWrapper padding={{ bottom: 'large', top: 'large' }} settings={{}}>
+      <BackgroundGrid />
+      <Gutter>
+        <h1>Releases</h1>
+        {releases && Array.isArray(releases) && releases.length > 0 ? (
+          <div className={['grid'].filter(Boolean).join(' ')} style={{ marginTop: '2rem' }}>
+            {releases.map((release) => {
+              if (typeof release === 'string' || !release.slug) {
+                return null
+              }
+
+              return (
+                <div className={['cols-8 cols-m-8'].filter(Boolean).join(' ')} key={release.slug}>
+                  <ContentMediaCard
+                    authors={release.authors}
+                    href={`/posts/releases/${release.slug}`}
+                    media={
+                      release.image ??
+                      `/api/og?type=releases&title=${encodeURIComponent(release.title || '')}`
+                    }
+                    publishedOn={release.publishedOn}
+                    title={release.title}
+                  />
+                </div>
+              )
+            })}
+          </div>
+        ) : (
+          <p>No releases found.</p>
+        )}
+      </Gutter>
+    </BlockWrapper>
+  )
+}
+
+export const metadata: Metadata = {
+  description: 'Release notes for Payload CMS',
+  title: 'Releases | Payload',
+}

src/app/(frontend)/api/og/route.tsx

@@ -37,6 +37,7 @@ export async function GET(req: NextRequest): Promise<ImageResponse> {
       blog: 'Blog Post',
       docs: 'Documentation',
       guides: 'Guides & Tutorials',
+      releases: 'Release Notes',
     }
 
     return new ImageResponse(

src/app/(frontend)/api/sync-releases/route.ts

@@ -0,0 +1,15 @@
+import { syncReleases } from '@root/scripts/fetchReleases'
+import { NextResponse } from 'next/server'
+
+export const maxDuration = 300 // 5 mins (max on vercel pro plan)
+export const dynamic = 'force-dynamic'
+
+export async function GET(): Promise<NextResponse> {
+  try {
+    const result = await syncReleases(20)
+    return NextResponse.json({ success: true, ...result }, { status: 200 })
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error'
+    return NextResponse.json({ error: message, success: false }, { status: 500 })
+  }
+}