From ce0deada058bd797f6830baae6cecc09aa9e125f Mon Sep 17 00:00:00 2001 From: ZTL-UwU Date: Thu, 13 Jun 2024 17:59:53 +0800 Subject: [PATCH] feat: better config merger Signed-off-by: ZTL-UwU --- app.config.ts | 67 ------------- composables/useConfig.ts | 162 ++++++++++++++++++++++++++++++- content/2.api/1.configuration.md | 10 +- content/index.md | 2 +- package.json | 3 +- 5 files changed, 162 insertions(+), 82 deletions(-) diff --git a/app.config.ts b/app.config.ts index 8f9e7dd1..99d2054a 100644 --- a/app.config.ts +++ b/app.config.ts @@ -147,70 +147,3 @@ export default defineAppConfig({ }, }, }); - -type DeepPartial = T extends object ? { - [P in keyof T]?: DeepPartial; -} : 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 index 12bd4b81..9ffba569 100644 --- 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 index 6f717829..297eca62 100644 --- 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 index 7c8b5b55..2712f12e 100644 --- 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 index 53e4ae3f..e27c025a 100644 --- 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 ", "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",