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)/docs/_lib/utils.ts

@@ -1,12 +1,5 @@
 import { Cms } from '@kit/cms';
 
-interface HeadingNode {
-  text: string;
-  level: number;
-  href: string;
-  children: HeadingNode[];
-}
-
 /**
  * @name buildDocumentationTree
  * @description Build a tree structure for the documentation pages.
@@ -38,109 +31,3 @@ export function buildDocumentationTree(pages: Cms.ContentItem[]) {
 
   return tree.sort((a, b) => a.order - b.order);
 }
-
-/**
- * @name extractHeadingsFromJSX
- * @description Extract headings from JSX. This is used to generate the table of contents for the documentation pages.
- * @param jsx
- */
-export function extractHeadingsFromJSX(jsx: {
-  props: { children: React.ReactElement[] };
-}) {
-  const headings: HeadingNode[] = [];
-  let currentH2: HeadingNode | null = null;
-
-  function getTextContent(
-    children: React.ReactElement[] | string | React.ReactElement,
-  ): string {
-    try {
-      if (typeof children === 'string') {
-        return children;
-      }
-
-      if (Array.isArray(children)) {
-        return children.map((child) => getTextContent(child)).join('');
-      }
-
-      if (
-        (
-          children.props as {
-            children: React.ReactElement;
-          }
-        ).children
-      ) {
-        return getTextContent(
-          (children.props as { children: React.ReactElement }).children,
-        );
-      }
-
-      return '';
-    } catch {
-      return '';
-    }
-  }
-
-  try {
-    jsx.props.children.forEach((node) => {
-      if (!node || typeof node !== 'object' || !('type' in node)) {
-        return;
-      }
-
-      const nodeType = node.type as string;
-
-      const text = getTextContent(
-        (
-          node.props as {
-            children: React.ReactElement[];
-          }
-        ).children,
-      );
-
-      if (nodeType === 'h1') {
-        const slug = generateSlug(text);
-
-        headings.push({
-          text,
-          level: 1,
-          href: `#${slug}`,
-          children: [],
-        });
-      } else if (nodeType === 'h2') {
-        const slug = generateSlug(text);
-
-        currentH2 = {
-          text,
-          level: 2,
-          href: `#${slug}`,
-          children: [],
-        };
-
-        if (headings.length > 0) {
-          headings[headings.length - 1]!.children.push(currentH2);
-        } else {
-          headings.push(currentH2);
-        }
-      } else if (nodeType === 'h3' && currentH2) {
-        const slug = generateSlug(text);
-
-        currentH2.children.push({
-          text,
-          level: 3,
-          href: `#${slug}`,
-          children: [],
-        });
-      }
-    });
-
-    return headings;
-  } catch {
-    return [];
-  }
-}
-
-function generateSlug(text: string): string {
-  return text
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/(^-|-$)/g, '');
-}