fix: 🐛 indentation

Author: prc5

packages/core/src/pages/components/description.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { PagePropsType } from "../../types/page.types";
-import { getCommentText } from "pages/handlers/comment";
+import { getCommentNode } from "pages/handlers/comment";
 
 export type DescriptionProps = {
   className?: string;
@@ -10,11 +10,5 @@ export type DescriptionProps = {
 export const Description: React.FC<PagePropsType & DescriptionProps> = (props) => {
   const { reflection, className = "" } = props;
 
-  return (
-    <div className={`api-docs__description ${className}`}>
-      {`
-${getCommentText(reflection)}
-        `}
-    </div>
-  );
+  return <div className={`api-docs__description ${className}`}>{getCommentNode(reflection)}</div>;
 };

packages/core/src/pages/handlers/comment.ts renamed to packages/core/src/pages/handlers/comment.tsx

@@ -20,10 +20,26 @@ export const getCommentText = (reflection: JSONOutput.SomeReflection): string =>
   if (!comment) {
     return "";
   }
+  return comment?.summary
+    .map(({ text }) => text)
+    .join("\n")
+    .trim();
+};
+
+export const getCommentNode = (reflection: JSONOutput.SomeReflection): React.ReactNode => {
+  const comment = getCommentText(reflection).trim();
+
+  if (!comment) {
+    return null;
+  }
   // New line is necessary for MDX to parse it correctly - otherwise we would get errors
-  return `\n
+  return (
+    <>
+      {`
 
-${comment?.summary.map(({ text }) => text).join("\n")}
+${comment}
 
-\n`;
+`}
+    </>
+  );
 };

packages/core/src/pages/modules/grid/grid.tsx

@@ -4,7 +4,7 @@ import { Code } from "pages/components/code";
 import { Type } from "pages/components/type";
 import { PagePropsType } from "types/page.types";
 import { getCallPreview } from "pages/utils/parsing.utils";
-import { getCommentText } from "pages/handlers/comment";
+import { getCommentNode } from "pages/handlers/comment";
 
 export const Grid = ({
   reflections,
@@ -37,7 +37,7 @@ export const Grid = ({
                 <Type {...pageProps} reflection={type} />
               </Code>
             </div>
-            <div className="api-docs__grid-description">{getCommentText(reflection)}</div>
+            <div className="api-docs__grid-description">{getCommentNode(reflection)}</div>
           </div>
         );
       })}

packages/core/src/pages/modules/table/table.tsx

@@ -4,7 +4,7 @@ import { Code } from "pages/components/code";
 import { Type } from "pages/components/type";
 import { PagePropsType } from "types/page.types";
 import { getCallPreview } from "pages/utils/parsing.utils";
-import { getCommentText } from "pages/handlers/comment";
+import { getCommentNode } from "pages/handlers/comment";
 
 export const Table = ({
   reflections,
@@ -46,7 +46,7 @@ export const Table = ({
                     <Type {...pageProps} reflection={type} />
                   </Code>
                 </td>
-                <td className="api-docs__table-description">{getCommentText(reflection).trim()}</td>
+                <td className="api-docs__table-description">{getCommentNode(reflection)}</td>
               </tr>
             );
           })}

packages/docusaurus/package.json

@@ -27,11 +27,11 @@
   "peerDependencies": {
     "@docusaurus/plugin-content-docs": ">= 2.0.0",
     "@docusaurus/types": ">= 2.0.0",
+    "@docsgen/core": "*",
     "react": ">= 16.8.0",
     "react-dom": ">= 16.8.0"
   },
   "dependencies": {
-    "@docsgen/core": "*",
     "@reins/query-params": "^0.1.1",
     "fs-extra": "^11.2.0",
     "mdast-util-from-markdown": "^2.0.0",