Changelog (#399)

* feat: add changelog feature and update site navigation

- Introduced a new Changelog page with pagination and detailed entry views.
- Added components for displaying changelog entries, pagination, and entry details.
- Updated site navigation to include a link to the new Changelog page.
- Enhanced localization for changelog-related texts in marketing.json.

* refactor: enhance Changelog page layout and entry display

- Increased the number of changelog entries displayed per page from 2 to 20 for better visibility.
- Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs.
- Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon.
- Refined the CSS styles for Markdoc headings to improve typography and spacing.

* refactor: enhance Changelog page functionality and layout

- Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience.
- Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity.
- Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design.
- Removed unnecessary order fields from changelog markdown files to streamline content management.

* feat: enhance Changelog entry navigation and data loading

- Refactored ChangelogEntry page to load previous and next entries for improved navigation.
- Introduced ChangelogNavigation component to facilitate navigation between changelog entries.
- Updated ChangelogDetail component to display navigation links and entry details.
- Enhanced data fetching logic to retrieve all changelog entries alongside the current entry.
- Added localization keys for navigation text in marketing.json.

* Update package dependencies and enhance documentation layout

- Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0.
- Updated lucide-react to version 0.552.0 across multiple packages.
- Refactored documentation layout components for improved styling and structure.
- Removed deprecated loading components and adjusted navigation elements for better user experience.
- Added placeholder notes in changelog entries for clarity.

apps/web/app/(marketing)/changelog/page.tsx

@@ -0,0 +1,117 @@
+import { cache } from 'react';
+
+import type { Metadata } from 'next';
+
+import { createCmsClient } from '@kit/cms';
+import { getLogger } from '@kit/shared/logger';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { SitePageHeader } from '../_components/site-page-header';
+import { ChangelogEntry } from './_components/changelog-entry';
+import { ChangelogPagination } from './_components/changelog-pagination';
+
+interface ChangelogPageProps {
+  searchParams: Promise<{ page?: string }>;
+}
+
+const CHANGELOG_ENTRIES_PER_PAGE = 50;
+
+export const generateMetadata = async (
+  props: ChangelogPageProps,
+): Promise<Metadata> => {
+  const { t, resolvedLanguage } = await createI18nServerInstance();
+  const searchParams = await props.searchParams;
+  const limit = CHANGELOG_ENTRIES_PER_PAGE;
+
+  const page = searchParams.page ? parseInt(searchParams.page) : 0;
+  const offset = page * limit;
+
+  const { total } = await getContentItems(resolvedLanguage, limit, offset);
+
+  return {
+    title: t('marketing:changelog'),
+    description: t('marketing:changelogSubtitle'),
+    pagination: {
+      previous: page > 0 ? `/changelog?page=${page - 1}` : undefined,
+      next: offset + limit < total ? `/changelog?page=${page + 1}` : undefined,
+    },
+  };
+};
+
+const getContentItems = cache(
+  async (language: string | undefined, limit: number, offset: number) => {
+    const client = await createCmsClient();
+    const logger = await getLogger();
+
+    try {
+      return await client.getContentItems({
+        collection: 'changelog',
+        limit,
+        offset,
+        content: false,
+        language,
+        sortBy: 'publishedAt',
+        sortDirection: 'desc',
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to load changelog entries');
+
+      return { total: 0, items: [] };
+    }
+  },
+);
+
+async function ChangelogPage(props: ChangelogPageProps) {
+  const { t, resolvedLanguage: language } = await createI18nServerInstance();
+  const searchParams = await props.searchParams;
+
+  const limit = CHANGELOG_ENTRIES_PER_PAGE;
+  const page = searchParams.page ? parseInt(searchParams.page) : 0;
+  const offset = page * limit;
+
+  const { total, items: entries } = await getContentItems(
+    language,
+    limit,
+    offset,
+  );
+
+  return (
+    <>
+      <SitePageHeader
+        title={t('marketing:changelog')}
+        subtitle={t('marketing:changelogSubtitle')}
+      />
+
+      <div className="container flex max-w-4xl flex-col space-y-12 py-12">
+        <If
+          condition={entries.length > 0}
+          fallback={<Trans i18nKey="marketing:noChangelogEntries" />}
+        >
+          <div className="space-y-0">
+            {entries.map((entry, index) => {
+              return (
+                <ChangelogEntry
+                  key={entry.id}
+                  entry={entry}
+                  highlight={index === 0}
+                />
+              );
+            })}
+          </div>
+
+          <ChangelogPagination
+            currentPage={page}
+            canGoToNextPage={offset + limit < total}
+            canGoToPreviousPage={page > 0}
+          />
+        </If>
+      </div>
+    </>
+  );
+}
+
+export default withI18n(ChangelogPage);