unplugin-docubook 1.1.3 → 1.2.1

package/README.md

@@ -2,7 +2,7 @@
 
 The Universal Documentation Engine for any JavaScript Framework.
 
-> Write with MDX — works with pretty much any JS framework: Vite, React, Vue, Svelte, you name it!
+> Write with MDX — works with pretty much any JS framework: React, Vue, Svelte, you name it!
 
 ## Features
 - 🚀 **Framework Agnostic**: Native support for React, Vue, and Svelte.
@@ -33,12 +33,198 @@ npm install lucide-vue-next
 npm install lucide-svelte
 ```
 
+---
+
+## 🔌 Integration
+
+DocuBook is not a replacement for your MDX compiler; it is a **transformer** that works alongside your favorite compiler. DocuBook handles automatic component imports (auto-import) before the MDX is compiled.
+
+You still need an MDX compiler/bundler based on your framework:
+
+```bash
+# For Vite (React)
+npm install @mdx-js/rollup @mdx-js/react
+
+# For Vite (Vue)
+npm install @mdx-js/rollup @mdx-js/vue
+
+# For Next.js
+npm install @next/mdx @mdx-js/loader @mdx-js/react
+
+# For Svelte
+npm install mdsvex
+
+# For Astro
+npm install @astrojs/mdx
+
+# For Nuxt
+npm install @nuxtjs/mdc
+```
+
+> [!NOTE]
+> **What's the difference with `next-mdx-remote`?**
+> `next-mdx-remote` compiles MDX at runtime. DocuBook (via Webpack/Vite) processes your MDX files at build-time. If you are using local MDX files, DocuBook eliminates the need to write manual imports in every file or repeatedly register components in a provider.
+
+---
+
+> [!TIP]
+> DocuBook supports all major bundlers via `unplugin`. Select your bundler below to see the configuration.
+
+<details>
+<summary><b>Vite (React)</b></summary>
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import mdx from '@mdx-js/rollup';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    mdx(),
+    DocuBook({
+      framework: 'react',
+    }),
+  ],
+});
+```
+</details>
+
+<details>
+<summary><b>Vite (Vue)</b></summary>
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import mdx from '@mdx-js/rollup';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    mdx({ providerImportSource: '@mdx-js/vue' }),
+    DocuBook({
+      framework: 'vue',
+    }),
+  ],
+});
+```
+</details>
+
+<details>
+<summary><b>Next.js (App Router / Pages Router)</b></summary>
+
+```javascript
+// next.config.mjs
+import DocuBook from 'unplugin-docubook/webpack';
+import createMDX from '@next/mdx';
+
+const withMDX = createMDX({});
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
+  webpack(config) {
+    config.plugins.push(DocuBook({ framework: 'react' }));
+    return config;
+  },
+};
+
+export default withMDX(nextConfig);
+```
+</details>
+
+<details>
+<summary><b>Svelte (Vite)</b></summary>
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import mdsvex from 'mdsvex';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  plugins: [
+    svelte({
+      extensions: ['.md', '.mdx'],
+    }),
+    mdsvex({
+      extensions: ['.md', '.mdx'],
+    }),
+    DocuBook({
+      framework: 'svelte',
+    }),
+  ],
+});
+```
+</details>
+
+<details>
+<summary><b>Astro</b></summary>
+
+```javascript
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import DocuBook from 'unplugin-docubook/vite';
+
+export default defineConfig({
+  integrations: [mdx()],
+  vite: {
+    plugins: [
+      DocuBook({
+        framework: 'svelte', // or 'react' if using React in Astro
+      }),
+    ],
+  },
+});
+```
+</details>
+
+<details>
+<summary><b>Nuxt (Vue)</b></summary>
+
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/mdc'],
+  docubook: {
+    framework: 'vue'
+  }
+})
+```
+
+Or use the DocuBook Nuxt module directly:
+```typescript
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['unplugin-docubook/nuxt'],
+  docubook: {
+    framework: 'vue'
+  }
+})
+```
+</details>
+
+<details>
+<summary><b>Webpack / Rollup / Others</b></summary>
+
+Import from `unplugin-docubook/webpack` or `unplugin-docubook/rollup` and add to your plugins array.
+</details>
+
+---
+
 ## 🎨 Theming & Customization
 
 DocuBook uses CSS variables for theming. You can override these variables to customize the appearance of components.
 
 ### Quick Start
 
+> [!NOTE]
 > Import the DocuBook theme in your entry file (`main.ts`, `App.tsx`, etc.)
 
 ```typescript
@@ -172,9 +358,6 @@ Override colors for dark mode by adding `.dark` class:
   /* ... etc */
 }
 ```
-
-> [!TIP]
-> DocuBook automatically detects dark mode via the `.dark` class on parent element (compatible with Tailwind CSS).
 </details>
 
 <details>
@@ -228,214 +411,6 @@ DocuBook({
 })
 ```
 
-## 🔌 Integration
-
-DocuBook is not a replacement for your MDX compiler; it is a **transformer** that works alongside your favorite compiler. DocuBook handles automatic component imports (auto-import) before the MDX is compiled.
-
-### Requirement
-You still need an MDX compiler/bundler based on your framework:
-
-```bash
-# For Vite (React)
-npm install @mdx-js/rollup @mdx-js/react
-
-# For Vite (Vue)
-npm install @mdx-js/rollup @mdx-js/vue
-
-# For Next.js
-npm install @next/mdx @mdx-js/loader @mdx-js/react
-
-# For Svelte
-npm install mdsvex
-
-# For Astro
-npm install @astrojs/mdx
-
-# For Nuxt
-npm install @nuxtjs/mdc
-```
-
-> [!NOTE]
-> **What's the difference with `next-mdx-remote`?**
-> `next-mdx-remote` compiles MDX at runtime. DocuBook (via Webpack/Vite) processes your MDX files at build-time. If you are using local MDX files, DocuBook eliminates the need to write manual imports in every file or repeatedly register components in a provider.
-
----
-
-## ⚙️ Configuration
-
-> [!TIP]
-> DocuBook supports all major bundlers via `unplugin`. Select your bundler below to see the configuration.
-
-<details>
-<summary><b>Vite (React)</b></summary>
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import mdx from '@mdx-js/rollup';
-import DocuBook from 'unplugin-docubook/vite';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    mdx(),
-    DocuBook({
-      framework: 'react',
-    }),
-  ],
-});
-```
-</details>
-
-<details>
-<summary><b>Vite (Vue)</b></summary>
-
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import mdx from '@mdx-js/rollup';
-import DocuBook from 'unplugin-docubook/vite';
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    mdx({ providerImportSource: '@mdx-js/vue' }),
-    DocuBook({
-      framework: 'vue',
-    }),
-  ],
-});
-```
-</details>
-
-<details>
-<summary><b>Next.js (App Router / Pages Router)</b></summary>
-
-First, install the `@next/mdx` compiler:
-```bash
-npm install @next/mdx @mdx-js/loader @mdx-js/react
-```
-
-Then configure `next.config.mjs`:
-```javascript
-// next.config.mjs
-import DocuBook from 'unplugin-docubook/webpack';
-import createMDX from '@next/mdx';
-
-const withMDX = createMDX({});
-
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
-  webpack(config) {
-    config.plugins.push(DocuBook({ framework: 'react' }));
-    return config;
-  },
-};
-
-export default withMDX(nextConfig);
-```
-</details>
-
-<details>
-<summary><b>Svelte (Vite)</b></summary>
-
-First, install `mdsvex`:
-```bash
-npm install mdsvex
-```
-
-Then configure `vite.config.ts`:
-```typescript
-// vite.config.ts
-import { defineConfig } from 'vite';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-import mdsvex from 'mdsvex';
-import DocuBook from 'unplugin-docubook/vite';
-
-export default defineConfig({
-  plugins: [
-    svelte({
-      extensions: ['.md', '.mdx'],
-    }),
-    mdsvex({
-      extensions: ['.md', '.mdx'],
-    }),
-    DocuBook({
-      framework: 'svelte',
-    }),
-  ],
-});
-```
-</details>
-
-<details>
-<summary><b>Astro</b></summary>
-
-First, install `@astrojs/mdx`:
-```bash
-npm install @astrojs/mdx
-```
-
-Then configure `astro.config.mjs`:
-```javascript
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import DocuBook from 'unplugin-docubook/vite';
-
-export default defineConfig({
-  integrations: [mdx()],
-  vite: {
-    plugins: [
-      DocuBook({
-        framework: 'svelte', // or 'react' if using React in Astro
-      }),
-    ],
-  },
-});
-```
-</details>
-
-<details>
-<summary><b>Nuxt (Vue)</b></summary>
-
-First, install `@nuxtjs/mdc`:
-```bash
-npm install @nuxtjs/mdc
-```
-
-Then configure `nuxt.config.ts`:
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['@nuxtjs/mdc'],
-  docubook: {
-    framework: 'vue'
-  }
-})
-```
-
-Or use the DocuBook Nuxt module directly:
-```typescript
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ['unplugin-docubook/nuxt'],
-  docubook: {
-    framework: 'vue'
-  }
-})
-```
-</details>
-
-<details>
-<summary><b>Webpack / Rollup / Others</b></summary>
-
-Import from `unplugin-docubook/webpack` or `unplugin-docubook/rollup` and add to your plugins array.
-</details>
-
 ---
 
 ## License