refactor: improve dx for write a docs component

Signed-off-by: Innei <i@innei.in>
nextui-org · Mar 18, 2024 · 5c15533 · 5c15533
1 parent 5a8768a
commit 5c15533
Show file tree

Hide file tree

Showing 9 changed files with 75 additions and 52 deletions.
diff --git a/apps/docs/content/components/accordion/bordered-variant.raw.tsx b/apps/docs/content/components/accordion/bordered-variant.raw.tsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion variant="bordered">
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/bordered-variant.ts b/apps/docs/content/components/accordion/bordered-variant.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion variant="bordered">
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./bordered-variant.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/accordion/compact.raw.tsx b/apps/docs/content/components/accordion/compact.raw.tsx
@@ -0,0 +1,20 @@
+import {Accordion, AccordionItem} from "@nextui-org/react";
+
+export default function App() {
+  const defaultContent =
+    "Lorem Innei ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+  return (
+    <Accordion isCompact>
+      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
+        {defaultContent}
+      </AccordionItem>
+      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
+        {defaultContent}
+      </AccordionItem>
+    </Accordion>
+  );
+}
diff --git a/apps/docs/content/components/accordion/compact.ts b/apps/docs/content/components/accordion/compact.ts
@@ -1,23 +1,4 @@
-const App = `import {Accordion, AccordionItem} from "@nextui-org/react";
-
-export default function App() {
-  const defaultContent =
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
-
-  return (
-    <Accordion isCompact>
-      <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
-        {defaultContent}
-      </AccordionItem>
-      <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
-        {defaultContent}
-      </AccordionItem>
-    </Accordion>
-  );
-}`;
+import App from "./compact.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/contentlayer.config.js b/apps/docs/contentlayer.config.js
@@ -2,6 +2,7 @@ import {defineDocumentType, defineNestedType, makeSource} from "contentlayer/sou
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 import {visit} from "unist-util-visit";
+import RawPlugin from 'esbuild-plugin-raw'
 
 /** @type {import('contentlayer/source-files').ComputedFields} */
 const computedFields = {
@@ -14,8 +15,7 @@ const computedFields = {
     resolve: (doc) => doc._raw.flattenedPath.split("/").slice(1).join("/"),
   },
   url: {type: "string", resolve: (doc) => `/${doc._raw.flattenedPath}`},
-}
-
+};
 
 export const Doc = defineDocumentType(() => ({
   name: "Doc",
@@ -26,18 +26,17 @@ export const Doc = defineDocumentType(() => ({
     description: {type: "string", required: false},
     date: {type: "date", required: false},
   },
-  computedFields
+  computedFields,
 }));
 
-
 const AuthorProperties = defineNestedType(() => ({
   name: "AuthorProperties",
   fields: {
     name: {type: "string", required: true},
     link: {type: "string", required: false},
     avatar: {type: "string", required: false},
     username: {type: "string", required: false},
-  }
+  },
 }));
 
 export const BlogPost = defineDocumentType(() => ({
@@ -48,8 +47,8 @@ export const BlogPost = defineDocumentType(() => ({
     title: {type: "string", required: true},
     description: {type: "string", required: true},
     date: {type: "date", required: true},
-    tags: { type: 'list', of: { type: 'string' } },
-    author: {type: "nested",of: AuthorProperties, required: false},
+    tags: {type: "list", of: {type: "string"}},
+    author: {type: "nested", of: AuthorProperties, required: false},
     image: {type: "string", required: false},
   },
   computedFields: {
@@ -61,7 +60,7 @@ export const BlogPost = defineDocumentType(() => ({
         const date = new Date(doc.date);
         const options = {year: "numeric", month: "long", day: "numeric"};
         return date.toLocaleDateString("en-US", options);
-      }
+      },
     },
     // add https://nextui.org to the image path
     imageAsParams: {
@@ -71,16 +70,22 @@ export const BlogPost = defineDocumentType(() => ({
         if (image) {
           return `https://nextui.org${image}`;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 }));
 
 export default makeSource({
   contentDirPath: "./content",
   documentTypes: [Doc, BlogPost],
   mdx: {
     remarkPlugins: [remarkGfm],
+    esbuildOptions(options) {
+      options.plugins ||= [];
+      options.plugins.unshift(RawPlugin());
+
+      return options;
+    },
     rehypePlugins: [
       rehypeSlug,
       () => (tree) => {

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -118,6 +118,7 @@
     "algoliasearch": "^4.10.3",
     "autoprefixer": "^10.4.14",
     "dotenv": "^16.0.1",
+    "esbuild-plugin-raw": "0.1.8",
     "eslint-config-next": "^13.5.1",
     "markdown-toc": "^1.2.0",
     "next-sitemap": "^4.1.8",

diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
@@ -24,7 +24,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated"
+    ".contentlayer/generated",
+    "types.d.ts"
   ],
   "exclude": ["node_modules", "next-redirect.js"]
 }
diff --git a/apps/docs/types.d.ts b/apps/docs/types.d.ts
@@ -0,0 +1,3 @@
+declare module "*.tsx?raw" {
+  export default string;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml