refactor(changelog) refactor release card component

source.config.ts

@@ -29,11 +29,11 @@ export const docs = defineDocs({
 });
 
 /**
- * Changelog releases
+ * Changelog
  */
-export const releases = defineCollections({
+export const changelog = defineCollections({
   type: 'doc',
-  dir: 'content/release',
+  dir: 'content/changelog',
   schema: z.object({
     title: z.string(),
     description: z.string(),

src/app/[locale]/(marketing)/(pages)/changelog/page.tsx

@@ -1,6 +1,6 @@
 import Container from '@/components/layout/container';
 import { ReleaseCard } from '@/components/release/release-card';
-import { changelog } from '@/lib/docs/source';
+import { changelogSource } from '@/lib/docs/source';
 import { constructMetadata } from '@/lib/metadata';
 import { getUrlWithLocale } from '@/lib/urls/urls';
 import type { NextPageProps } from '@/types/next-page-props';
@@ -34,7 +34,7 @@ export default async function ChangelogPage(props: NextPageProps) {
   }
 
   const locale = params.locale as Locale;
-  const localeReleases = changelog.getPages(locale);
+  const localeReleases = changelogSource.getPages(locale);
   const publishedReleases = localeReleases
     .filter((releaseItem) => releaseItem.data.published)
     .sort(
@@ -64,16 +64,10 @@ export default async function ChangelogPage(props: NextPageProps) {
         {/* Releases */}
         <div className="mt-8">
           {publishedReleases.map((releaseItem) => {
-            const MDX = releaseItem.data.body;
-
             return (
               <ReleaseCard
                 key={releaseItem.data.version}
-                title={releaseItem.data.title}
-                description={releaseItem.data.description}
-                date={releaseItem.data.date}
-                version={releaseItem.data.version}
-                content={<MDX />}
+                releaseItem={releaseItem}
               />
             );
           })}

src/components/release/release-card.tsx

@@ -1,25 +1,20 @@
 import { Badge } from '@/components/ui/badge';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
+import type { changelogSource } from '@/lib/docs/source';
 import { formatDate } from '@/lib/formatter';
 import { CalendarIcon, TagIcon } from 'lucide-react';
-import type { ReactNode } from 'react';
+import { getMDXComponents } from '../custom/mdx-components';
+
+type ChangelogPage = ReturnType<typeof changelogSource.getPages>[number];
 
 interface ReleaseCardProps {
-  title: string;
-  description: string;
-  date: string;
-  version: string;
-  content: ReactNode; // React component
+  releaseItem: ChangelogPage;
 }
 
-export function ReleaseCard({
-  title,
-  description,
-  date,
-  version,
-  content,
-}: ReleaseCardProps) {
+export function ReleaseCard({ releaseItem }: ReleaseCardProps) {
+  const { title, description, date, version } = releaseItem.data;
+  const MDX = releaseItem.data.body;
   const formattedDate = formatDate(new Date(date));
 
   return (
@@ -41,7 +36,7 @@ export function ReleaseCard({
       </CardHeader>
       <CardContent>
         <div className="max-w-none prose prose-neutral dark:prose-invert prose-img:rounded-lg">
-          {content}
+          <MDX components={getMDXComponents()} />
         </div>
       </CardContent>
     </Card>

src/lib/docs/source.ts

@@ -2,7 +2,7 @@ import { loader } from 'fumadocs-core/source';
 import { createMDXSource } from 'fumadocs-mdx';
 import * as LucideIcons from 'lucide-react';
 import { createElement } from 'react';
-import { docs, releases } from '../../../.source';
+import { changelog, docs } from '../../../.source';
 import { docsI18nConfig } from './i18n';
 
 /**
@@ -32,10 +32,10 @@ export const source = loader({
 });
 
 /**
- * Changelog releases source
+ * Changelog source
  */
-export const changelog = loader({
+export const changelogSource = loader({
   baseUrl: '/changelog',
   i18n: docsI18nConfig,
-  source: createMDXSource(releases),
+  source: createMDXSource(changelog),
 });