100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import {
|
|
getBasicNxCloudSection,
|
|
getDeepDiveNxCloudSection,
|
|
} from '@nx/nx-dev/data-access-menu';
|
|
import { DocViewer } from '@nx/nx-dev/feature-doc-viewer';
|
|
import { ProcessedDocument, RelatedDocument } from '@nx/nx-dev/models-document';
|
|
import { Menu, MenuItem } from '@nx/nx-dev/models-menu';
|
|
import { DocumentationHeader, SidebarContainer } from '@nx/nx-dev/ui-common';
|
|
import { GetStaticProps } from 'next';
|
|
import { useRouter } from 'next/router';
|
|
import { useEffect, useRef } from 'react';
|
|
import { nxCloudApi } from '../../lib/cloud.api';
|
|
import { menusApi } from '../../lib/menus.api';
|
|
import { useNavToggle } from '../../lib/navigation-toggle.effect';
|
|
import { tagsApi } from '../../lib/tags.api';
|
|
|
|
export default function CloudRoot({
|
|
document,
|
|
menu,
|
|
relatedDocuments,
|
|
}: {
|
|
document: ProcessedDocument;
|
|
menu: MenuItem[];
|
|
relatedDocuments: RelatedDocument[];
|
|
}) {
|
|
const router = useRouter();
|
|
const { toggleNav, navIsOpen } = useNavToggle();
|
|
const wrapperElement = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const handleRouteChange = (url: string) => {
|
|
if (url.includes('#')) return;
|
|
if (!wrapperElement) return;
|
|
|
|
(wrapperElement as any).current.scrollTo({
|
|
top: 0,
|
|
left: 0,
|
|
behavior: 'smooth',
|
|
});
|
|
};
|
|
|
|
router.events.on('routeChangeComplete', handleRouteChange);
|
|
return () => router.events.off('routeChangeComplete', handleRouteChange);
|
|
}, [router, wrapperElement]);
|
|
|
|
const vm: {
|
|
document: ProcessedDocument;
|
|
menu: Menu;
|
|
relatedDocuments: RelatedDocument[];
|
|
} = {
|
|
document,
|
|
menu: {
|
|
sections: [getBasicNxCloudSection(menu), getDeepDiveNxCloudSection(menu)],
|
|
},
|
|
relatedDocuments,
|
|
};
|
|
|
|
return (
|
|
<div id="shell" className="flex h-full flex-col">
|
|
<div className="w-full flex-shrink-0">
|
|
<DocumentationHeader isNavOpen={navIsOpen} toggleNav={toggleNav} />
|
|
</div>
|
|
<main
|
|
id="main"
|
|
role="main"
|
|
className="flex h-full flex-1 overflow-y-hidden"
|
|
>
|
|
<SidebarContainer menu={vm.menu} navIsOpen={navIsOpen} />
|
|
<div
|
|
ref={wrapperElement}
|
|
id="wrapper"
|
|
data-testid="wrapper"
|
|
className="relative flex flex-grow flex-col items-stretch justify-start overflow-y-scroll"
|
|
>
|
|
<DocViewer
|
|
document={document}
|
|
relatedDocuments={vm.relatedDocuments}
|
|
/>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const getStaticProps: GetStaticProps = async () => {
|
|
const document = nxCloudApi.generateRootDocumentIndex({
|
|
name: 'cloud',
|
|
description: 'Learn about what is Nx Cloud.',
|
|
});
|
|
return {
|
|
props: {
|
|
document,
|
|
menu: menusApi.getMenu('cloud', ''),
|
|
relatedDocuments: document.tags
|
|
.map((t) => tagsApi.getAssociatedItems(t))
|
|
.flat(),
|
|
},
|
|
};
|
|
};
|