Major changes include enhancements to the UI and modifications to the i18n loading logic to more effectively handle namespaces. Several components were updated to improve readability and layout consistency. The i18n loading logic now includes additional handling for waiting until all namespaces are loaded before the i18n instance is returned, with a warning if it takes longer than expected. Furthermore, code have been refactored for fonts, buttons, and other UI elements.
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import { Cms } from '@kit/cms';
|
|
|
|
import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
|
|
|
|
// local imports
|
|
import { DocsNavigation } from './_components/docs-navigation';
|
|
import { getDocs } from './_lib/server/docs.loader';
|
|
|
|
async function DocsLayout({ children }: React.PropsWithChildren) {
|
|
const { resolvedLanguage } = await createI18nServerInstance();
|
|
const pages = await getDocs(resolvedLanguage);
|
|
|
|
return (
|
|
<div className={'flex container'}>
|
|
<DocsNavigation pages={buildDocumentationTree(pages)} />
|
|
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default DocsLayout;
|
|
|
|
// we want to place all the children under their parent
|
|
// based on the property parentId
|
|
function buildDocumentationTree(pages: Cms.ContentItem[]) {
|
|
const tree: Cms.ContentItem[] = [];
|
|
const map: Record<string, Cms.ContentItem> = {};
|
|
|
|
pages.forEach((page) => {
|
|
map[page.id] = page;
|
|
});
|
|
|
|
pages.forEach((page) => {
|
|
if (page.parentId) {
|
|
const parent = map[page.parentId];
|
|
|
|
if (!parent) {
|
|
return;
|
|
}
|
|
|
|
if (!parent.children) {
|
|
parent.children = [];
|
|
}
|
|
|
|
parent.children.push(page);
|
|
|
|
// sort children by order
|
|
parent.children.sort((a, b) => a.order - b.order);
|
|
} else {
|
|
tree.push(page);
|
|
}
|
|
});
|
|
|
|
return tree.sort((a, b) => a.order - b.order);
|
|
}
|