zaid.marzguioui/myeasycms-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changelog (#399)

Browse Source 
* 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.
This commit is contained in:
Giancarlo Buomprisco
2025-11-01 11:59:52 +07:00
committed by GitHub
parent a920dea2b3
commit 116d41a284
73 changed files with 5638 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
apps/web/app/(marketing)/docs/[...slug]/page.tsx
View File

@@ -11,8 +11,6 @@ import { withI18n } from '~/lib/i18n/with-i18n';
// local imports
import { DocsCards } from '../_components/docs-cards';
import { DocsTableOfContents } from '../_components/docs-table-of-contents';
import { extractHeadingsFromJSX } from '../_lib/utils';
const getPageBySlug = cache(pageLoader);
@@ -52,38 +50,36 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
const description = page?.description ?? '';
const headings = extractHeadingsFromJSX(
page.content as {
props: { children: React.ReactElement[] };
},
);
return (
<div className={'flex flex-1 flex-col gap-y-4 overflow-y-hidden py-4'}>
<div className={'flex overflow-y-hidden'}>
<article className={cn('gap-y-12 overflow-y-auto px-4')}>
<section
className={'flex flex-col gap-y-1 border-b border-dashed pb-4'}
<div className={'flex flex-1 flex-col gap-y-4 overflow-y-hidden'}>
<div className={'flex size-full overflow-y-hidden'}>
<div className="relative size-full">
<article
className={cn(
'absolute size-full w-full gap-y-12 overflow-y-auto pt-4 pb-36',
)}
>
<h1
className={
'text-foreground text-3xl font-semibold tracking-tighter'
}
<section
className={'flex flex-col gap-y-1 border-b border-dashed pb-4'}
>
{page.title}
</h1>
<h1
className={
'text-foreground text-3xl font-semibold tracking-tighter'
}
>
{page.title}
</h1>
<h2 className={'text-secondary-foreground/80 text-lg'}>
{description}
</h2>
</section>
<h2 className={'text-secondary-foreground/80 text-lg'}>
{description}
</h2>
</section>
<div className={'markdoc'}>
<ContentRenderer content={page.content} />
</div>
</article>
<DocsTableOfContents data={headings} />
<div className={'markdoc'}>
<ContentRenderer content={page.content} />
</div>
</article>
</div>
</div>
<If condition={page.children.length > 0}>

2
apps/web/app/(marketing)/docs/_components/docs-card.tsx
View File

@@ -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}

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

@@ -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

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

@@ -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>

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

@@ -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}

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

@@ -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>

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

@@ -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>
);
}

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

@@ -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>
);
}

113
apps/web/app/(marketing)/docs/_lib/utils.ts
View File

@@ -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, '');
}

32
apps/web/app/(marketing)/docs/layout.tsx
View File

@@ -13,14 +13,32 @@ async function DocsLayout({ children }: React.PropsWithChildren) {
const tree = buildDocumentationTree(docs);
return (
<SidebarProvider
style={{ '--sidebar-width': '18em' } as React.CSSProperties}
className={'h-[calc(100vh-72px)] overflow-y-hidden lg:container'}
>
<DocsNavigation pages={tree} />
<div className={'container h-[calc(100vh-56px)] overflow-y-hidden'}>
<SidebarProvider
className="lg:gap-x-6"
style={{ '--sidebar-width': '17em' } as React.CSSProperties}
>
<HideFooterStyles />
{children}
</SidebarProvider>
<DocsNavigation pages={tree} />
{children}
</SidebarProvider>
</div>
);
}
function HideFooterStyles() {
return (
<style
dangerouslySetInnerHTML={{
__html: `
.site-footer {
display: none;
}
`,
}}
/>
);
}

3
apps/web/app/(marketing)/docs/loading.tsx
View File

@@ -1,3 +0,0 @@
import { GlobalLoader } from '@kit/ui/global-loader';
export default GlobalLoader;

8
apps/web/app/(marketing)/docs/page.tsx
View File

@@ -21,16 +21,14 @@ async function DocsPage() {
const cards = items.filter((item) => !item.parentId);
return (
<div className={'flex flex-col gap-y-6 xl:gap-y-8'}>
<div className={'flex w-full flex-1 flex-col gap-y-6 xl:gap-y-8'}>
<SitePageHeader
title={t('marketing:documentation')}
subtitle={t('marketing:documentationSubtitle')}
/>
<div className={'flex flex-col items-center'}>
<div className={'container mx-auto max-w-5xl'}>
<DocsCards cards={cards} />
</div>
<div className={'relative flex size-full justify-center overflow-y-auto'}>
<DocsCards cards={cards} />
</div>
</div>
);