diff --git a/src/components/Changelog/ChangelogItem.astro b/src/components/Changelog/ChangelogItem.astro deleted file mode 100644 index 12fe31c12..000000000 --- a/src/components/Changelog/ChangelogItem.astro +++ /dev/null @@ -1,48 +0,0 @@ ---- -import { formatDate } from '@utils/date'; -import ChangelogListBody from './ChangelogListBody.astro'; -import { IconArrowUpRight } from '@components/IconArrow'; -import type { CollectionEntry } from 'astro:content'; - -export interface Props { - changelog: CollectionEntry<'changelog'>; - generateChangelogDetailsUrl: ( - changelog: CollectionEntry<'changelog'>, - ) => string; -} - -const { changelog, generateChangelogDetailsUrl } = Astro.props; ---- - -
-
-
-

- {formatDate({ date: changelog.data.date })} -

- {changelog.data.desc} -
- - {changelog.data.title} - - -
- - Read the announcement to learn more{' '} - - -
diff --git a/src/components/Changelog/ChangelogList.tsx b/src/components/Changelog/ChangelogList.tsx new file mode 100644 index 000000000..ed2cb2a22 --- /dev/null +++ b/src/components/Changelog/ChangelogList.tsx @@ -0,0 +1,73 @@ +import ButtonYellow from '@components/ButtonYellow'; +import { IconArrowUpRight } from '@components/IconArrow'; +import { formatDate } from '@utils/date'; +import type { CollectionEntry } from 'astro:content'; +import { useState } from 'react'; +import ChangelogMarkdownParser from './ChangelogMarkdownParser'; + +const CHANGELOG_LIMIT = 3; + +type ChangelogListProps = { + changelogs: CollectionEntry<'changelog'>[]; +}; + +export const ChangelogList = ({ changelogs }: ChangelogListProps) => { + const [visibleChangelogs, setVisibleChangelogs] = useState(CHANGELOG_LIMIT); + + const generateChangelogDetailsUrl = ( + changelog: CollectionEntry<'changelog'>, + ) => `/${changelog.collection}/${changelog.slug}`; + + return ( +
+
+ {changelogs.slice(0, visibleChangelogs).map((changelog) => ( +
+
+

+ {formatDate({ date: changelog.data.date })} +

+ {changelog.data.desc} + + + Read the announcement to learn more{' '} + + +
+ ))} +
+ {changelogs.length > visibleChangelogs && ( +
+ + setVisibleChangelogs((prev) => prev + CHANGELOG_LIMIT) + } + > + Load more + +
+ )} +
+ ); +}; diff --git a/src/components/Changelog/ChangelogListBody.astro b/src/components/Changelog/ChangelogListBody.astro deleted file mode 100644 index 658d17fa1..000000000 --- a/src/components/Changelog/ChangelogListBody.astro +++ /dev/null @@ -1,15 +0,0 @@ ---- -import { getEntryBySlug } from 'astro:content'; - -const { slug } = Astro.props; -const entry = await getEntryBySlug('changelog', slug); -const { Content } = await entry!.render(); ---- - -
-
-
- -
diff --git a/src/components/Changelog/ChangelogMarkdownParser.tsx b/src/components/Changelog/ChangelogMarkdownParser.tsx new file mode 100644 index 000000000..3e8c76ee1 --- /dev/null +++ b/src/components/Changelog/ChangelogMarkdownParser.tsx @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'react'; +import { parseMarkdown } from '../../utils/parseMarkdown'; + +export const ChangelogMarkdownParser = ({ markdown }: { markdown: string }) => { + const [htmlContent, setHtmlContent] = useState(''); + + useEffect(() => { + const parse = async () => { + const parsedHtml = await parseMarkdown(markdown); + setHtmlContent(parsedHtml); + }; + + parse(); + }, [markdown]); + + return
; +}; + +export default ChangelogMarkdownParser; diff --git a/src/pages/api/changelog-batch/[batch].astro b/src/pages/api/changelog-batch/[batch].astro deleted file mode 100644 index a1a4b83a4..000000000 --- a/src/pages/api/changelog-batch/[batch].astro +++ /dev/null @@ -1,35 +0,0 @@ ---- -import ChangelogItem from '@components/Changelog/ChangelogItem.astro'; -import { getCollection, type CollectionEntry } from 'astro:content'; - -const batchNumber = Number(Astro.params.batch); -const batchSize = 3; - -// Fetch all changelogs and determine the slice for this batch -const changelogs = (await getCollection('changelog')) - .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()) - .slice((batchNumber - 1) * batchSize, batchNumber * batchSize); - -const generateChangelogDetailsUrl = (changelog: CollectionEntry<'changelog'>) => - `./${changelog.collection}/${changelog.slug}`; - -export async function getStaticPaths() { - const changelogs = await getCollection('changelog'); - const batchSize = 3; - const numberOfBatches = Math.ceil(changelogs.length / batchSize); - - // Generate paths for each batch - return Array.from({ length: numberOfBatches }).map((_, i) => ({ - params: { batch: String(i + 1) }, - })); -} ---- - -{ - changelogs.map((changelog) => ( - - )) -} diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro index a4cdfbaa2..292c7691c 100644 --- a/src/pages/changelog.astro +++ b/src/pages/changelog.astro @@ -1,17 +1,12 @@ --- import Layout from '@layouts/ChangelogPage.astro'; import settings from '@base/settings.json'; -import ChangelogItem from '@components/Changelog/ChangelogItem.astro'; import { getCollection } from 'astro:content'; -import type { CollectionEntry } from 'astro:content'; -import ButtonYellow from '@components/ButtonYellow'; +import { ChangelogList } from '@components/Changelog/ChangelogList'; -const initialChangelogs = (await getCollection('changelog')) - .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf()) - .slice(0, 3); - -const generateChangelogDetailsUrl = (changelog: CollectionEntry<'changelog'>) => - `/${changelog.collection}/${changelog.slug}`; +const changelogs = (await getCollection('changelog')).sort( + (a, b) => b.data.date.valueOf() - a.data.date.valueOf(), +); --- ) =>

Changelog

New updates and improvements to Fleek

-
- { - initialChangelogs.map((changelog) => ( - - )) - } -
-
- Load more -
+ - - diff --git a/src/utils/parseMarkdown.ts b/src/utils/parseMarkdown.ts new file mode 100644 index 000000000..56eb554fe --- /dev/null +++ b/src/utils/parseMarkdown.ts @@ -0,0 +1,11 @@ +import { remark } from 'remark'; +import html from 'remark-html'; +import frontmatter from 'remark-frontmatter'; + +export const parseMarkdown = async (markdown: string): Promise => { + const result = await remark() + .use(frontmatter, ['yaml', 'toml']) + .use(html) + .process(markdown); + return result.toString(); +};