- {/* We remove the top description on sub property lookup */}
- {!schemaViewModel.subReference && (
- <>
-
-
- )}
-
- {/*TODO@ben: create new component*/}
- {schemaViewModel.type === 'executors' && !schemaViewModel.subReference && (
-
-
-
- Try out this interactive editor of the configuration object.
- Values are validated as you type and hovering over labels will
- give you more information.
-
- {!!schemaViewModel.currentSchema.presets.length && (
- <>
-
-
- These buttons show the config object for specific common
- tasks.
-
-
- {schemaViewModel.currentSchema.presets.map((p) => (
- {
- setPresets(p.keys);
- }}
- type="button"
- className="focus:border-blue-nx-base focus:ring-blue-nx-base relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1"
- >
- {p.name}
-
- ))}
- {!!presets.length && (
- setPresets([])}
- type="button"
- className="focus:border-blue-nx-base focus:ring-blue-nx-base relative inline-flex items-center rounded-md border border-gray-200 bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 focus:z-10 focus:outline-none focus:ring-1"
- >
- Reset
- )}
-
-
- )}
-
-
+ {/* We remove the top description on sub property lookup */}
+ {!schemaViewModel.subReference && (
+ <>
+
+ {vm.markdown}
- )}
+
{/* SPACER */}
+
+ )}
-
-
- {!schemaViewModel.subReference && (
-
+ {/*TODO@ben: create new component*/}
+ {schemaViewModel.type === 'executors' && !schemaViewModel.subReference && (
+
+
+
+ Try out this interactive editor of the configuration object. Values
+ are validated as you type and hovering over labels will give you
+ more information.
+
+ {!!schemaViewModel.currentSchema.presets.length && (
+ <>
+
+
+ These buttons show the config object for specific common tasks.
+
+
+ {schemaViewModel.currentSchema.presets.map((p) => (
+ {
+ setPresets(p.keys);
+ }}
+ type="button"
+ className="relative inline-flex items-center rounded-md border border-slate-200 bg-white px-4 py-2 px-4 py-2 text-xs font-medium text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:hover:bg-slate-800"
+ >
+ {p.name}
+
+ ))}
+ {!!presets.length && (
+ setPresets([])}
+ type="button"
+ className="relative inline-flex items-center rounded-md border border-slate-200 bg-white px-4 py-2 px-4 py-2 text-xs font-medium text-slate-600 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60 dark:text-slate-400 dark:hover:bg-slate-800"
+ >
+ Reset
+ )}
+
+
)}
- {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 f1882c4f07ac4..f73ab313a82e6 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,19 +1,40 @@
+import { Menu } from '@nrwl/nx-dev/models-menu';
import { PackageMetadata } from '@nrwl/nx-dev/models-package';
-import { Breadcrumbs } from '@nrwl/nx-dev/ui-common';
+import { Breadcrumbs, Footer, SidebarContainer } from '@nrwl/nx-dev/ui-common';
import { renderMarkdown } from '@nrwl/nx-dev/ui-markdoc';
-import cx from 'classnames';
import { NextSeo } from 'next-seo';
import { useRouter } from 'next/router';
-import { ReactNode } from 'react';
+import { ReactNode, useEffect, useRef } from 'react';
import { Heading1 } from './ui/headings';
import { PackageReference } from './ui/package-reference';
export function PackageSchemaList({
+ menu,
+ navIsOpen,
pkg,
}: {
+ menu: Menu;
+ navIsOpen: boolean;
pkg: PackageMetadata;
}): JSX.Element {
const router = useRouter();
+ 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: {
pkg: {
@@ -79,64 +100,69 @@ export function PackageSchemaList({
type: 'website',
}}
/>
-