refactor: changelog list with react and remarkFrontmatter

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 (
+    <div className="flex flex-col">
+      <div className="pl-8">
+        {changelogs.slice(0, visibleChangelogs).map((changelog) => (
+          <div
+            key={changelog.id}
+            className="relative border-l border-gray-dark-6 pb-48 pl-26 last:pb-0"
+          >
+            <div className="absolute -left-8 top-1 size-15 rounded-full border-3 border-gray-dark-2 bg-gray-dark-11 outline outline-gray-dark-6"></div>
+            <p className="pb-16 text-14 font-medium text-yellow-dark-11">
+              {formatDate({ date: changelog.data.date })}
+            </p>
+            <img
+              src={changelog.data.image?.src}
+              alt={changelog.data.desc}
+              className="w-full rounded-20 border-6 border-gray-dark-3 p-0 outline outline-gray-dark-5 sm:h-400"
+            />
+            <article className="flex flex-col gap-24 py-24">
+              <a
+                href={generateChangelogDetailsUrl(changelog)}
+                className="text-34 font-medium leading-tight text-gray-dark-12 hover:underline"
+              >
+                {changelog.data.title}
+              </a>
+              <div className="changelog-list relative">
+                <div className="absolute bottom-0 h-80 w-full bg-gradient-to-b from-transparent to-black"></div>
+                <ChangelogMarkdownParser markdown={changelog.body} />
+              </div>
+            </article>
+            <a
+              href={generateChangelogDetailsUrl(changelog)}
+              className="group flex items-center gap-4 text-16 text-gray-dark-12 hover:underline"
+            >
+              Read the announcement to learn more{' '}
+              <IconArrowUpRight className="size-18 text-gray-dark-11 transition-all group-hover:ml-4" />
+            </a>
+          </div>
+        ))}
+      </div>
+      {changelogs.length > visibleChangelogs && (
+        <div className="self-center pt-42">
+          <ButtonYellow
+            onClick={() =>
+              setVisibleChangelogs((prev) => prev + CHANGELOG_LIMIT)
+            }
+          >
+            Load more
+          </ButtonYellow>
+        </div>
+      )}
+    </div>
+  );
+};

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 <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
+};
+
+export default ChangelogMarkdownParser;

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(),
+);
 ---
 
 <Layout
@@ -23,39 +18,6 @@ const generateChangelogDetailsUrl = (changelog: CollectionEntry<'changelog'>) =>
       <h1 class="text-34 font-medium text-gray-dark-12">Changelog</h1>
       <h2 class="text-20">New updates and improvements to Fleek</h2>
     </div>
-    <div class="pl-8" id="changelog-container">
-      {
-        initialChangelogs.map((changelog) => (
-          <ChangelogItem
-            changelog={changelog}
-            generateChangelogDetailsUrl={generateChangelogDetailsUrl}
-          />
-        ))
-      }
-    </div>
-    <div class="self-center pt-42">
-      <ButtonYellow id="load-more">Load more</ButtonYellow>
-    </div>
+    <ChangelogList changelogs={changelogs} client:load />
   </section>
 </Layout>
-
-<script>
-  let currentBatch = 1;
-  const loadMoreButton = document.getElementById('load-more');
-  const changelogContainer = document.getElementById('changelog-container');
-
-  loadMoreButton?.addEventListener('click', async () => {
-    currentBatch += 1; // Move to the next batch
-    const response = await fetch(
-      `/api/changelog-batch/${currentBatch}/index.html`,
-    );
-
-    if (response.ok) {
-      const newContent = await response.text();
-      changelogContainer?.insertAdjacentHTML('beforeend', newContent);
-    } else {
-      // Hide the button if no more content is available
-      loadMoreButton.style.display = 'none';
-    }
-  });
-</script>

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<string> => {
+  const result = await remark()
+    .use(frontmatter, ['yaml', 'toml'])
+    .use(html)
+    .process(markdown);
+  return result.toString();
+};