miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(nx-dev): display toc for smaller viewport sizes (#16061)

Browse Source
This commit is contained in:
Benjamin Cabanes 2023-04-03 12:15:30 -04:00 committed by GitHub
parent 762dd1dc21
commit b9c901b58e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx
View File

@ -8,6 +8,7 @@ import { Breadcrumbs, Footer } from '@nrwl/nx-dev/ui-common';
import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc'; import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc';
import { NextSeo } from 'next-seo'; import { NextSeo } from 'next-seo';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { cx } from 'nx-dev/ui-primitives';
import { useRef } from 'react'; import { useRef } from 'react';
import { collectHeadings, TableOfContents } from './table-of-contents'; import { collectHeadings, TableOfContents } from './table-of-contents';
@ -19,6 +20,7 @@ export function DocViewer({
relatedDocuments: RelatedDocument[]; relatedDocuments: RelatedDocument[];
}): JSX.Element { }): JSX.Element {
const router = useRouter(); const router = useRouter();
const isIntro = router.asPath.includes('/getting-started/intro');
const ref = useRef<HTMLDivElement | null>(null); const ref = useRef<HTMLDivElement | null>(null);
const { metadata, node, treeNode } = renderMarkdown( const { metadata, node, treeNode } = renderMarkdown(
@ -86,17 +88,26 @@ export function DocViewer({
<div <div
ref={ref} ref={ref}
data-document="main" data-document="main"
className="prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl" className={cx(
'prose prose-slate dark:prose-invert w-full max-w-none 2xl:max-w-4xl',
{ 'xl:max-w-2xl': !isIntro }
)}
> >
{vm.content} {vm.content}
</div> </div>
<div className="fixed top-36 right-[max(4rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 2xl:block"> {!isIntro && (
<TableOfContents <div
elementRef={ref} className={cx(
path={router.basePath} 'fixed top-36 right-[max(4rem,calc(50%-55rem))] z-20 hidden w-60 overflow-y-auto bg-white py-10 text-sm dark:bg-slate-900 xl:block'
headings={vm.tableOfContent} )}
/> >
</div> <TableOfContents
elementRef={ref}
path={router.basePath}
headings={vm.tableOfContent}
/>
</div>
)}
</div> </div>
{/*RELATED CONTENT*/} {/*RELATED CONTENT*/}
<div <div