docs(nxdev): add references page (#11061)
This commit is contained in:
Benjamin Cabanes
GitHub
parent
68a2a11ac4
commit
e1a61cae2d
@ -45,7 +45,7 @@ export class MenuApi {
|
||||
}
|
||||
|
||||
getReferenceApiMenuSection(
|
||||
packageDocuments: DocumentMetadata[]
|
||||
packageDocuments: DocumentMetadata[] = this.packageDocuments
|
||||
): MenuSection {
|
||||
const documents: DocumentMetadata = {
|
||||
id: 'packages',
|
||||
|
||||
@ -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' &&
|
||||
|
||||
@ -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 (
|
||||
<>
|
||||
<div className="min-w-0 flex-auto px-4 pt-8 pb-24 sm:px-6 lg:pb-16 xl:px-8">
|
||||
<div className="min-w-0 flex-auto pt-8 pb-24 lg:pb-16">
|
||||
<div className="mb-8 flex w-full items-center space-x-2">
|
||||
<div className="w-full flex-grow">
|
||||
<div
|
||||
@ -134,12 +133,6 @@ export function Content({
|
||||
</>
|
||||
)}
|
||||
|
||||
{schemaViewModel.subReference && (
|
||||
<div className="mt-12 rounded-md bg-gray-100 p-4">
|
||||
<Breadcrumbs pages={vm.pages} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/*TODO@ben: create new component*/}
|
||||
{schemaViewModel.type === 'executors' && !schemaViewModel.subReference && (
|
||||
<div className="mt-8 hidden md:block">
|
||||
|
||||
@ -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<any> {
|
||||
const router = useRouter();
|
||||
|
||||
@ -86,18 +81,23 @@ export function PackageSchemaList({
|
||||
/>
|
||||
<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'
|
||||
'w-full min-w-0 flex-auto flex-col pt-16 md:pl-4 lg:static lg:max-h-full lg:overflow-visible'
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0 flex-auto px-4 pt-8 pb-24 sm:px-6 lg:pb-16 xl:px-8">
|
||||
<div className="min-w-0 flex-auto px-4 pb-24 sm:px-6 lg:pb-16 xl:px-8">
|
||||
<div className="mb-12 block w-full">
|
||||
<Breadcrumbs path={router.asPath} />
|
||||
</div>
|
||||
<div className="mb-8 flex w-full items-center space-x-2">
|
||||
<div className="w-full flex-grow">
|
||||
<div className="relative inline-flex rounded-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium uppercase text-gray-600">
|
||||
<div
|
||||
className="relative inline-flex rounded-md border border-gray-200 bg-white px-4 py-2 text-xs font-medium uppercase text-gray-600"
|
||||
aria-hidden="true"
|
||||
data-tooltip="Installable package"
|
||||
>
|
||||
Package
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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<any> {
|
||||
const router = useRouter();
|
||||
|
||||
@ -74,14 +69,15 @@ export function PackageSchemaViewer({
|
||||
/>
|
||||
<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'
|
||||
'w-full min-w-0 flex-auto flex-col pt-16 md:px-4 lg:static lg:max-h-full lg:overflow-visible'
|
||||
)}
|
||||
>
|
||||
<div className="mb-12 block w-full">
|
||||
<Breadcrumbs path={router.asPath} />
|
||||
</div>
|
||||
<Content schemaViewModel={vm.schema} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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"
|
||||
>
|
||||
<SearchIcon className="h-4 w-4 flex-none md:mr-3" />
|
||||
<span className="mx-3 hidden md:inline-flex">
|
||||
<span className="mx-3 hidden lg:inline-flex">
|
||||
<span className="hidden lg:inline">Quick </span>search
|
||||
</span>
|
||||
<span
|
||||
|
||||
@ -50,6 +50,56 @@ function useNavToggle() {
|
||||
return { navIsOpen, toggleNav };
|
||||
}
|
||||
|
||||
function SidebarButton(props: { onClick: () => void; navIsOpen: boolean }) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className="bg-green-nx-base fixed bottom-4 right-4 z-50 block h-16 w-16 rounded-full text-white shadow-sm lg:hidden"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<span className="sr-only">Open site navigation</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
className={cx(
|
||||
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
|
||||
{
|
||||
'scale-80 opacity-0': props.navIsOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M4 7h16M4 14h16M4 21h16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
className={cx(
|
||||
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
|
||||
{
|
||||
'scale-80 opacity-0': !props.navIsOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DocumentationPage({
|
||||
menu,
|
||||
document,
|
||||
@ -61,8 +111,10 @@ export default function DocumentationPage({
|
||||
const vm: { entryComponent: JSX.Element } = {
|
||||
entryComponent: (
|
||||
<DocViewer
|
||||
document={document}
|
||||
menu={menu}
|
||||
document={document || ({} as any)}
|
||||
menu={{
|
||||
sections: menu.sections.filter((x) => x.id !== 'official-packages'),
|
||||
}}
|
||||
toc={null}
|
||||
navIsOpen={navIsOpen}
|
||||
/>
|
||||
@ -70,20 +122,16 @@ export default function DocumentationPage({
|
||||
};
|
||||
|
||||
if (!!pkg) {
|
||||
vm.entryComponent = (
|
||||
<PackageSchemaList menu={menu} navIsOpen={navIsOpen} pkg={pkg} />
|
||||
);
|
||||
vm.entryComponent = <PackageSchemaList pkg={pkg} />;
|
||||
}
|
||||
|
||||
if (!!pkg && !!schemaRequest) {
|
||||
vm.entryComponent = (
|
||||
<PackageSchemaViewer
|
||||
menu={menu}
|
||||
schemaRequest={{
|
||||
...schemaRequest,
|
||||
pkg,
|
||||
}}
|
||||
navIsOpen={navIsOpen}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -93,51 +141,7 @@ export default function DocumentationPage({
|
||||
<Header isDocViewer={true} />
|
||||
<main id="main" role="main">
|
||||
{vm.entryComponent}
|
||||
<button
|
||||
type="button"
|
||||
className="bg-green-nx-base fixed bottom-4 right-4 z-50 block h-16 w-16 rounded-full text-white shadow-sm lg:hidden"
|
||||
onClick={toggleNav}
|
||||
>
|
||||
<span className="sr-only">Open site navigation</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
className={cx(
|
||||
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
|
||||
{
|
||||
'scale-80 opacity-0': navIsOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M4 7h16M4 14h16M4 21h16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
className={cx(
|
||||
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transform transition duration-300',
|
||||
{
|
||||
'scale-80 opacity-0': !navIsOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{!pkg && <SidebarButton onClick={toggleNav} navIsOpen={navIsOpen} />}
|
||||
</main>
|
||||
{!navIsOpen ? <Footer /> : null}
|
||||
</>
|
||||
|
||||
105
nx-dev/nx-dev/pages/packages.tsx
Normal file
105
nx-dev/nx-dev/pages/packages.tsx
Normal file
@ -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 (
|
||||
<>
|
||||
<NextSeo
|
||||
title="Reference: Official Packages & API"
|
||||
description="Reference: Official Packages & API"
|
||||
openGraph={{
|
||||
url: 'https://nx.dev' + router.asPath,
|
||||
title: 'Reference: Official Packages & API',
|
||||
description: 'Reference: Official Packages & API',
|
||||
images: [
|
||||
{
|
||||
url: 'https://nx.dev/images/nx-media.jpg',
|
||||
width: 800,
|
||||
height: 400,
|
||||
alt: 'Nx: Smart, Fast and Extensible Build System',
|
||||
type: 'image/jpeg',
|
||||
},
|
||||
],
|
||||
site_name: 'NxDev',
|
||||
type: 'website',
|
||||
}}
|
||||
/>
|
||||
<Header useDarkBackground={false} />
|
||||
<main id="main" role="main">
|
||||
<div className="w-full">
|
||||
<article id="references" className="pt-16 sm:pt-24 lg:pt-32">
|
||||
<header className="mx-auto max-w-prose px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8">
|
||||
<div>
|
||||
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
|
||||
<span className="sr-only">Nx </span> Reference
|
||||
</h1>
|
||||
<p className="mt-2 text-4xl font-extrabold tracking-tight text-slate-800 sm:text-6xl">
|
||||
Official Packages & API
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
</article>
|
||||
|
||||
<section
|
||||
id="packages-section"
|
||||
className="relative mx-auto max-w-7xl py-12 px-4 sm:px-6 md:px-8 lg:pt-32"
|
||||
>
|
||||
<nav
|
||||
aria-labelledby="package-index-navigation"
|
||||
className="relative mb-24 grid grid-cols-2 gap-4 md:grid-cols-5"
|
||||
>
|
||||
{references.map((category: MenuItem, index, all) => (
|
||||
<ReferencesIndexItem
|
||||
key={'ref-' + category.id}
|
||||
path={category.path as string}
|
||||
name={category.name as string}
|
||||
id={category.id as string}
|
||||
/>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{references.map((category: MenuItem, index, all) => (
|
||||
<div key={[category.id, index].join('-')} className="py-10">
|
||||
<ReferencesSection section={category} />
|
||||
{!(index + 1 === all.length) && (
|
||||
<div className="inset-x-0 bottom-0 mt-8 h-1 rounded-full bg-gradient-to-r from-[#8154E8] to-[#47BC99]"></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<Footer useDarkBackground={false} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Packages;
|
||||
1
nx-dev/nx-dev/public/images/icons/angular.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/angular.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Angular</title><path d="M9.931 12.645h4.138l-2.07-4.908m0-7.737L.68 3.982l1.726 14.771L12 24l9.596-5.242L23.32 3.984 11.999.001zm7.064 18.31h-2.638l-1.422-3.503H8.996l-1.422 3.504h-2.64L12 2.65z"/></svg>
|
||||
|
After Width: | Height: | Size: 281 B |
1
nx-dev/nx-dev/public/images/icons/cypress.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/cypress.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Cypress</title><path d="M11.998 0C5.366 0 0 5.367 0 12a11.992 11.992 0 0 0 12 12c6.633 0 12-5.367 12-12-.001-6.633-5.412-12-12.002-12zM6.37 14.575c.392.523.916.742 1.657.742.35 0 .699-.044 1.004-.175.306-.13.655-.306 1.09-.567l1.223 1.745c-1.003.83-2.138 1.222-3.447 1.222-1.048 0-1.92-.218-2.705-.654a4.393 4.393 0 0 1-1.746-1.92c-.392-.83-.611-1.79-.611-2.925 0-1.09.219-2.094.61-2.923a4.623 4.623 0 0 1 1.748-2.007c.741-.48 1.657-.698 2.661-.698.699 0 1.353.087 1.877.305a5.64 5.64 0 0 1 1.614.96l-1.222 1.658A4.786 4.786 0 0 0 9.12 8.77c-.305-.13-.698-.174-1.048-.174-1.483 0-2.225 1.134-2.225 3.446-.043 1.18.175 2.008.524 2.532H6.37zm12 2.705c-.436 1.353-1.091 2.357-2.008 3.098-.916.743-2.138 1.135-3.665 1.266l-.305-2.05c1.003-.132 1.745-.35 2.225-.7.174-.13.524-.523.524-.523L11.519 6.764h3.01l2.095 8.683 2.226-8.683h2.923L18.37 17.28z"/></svg>
|
||||
|
After Width: | Height: | Size: 932 B |
1
nx-dev/nx-dev/public/images/icons/eslint.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/eslint.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ESLint</title><path d="M7.257 9.132L11.816 6.5a.369.369 0 0 1 .368 0l4.559 2.632a.369.369 0 0 1 .184.32v5.263a.37.37 0 0 1-.184.319l-4.559 2.632a.369.369 0 0 1-.368 0l-4.559-2.632a.369.369 0 0 1-.184-.32V9.452a.37.37 0 0 1 .184-.32M23.852 11.53l-5.446-9.475c-.198-.343-.564-.596-.96-.596H6.555c-.396 0-.762.253-.96.596L.149 11.509a1.127 1.127 0 0 0 0 1.117l5.447 9.398c.197.342.563.517.959.517h10.893c.395 0 .76-.17.959-.512l5.446-9.413a1.069 1.069 0 0 0 0-1.086m-4.51 4.556a.4.4 0 0 1-.204.338L12.2 20.426a.395.395 0 0 1-.392 0l-6.943-4.002a.4.4 0 0 1-.205-.338V8.08c0-.14.083-.269.204-.338L11.8 3.74c.12-.07.272-.07.392 0l6.943 4.003a.4.4 0 0 1 .206.338z"/></svg>
|
||||
|
After Width: | Height: | Size: 743 B |
1
nx-dev/nx-dev/public/images/icons/express.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/express.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Express</title><path d="M24 18.588a1.529 1.529 0 01-1.895-.72l-3.45-4.771-.5-.667-4.003 5.444a1.466 1.466 0 01-1.802.708l5.158-6.92-4.798-6.251a1.595 1.595 0 011.9.666l3.576 4.83 3.596-4.81a1.435 1.435 0 011.788-.668L21.708 7.9l-2.522 3.283a.666.666 0 000 .994l4.804 6.412zM.002 11.576l.42-2.075c1.154-4.103 5.858-5.81 9.094-3.27 1.895 1.489 2.368 3.597 2.275 5.973H1.116C.943 16.447 4.005 19.009 7.92 17.7a4.078 4.078 0 002.582-2.876c.207-.666.548-.78 1.174-.588a5.417 5.417 0 01-2.589 3.957 6.272 6.272 0 01-7.306-.933 6.575 6.575 0 01-1.64-3.858c0-.235-.08-.455-.134-.666A88.33 88.33 0 010 11.577zm1.127-.286h9.654c-.06-3.076-2.001-5.258-4.59-5.278-2.882-.04-4.944 2.094-5.071 5.264z"/></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
1
nx-dev/nx-dev/public/images/icons/html5.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/html5.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>HTML5</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>
|
||||
|
After Width: | Height: | Size: 327 B |
1
nx-dev/nx-dev/public/images/icons/javascript.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/javascript.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>JavaScript</title><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
|
||||
|
After Width: | Height: | Size: 974 B |
1
nx-dev/nx-dev/public/images/icons/jest.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/jest.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Jest</title><path d="M22.251 11.82a3.117 3.117 0 0 0-2.328-3.01L22.911 0H8.104L11.1 8.838a3.116 3.116 0 0 0-2.244 2.988c0 1.043.52 1.967 1.313 2.536a8.279 8.279 0 0 1-1.084 1.244 8.14 8.14 0 0 1-2.55 1.647c-.834-.563-1.195-1.556-.869-2.446a3.11 3.11 0 0 0-.91-6.08 3.117 3.117 0 0 0-3.113 3.113c0 .848.347 1.626.903 2.182-.048.097-.097.195-.146.299-.465.959-.993 2.043-1.195 3.259-.403 2.432.257 4.384 1.849 5.489A5.093 5.093 0 0 0 5.999 24c1.827 0 3.682-.917 5.475-1.807 1.279-.632 2.599-1.292 3.898-1.612.48-.118.98-.187 1.508-.264 1.07-.153 2.175-.312 3.168-.89a4.482 4.482 0 0 0 2.182-3.091c.174-.994 0-1.994-.444-2.87.298-.48.465-1.042.465-1.647zm-1.355 0c0 .965-.785 1.75-1.75 1.75a1.753 1.753 0 0 1-1.085-3.126l.007-.007c.056-.042.118-.084.18-.125 0 0 .008 0 .008-.007.028-.014.055-.035.083-.05.007 0 .014-.006.021-.006.028-.014.063-.028.097-.042.035-.014.07-.027.098-.041.007 0 .013-.007.02-.007.028-.007.056-.021.084-.028.007 0 .02-.007.028-.007.034-.007.062-.014.097-.02h.007l.104-.022c.007 0 .02 0 .028-.007.028 0 .055-.007.083-.007h.035c.035 0 .07-.007.111-.007h.09c.028 0 .05 0 .077.007h.014c.055.007.111.014.167.028a1.766 1.766 0 0 1 1.396 1.723zM10.043 1.39h10.93l-2.509 7.4c-.104.02-.208.055-.312.09l-2.64-5.385-2.648 5.35c-.104-.034-.216-.055-.327-.076l-2.494-7.38zm4.968 9.825a3.083 3.083 0 0 0-.938-1.668l1.438-2.904 1.452 2.967c-.43.43-.743.98-.868 1.605H15.01zm-3.481-1.098c.034-.007.062-.014.097-.02h.02c.029-.008.056-.008.084-.015h.028c.028 0 .049-.007.076-.007h.271c.028 0 .049.007.07.007.014 0 .02 0 .035.007.027.007.048.007.076.014.007 0 .014 0 .028.007l.097.02h.007c.028.008.056.015.083.029.007 0 .014.007.028.007.021.007.049.014.07.027.007 0 .014.007.02.007.028.014.056.021.084.035h.007a.374.374 0 0 1 .09.049h.007c.028.014.056.034.084.048.007 0 .007.007.013.007.028.014.05.035.077.049l.007.007c.083.062.16.132.236.201l.007.007a1.747 1.747 0 0 1 .48 1.209 1.752 1.752 0 0 1-3.502 0 1.742 1.742 0 0 1 1.32-1.695zm-6.838-.049c.966 0 1.751.786 1.751 1.751s-.785 1.751-1.75 1.751-1.752-.785-1.752-1.75.786-1.752 1.751-1.752zm16.163 6.025a3.07 3.07 0 0 1-1.508 2.133c-.758.438-1.689.577-2.669.716a17.29 17.29 0 0 0-1.64.291c-1.445.355-2.834 1.05-4.182 1.717-1.724.854-3.35 1.66-4.857 1.66a3.645 3.645 0 0 1-2.154-.688c-1.529-1.056-1.453-3.036-1.272-4.12.167-1.015.632-1.966 1.077-2.877.028-.055.049-.104.077-.16.152.056.312.098.479.126-.264 1.473.486 2.994 1.946 3.745l.264.139.284-.104c1.216-.431 2.342-1.133 3.336-2.071a9.334 9.334 0 0 0 1.445-1.716c.16.027.32.034.48.034a3.117 3.117 0 0 0 3.008-2.327h1.167a3.109 3.109 0 0 0 3.01 2.327c.576 0 1.11-.16 1.57-.43.18.52.236 1.063.139 1.605z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
1
nx-dev/nx-dev/public/images/icons/nestjs.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/nestjs.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 6.2 KiB |
1
nx-dev/nx-dev/public/images/icons/nextdotjs.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/nextdotjs.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M11.5725 0c-.1763 0-.3098.0013-.3584.0067-.0516.0053-.2159.021-.3636.0328-3.4088.3073-6.6017 2.1463-8.624 4.9728C1.1004 6.584.3802 8.3666.1082 10.255c-.0962.659-.108.8537-.108 1.7474s.012 1.0884.108 1.7476c.652 4.506 3.8591 8.2919 8.2087 9.6945.7789.2511 1.6.4223 2.5337.5255.3636.04 1.9354.04 2.299 0 1.6117-.1783 2.9772-.577 4.3237-1.2643.2065-.1056.2464-.1337.2183-.1573-.0188-.0139-.8987-1.1938-1.9543-2.62l-1.919-2.592-2.4047-3.5583c-1.3231-1.9564-2.4117-3.556-2.4211-3.556-.0094-.0026-.0187 1.5787-.0235 3.509-.0067 3.3802-.0093 3.5162-.0516 3.596-.061.115-.108.1618-.2064.2134-.075.0374-.1408.0445-.495.0445h-.406l-.1078-.068a.4383.4383 0 01-.1572-.1712l-.0493-.1056.0053-4.703.0067-4.7054.0726-.0915c.0376-.0493.1174-.1125.1736-.143.0962-.047.1338-.0517.5396-.0517.4787 0 .5584.0187.6827.1547.0353.0377 1.3373 1.9987 2.895 4.3608a10760.433 10760.433 0 004.7344 7.1706l1.9002 2.8782.096-.0633c.8518-.5536 1.7525-1.3418 2.4657-2.1627 1.5179-1.7429 2.4963-3.868 2.8247-6.134.0961-.6591.1078-.854.1078-1.7475 0-.8937-.012-1.0884-.1078-1.7476-.6522-4.506-3.8592-8.2919-8.2087-9.6945-.7672-.2487-1.5836-.42-2.4985-.5232-.169-.0176-1.0835-.0366-1.6123-.037zm4.0685 7.217c.3473 0 .4082.0053.4857.047.1127.0562.204.1642.237.2767.0186.061.0234 1.3653.0186 4.3044l-.0067 4.2175-.7436-1.14-.7461-1.14v-3.066c0-1.982.0093-3.0963.0234-3.1502.0375-.1313.1196-.2346.2323-.2955.0961-.0494.1313-.054.4997-.054z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
nx-dev/nx-dev/public/images/icons/nodedotjs.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/nodedotjs.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Node.js</title><path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L3.075,6.68C2.99,6.729,2.936,6.825,2.936,6.921v10.15c0,0.097,0.054,0.189,0.139,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
nx-dev/nx-dev/public/images/icons/nx.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/nx.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Nx</title><path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
1
nx-dev/nx-dev/public/images/icons/react.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/react.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>React</title><path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z"/></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
1
nx-dev/nx-dev/public/images/icons/storybook.svg
Normal file
1
nx-dev/nx-dev/public/images/icons/storybook.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Storybook</title><path d="M16.71.243l-.12 2.71a.18.18 0 00.29.15l1.06-.8.9.7a.18.18 0 00.28-.14l-.1-2.76 1.33-.1a1.2 1.2 0 011.279 1.2v21.596a1.2 1.2 0 01-1.26 1.2l-16.096-.72a1.2 1.2 0 01-1.15-1.16l-.75-19.797a1.2 1.2 0 011.13-1.27L16.7.222zM13.64 9.3c0 .47 3.16.24 3.59-.08 0-3.2-1.72-4.89-4.859-4.89-3.15 0-4.899 1.72-4.899 4.29 0 4.45 5.999 4.53 5.999 6.959 0 .7-.32 1.1-1.05 1.1-.96 0-1.35-.49-1.3-2.16 0-.36-3.649-.48-3.769 0-.27 4.03 2.23 5.2 5.099 5.2 2.79 0 4.969-1.49 4.969-4.18 0-4.77-6.099-4.64-6.099-6.999 0-.97.72-1.1 1.13-1.1.45 0 1.25.07 1.19 1.87z"/></svg>
|
||||
|
After Width: | Height: | Size: 651 B |
@ -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 (
|
||||
<nav className="flex" aria-label="Breadcrumb">
|
||||
<ol role="list" className="flex items-center space-x-4">
|
||||
{pages.map((page, index) => (
|
||||
<li key={page.name}>
|
||||
<div className="flex items-center">
|
||||
{!!index && (
|
||||
<div>
|
||||
<nav className="flex" aria-labelledby="breadcrumb">
|
||||
<ol role="list" className="flex items-center space-x-4">
|
||||
{pages.map((page, index) => (
|
||||
<li key={page.name}>
|
||||
<div className="flex items-center">
|
||||
{!!index && (
|
||||
<ChevronRightIcon
|
||||
className="h-5 w-5 flex-shrink-0 text-slate-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<a
|
||||
href={page.href}
|
||||
className={classNames(
|
||||
'text-sm font-medium capitalize hover:text-slate-600',
|
||||
page.current ? 'text-slate-600' : 'text-slate-400',
|
||||
!!index ? 'ml-4' : ''
|
||||
)}
|
||||
aria-current={page.current ? 'page' : undefined}
|
||||
>
|
||||
{page.name.replace(/-/gi, ' ')}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{hasRef && (
|
||||
<li>
|
||||
<div className="flex items-center">
|
||||
<ChevronRightIcon
|
||||
className="h-5 w-5 flex-shrink-0 text-gray-500"
|
||||
className="h-5 w-5 flex-shrink-0 text-slate-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
<a
|
||||
href={page.href}
|
||||
className={classNames(
|
||||
'text-sm font-medium hover:text-gray-800',
|
||||
page.current ? 'text-gray-800' : 'text-gray-500',
|
||||
!!index ? 'ml-4' : ''
|
||||
)}
|
||||
aria-current={page.current ? 'page' : undefined}
|
||||
>
|
||||
{page.name}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</nav>
|
||||
<a
|
||||
href={path}
|
||||
className={classNames(
|
||||
'text-sm font-medium hover:text-slate-800',
|
||||
'ml-4 text-slate-500'
|
||||
)}
|
||||
aria-current="page"
|
||||
>
|
||||
{hasRef}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -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 (
|
||||
<div
|
||||
className={cx(
|
||||
@ -62,14 +63,19 @@ export function Header(props: HeaderProps) {
|
||||
</div>
|
||||
{/*NAVIGATION*/}
|
||||
<div className="flex-shrink-0 text-sm">
|
||||
<nav className="items-justified flex justify-center space-x-1">
|
||||
<nav
|
||||
aria-labelledby="primary-navigation"
|
||||
className="items-justified flex justify-center space-x-1"
|
||||
>
|
||||
<h2 className="sr-only">Main navigation</h2>
|
||||
<Link href="/getting-started/intro">
|
||||
<a
|
||||
title="Check Nx documentation"
|
||||
className={cx(
|
||||
'px-3 py-2 leading-tight text-white',
|
||||
!!props.isDocViewer && !isNxCloudDoc ? 'font-bold' : ''
|
||||
!!props.isDocViewer && !isNxCloudDoc && !isReferencesDoc
|
||||
? 'font-bold'
|
||||
: ''
|
||||
)}
|
||||
>
|
||||
Nx Docs
|
||||
@ -86,6 +92,17 @@ export function Header(props: HeaderProps) {
|
||||
Nx Cloud Docs
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/packages">
|
||||
<a
|
||||
title="Official Packages & API"
|
||||
className={cx(
|
||||
'px-3 py-2 leading-tight text-white',
|
||||
isReferencesDoc ? 'font-bold' : ''
|
||||
)}
|
||||
>
|
||||
Reference
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/community#create-nx-plugin">
|
||||
<a
|
||||
title="Check Nx available plugins"
|
||||
|
||||
12
nx-dev/ui-references/.babelrc
Normal file
12
nx-dev/ui-references/.babelrc
Normal file
@ -0,0 +1,12 @@
|
||||
{
|
||||
"presets": [
|
||||
[
|
||||
"@nrwl/react/babel",
|
||||
{
|
||||
"runtime": "automatic",
|
||||
"useBuiltIns": "usage"
|
||||
}
|
||||
]
|
||||
],
|
||||
"plugins": []
|
||||
}
|
||||
18
nx-dev/ui-references/.eslintrc.json
Normal file
18
nx-dev/ui-references/.eslintrc.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.ts", "*.tsx"],
|
||||
"rules": {}
|
||||
},
|
||||
{
|
||||
"files": ["*.js", "*.jsx"],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
7
nx-dev/ui-references/README.md
Normal file
7
nx-dev/ui-references/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# nx-dev-ui-references
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test nx-dev-ui-references` to execute the unit tests via [Jest](https://jestjs.io).
|
||||
10
nx-dev/ui-references/jest.config.ts
Normal file
10
nx-dev/ui-references/jest.config.ts
Normal file
@ -0,0 +1,10 @@
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
displayName: 'nx-dev-ui-references',
|
||||
preset: '../../jest.preset.js',
|
||||
transform: {
|
||||
'^.+\\.[tj]sx?$': 'babel-jest',
|
||||
},
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
|
||||
coverageDirectory: '../../coverage/nx-dev/ui-references',
|
||||
};
|
||||
23
nx-dev/ui-references/project.json
Normal file
23
nx-dev/ui-references/project.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"$schema": "../../node_modules/nx/schemas/project-schema.json",
|
||||
"sourceRoot": "nx-dev/ui-references/src",
|
||||
"projectType": "library",
|
||||
"tags": [],
|
||||
"targets": {
|
||||
"lint": {
|
||||
"executor": "@nrwl/linter:eslint",
|
||||
"outputs": ["{options.outputFile}"],
|
||||
"options": {
|
||||
"lintFilePatterns": ["nx-dev/ui-references/**/*.{ts,tsx,js,jsx}"]
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"executor": "@nrwl/jest:jest",
|
||||
"outputs": ["coverage/nx-dev/ui-references"],
|
||||
"options": {
|
||||
"jestConfig": "nx-dev/ui-references/jest.config.ts",
|
||||
"passWithNoTests": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
2
nx-dev/ui-references/src/index.ts
Normal file
2
nx-dev/ui-references/src/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './lib/references-nav-list';
|
||||
export * from './lib/references-index-item';
|
||||
22
nx-dev/ui-references/src/lib/icons-map.ts
Normal file
22
nx-dev/ui-references/src/lib/icons-map.ts
Normal file
@ -0,0 +1,22 @@
|
||||
export const iconsMap: Record<string, string> = {
|
||||
angular: '/images/icons/angular.svg',
|
||||
cli: '/images/icons/nx.svg',
|
||||
cypress: '/images/icons/cypress.svg',
|
||||
detox: '/images/icons/react.svg',
|
||||
devkit: '/images/icons/nx.svg',
|
||||
'eslint-plugin-nx': '/images/icons/eslint.svg',
|
||||
express: '/images/icons/express.svg',
|
||||
jest: '/images/icons/jest.svg',
|
||||
js: '/images/icons/javascript.svg',
|
||||
linter: '/images/icons/eslint.svg',
|
||||
nest: '/images/icons/nestjs.svg',
|
||||
next: '/images/icons/nextdotjs.svg',
|
||||
node: '/images/icons/nodedotjs.svg',
|
||||
nx: '/images/icons/nx.svg',
|
||||
'nx-plugin': '/images/icons/nx.svg',
|
||||
react: '/images/icons/react.svg',
|
||||
'react-native': '/images/icons/react.svg',
|
||||
storybook: '/images/icons/storybook.svg',
|
||||
web: '/images/icons/html5.svg',
|
||||
workspace: '/images/icons/nx.svg',
|
||||
};
|
||||
24
nx-dev/ui-references/src/lib/references-index-item.tsx
Normal file
24
nx-dev/ui-references/src/lib/references-index-item.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import Link from 'next/link';
|
||||
import { iconsMap } from './icons-map';
|
||||
|
||||
export function ReferencesIndexItem(pkg: {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<Link href={'#' + pkg.id}>
|
||||
<a className="group relative flex items-center justify-center gap-3 overflow-hidden rounded-lg border border-slate-200 px-3 py-2 text-slate-700 transition hover:bg-slate-100">
|
||||
<img
|
||||
className="h-5 w-5 object-cover opacity-75"
|
||||
loading="lazy"
|
||||
src={iconsMap[pkg.id]}
|
||||
alt={pkg.name + ' illustration'}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
<span className="text-base font-medium">{pkg.name}</span>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
35
nx-dev/ui-references/src/lib/references-nav-list.tsx
Normal file
35
nx-dev/ui-references/src/lib/references-nav-list.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { ChevronRightIcon } from '@heroicons/react/outline';
|
||||
import { MenuItem } from '@nrwl/nx-dev/models-menu';
|
||||
|
||||
export function ReferencesNavList({
|
||||
header,
|
||||
links,
|
||||
}: {
|
||||
header: {
|
||||
title: string;
|
||||
icon: JSX.Element;
|
||||
};
|
||||
links: MenuItem[];
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<nav className="relative">
|
||||
<h4 className="mb-5 flex items-center text-lg font-bold tracking-tight text-slate-700 lg:text-xl">
|
||||
{header.icon}
|
||||
{header.title}
|
||||
</h4>
|
||||
<ul className="space-y-0.5 text-sm">
|
||||
{links.map((item, subIndex) => (
|
||||
<li key={[item.id, subIndex].join('-')}>
|
||||
<a
|
||||
href={item.path}
|
||||
className="group block flex items-center justify-between rounded-lg border border-slate-200 bg-slate-50/10 px-4 py-2 text-slate-500 transition-all hover:bg-slate-100 hover:text-slate-900"
|
||||
>
|
||||
{item.name}
|
||||
<ChevronRightIcon className="h-4 w-4 transition-all group-hover:translate-x-2" />
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
26
nx-dev/ui-references/src/lib/references-package-card.tsx
Normal file
26
nx-dev/ui-references/src/lib/references-package-card.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import { iconsMap } from './icons-map';
|
||||
|
||||
export function ReferencesPackageCard(pkg: {
|
||||
id: string;
|
||||
name: string;
|
||||
path: string;
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="ml-3 block flex-shrink-0">
|
||||
<img
|
||||
className="h-10 w-10 rounded-lg object-cover opacity-75"
|
||||
loading="lazy"
|
||||
src={iconsMap[pkg.id]}
|
||||
alt={pkg.name + ' illustration'}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-slate-900 lg:text-3xl">
|
||||
{pkg.name}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
nx-dev/ui-references/src/lib/references-section.tsx
Normal file
77
nx-dev/ui-references/src/lib/references-section.tsx
Normal file
@ -0,0 +1,77 @@
|
||||
import {
|
||||
BookmarkAltIcon,
|
||||
ChipIcon,
|
||||
CogIcon,
|
||||
TerminalIcon,
|
||||
} from '@heroicons/react/solid';
|
||||
import { MenuItem } from '@nrwl/nx-dev/models-menu';
|
||||
import { ReferencesNavList } from './references-nav-list';
|
||||
import { ReferencesPackageCard } from './references-package-card';
|
||||
|
||||
export function ReferencesSection({
|
||||
section,
|
||||
}: {
|
||||
section: MenuItem;
|
||||
}): JSX.Element {
|
||||
const guides =
|
||||
section.itemList?.filter(
|
||||
(x) => !x.path?.includes('executors') && !x.path?.includes('generators')
|
||||
) || [];
|
||||
const executors =
|
||||
section.itemList?.filter((x) => x.path?.includes('executors')) || [];
|
||||
const generators =
|
||||
section.itemList?.filter((x) => x.path?.includes('generators')) || [];
|
||||
return (
|
||||
<section
|
||||
id={section.id}
|
||||
className="relative py-2 md:grid md:grid-cols-3 md:gap-x-16"
|
||||
>
|
||||
<header className="md:col-span-1">
|
||||
<ReferencesPackageCard
|
||||
id={section.id}
|
||||
name={section.name as string}
|
||||
path={section.path as string}
|
||||
/>
|
||||
</header>
|
||||
<div className="mt-10 grid grid-cols-2 gap-8 sm:grid-cols-3 sm:space-y-0 md:col-span-2 md:mt-0">
|
||||
{!!guides.length && (
|
||||
<ReferencesNavList
|
||||
header={{
|
||||
icon:
|
||||
section.id === 'nx' ? (
|
||||
<TerminalIcon className="mr-2 h-5 w-5" aria-hidden="true" />
|
||||
) : (
|
||||
<BookmarkAltIcon
|
||||
className="mr-2 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
),
|
||||
title: section.id === 'nx' ? 'Commands' : 'Guides',
|
||||
}}
|
||||
links={guides}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!!executors.length && (
|
||||
<ReferencesNavList
|
||||
header={{
|
||||
icon: <ChipIcon className="mr-2 h-5 w-5" aria-hidden="true" />,
|
||||
title: 'Executors',
|
||||
}}
|
||||
links={executors}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!!generators.length && (
|
||||
<ReferencesNavList
|
||||
header={{
|
||||
icon: <CogIcon className="mr-2 h-5 w-5" aria-hidden="true" />,
|
||||
title: 'Generators',
|
||||
}}
|
||||
links={generators}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
25
nx-dev/ui-references/tsconfig.json
Normal file
25
nx-dev/ui-references/tsconfig.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"allowJs": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.spec.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
23
nx-dev/ui-references/tsconfig.lib.json
Normal file
23
nx-dev/ui-references/tsconfig.lib.json
Normal file
@ -0,0 +1,23 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": ["node"]
|
||||
},
|
||||
"files": [
|
||||
"../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
|
||||
"../../node_modules/@nrwl/react/typings/image.d.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"jest.config.ts",
|
||||
"**/*.spec.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.spec.tsx",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.js",
|
||||
"**/*.test.js",
|
||||
"**/*.spec.jsx",
|
||||
"**/*.test.jsx"
|
||||
],
|
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
|
||||
}
|
||||
20
nx-dev/ui-references/tsconfig.spec.json
Normal file
20
nx-dev/ui-references/tsconfig.spec.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"module": "commonjs",
|
||||
"types": ["jest", "node"]
|
||||
},
|
||||
"include": [
|
||||
"jest.config.ts",
|
||||
"**/*.test.ts",
|
||||
"**/*.spec.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.spec.tsx",
|
||||
"**/*.test.js",
|
||||
"**/*.spec.js",
|
||||
"**/*.test.jsx",
|
||||
"**/*.spec.jsx",
|
||||
"**/*.d.ts"
|
||||
]
|
||||
}
|
||||
7
nx.json
7
nx.json
@ -64,5 +64,12 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"generators": {
|
||||
"@nrwl/react": {
|
||||
"application": {
|
||||
"babel": true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -78,6 +78,7 @@
|
||||
"@nrwl/nx-dev/ui-home": ["nx-dev/ui-home/src/index.ts"],
|
||||
"@nrwl/nx-dev/ui-markdoc": ["nx-dev/ui-markdoc/src/index.ts"],
|
||||
"@nrwl/nx-dev/ui-member-card": ["nx-dev/ui-member-card/src/index.ts"],
|
||||
"@nrwl/nx-dev/ui-references": ["nx-dev/ui-references/src/index.ts"],
|
||||
"@nrwl/nx-dev/ui-sponsor-card": ["nx-dev/ui-sponsor-card/src/index.ts"],
|
||||
"@nrwl/nx-plugin": ["packages/nx-plugin"],
|
||||
"@nrwl/react": ["packages/react"],
|
||||
|
||||
@ -64,6 +64,7 @@
|
||||
"nx-dev-ui-home": "nx-dev/ui-home",
|
||||
"nx-dev-ui-markdoc": "nx-dev/ui-markdoc",
|
||||
"nx-dev-ui-member-card": "nx-dev/ui-member-card",
|
||||
"nx-dev-ui-references": "nx-dev/ui-references",
|
||||
"nx-dev-ui-sponsor-card": "nx-dev/ui-sponsor-card",
|
||||
"nx-plugin": "packages/nx-plugin",
|
||||
"react": "packages/react",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user