Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(website): improve docs menu #2464

Merged
merged 7 commits into from
Aug 21, 2024
Merged

feat(website): improve docs menu #2464

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
20eb864
improve docs menu
theosanderson Aug 19, 2024
fda919d
update
theosanderson Aug 20, 2024
3a73d0c
up
theosanderson Aug 20, 2024
100565d
Automated code formatting
Aug 20, 2024
d6343f9
update
theosanderson Aug 20, 2024
9f51364
Automated code formatting
Aug 20, 2024
4fcc960
Update DocsMenu.tsx
theosanderson Aug 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 100 additions & 71 deletions website/src/components/Navigation/DocsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,121 @@ import MenuIcon from '~icons/material-symbols/menu';
type Page = MDXInstance<Record<string, any>>;

interface DocsMenuProps {
docsPages: MDXInstance<Record<string, any>>[];
docsPages: Page[];
currentPageUrl: string;
title: string;
}

const groupPagesByDirectory = (pages: Page[]): Record<string, Page[]> => {
interface GroupedPages {
groupedPages: Record<string, Page[]>;
indexPages: Record<string, Page>;
}

const groupPagesByDirectory = (pages: Page[]): GroupedPages => {
const groupedPages: Record<string, Page[]> = {};
const indexPages: Record<string, Page> = {};

pages.forEach((page) => {
const pathParts = page.url !== undefined ? page.url.split('/') : [''];
const dir = pathParts.slice(2, -1).join('/');
const fileParts = page.file.split('/');
const fileName = fileParts[fileParts.length - 1];
const dir = fileParts[fileParts.length - 2];

if (groupedPages.hasOwnProperty(dir) === false) {
groupedPages[dir] = [];
if (fileName === 'index.mdx') {
indexPages[dir] = page;
} else {
if (!(dir in groupedPages)) {
groupedPages[dir] = [];
}
groupedPages[dir].push(page);
}
groupedPages[dir].push(page);
});

Object.keys(groupedPages).forEach((dir) => {
groupedPages[dir].sort((a, b) => {
const orderA = a.frontmatter.order ?? 0;
const orderB = b.frontmatter.order ?? 0;
if (orderA !== orderB) {
return orderA - orderB;
}
return a.frontmatter.title.localeCompare(b.frontmatter.title);
// Sort pages within each directory
Object.values(groupedPages).forEach((pages) => {
pages.sort((a, b) => {
const orderA = a.frontmatter.order ?? Infinity;
const orderB = b.frontmatter.order ?? Infinity;
return orderA !== orderB ? orderA - orderB : a.frontmatter.title.localeCompare(b.frontmatter.title);
});
});

return groupedPages;
return { groupedPages, indexPages };
};

const toTitleCase = (str: string): string => {
return str.replace(/\b\w/g, (char) => char.toUpperCase());
};
const toTitleCase = (str: string): string => str.replace(/\b\w/g, (char) => char.toUpperCase());

interface MenuItemProps {
page: Page;
currentPageUrl: string;
}

const MenuItem: React.FC<MenuItemProps> = ({ page, currentPageUrl }) => (
<li className='border-b border-gray-200 last:border-0'>
<a
href={page.url}
className={`block p-4 py-2 sm:py-3 text-primary-600 hover:bg-blue-50 transition-colors duration-150 ease-in-out ${
page.url === currentPageUrl ? 'font-bold' : ''
}`}
>
{page.frontmatter.title}
</a>
</li>
);

interface MenuSectionProps {
dir: string;
pages: Page[];
indexPage?: Page;
currentPageUrl: string;
}

const MenuSection: React.FC<MenuSectionProps> = ({ dir, pages, indexPage, currentPageUrl }) => (
<li className='border-b border-gray-200 last:border-0'>
<div className='p-4 text-primary-600 font-semibold bg-gray-100'>
{indexPage ? (
<a
href={indexPage.url}
className={`block text-primary-600 hover:text-primary-800 ${
indexPage.url === currentPageUrl ? 'font-bold' : ''
}`}
>
{toTitleCase(dir.replaceAll('-', ' '))}
</a>
) : (
toTitleCase(dir.replaceAll('-', ' '))
)}
</div>
<ul className='list-none m-0 p-0'>
{pages.map((page) => (
<MenuItem key={page.url} page={page} currentPageUrl={currentPageUrl} />
))}
</ul>
</li>
);

const DocsMenu: React.FC<DocsMenuProps> = ({ docsPages, currentPageUrl, title }) => {
const groupedPages = groupPagesByDirectory(docsPages);
const { groupedPages, indexPages } = groupPagesByDirectory(docsPages);

// Sort directories based on index page order
const sortedDirectories = Object.keys(groupedPages).sort((a, b) => {
const orderA = indexPages[a].frontmatter.order ?? Infinity;
const orderB = indexPages[b].frontmatter.order ?? Infinity;
return orderA - orderB;
});

const menuContent = (
<ul className='list-none m-0 p-0'>
{sortedDirectories.map((dir) => (
<MenuSection
key={dir}
dir={dir}
pages={groupedPages[dir]}
indexPage={indexPages[dir]}
currentPageUrl={currentPageUrl}
/>
))}
</ul>
);

return (
<Disclosure as='nav' className='docs-menu bg-white border rounded-lg overflow-hidden mt-5 sticky sm:min-w-64'>
Expand All @@ -64,57 +141,9 @@ const DocsMenu: React.FC<DocsMenuProps> = ({ docsPages, currentPageUrl, title })
</div>
</div>

<DisclosurePanel className='sm:hidden'>
<ul className='list-none m-0 p-0'>
{Object.entries(groupedPages).map(([dir, pages]) => (
<li key={dir} className='border-b border-gray-200 last:border-0'>
<div className='p-4 text-primary-600 font-semibold bg-gray-100'>
{toTitleCase(dir.replaceAll('-', ' '))}
</div>
<ul className='list-none m-0 p-0'>
{pages.map((page) => (
<li key={page.url} className='border-b border-gray-200 last:border-0'>
<a
href={page.url}
className={`block p-4 py-2 text-primary-600 hover:bg-blue-50 transition-colors duration-150 ease-in-out ${
page.url === currentPageUrl ? 'font-bold' : ''
}`}
>
{page.frontmatter.title}
</a>
</li>
))}
</ul>
</li>
))}
</ul>
</DisclosurePanel>

<div className='hidden sm:block'>
<ul className='list-none m-0 p-0'>
{Object.entries(groupedPages).map(([dir, pages]) => (
<li key={dir} className='border-b border-gray-200 last:border-0'>
<div className='p-4 text-primary-600 font-semibold bg-gray-100'>
{toTitleCase(dir.replaceAll('-', ' '))}
</div>
<ul className='list-none m-0 p-0'>
{pages.map((page) => (
<li key={page.url} className='border-b border-gray-200 last:border-0'>
<a
href={page.url}
className={`block p-4 py-3 text-primary-600 hover:bg-blue-50 transition-colors duration-150 ease-in-out ${
page.url === currentPageUrl ? 'font-bold' : ''
}`}
>
{page.frontmatter.title}
</a>
</li>
))}
</ul>
</li>
))}
</ul>
</div>
<DisclosurePanel className='sm:hidden'>{menuContent}</DisclosurePanel>

<div className='hidden sm:block'>{menuContent}</div>
</>
)}
</Disclosure>
Expand Down
Loading