feat(docs): upgrade to latest Docus (#178)

* feat(docs): upgrade to latest Docus

* chore(fix): format

* update

Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>

.nuxtrc

@@ -1,3 +1,2 @@
 typescript.includeWorkspace=true
-imports.autoImport=false
 sourcemap=false

README.md

@@ -30,7 +30,7 @@
 
 [📖  Read more](https://color-mode.nuxtjs.org)
 
-**Note**: v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://v3.nuxtjs.org/). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](https://color-mode.nuxtjs.org/#migrating-to-v3).
+**Note**: v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://nuxt.com). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](https://color-mode.nuxtjs.org/#migrating-to-v3).
 
 ## Contributing
 

docs/app.config.ts

@@ -0,0 +1,38 @@
+export default defineAppConfig({
+  docus: {
+    title: 'Nuxt Color Mode',
+    layout: 'default',
+    url: 'https://color-mode.nuxtjs.org',
+    description: 'Dark and Light mode with auto detection made easy with Nuxt 🌗',
+    socials: {
+      twitter: 'nuxt_js',
+      github: 'nuxt-modules/color-mode'
+    },
+    aside: {
+      level: 1
+    },
+    image: '/cover.jpg',
+    header: {
+      logo: true
+    },
+    footer: {
+      credits: {
+        icon: 'IconDocus',
+        text: 'Powered by Docus',
+        href: 'https://docus.com'
+      },
+      iconLinks: [
+        {
+          label: 'Nuxt',
+          href: 'https://nuxt.com',
+          icon: 'IconNuxt'
+        },
+        {
+          label: 'Vue Telescope',
+          href: 'https://vuetelescope.com',
+          icon: 'IconVueTelescope'
+        }
+      ]
+    }
+  }
+})

docs/components/content/Logo.vue → docs/components/Logo.vue

@@ -1,6 +1,5 @@
 <template>
   <svg
-    class="w-auto h-8 text-[#18181B] dark:text-white"
     width="277"
     height="40"
     viewBox="0 0 277 40"
@@ -13,3 +12,15 @@
     <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7539 5.10837C12.2075 5.56169 12.3466 6.24204 12.1073 6.83702C11.1712 9.16487 10.9399 11.7165 11.4421 14.1748C11.9443 16.633 13.1579 18.8895 14.9321 20.6636C16.7062 22.4378 18.9627 23.6514 21.4209 24.1536C23.8792 24.6558 26.4308 24.4245 28.7587 23.4884C29.3535 23.2492 30.0335 23.3881 30.4869 23.8414C30.9402 24.2946 31.0793 24.9747 30.8403 25.5695C29.6491 28.5335 27.5983 31.0733 24.9516 32.862C22.305 34.6507 19.1836 35.6066 15.9892 35.6065H15.9875C12.2728 35.6024 8.67509 34.3064 5.81124 31.9404C2.94739 29.5744 0.995725 26.286 0.29082 22.6387C-0.414085 18.9914 0.171672 15.2126 1.94768 11.9499C3.72368 8.68716 6.57932 6.14385 10.0251 4.75593C10.6199 4.51634 11.3003 4.65505 11.7539 5.10837ZM8.12168 9.51113C6.75059 10.5823 5.60211 11.9295 4.75826 13.4798C3.33735 16.0901 2.86871 19.1135 3.43268 22.0315C3.99665 24.9495 5.55809 27.5805 7.84935 29.4734C10.1406 31.3663 13.019 32.4032 15.991 32.4065C18.5461 32.4062 21.0428 31.6415 23.1598 30.2107C24.2801 29.4536 25.2669 28.5283 26.0891 27.4734C24.3308 27.7069 22.5365 27.6476 20.7804 27.2888C17.7076 26.6611 14.887 25.144 12.6694 22.9264C10.4517 20.7087 8.93465 17.8881 8.30687 14.8153C7.94841 13.0607 7.88891 11.268 8.12168 9.51113Z" fill="currentColor" />
   </svg>
 </template>
+
+<style scoped lang="ts">
+css({
+  svg: {
+    color: '#18181B',
+    width: 'auto',
+    '@dark': {
+      color: '{color.white}'
+    }
+  }
+})
+</style>

docs/content/1.index.md

@@ -2,13 +2,13 @@
 title: 'Documentation'
 description: 'Dark and Light mode with auto detection made easy with Nuxt 🌗'
 aside: false
-exact: true
+navigation: false
 csb_link: https://codesandbox.io/embed/github/nuxt-community/color-mode-module/tree/master/?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fplayground%2Fpages%2Findex.vue&theme=dark&view=preview
 ---
 
 ::alert{type="info"}
 
-v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://v3.nuxtjs.org/). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](#migrating-to-v3).
+v3 of `@nuxtjs/color-mode` is compatible with [Nuxt 3 and Nuxt Bridge](https://nuxt.com). If you're looking for the previous version of this module, check out [the previous docs](https://v2.color-mode.nuxtjs.org/), or [read more about the differences](#migrating-to-v3).
 
 ::
 

docs/nuxt.config.ts

@@ -1,42 +1,7 @@
-import { defineNuxtConfig } from 'nuxt'
-
 export default defineNuxtConfig({
-  extends: ['./node_modules/@docus/docs-theme'],
-  github: {
-    owner: 'nuxt-community',
-    repo: 'color-mode-module',
-    branch: 'main'
-  },
-  theme: {},
-  content: {
-    navigation: {
-      fields: ['exact']
-    }
-  },
-  modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
-  plausible: {
-    domain: 'color-mode.nuxtjs.org'
-  },
-  tailwindcss: {
-    config: {
-      theme: {
-        extend: {
-          colors: {
-            primary: {
-              50: '#d6ffee',
-              100: '#acffdd',
-              200: '#83ffcc',
-              300: '#30ffaa',
-              400: '#00dc82',
-              500: '#00bd6f',
-              600: '#009d5d',
-              700: '#007e4a',
-              800: '#005e38',
-              900: '#003f25'
-            }
-          }
-        }
-      }
-    }
+  extends: ['@nuxt-themes/docus'],
+  modules: ['nuxt-plausible'],
+  imports: {
+    autoImport: true
   }
 })

docs/package.json

@@ -7,13 +7,12 @@
   "scripts": {
     "dev": "nuxi dev",
     "build": "nuxi build",
-    "generate": "nuxi build",
+    "generate": "nuxi generate",
     "preview": "nuxi preview"
   },
   "devDependencies": {
-    "@docus/docs-theme": "npm:@docus/docs-theme-edge@latest",
-    "@docus/github": "npm:@docus/github-edge@latest",
-    "nuxt": "^3.0.0-rc.3",
-    "vue-plausible": "^1.3.1"
+    "@nuxt-themes/docus": "^1.1.3",
+    "nuxt": "^3.0.0",
+    "nuxt-plausible": "^0.1.2"
   }
 }