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

docs/app.config.ts

@@ -0,0 +1,16 @@
+export default defineAppConfig({
+  docus: {
+    aside: {
+      level: 0,
+    },
+    header: {
+      title: "Nuxt Apollo",
+      logo: true,
+    },
+    image: "/cover.jpg",
+    socials: {
+      github: "nuxt-modules/apollo-module",
+      twitter: "@nuxt_js",
+    },
+  }
+});

docs/components/Logo.vue

@@ -1,7 +1,22 @@
 <template>
-  <svg class="text-gray-900 dark:text-white h-5 sm:h-7" viewBox="0 0 198 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <svg class="" viewBox="0 0 198 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M43.904 30V10.4h3.584L56.7 24.204V10.4h3.584V30H56.7l-9.212-13.776V30h-3.584Zm25.304.336c-1.736 0-3.08-.541-4.032-1.624-.934-1.083-1.4-2.67-1.4-4.76v-7.84h3.556v7.504c0 1.195.242 2.11.728 2.744.485.635 1.25.952 2.296.952.989 0 1.801-.355 2.436-1.064.653-.71.98-1.699.98-2.968v-7.168h3.584V30h-3.164l-.28-2.352a4.856 4.856 0 0 1-1.876 1.96c-.803.485-1.746.728-2.828.728ZM79.718 30l5.04-6.944-5.04-6.944h3.837l3.528 4.928 3.5-4.928h3.864l-5.068 6.944L94.447 30h-3.864l-3.5-4.928L83.555 30h-3.836Zm23.2 0c-1.456 0-2.623-.355-3.5-1.064-.877-.71-1.316-1.97-1.316-3.78v-6.048h-2.38v-2.996h2.38l.42-3.724h3.164v3.724h3.752v2.996h-3.752v6.076c0 .672.14 1.139.42 1.4.299.243.803.364 1.512.364h1.736V30h-2.436Z" fill="currentColor" />
     <path d="m107.339 30 7.168-19.6h4.032l7.168 19.6h-3.808l-1.568-4.536h-7.644L111.091 30h-3.752Zm6.328-7.336h5.684l-2.856-8.148-2.828 8.148Zm14.481 13.496V16.112h3.192l.392 1.988c.448-.616 1.036-1.157 1.764-1.624.747-.467 1.708-.7 2.884-.7 1.307 0 2.473.317 3.5.952 1.027.635 1.839 1.503 2.436 2.604.597 1.101.896 2.352.896 3.752s-.299 2.65-.896 3.752a6.871 6.871 0 0 1-2.436 2.576c-1.027.616-2.193.924-3.5.924-1.045 0-1.96-.196-2.744-.588a4.944 4.944 0 0 1-1.904-1.652v8.064h-3.584Zm7.476-8.96c1.139 0 2.081-.383 2.828-1.148.747-.765 1.12-1.755 1.12-2.968s-.373-2.212-1.12-2.996c-.747-.784-1.689-1.176-2.828-1.176-1.157 0-2.109.392-2.856 1.176-.728.765-1.092 1.755-1.092 2.968s.364 2.212 1.092 2.996c.747.765 1.699 1.148 2.856 1.148Zm17.454 3.136c-1.344 0-2.558-.308-3.64-.924a6.945 6.945 0 0 1-2.548-2.548c-.616-1.101-.924-2.37-.924-3.808 0-1.437.317-2.697.952-3.78a6.884 6.884 0 0 1 2.548-2.576c1.082-.616 2.296-.924 3.64-.924 1.325 0 2.52.308 3.584.924a6.632 6.632 0 0 1 2.548 2.576c.634 1.083.952 2.343.952 3.78 0 1.437-.318 2.707-.952 3.808a6.686 6.686 0 0 1-2.548 2.548c-1.083.616-2.287.924-3.612.924Zm0-3.108c.933 0 1.745-.345 2.436-1.036.69-.71 1.036-1.755 1.036-3.136 0-1.381-.346-2.417-1.036-3.108-.691-.71-1.494-1.064-2.408-1.064-.952 0-1.774.355-2.464 1.064-.672.69-1.008 1.727-1.008 3.108s.336 2.427 1.008 3.136c.69.69 1.502 1.036 2.436 1.036ZM163.394 30V9.84h3.584V30h-3.584Zm7.246 0V9.84h3.584V30h-3.584Zm13.91.336c-1.344 0-2.557-.308-3.64-.924a6.952 6.952 0 0 1-2.548-2.548c-.616-1.101-.924-2.37-.924-3.808 0-1.437.318-2.697.952-3.78a6.892 6.892 0 0 1 2.548-2.576c1.083-.616 2.296-.924 3.64-.924 1.326 0 2.52.308 3.584.924a6.626 6.626 0 0 1 2.548 2.576c.635 1.083.952 2.343.952 3.78 0 1.437-.317 2.707-.952 3.808a6.68 6.68 0 0 1-2.548 2.548c-1.082.616-2.286.924-3.612.924Zm0-3.108c.934 0 1.746-.345 2.436-1.036.691-.71 1.036-1.755 1.036-3.136 0-1.381-.345-2.417-1.036-3.108-.69-.71-1.493-1.064-2.408-1.064-.952 0-1.773.355-2.464 1.064-.672.69-1.008 1.727-1.008 3.108s.336 2.427 1.008 3.136c.691.69 1.503 1.036 2.436 1.036Z" fill="#A855F7" />
     <path d="M20.028 26.315h3.454L17.97 12.006H14.15L8.637 26.315h3.454l.9-2.424h5.21l-.943-2.682h-3.43l2.231-6.157 3.97 11.263Zm11.39-10.594a.83.83 0 1 0-1.602.445c.346 1.248.522 2.538.522 3.834 0 7.906-6.432 14.338-14.338 14.338-7.906 0-14.338-6.432-14.338-14.338C1.662 12.094 8.094 5.662 16 5.662c3.35 0 6.59 1.19 9.147 3.307a2 2 0 1 0 1.235-1.133A16.044 16.044 0 0 0 16 4C7.178 4 0 11.178 0 20s7.178 16 16 16 16-7.178 16-16c0-1.446-.196-2.886-.583-4.279Z" fill="currentColor" />
   </svg>
 </template>
+
+<style scoped lang="ts">
+css({
+  svg: {
+    height: '1.25rem',
+    '@sm': {
+      height: '1.75rem'
+    },
+    fill: '{color.gray.900}',
+    '@dark': {
+      fill: '{color.white}'
+    }
+  }
+})
+</style>

docs/content/1.getting-started/1.quick-start.md

@@ -1,6 +1,7 @@
----
-title: "Quick Start"
-description: "Integrate Nuxt Apollo into your project."
+# Quick Start
+
+Integrate Nuxt Apollo into your project.
+
 ---
 
 ## Installation

docs/content/1.getting-started/2.configuration.md

@@ -1,6 +1,7 @@
----
-title: Configuration
-description: Configure Nuxt Apollo via the `apollo` property.
+# Configuration
+
+Configure Nuxt Apollo via the `apollo` property.
+
 ---
 
 ## Defaults

docs/content/1.getting-started/3.composables.md

@@ -1,9 +1,9 @@
----
-title: Composables
----
+# Composables
 
 Nuxt Apollo provides and [Auto Imports](https://v3.nuxtjs.org/guide/concepts/auto-imports) key composables for seamless usage throughout your application.
 
+---
+
 ## useApollo
 
 `useApollo` allows you to utilize [Nuxt Apollo's authentication helpers](/getting-started/auth-helpers) as well as easily access the configured Apollo clients. 

docs/content/1.getting-started/4.auth-helpers.md

@@ -1,6 +1,7 @@
----
-title: Auth Helpers
-description: Helper functions for working with authentication in Apollo.
+# Auth Helpers
+
+Helper functions for working with authentication in Apollo.
+
 ---
 
 Nuxt Apollo provides three (3) auth helpers which can be easily plugged into your authentication flow to interface with configured Apollo clients.

docs/content/1.index.md

@@ -1,7 +1,7 @@
 ---
 title: GraphQL integration for Nuxt
 navigation: false
-layout: fluid
+layout: page
 ---
 
 ::block-hero
@@ -16,7 +16,7 @@ snippet: yarn add -D @nuxtjs/apollo@next
 ---
 
 #title
-Nuxt [Apollo]{.text-primary-500}
+Nuxt [Apollo]{style="color: var(--color-primary-500)"}
 #description
 Leverage [Vue Apollo](https://v4.apollo.vuejs.org) to effortlessly integrate GraphQL into your Nuxt 3 projects.
 

docs/content/2.recipes/1.authentication.md

@@ -1,5 +1,7 @@
----
-description: Configure Nuxt Apollo via the `apollo` property.
+# Authentication
+
+Configure Nuxt Apollo via the `apollo` property.
+
 ---
 
 ## Token Storage

docs/content/2.recipes/2.error-handling.md

@@ -1,10 +1,8 @@
----
-description: Capture GraphQL errors and handle them accordingly.
----
-
-## Error Policy
+# Error Policy
 
+Capture GraphQL errors and handle them accordingly.
 
+---
 
 ## Error Hook
 

docs/content/2.recipes/3.typescript-support.md

@@ -1,3 +1,9 @@
+# TypesScript support
+
+Nuxt Apollo gracefully support TypeScript.
+
+---
+
 ## Type Casting
 
 When using TypeScript, It's greatly beneficial to utilize the correct types of your data. This can be done by casting a custom type as demonstrated below.

docs/nuxt.config.ts

@@ -1,33 +1,7 @@
-import { defineNuxtConfig } from 'nuxt'
-
 export default defineNuxtConfig({
   extends: ['@nuxt-themes/docus'],
 
   colorMode: {
     preference: 'dark'
   },
-
-  tailwindcss: {
-    config: {
-      important: true,
-      theme: {
-        extend: {
-          colors: {
-            primary: {
-              100: '#F3E8FF',
-              200: '#E9D5FF',
-              300: '#D8B4FE',
-              400: '#C084FC',
-              500: '#A855F7',
-              600: '#9333EA',
-              700: '#7E22CE',
-              800: '#6B21A8',
-              900: '#581C87'
-            }
-          }
-        }
-      }
-    }
-  }
-
 })

docs/package.json

@@ -9,8 +9,8 @@
     "preview": "nuxi preview"
   },
   "devDependencies": {
-    "nuxt": "npm:nuxt3@latest",
-    "@nuxt-themes/docus": "npm:@nuxt-themes/docus-edge@latest"
+    "nuxt": "^3.0.0",
+    "@nuxt-themes/docus": "^1.1.3"
   },
   "packageManager": "[email protected]"
 }

docs/tokens.config.ts

@@ -1,7 +1,7 @@
-import { defineThemeTokens, palette } from '@nuxt-themes/kit'
+import { defineTheme, palette } from 'pinceau'
 
-export default defineThemeTokens({
-  colors: {
+export default defineTheme({
+  color: {
     primary: palette('purple')
   }
 })