diff --git a/src/components/Changelog/ChangelogItem.astro b/src/components/Changelog/ChangelogItem.astro index 7b61fb5f3..10c777513 100644 --- a/src/components/Changelog/ChangelogItem.astro +++ b/src/components/Changelog/ChangelogItem.astro @@ -1,45 +1,46 @@ --- import { DateTime } from 'luxon'; -import type { ChangelogFileType } from '../../lib/changelog'; import ChangelogImages from '../ChangelogImages'; +import type { ChangelogDocument } from '../../queries/changelog'; interface Props { - changelog: ChangelogFileType; + changelog: ChangelogDocument; } const { changelog } = Astro.props; -const { frontmatter } = changelog; -const formattedDate = DateTime.fromISO(frontmatter.date).toFormat( +const formattedDate = DateTime.fromISO(changelog.createdAt).toFormat( 'dd LLL, yyyy', ); --- -
- + -
+
{formattedDate} - {changelog.frontmatter.title} + {changelog.title}
- {frontmatter.images && ( - - )} + { + changelog.images && ( + + ) + }
- -
+ class='prose prose-sm prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul]:mt-3 [&>ul>li]:my-0 [&>ul>li]:mb-1' + set:html={changelog.description} + />
diff --git a/src/components/ChangelogBanner.astro b/src/components/ChangelogBanner.astro index b7fb0fca8..3b927f7ab 100644 --- a/src/components/ChangelogBanner.astro +++ b/src/components/ChangelogBanner.astro @@ -1,9 +1,9 @@ --- -import { getAllChangelogs } from '../lib/changelog'; +import { listChangelog } from '../queries/changelog'; import { DateTime } from 'luxon'; import AstroIcon from './AstroIcon.astro'; -const allChangelogs = await getAllChangelogs(); -const top10Changelogs = allChangelogs.slice(0, 10); + +const changelogs = await listChangelog({ limit: 10 }); ---
@@ -17,7 +17,7 @@ const top10Changelogs = allChangelogs.slice(0, 10); Actively Maintained

We are always improving our content, adding new resources and adding features to enhance your learning experience. @@ -25,27 +25,27 @@ const top10Changelogs = allChangelogs.slice(0, 10);

Subscribe for Notifications diff --git a/src/components/ChangelogImages.tsx b/src/components/ChangelogImages.tsx index 6166aac73..1780c7a07 100644 --- a/src/components/ChangelogImages.tsx +++ b/src/components/ChangelogImages.tsx @@ -1,13 +1,14 @@ import { ChevronLeft, ChevronRight } from 'lucide-react'; import React, { useState, useEffect, useCallback } from 'react'; +import type { ChangelogImage } from '../queries/changelog'; interface ChangelogImagesProps { - images: { [key: string]: string }; + images: ChangelogImage[]; } const ChangelogImages: React.FC = ({ images }) => { const [enlargedImage, setEnlargedImage] = useState(null); - const imageArray = Object.entries(images); + const imageArray = images.map((image) => [image.title, image.url]); const handleImageClick = (src: string) => { setEnlargedImage(src); @@ -63,10 +64,10 @@ const ChangelogImages: React.FC = ({ images }) => { alt={title} className="h-[120px] w-full object-cover object-left-top" /> - + -
- {title} +
+ {title}
))} @@ -82,7 +83,7 @@ const ChangelogImages: React.FC = ({ images }) => { className="max-h-[90%] max-w-[90%] rounded-xl object-contain" />