From 15825b8cdcad8a3e8b4e9618caffe92cba1c584d Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Fri, 25 Mar 2022 13:33:14 -0400
Subject: [PATCH] docs(nxdev): package view supports markdown (#9519)

---
 docs/generated/packages/angular.json          |  2 +-
 .../src/lib/package-schema-list.tsx           | 19 ++++++++++++-------
 .../src/lib/ui/markdown/markdown.tsx          | 11 +++++++++--
 packages/angular/package.json                 |  2 +-
 4 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/docs/generated/packages/angular.json b/docs/generated/packages/angular.json
index 16ebc8a468..805feda7aa 100644
--- a/docs/generated/packages/angular.json
+++ b/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": [
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 e5bf8d0cad..b5049aafe4 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
@@ -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>
                 ))}
diff --git a/nx-dev/feature-package-schema-viewer/src/lib/ui/markdown/markdown.tsx b/nx-dev/feature-package-schema-viewer/src/lib/ui/markdown/markdown.tsx
index a0eddeb9f0..3115fadc56 100644
--- a/nx-dev/feature-package-schema-viewer/src/lib/ui/markdown/markdown.tsx
+++ b/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,
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 16b251b3e0..aadbfdad96 100644
--- a/packages/angular/package.json
+++ b/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",