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/_components/docs-card.tsx

@@ -13,7 +13,7 @@ export function DocsCard({
   return (
     <Link href={link.url} className="flex flex-col">
       <div
-        className={`bg-muted/50 hover:bg-muted/70 flex grow flex-col gap-y-2 rounded p-4`}
+        className={`hover:bg-muted/70 flex grow flex-col gap-y-0.5 rounded border p-4`}
       >
         <h3 className="mt-0 text-lg font-medium hover:underline dark:text-white">
           {title}

apps/web/app/(marketing)/docs/_components/docs-cards.tsx

@@ -6,7 +6,7 @@ export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
   const cardsSortedByOrder = [...cards].sort((a, b) => a.order - b.order);
 
   return (
-    <div className={'grid grid-cols-1 gap-4 lg:grid-cols-2'}>
+    <div className={'absolute flex w-full flex-col gap-4 pb-48 lg:max-w-2xl'}>
       {cardsSortedByOrder.map((item) => {
         return (
           <DocsCard

apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useRef } from 'react';
-
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
@@ -14,7 +12,6 @@ export function DocsNavLink({
   children,
 }: React.PropsWithChildren<{ label: string; url: string }>) {
   const currentPath = usePathname();
-  const ref = useRef<HTMLElement>(null);
   const isCurrent = isRouteActive(url, currentPath, true);
 
   return (
@@ -22,14 +19,10 @@ export function DocsNavLink({
       <SidebarMenuButton
         asChild
         isActive={isCurrent}
-        className={cn('transition-background font-normal!', {
-          'text-secondary-foreground font-bold': isCurrent,
-        })}
+        className={cn('text-secondary-foreground transition-all')}
       >
         <Link href={url}>
-          <span ref={ref} className="block max-w-full truncate">
-            {label}
-          </span>
+          <span className="block max-w-full truncate">{label}</span>
 
           {children}
         </Link>

apps/web/app/(marketing)/docs/_components/docs-navigation-collapsible.tsx

@@ -4,7 +4,7 @@ import { usePathname } from 'next/navigation';
 
 import { Cms } from '@kit/cms';
 import { Collapsible } from '@kit/ui/collapsible';
-import { isRouteActive } from '@kit/ui/utils';
+import { cn, isRouteActive } from '@kit/ui/utils';
 
 export function DocsNavigationCollapsible(
   props: React.PropsWithChildren<{
@@ -21,7 +21,9 @@ export function DocsNavigationCollapsible(
 
   return (
     <Collapsible
-      className={'group/collapsible'}
+      className={cn('group/collapsible', {
+        'group/active': isChildActive,
+      })}
       defaultOpen={isChildActive ? true : !props.node.collapsed}
     >
       {props.children}

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -139,12 +139,12 @@ export function DocsNavigation({
       <Sidebar
         variant={'ghost'}
         className={
-          'sticky z-1 mt-4 max-h-full overflow-y-auto border-r-transparent'
+          'border-border/50 sticky z-1 mt-4 max-h-full overflow-y-auto pr-4'
         }
       >
-        <SidebarGroup>
+        <SidebarGroup className="p-0">
           <SidebarGroupContent>
-            <SidebarMenu>
+            <SidebarMenu className={'pb-48'}>
               <Tree pages={pages} level={0} prefix={prefix} />
             </SidebarMenu>
           </SidebarGroupContent>

apps/web/app/(marketing)/docs/_components/docs-page-link.tsx

@@ -1,45 +0,0 @@
-import Link from 'next/link';
-
-import { If } from '@kit/ui/if';
-import { cn } from '@kit/ui/utils';
-
-export function DocsPageLink({
-  page,
-  before,
-  after,
-}: React.PropsWithChildren<{
-  page: {
-    url: string;
-    title: string;
-  };
-  before?: React.ReactNode;
-  after?: React.ReactNode;
-}>) {
-  return (
-    <Link
-      className={cn(
-        `ring-muted hover:ring-primary flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 transition-all`,
-        {
-          'justify-start': before,
-          'justify-end self-end': after,
-        },
-      )}
-      href={page.url}
-    >
-      <If condition={before}>{(node) => <>{node}</>}</If>
-
-      <span className={'flex flex-col space-y-1.5'}>
-        <span
-          className={'text-muted-foreground text-xs font-semibold uppercase'}
-        >
-          {before ? `Previous` : ``}
-          {after ? `Next` : ``}
-        </span>
-
-        <span>{page.title}</span>
-      </span>
-
-      <If condition={after}>{(node) => <>{node}</>}</If>
-    </Link>
-  );
-}

apps/web/app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import Link from 'next/link';
-
-interface NavItem {
-  text: string;
-  level: number;
-  href: string;
-  children: NavItem[];
-}
-
-export function DocsTableOfContents(props: { data: NavItem[] }) {
-  const navData = props.data;
-
-  return (
-    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] p-2.5 lg:block">
-      <ol
-        role="list"
-        className="relative text-sm text-gray-600 dark:text-gray-400"
-      >
-        {navData.map((item) => (
-          <li key={item.href} className="group/item relative mt-3 first:mt-0">
-            <a
-              href={item.href}
-              className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
-            >
-              {item.text}
-            </a>
-            {item.children && (
-              <ol role="list" className="relative mt-3 pl-4">
-                {item.children.map((child) => (
-                  <li
-                    key={child.href}
-                    className="group/subitem relative mt-3 first:mt-0"
-                  >
-                    <Link
-                      href={child.href}
-                      className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
-                    >
-                      {child.text}
-                    </Link>
-                  </li>
-                ))}
-              </ol>
-            )}
-          </li>
-        ))}
-      </ol>
-    </div>
-  );
-}