feat: support nuxt.schema for visual edition in studio (#723)

Co-authored-by: Pooya Parsa <[email protected]>

app.config.ts

@@ -1,127 +1,7 @@
 export default defineAppConfig({
-  docus: {
-    /**
-     * Website title.
-     */
-    title: 'Docus',
-    /**
-     * Website description.
-     */
-    description: 'The best place to start your documentation.',
-    /**
-     * Cover image.
-     */
-    image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
-    /**
-     * Social links.
-     *
-     * Will be used in Social Icons component, in AppHeader and AppFooter.
-     */
-    socials: {
-      // twitter: '@nuxt_js',
-      // github: 'https://github.com/nuxt-themes/docus',
-      // facebook: '',
-      // instagram: '',
-      // youtube: '',
-      // medium: ''
-    },
-    aside: {
-      /**
-       * The level to which the navigation should be scaled.
-       *
-       * Use 0 to disable all nesting.
-       * Use 1 and more to display nested navigation in header and aside navigation.
-       */
-      level: 0,
-      /**
-       * Specify if default collapsibles state globally for aside navigation.
-       */
-      collapsed: false,
-      /**
-       * Paths to be excluded from aside navigation.
-       */
-      exclude: []
-    },
-    header: {
-      /**
-       * Title to be displayed in header.
-       */
-      title: '',
-      /**
-       * Logo configuration
-       *
-       * Boolean to disable or use the `Logo.vue` component.
-       * String to be used as a name of a component.
-       */
-      logo: false,
-      /**
-       * Toggle links icons in the header.
-       */
-      showLinkIcon: false,
-      /**
-       * Paths to be excluded from header links.
-       */
-      exclude: []
-    },
-    footer: {
-      /**
-       * Credits configuration
-       *
-       * Object configuring the credits part of footer.
-       * Boolean to disable.
-       */
-      credits: {
-        icon: 'IconDocus',
-        text: 'Powered by Docus',
-        href: 'https://docus.dev'
-      },
-      /**
-       * Icons to be added to Social Icons in footer.
-       */
-      iconLinks: []
-    }
-  }
+  /**
+   * Default are defined in nuxt.schema.ts for best typing and Studio integration
+   * This file can be used to leverage HMR while developping this theme
+   * Note that this file is not published to npm
+   */
 })
-
-interface IconLink {
-  href: string
-  icon: string
-  label?: string
-}
-
-declare module '@nuxt/schema' {
-  interface AppConfigInput {
-    docus?: {
-      title?: string
-      description?: string
-      image?: string
-      socials?: {
-        twitter?: string
-        github?: string
-        facebook?: string
-        instagram?: string
-        youtube?: string
-        medium?: string
-      },
-      aside?: {
-        level: number
-        exclude?: string[]
-        collapsed?: boolean
-      },
-      header?: {
-        title?: string,
-        logo?: boolean
-        showLinkIcon?: boolean
-        exclude?: string[]
-      },
-      footer?: {
-        credits?: boolean | {
-          icon: string
-          text: string
-          href: string
-        }
-        iconLinks?: IconLink[]
-      }
-    }
-  }
-}

nuxt.config.ts

@@ -16,13 +16,13 @@ const envModules = {
 
 export default defineNuxtConfig({
   extends: [envModules.typography, envModules.elements],
-
   modules: [
     envModules.tokens,
     envModules.studio,
     '@nuxtjs/color-mode',
     '@nuxt/content',
     '@vueuse/nuxt',
+    'nuxt-config-schema',
     resolve('./app/module'),
     (_, nuxt) => {
       if (nuxt.options.dev) {
@@ -34,11 +34,9 @@ export default defineNuxtConfig({
       }
     }
   ],
-
   css: [
     resolve('./assets/css/main.css')
   ],
-
   components: [
     {
       prefix: '',
@@ -51,12 +49,10 @@ export default defineNuxtConfig({
       global: true
     }
   ],
-
   pinceau: {
     configFileName: 'tokens.config',
     debug: false
   },
-
   content: {
     documentDriven: true,
     highlight: {
@@ -70,7 +66,6 @@ export default defineNuxtConfig({
       fields: ['icon', 'titleTemplate', 'aside']
     }
   },
-
   colorMode: {
     classSuffix: '',
     dataValue: 'theme'

nuxt.schema.ts

@@ -0,0 +1,127 @@
+export default defineNuxtConfigSchema({
+  appConfig: {
+    docus: {
+      /**
+       * Website title, used as header default title and meta title.
+       */
+      title: 'Docus',
+      /**
+       * Website description, used for meta description.
+       */
+      description: 'The best place to start your documentation.',
+      /**
+       * Cover image.
+       *
+       * @example '/cover.jpg'
+       */
+      image:
+        'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+      /**
+       * Social links.
+       *
+       * Will be used in Social Icons component, in AppHeader and AppFooter.
+       */
+      socials: {
+        /**
+         * Twitter social handle
+         * @example 'nuxt_js'
+         */
+        twitter: '',
+        /**
+         * GitHub org or repository
+         * @example 'nuxt/framework'
+         */
+        github: '',
+        facebook: '',
+        instagram: '',
+        youtube: '',
+        medium: ''
+      },
+      aside: {
+        /**
+         * The level to which the navigation should be scaled.
+         *
+         * Use 0 to disable all nesting.
+         * Use 1 and more to display nested navigation in header and aside navigation.
+         */
+        level: 0,
+        /**
+         * Specify if default collapsibles state globally for aside navigation.
+         */
+        collapsed: false,
+        /**
+         * Paths to be excluded from aside navigation.
+         *
+         * @type {string[]}
+         */
+        exclude: []
+      },
+      header: {
+        /**
+         * Title to be displayed in header or as aria-label if logo is defined
+         *
+         * Default to docus.title
+         */
+        title: '',
+        /**
+         * Logo configuration
+         *
+         * Boolean to disable or use the `Logo.vue` component.
+         *
+         * String to be used as a name of a component.
+         *
+         * @example 'MyLogo'
+         */
+        logo: false,
+        /**
+         * Toggle links icons in the header.
+         */
+        showLinkIcon: false,
+        /**
+         * Paths to be excluded from header links.
+         *
+         * @type {string[]}
+         */
+        exclude: []
+      },
+      footer: {
+        /**
+         * Credits configuration
+         *
+         * Object configuring the credits part of footer.
+         *
+         * @type {false|object}
+         */
+        credits: {
+          /**
+           * Icon to show on credits
+           * @formtype Icon
+           */
+          icon: 'IconDocus',
+          text: 'Powered by Docus',
+          href: 'https://docus.dev'
+        },
+        /**
+         * Icons to be added to Social Icons in footer.
+         */
+        iconLinks: {
+          $schema: {
+            type: 'array',
+            items: {
+              type: 'object',
+              required: ['icon', 'href'],
+              properties: {
+                icon: { type: 'string', description: 'Icon name' },
+                href: {
+                  type: 'string',
+                  description: 'Link when clicking on the icon'
+                },
+                label: { type: 'string', description: 'Label of the icon' }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+})

package.json

@@ -39,6 +39,7 @@
     "@nuxtjs/color-mode": "^3.2.0",
     "@vueuse/core": "^9.6.0",
     "@vueuse/nuxt": "^9.6.0",
+    "nuxt-config-schema": "^0.3.6",
     "pinceau": "latest"
   },
   "devDependencies": {