diff --git a/nx-dev/data-access-menu/src/lib/menu.api.ts b/nx-dev/data-access-menu/src/lib/menu.api.ts index 26423c5880..9ffba0b0a3 100644 --- a/nx-dev/data-access-menu/src/lib/menu.api.ts +++ b/nx-dev/data-access-menu/src/lib/menu.api.ts @@ -45,7 +45,7 @@ export class MenuApi { } getReferenceApiMenuSection( - packageDocuments: DocumentMetadata[] + packageDocuments: DocumentMetadata[] = this.packageDocuments ): MenuSection { const documents: DocumentMetadata = { id: 'packages', diff --git a/nx-dev/data-access-menu/src/lib/menu.utils.ts b/nx-dev/data-access-menu/src/lib/menu.utils.ts index ac04c9b02b..f9fa6b91a1 100644 --- a/nx-dev/data-access-menu/src/lib/menu.utils.ts +++ b/nx-dev/data-access-menu/src/lib/menu.utils.ts @@ -88,8 +88,8 @@ export function getDeepDiveSection(items: MenuItem[]): MenuSection { export function getPackageApiSection(items: MenuItem[]): MenuSection { return { - id: 'official-plugins', - name: 'Official Plugins', + id: 'official-packages', + name: 'Reference', itemList: items.filter( (m) => m.id !== 'add-nx-to-monorepo' && diff --git a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx index 0c7cd81b3a..fb06b0a4df 100644 --- a/nx-dev/feature-package-schema-viewer/src/lib/content.tsx +++ b/nx-dev/feature-package-schema-viewer/src/lib/content.tsx @@ -1,7 +1,6 @@ import { XCircleIcon } from '@heroicons/react/solid'; import { getSchemaFromReference } from '@nrwl/nx-dev/data-access-packages'; import { JsonSchema1, NxSchema } from '@nrwl/nx-dev/models-package'; -import { Breadcrumbs } from '@nrwl/nx-dev/ui-common'; import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc'; import Link from 'next/link'; import { useRouter } from 'next/router'; @@ -94,7 +93,7 @@ export function Content({ return ( <> -
+
)} - {schemaViewModel.subReference && ( -
- -
- )} - {/*TODO@ben: create new component*/} {schemaViewModel.type === 'executors' && !schemaViewModel.subReference && (
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/package-schema-list.tsx b/nx-dev/feature-package-schema-viewer/src/lib/package-schema-list.tsx index 418199d5ab..01ece4a8ec 100644 --- a/nx-dev/feature-package-schema-viewer/src/lib/package-schema-list.tsx +++ b/nx-dev/feature-package-schema-viewer/src/lib/package-schema-list.tsx @@ -1,24 +1,19 @@ import { ChipIcon, CogIcon } from '@heroicons/react/solid'; -import { Menu } from '@nrwl/nx-dev/models-menu'; import { PackageMetadata } from '@nrwl/nx-dev/models-package'; -import { Sidebar } from '@nrwl/nx-dev/ui-common'; import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc'; import cx from 'classnames'; import { NextSeo } from 'next-seo'; import Link from 'next/link'; import { useRouter } from 'next/router'; import React, { ReactComponentElement, ReactNode } from 'react'; +import { Breadcrumbs } from '@nrwl/nx-dev/ui-common'; import { getPublicPackageName } from './get-public-package-name'; import { Heading1, Heading2 } from './ui/headings'; export function PackageSchemaList({ pkg, - menu, - navIsOpen, }: { pkg: PackageMetadata; - menu: Menu; - navIsOpen?: boolean; }): ReactComponentElement { const router = useRouter(); @@ -86,18 +81,23 @@ export function PackageSchemaList({ />
-
-
+
+
+ +
-
+
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/package-schema-viewer.tsx b/nx-dev/feature-package-schema-viewer/src/lib/package-schema-viewer.tsx index 36659b877b..6093f46eb7 100644 --- a/nx-dev/feature-package-schema-viewer/src/lib/package-schema-viewer.tsx +++ b/nx-dev/feature-package-schema-viewer/src/lib/package-schema-viewer.tsx @@ -1,9 +1,8 @@ -import { Menu } from '@nrwl/nx-dev/models-menu'; -import { Sidebar } from '@nrwl/nx-dev/ui-common'; +import { Breadcrumbs } from '@nrwl/nx-dev/ui-common'; import cx from 'classnames'; import { NextSeo } from 'next-seo'; import { useRouter } from 'next/router'; -import { ReactComponentElement } from 'react'; +import React, { ReactComponentElement } from 'react'; import Content from './content'; import { getPublicPackageName } from './get-public-package-name'; import { getSchemaViewModel, SchemaViewModel } from './get-schema-view-model'; @@ -11,12 +10,8 @@ import { SchemaRequest } from './schema-request.models'; export function PackageSchemaViewer({ schemaRequest, - menu, - navIsOpen, }: { schemaRequest: SchemaRequest; - menu: Menu; - navIsOpen?: boolean; }): ReactComponentElement { const router = useRouter(); @@ -74,14 +69,15 @@ export function PackageSchemaViewer({ />
-
+
+ +
diff --git a/nx-dev/feature-search/src/lib/algolia-search.tsx b/nx-dev/feature-search/src/lib/algolia-search.tsx index c5db9e409d..f3d9b5d0a8 100644 --- a/nx-dev/feature-search/src/lib/algolia-search.tsx +++ b/nx-dev/feature-search/src/lib/algolia-search.tsx @@ -75,7 +75,7 @@ export function AlgoliaSearch() { className="flex w-full items-center rounded-md py-1.5 pl-2 pr-3 text-sm leading-6 text-slate-300 ring-1 ring-slate-600 transition hover:text-slate-200 hover:ring-slate-500" > - + Quick search void; navIsOpen: boolean }) { + return ( + + ); +} + export default function DocumentationPage({ menu, document, @@ -61,8 +111,10 @@ export default function DocumentationPage({ const vm: { entryComponent: JSX.Element } = { entryComponent: ( x.id !== 'official-packages'), + }} toc={null} navIsOpen={navIsOpen} /> @@ -70,20 +122,16 @@ export default function DocumentationPage({ }; if (!!pkg) { - vm.entryComponent = ( - - ); + vm.entryComponent = ; } if (!!pkg && !!schemaRequest) { vm.entryComponent = ( ); } @@ -93,51 +141,7 @@ export default function DocumentationPage({
{vm.entryComponent} - + {!pkg && }
{!navIsOpen ?
: null} diff --git a/nx-dev/nx-dev/pages/packages.tsx b/nx-dev/nx-dev/pages/packages.tsx new file mode 100644 index 0000000000..92304d4c6a --- /dev/null +++ b/nx-dev/nx-dev/pages/packages.tsx @@ -0,0 +1,105 @@ +import { MenuItem, MenuSection } from '@nrwl/nx-dev/models-menu'; +import { Footer, Header } from '@nrwl/nx-dev/ui-common'; +import { ReferencesIndexItem } from '@nrwl/nx-dev/ui-references'; +import { NextSeo } from 'next-seo'; +import { useRouter } from 'next/router'; +import { ReferencesSection } from '../../ui-references/src/lib/references-section'; +import { nxMenuApi } from '../lib/api'; + +interface ReferencesProps { + references: MenuSection; +} + +export async function getStaticProps(): Promise<{ props: ReferencesProps }> { + return { + props: { + references: nxMenuApi.getReferenceApiMenuSection(), + }, + }; +} + +export function Packages(props: ReferencesProps): JSX.Element { + const router = useRouter(); + const nxPackageIds = ['nx', 'workspace', 'devkit', 'nx-plugin']; + const references = [ + ...nxPackageIds.map((id) => + props.references.itemList.find((pkg) => pkg.id === id) + ), + ...props.references.itemList.filter( + (pkg) => !nxPackageIds.includes(pkg.id) + ), + ]; + + return ( + <> + +
+
+
+
+
+
+

+ Nx Reference +

+

+ Official Packages & API +

+
+
+
+ +
+ + + {references.map((category: MenuItem, index, all) => ( +
+ + {!(index + 1 === all.length) && ( +
+ )} +
+ ))} +
+
+
+
+ + ); +} + +export default Packages; diff --git a/nx-dev/nx-dev/public/images/icons/angular.svg b/nx-dev/nx-dev/public/images/icons/angular.svg new file mode 100644 index 0000000000..6189bd2b94 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/angular.svg @@ -0,0 +1 @@ +Angular \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/cypress.svg b/nx-dev/nx-dev/public/images/icons/cypress.svg new file mode 100644 index 0000000000..96ac332857 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/cypress.svg @@ -0,0 +1 @@ +Cypress \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/eslint.svg b/nx-dev/nx-dev/public/images/icons/eslint.svg new file mode 100644 index 0000000000..b0e0304a71 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/eslint.svg @@ -0,0 +1 @@ +ESLint \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/express.svg b/nx-dev/nx-dev/public/images/icons/express.svg new file mode 100644 index 0000000000..edeb4134d5 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/express.svg @@ -0,0 +1 @@ +Express \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/html5.svg b/nx-dev/nx-dev/public/images/icons/html5.svg new file mode 100644 index 0000000000..e8b1e37182 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/html5.svg @@ -0,0 +1 @@ +HTML5 \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/javascript.svg b/nx-dev/nx-dev/public/images/icons/javascript.svg new file mode 100644 index 0000000000..91e516239d --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/javascript.svg @@ -0,0 +1 @@ +JavaScript \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/jest.svg b/nx-dev/nx-dev/public/images/icons/jest.svg new file mode 100644 index 0000000000..3c36b3bbe2 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/jest.svg @@ -0,0 +1 @@ +Jest \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/nestjs.svg b/nx-dev/nx-dev/public/images/icons/nestjs.svg new file mode 100644 index 0000000000..eb4ca774bf --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/nestjs.svg @@ -0,0 +1 @@ +NestJS \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/nextdotjs.svg b/nx-dev/nx-dev/public/images/icons/nextdotjs.svg new file mode 100644 index 0000000000..9972859e30 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/nextdotjs.svg @@ -0,0 +1 @@ +Next.js \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/nodedotjs.svg b/nx-dev/nx-dev/public/images/icons/nodedotjs.svg new file mode 100644 index 0000000000..281c829627 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/nodedotjs.svg @@ -0,0 +1 @@ +Node.js \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/nx.svg b/nx-dev/nx-dev/public/images/icons/nx.svg new file mode 100644 index 0000000000..93b0362abc --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/nx.svg @@ -0,0 +1 @@ +Nx \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/react.svg b/nx-dev/nx-dev/public/images/icons/react.svg new file mode 100644 index 0000000000..6006995638 --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/react.svg @@ -0,0 +1 @@ +React \ No newline at end of file diff --git a/nx-dev/nx-dev/public/images/icons/storybook.svg b/nx-dev/nx-dev/public/images/icons/storybook.svg new file mode 100644 index 0000000000..0096f3b89e --- /dev/null +++ b/nx-dev/nx-dev/public/images/icons/storybook.svg @@ -0,0 +1 @@ +Storybook \ No newline at end of file diff --git a/nx-dev/ui-common/src/lib/breadcrumbs.tsx b/nx-dev/ui-common/src/lib/breadcrumbs.tsx index 575c72ead9..6329913cec 100644 --- a/nx-dev/ui-common/src/lib/breadcrumbs.tsx +++ b/nx-dev/ui-common/src/lib/breadcrumbs.tsx @@ -1,39 +1,75 @@ import { ChevronRightIcon } from '@heroicons/react/solid'; import classNames from 'classnames'; -export function Breadcrumbs({ - pages, -}: { - pages: { name: string; href: string; current: boolean }[]; -}) { +export function Breadcrumbs({ path }: { path: string }) { + const cleanedPath = path.includes('?') + ? path.slice(0, path.indexOf('?')) + : path; + const pages = [ + ...cleanedPath + .split('/') + .filter(Boolean) + .map((segment, index, segments) => ({ + name: segment, + // We do not have dedicated page view for executors & generators + href: ['executors', 'generators'].includes(segment) + ? '#' + : '/' + segments.slice(0, index + 1).join('/'), + current: '/' + segments.slice(0, index + 1).join('/') === cleanedPath, + })), + ]; + const hasRef = path.includes('?') ? path.slice(0, path.indexOf('?')) : ''; + return ( - +
); } diff --git a/nx-dev/ui-common/src/lib/header.tsx b/nx-dev/ui-common/src/lib/header.tsx index 96f1edf043..5f99dccc80 100644 --- a/nx-dev/ui-common/src/lib/header.tsx +++ b/nx-dev/ui-common/src/lib/header.tsx @@ -11,6 +11,7 @@ export interface HeaderProps { export function Header(props: HeaderProps) { const router = useRouter(); const isNxCloudDoc: boolean = router.asPath.startsWith('/nx-cloud'); + const isReferencesDoc: boolean = router.asPath.startsWith('/packages'); return (
{/*NAVIGATION*/}
-