2022-02-15 09:10:06 -05:00

99 lines
3.6 KiB
TypeScript

import React from 'react';
import cx from 'classnames';
import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';
import { DocumentData, Menu } from '@nrwl/nx-dev/data-access-documents';
import Content from './content';
import Sidebar from './sidebar';
export interface DocumentationFeatureDocViewerProps {
menu: Menu;
document: DocumentData;
toc: any;
navIsOpen?: boolean;
}
export function DocViewer({
document,
menu,
navIsOpen,
}: DocumentationFeatureDocViewerProps) {
const router = useRouter();
return (
<>
<NextSeo
title={document.data.title + ' | Nx'}
openGraph={{
url: 'https://nx.dev' + router.asPath,
title: document.data.title,
description:
'Next generation build system with first class monorepo support and powerful integrations.',
images: [
{
url: router.asPath.includes('turbo-and-nx')
? 'https://nx.dev/images/nx-media-monorepo.jpg'
: `https://nx.dev/images/open-graph/${router.asPath
.replace('/', '')
.replace(/\//gi, '-')}.jpg`,
width: 1600,
height: 800,
alt: 'Nx: Smart, Fast and Extensible Build System',
type: 'image/jpeg',
},
],
site_name: 'Nx',
type: 'website',
}}
/>
<div className="mx-auto w-full max-w-screen-lg">
<div className="lg:flex">
<Sidebar menu={menu} navIsOpen={navIsOpen} />
<div
id="content-wrapper"
className={cx(
'w-full min-w-0 flex-auto flex-col pt-16 md:pl-4 lg:static lg:max-h-full lg:overflow-visible',
navIsOpen && 'fixed max-h-screen overflow-hidden'
)}
>
<Content document={document} />
<div className="flex w-full items-center space-x-2 px-4 pt-24 pb-24 sm:px-6 lg:pb-16 xl:px-8">
<div className="ml-4 flex h-0.5 w-full flex-grow rounded bg-slate-50" />
<div className="relative z-0 inline-flex flex-shrink-0 rounded-md shadow-sm">
<a
aria-hidden="true"
href="https://github.com/nrwl/nx/issues/new?assignees=&labels=type%3A+docs&template=3-documentation.md"
target="_blank"
rel="noreferrer"
title="Report an issue on Github"
className="focus:ring-blue-nx-base focus:border-blue-nx-base relative inline-flex items-center rounded-l-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
>
Report an issue
</a>
<a
aria-hidden="true"
href={[
'https://github.com/nrwl/nx/blob/master',
document.filePath.replace(
'nx-dev/nx-dev/public/documentation',
'docs'
),
].join('/')}
target="_blank"
rel="noreferrer"
title="Edit this page on Github"
className="focus:ring-blue-nx-base focus:border-blue-nx-base relative -ml-px inline-flex items-center rounded-r-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
>
Edit this page
</a>
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default DocViewer;