feat: better config merger

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
ZTL-UwU · Jun 13, 2024 · ce0dead · ce0dead
1 parent 6a01f3e
commit ce0dead
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 82 deletions.
diff --git a/app.config.ts b/app.config.ts
@@ -147,70 +147,3 @@ export default defineAppConfig({
     },
   },
 });
-
-type DeepPartial<T> = T extends object ? {
-  [P in keyof T]?: DeepPartial<T[P]>;
-} : T;
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    shadcnDocs: DeepPartial<{
-      site: {
-        name: string;
-      };
-      header: {
-        title: string;
-        showTitle: true;
-        logo: {
-          light: string;
-          dark: string;
-        };
-        darkModeToggle: true;
-        nav: ({
-          title: string;
-          to: string;
-          target: string;
-          links: ({
-            title: string;
-            to: string;
-            target: string;
-            description: string;
-          })[];
-        })[];
-        links: ({
-          icon: string;
-          to: string;
-          target: string;
-        })[];
-      };
-      aside: {
-        useLevel: boolean;
-        collapse: boolean;
-      };
-      main: {
-        breadCrumb: boolean;
-        showTitle: boolean;
-        codeIcon: {
-          [key: string]: string;
-        };
-      };
-      footer: {
-        credits: string;
-        links: ({
-          icon: string;
-          title: string;
-          to: string;
-          target: string;
-        })[];
-      };
-      toc: {
-        enable: boolean;
-        title: string;
-      };
-      search: {
-        enable: boolean;
-        inAside: boolean;
-      };
-    }>;
-  }
-}
diff --git a/composables/useConfig.ts b/composables/useConfig.ts
@@ -1,3 +1,153 @@
+import { defu } from 'defu';
+
+const defaultConfig: {
+  site: {
+    name: string;
+    description: string;
+    ogImage: string;
+  };
+  header: {
+    title: string;
+    showTitle: true;
+    logo: {
+      light: string;
+      dark: string;
+    };
+    darkModeToggle: true;
+    nav: ({
+      title: string;
+      to: string;
+      target: string;
+      links: ({
+        title: string;
+        to: string;
+        target: string;
+        description: string;
+      })[];
+    })[];
+    links: ({
+      icon: string;
+      to: string;
+      target: string;
+    })[];
+  };
+  aside: {
+    useLevel: boolean;
+    collapse: boolean;
+  };
+  main: {
+    breadCrumb: boolean;
+    showTitle: boolean;
+    codeIcon: {
+      [key: string]: string;
+    };
+  };
+  footer: {
+    credits: string;
+    links: ({
+      icon: string;
+      title: string;
+      to: string;
+      target: string;
+    })[];
+  };
+  toc: {
+    enable: boolean;
+    title: string;
+    links: ({
+      icon: string;
+      title: string;
+      to: string;
+      target: string;
+    })[];
+  };
+  search: {
+    enable: boolean;
+    inAside: boolean;
+  };
+} = {
+  site: {
+    name: 'shadcn-docs',
+    description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
+    ogImage: '/hero.png',
+  },
+  header: {
+    title: 'shadcn-docs',
+    showTitle: true,
+    logo: {
+      light: '/logo.svg',
+      dark: '/logo-dark.svg',
+    },
+    darkModeToggle: true,
+    nav: [],
+    links: [],
+  },
+  aside: {
+    useLevel: true,
+    collapse: false,
+  },
+  main: {
+    breadCrumb: true,
+    showTitle: true,
+    codeIcon: {
+      'package.json': 'vscode-icons:file-type-node',
+      'tsconfig.json': 'vscode-icons:file-type-tsconfig',
+      '.npmrc': 'vscode-icons:file-type-npm',
+      '.editorconfig': 'vscode-icons:file-type-editorconfig',
+      '.eslintrc': 'vscode-icons:file-type-eslint',
+      '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
+      '.eslintignore': 'vscode-icons:file-type-eslint',
+      'eslint.config.js': 'vscode-icons:file-type-eslint',
+      'eslint.config.mjs': 'vscode-icons:file-type-eslint',
+      'eslint.config.cjs': 'vscode-icons:file-type-eslint',
+      '.gitignore': 'vscode-icons:file-type-git',
+      'yarn.lock': 'vscode-icons:file-type-yarn',
+      '.env': 'vscode-icons:file-type-dotenv',
+      '.env.example': 'vscode-icons:file-type-dotenv',
+      '.vscode/settings.json': 'vscode-icons:file-type-vscode',
+      'nuxt': 'vscode-icons:file-type-nuxt',
+      '.nuxtrc': 'vscode-icons:file-type-nuxt',
+      '.nuxtignore': 'vscode-icons:file-type-nuxt',
+      'nuxt.config.js': 'vscode-icons:file-type-nuxt',
+      'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
+      'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
+      'tailwind.config.js': 'vscode-icons:file-type-tailwind',
+      'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
+      'vue': 'vscode-icons:file-type-vue',
+      'ts': 'vscode-icons:file-type-typescript',
+      'tsx': 'vscode-icons:file-type-typescript',
+      'mjs': 'vscode-icons:file-type-js',
+      'cjs': 'vscode-icons:file-type-js',
+      'js': 'vscode-icons:file-type-js',
+      'jsx': 'vscode-icons:file-type-js',
+      'md': 'vscode-icons:file-type-markdown',
+      'mdc': 'vscode-icons:file-type-markdown',
+      'py': 'vscode-icons:file-type-python',
+      'npm': 'vscode-icons:file-type-npm',
+      'pnpm': 'vscode-icons:file-type-pnpm',
+      'npx': 'vscode-icons:file-type-npm',
+      'yarn': 'vscode-icons:file-type-yarn',
+      'bun': 'vscode-icons:file-type-bun',
+      'yml': 'vscode-icons:file-type-yaml',
+      'json': 'vscode-icons:file-type-json',
+      'terminal': 'lucide:terminal',
+    },
+  },
+  footer: {
+    credits: '',
+    links: [],
+  },
+  toc: {
+    enable: true,
+    title: 'On This Page',
+    links: [],
+  },
+  search: {
+    enable: true,
+    inAside: false,
+  },
+};
+
 export function useConfig() {
   const appConfig = computed(() => useAppConfig()?.shadcnDocs || {});
 
@@ -7,14 +157,16 @@ export function useConfig() {
 
   return computed(
     () => {
-      const header = appConfig?.value?.header || {};
-      const main = appConfig?.value?.main || {};
-      const aside = appConfig?.value?.aside || {};
-      const footer = appConfig?.value?.footer || {};
-      const toc = appConfig?.value?.toc || {};
+      const processedConfig = defu(appConfig.value, defaultConfig);
+      const header = processedConfig.header;
+      const main = processedConfig.main;
+      const aside = processedConfig.aside;
+      const footer = processedConfig.footer;
+      const toc = processedConfig.toc;
 
       return {
         ...appConfig.value,
+        ...processedConfig,
         header: {
           ...header,
           ...navKeyFromPath(route.path, 'header', navigation.value || []),

diff --git a/content/2.api/1.configuration.md b/content/2.api/1.configuration.md
@@ -4,11 +4,11 @@ description: Customizing shadcn-docs-nuxt.
 icon: 'lucide:settings'
 ---
 
-shadcn-docs-nuxt is configured through `app.config.ts` using a [Function Merger](https://github.com/unjs/defu#function-merger).
+shadcn-docs-nuxt is configured through `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
-  shadcnDocs: () => ({
+  shadcnDocs: {
     header: {
       xxx
     },
@@ -19,14 +19,10 @@ export default defineAppConfig({
       xxx
     },
     xxx
-  })
+  },
 });
 ```
 
-::alert{type="warning" icon="lucide:triangle-alert"}
-For now all config are overwritten by the function, therefore the function merger must contain all the fields. It is recommended to start by modifying `app.config.ts` in the template.
-::
-
 ## Fields Reference
 
 Illustrative type declarations:

diff --git a/content/index.md b/content/index.md
@@ -6,7 +6,7 @@ navigation: false
 ::hero
 ---
 announcement:
-  title: 'Release v0.1.3'
+  title: 'Release v0.2.0'
   icon: 'noto:party-popper'
   to: /getting-started
 actions:

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "author": "Tony Zhang <zhangtianli2006@gmail.com>",
   "license": "MIT",
   "homepage": "https://shadcn-docs-nuxt.vercel.app/",
@@ -13,7 +13,6 @@
   "main": "./nuxt.config.ts",
   "files": [
     "app",
-    "app.config.ts",
     "app.vue",
     "components",
     "components.json",