docs(nxdev): package view supports markdown (#9519)

docs/generated/packages/angular.json

@@ -1,7 +1,7 @@
 {
   "githubRoot": "https://github.com/nrwl/nx/blob/master",
   "name": "angular",
-  "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n-Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Cypress, Karma, and Protractor. \n-Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n-Upgrading AngularJS applications \n-Single Component Application Modules (SCAMs) \n-NgRx helpers. \n-Utilities for automatic workspace refactoring.",
+  "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Cypress, Karma, and Protractor. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "root": "/packages/angular",
   "source": "/packages/angular/src",
   "generators": [

nx-dev/feature-package-schema-viewer/src/lib/package-schema-list.tsx

@@ -8,6 +8,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { ReactComponentElement } from 'react';
 import { Heading1, Heading2 } from './ui/headings';
+import { Markdown } from './ui/markdown/markdown';
 
 export function PackageSchemaList({
   pkg,
@@ -97,7 +98,9 @@ export function PackageSchemaList({
               </div>
 
               <Heading1 title={vm.pkg.name} />
-              <p className="mb-4">{vm.pkg.description}</p>
+
+              <Markdown content={vm.pkg.description} classes="mb-4" />
+
               <p className="mb-16">
                 Here is a list of all the executors and generators available
                 from this package.
@@ -128,9 +131,10 @@ export function PackageSchemaList({
                           </a>
                         </Link>
                       </p>
-                      <p className="text-sm text-gray-500">
-                        {executors.description}
-                      </p>
+                      <Markdown
+                        content={executors.description}
+                        classes="prose-sm"
+                      />
                     </div>
                   </li>
                 ))}
@@ -162,9 +166,10 @@ export function PackageSchemaList({
                           </a>
                         </Link>
                       </p>
-                      <p className="text-sm text-gray-500">
-                        {generators.description}
-                      </p>
+                      <Markdown
+                        content={generators.description}
+                        classes="prose-sm"
+                      />
                     </div>
                   </li>
                 ))}

nx-dev/feature-package-schema-viewer/src/lib/ui/markdown/markdown.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import ReactMarkdown from 'react-markdown';
 import autolinkHeadings from 'rehype-autolink-headings';
 import slug from 'rehype-slug';
@@ -5,7 +6,13 @@ import gfm from 'remark-gfm';
 import { CodeBlock } from './code-block';
 import { renderIframes } from './renderers/render-iframe';
 
-export const Markdown = ({ content }: { content: string }) => (
+export const Markdown = ({
+  content,
+  classes = '',
+}: {
+  content: string;
+  classes?: string;
+}) => (
   <ReactMarkdown
     remarkPlugins={[gfm]}
     rehypePlugins={[
@@ -20,7 +27,7 @@ export const Markdown = ({ content }: { content: string }) => (
       renderIframes,
     ]}
     children={content}
-    className="prose max-w-none"
+    className={classNames('prose max-w-none', classes)}
     components={components({
       code: {
         callback: () => void 0,

packages/angular/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nrwl/angular",
   "version": "0.0.1",
-  "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n-Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Cypress, Karma, and Protractor. \n-Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n-Upgrading AngularJS applications \n-Single Component Application Modules (SCAMs) \n-NgRx helpers. \n-Utilities for automatic workspace refactoring.",
+  "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, Cypress, Karma, and Protractor. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
     "type": "git",
     "url": "https://github.com/nrwl/nx.git",