MDX 기본 구조 셋업

portone-io · Jun 13, 2024 · 3a6b6fb · 3a6b6fb
1 parent ddc66ed
commit 3a6b6fb
Show file tree

Hide file tree

Showing 11 changed files with 1,515 additions and 125 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ node_modules
 dist
 tmp
 .DS_Store
+__generated__
diff --git a/app.config.ts b/app.config.ts
@@ -1,48 +1,70 @@
 import { readFile } from "node:fs/promises";
+import path from "node:path";
 
 import yaml from "@rollup/plugin-yaml";
 import { defineConfig } from "@solidjs/start/config";
+import vinxiMdxPkg from "@vinxi/plugin-mdx";
+import remarkFrontmatter from "remark-frontmatter";
 import unocss from "unocss/vite";
 import { imagetools } from "vite-imagetools";
 
 // 현재 Vinxi export 설정 이슈로 파일을 직접 가져와야 함
 import type { CustomizableConfig } from "./node_modules/vinxi/dist/types/lib/vite-dev";
 
+const { default: vinxiMdx } = vinxiMdxPkg;
+
 export default defineConfig({
   server: {
     preset: "vercel",
   },
-  vite: {
-    ssr: {
-      optimizeDeps: {
-        include: ["mixpanel-browser"],
-      },
-    },
-    plugins: [
-      yaml(),
-      unocss(),
-      imagetools({
-        defaultDirectives: (url) => {
-          if (url.searchParams.has("imagetools")) {
-            return new URLSearchParams({
-              as: "picture",
-              format: "avif;webp",
-            });
-          } else return new URLSearchParams({});
+  extensions: ["ts", "tsx", "mdx"],
+  vite: () =>
+    ({
+      resolve: {
+        alias: {
+          $content: path.join(
+            import.meta.dirname,
+            "./src/content/__generated__/index.ts",
+          ),
         },
-      }),
-      {
-        name: "base64-loader",
-        async transform(_, id) {
-          const [path, query] = id.split("?");
-          if (query !== "base64" || !path) return null;
-          const data = await readFile(path);
-          const base64 = data.toString("base64");
-          return `export default '${base64}';`;
+      },
+      ssr: {
+        optimizeDeps: {
+          include: ["mixpanel-browser"],
         },
       },
-    ],
-  } satisfies CustomizableConfig,
+      plugins: [
+        yaml(),
+        unocss(),
+        // eslint-disable-next-line
+        vinxiMdx.withImports({})({
+          jsx: true,
+          jsxImportSource: "solid-js",
+          providerImportSource: "solid-mdx",
+          remarkPlugins: [remarkFrontmatter],
+        }),
+        imagetools({
+          defaultDirectives: (url) => {
+            if (url.searchParams.has("imagetools")) {
+              return new URLSearchParams({
+                as: "picture",
+                format: "avif;webp",
+              });
+            } else return new URLSearchParams({});
+          },
+        }),
+        {
+          name: "base64-loader",
+          async transform(_, id) {
+            const [path, query] = id.split("?");
+            if (query !== "base64" || !path) return null;
+            const data = await readFile(path);
+            const base64 = data.toString("base64");
+            return `export default '${base64}';`;
+          },
+        },
+      ],
+    }) satisfies CustomizableConfig,
   solid: {
     exclude: ["./src/misc/opengraph/**/*"],
   },

diff --git a/package.json b/package.json
@@ -5,11 +5,12 @@
 	"license": "AGPL-3.0-or-later",
 	"repository": "https://github.com/portone-io/developers.portone.io",
 	"scripts": {
-		"dev": "vinxi dev",
-		"build": "vinxi build",
+		"dev": "concurrently \"vinxi dev\" \"pnpm gen-collections watch\"",
+		"build": "pnpm gen-collections && vinxi build",
 		"start": "vinxi start",
 		"version": "vinxi version",
 		"check": "pnpm lint",
+		"gen-collections": "tsx src/genCollections.ts",
 		"lint:fix": "NODE_OPTIONS=\"$NODE_OPTIONS --loader ts-node/esm\" eslint --fix .",
 		"lint": "NODE_OPTIONS=\"$NODE_OPTIONS --loader ts-node/esm\" eslint .",
 		"eslint": "NODE_OPTIONS=\"$NODE_OPTIONS --loader ts-node/esm\" eslint"
@@ -19,6 +20,8 @@
 		"@iconify-json/ic": "^1.1.17",
 		"@iconify-json/material-symbols": "^1.1.78",
 		"@iconify-json/simple-icons": "^1.1.100",
+		"@mdx-js/mdx": "^2.3.0",
+		"@parcel/watcher": "^2.4.1",
 		"@portone-io/lint-local-links-valid": "workspace:^",
 		"@rollup/plugin-yaml": "^4.1.2",
 		"@shikijs/rehype": "^1.3.0",
@@ -41,15 +44,18 @@
 		"@unocss/preset-icons": "^0.59.4",
 		"@unocss/preset-wind": "^0.59.4",
 		"@unocss/reset": "^0.59.4",
+		"@vinxi/plugin-mdx": "^3.7.1",
 		"clsx": "^2.1.1",
+		"concurrently": "^8.2.2",
 		"date-fns": "^3.6.0",
 		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-    "eslint-parser-plain": "^0.1.0",
+		"eslint-parser-plain": "^0.1.0",
 		"eslint-plugin-mdx": "^3.1.5",
 		"eslint-plugin-prettier": "^5.1.3",
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-simple-import-sort": "^12.1.0",
+		"fast-glob": "^3.3.2",
 		"fuse.js": "^7.0.0",
 		"httpsnippet-lite": "^3.0.5",
 		"js-yaml": "^4.1.0",
@@ -122,9 +128,11 @@
 		"satori": "^0.10.13",
 		"sharp": "^0.33.3",
 		"solid-js": "^1.8.17",
+		"solid-mdx": "^0.0.7",
 		"string-width": "^5.1.2",
 		"ts-node": "^10.9.2",
 		"ts-pattern": "^5.1.1",
+		"tsx": "^4.15.2",
 		"typescript": "^5.4.5",
 		"unified": "^11.0.4",
 		"unist-util-visit": "^5.0.0",
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,3 +5,4 @@ node_modules @@
     dist
     tmp
     .DS_Store
+    __generated__