ref: Refactor changelog list page (#11019)

Author: Luca Forstner

apps/changelog/package.json

@@ -27,6 +27,7 @@
     "next-auth": "^4.24.5",
     "next-mdx-remote": "^4.4.1",
     "nextjs-toploader": "^1.6.6",
+    "nuqs": "^1.17.7",
     "prism-sentry": "^1.0.2",
     "react": "beta",
     "react-dom": "beta",

apps/changelog/src/app/changelog/%5Fadmin/page.tsx

@@ -103,10 +103,11 @@ export default async function ChangelogsListPage() {
                   <span className="text-gray-500">
                     <Text size="1">
                       {' '}
-                      {new Date(changelog.publishedAt || '').toLocaleDateString(
-                        undefined,
-                        {month: 'long', day: 'numeric'}
-                      )}
+                      {new Date(changelog.publishedAt || '').toLocaleDateString('en-EN', {
+                        month: 'long',
+                        day: 'numeric',
+                        timeZone: 'UTC',
+                      })}
                     </Text>
                     <br />
                   </span>

apps/changelog/src/app/changelog/page.tsx

@@ -1,38 +1,52 @@
-import { Fragment } from "react";
-import type { Metadata } from "next";
-import { serialize } from "next-mdx-remote/serialize";
+import {Fragment} from 'react';
+import type {Metadata} from 'next';
+import {serialize} from 'next-mdx-remote/serialize';
 
-import Header from "./header";
-import { getChangelogs } from "../../server/utils";
-import List from "@/client/components/list";
+import Header from './header';
+import {getChangelogs} from '../../server/utils';
+import {ChangelogEntry, ChangelogList} from '@/client/components/list';
+import {startSpan} from '@sentry/nextjs';
 
-export const dynamic = "force-dynamic";
+export const dynamic = 'force-dynamic';
 
-export default async function ChangelogList() {
+export default async function Page() {
   const changelogs = await getChangelogs();
 
-  const changelogsWithMdxSummaries = await Promise.all(
-    changelogs.map(async (changelog) => {
-      const mdxSummary = await serialize(changelog.summary || "");
-      return {
-        ...changelog,
-        mdxSummary,
-      };
-    })
+  const changelogsWithPublishedAt = changelogs.filter(changelog => {
+    return changelog.publishedAt !== null;
+  });
+
+  const changelogsWithMdxSummaries = await startSpan(
+    {name: 'serialize changelog summaries'},
+    () =>
+      Promise.all(
+        changelogsWithPublishedAt.map(async (changelog): Promise<ChangelogEntry> => {
+          const mdxSummary = await serialize(changelog.summary || '');
+          return {
+            id: changelog.id,
+            title: changelog.title,
+            slug: changelog.slug,
+            // Because `getChangelogs` is cached, it sometimes returns its results serialized and sometimes not. Therefore we have to deserialize the string to be able to call toUTCString().
+            publishedAt: new Date(changelog.publishedAt!).toUTCString(),
+            categories: changelog.categories,
+            mdxSummary,
+          };
+        })
+      )
   );
 
   return (
     <Fragment>
       <Header />
-      <List changelogs={changelogsWithMdxSummaries} />
+      <ChangelogList changelogs={changelogsWithMdxSummaries} />
     </Fragment>
   );
 }
 
 export function generateMetadata(): Metadata {
   return {
     description:
-      "Stay up to date on everything big and small, from product updates to SDK changes with the Sentry Changelog.",
+      'Stay up to date on everything big and small, from product updates to SDK changes with the Sentry Changelog.',
     alternates: {
       canonical: `https://sentry.io/changelog/`,
     },

apps/changelog/src/client/components/article.tsx

@@ -1,6 +1,6 @@
 import {ReactNode} from 'react';
-import Tag from './tag';
-import { DateComponent } from './date';
+import {DateComponent} from './date';
+import {CategoryTag} from './tag';
 
 type ArticleProps = {
   children?: ReactNode;
@@ -41,7 +41,7 @@ export default function Article({
         <h3 className="text-3xl text-primary font-semibold mb-2">{title}</h3>
         <div>
           <div className="flex flex-wrap gap-1 py-1">
-            {Array.isArray(tags) && tags.map(tag => <Tag key={tag} text={tag} />)}
+            {Array.isArray(tags) && tags.map(tag => <CategoryTag key={tag} text={tag} />)}
           </div>
 
           <div className="prose max-w-none text-gray-700 py-2">{children}</div>

apps/changelog/src/client/components/date.tsx

@@ -1,11 +1,10 @@
 const formatDate = (date: string | Date) => {
-  const options: Intl.DateTimeFormatOptions = {
+  const now = new Date(date).toLocaleDateString('en-EN', {
     year: 'numeric',
     month: 'long',
     day: 'numeric',
     timeZone: 'UTC'
-  };
-  const now = new Date(date).toLocaleDateString('en-EN', options);
+  });
 
   return now;
 };