feat(docs): upgrade to latest Docus

docs/app.config.ts

@@ -0,0 +1,23 @@
+export default defineAppConfig({
+  docus: {
+    url: 'https://image.nuxtjs.org',
+    title: 'Nuxt Image',
+    description: 'Plug-and-play image optimization for Nuxt apps. Resize and transform your images in your code using built-in optimizer or your favorite images CDN.',
+    header: {
+      logo: true
+    },
+    socials: {
+      twitter: '@nuxt_js',
+      github: 'nuxt/image',
+      nuxt: {
+        href: 'https://nuxt.com',
+        icon: 'simple-icons:nuxtdotjs',
+        label: 'Nuxt'
+      }
+    },
+    aside: {
+      level: 1
+    },
+    image: '/cover.jpg'
+  }
+})

docs/components/Logo.vue

@@ -1,6 +1,5 @@
 <template>
   <svg
-    class="w-auto h-8 text-[#18181B] dark:text-white"
     width="198"
     height="40"
     viewBox="0 0 198 40"
@@ -15,3 +14,16 @@
     <circle cx="6.55953" cy="10.56" r="3.04" fill="white" />
   </svg>
 </template>
+
+<style lang="ts" scoped>
+css({
+  svg: {
+    width: 'auto',
+    height: '2rem',
+    color: '#18181B',
+    '@dark': {
+      color: '{color.white}'
+    }
+  }
+})
+</style>

docs/content/1.index.md

@@ -1,7 +1,7 @@
 ---
 title: Optimized images for Nuxt
 description: Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.
-layout: fluid
+layout: page
 navigation: false
 ---
 

docs/content/2.get-started.md

@@ -1,29 +1,25 @@
 ---
-title: Getting Started
-description: Using image module in your Nuxt project is only one command away. ✨
 icon: heroicons-outline:lightning-bolt
-layout: page
+aside: false
 ---
 
-::article-hero
-::
+# Getting Started
 
-::alert{type="info"}
+Using image module in your Nuxt project is only one command away. ✨
 
+::alert{type="info"}
 You are reading the `v1` documentation compatible with **Nuxt 3** (experimental). Check out [image.nuxtjs.org](https://image.nuxtjs.org/getting-started/installation) for **Nuxt 2** compatible version. ([Announcement](https://github.com/nuxt/image/discussions/548)).
-
 ::
 
 Add `@nuxt/image-edge` as a development dependency to your project:
 
 ::code-group
-  ```bash [yarn]
-  yarn add --dev @nuxt/image-edge
-  ```
-
-  ```bash [npm]
-  npm install -D @nuxt/image-edge
-  ```
+```bash [yarn]
+yarn add --dev @nuxt/image-edge
+```
+```bash [npm]
+npm install -D @nuxt/image-edge
+```
 ::
 
 Add the module to `modules` in your `nuxt.config`:

docs/content/3.components/1.nuxt-img.md

@@ -1,7 +1,6 @@
----
-title: <nuxt-img>
-description: Discover how to use and configure the nuxt-img component.
----
+# `<nuxt-img>`
+
+Discover how to use and configure the nuxt-img component.
 
 `<nuxt-img>` is a drop-in replacement for the native `<img>` tag.
 
@@ -87,14 +86,15 @@ Use other provider instead of default [provider option](/configuration#provider)
   </template>
   ```
 
-  ```js [nuxt.config.js]
-  export default {
+
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
     image: {
       cloudinary: {
         baseURL: "https://res.cloudinary.com/nuxt/image/upload/",
       },
     },
-  };
+  })
   ```
 
 ::
@@ -115,8 +115,9 @@ Presets are predefined sets of image modifiers that can be used create unified f
   </template>
   ```
 
-  ```ts [nuxt.config.js]
-  export default {
+
+  ```ts [nuxt.config.ts]
+  export default defineNuxtConfig({
     image: {
       presets: {
         cover: {
@@ -129,7 +130,7 @@ Presets are predefined sets of image modifiers that can be used create unified f
         },
       },
     },
-  };
+  })
   ```
 
 ::

docs/content/3.components/2.nuxt-picture.md

@@ -1,19 +1,17 @@
----
-title: <nuxt-picture>
-description: Discover how to use and configure the nuxt-picture component.
----
+# `<nuxt-picture>`
+
+Discover how to use and configure the nuxt-picture component.
 
 `<nuxt-picture>` is a drop-in replacement for the native `<picture>` tag.
 
-Usage of `<nuxt-picture>` is almost identical to [`<nuxt-img>`](nuxt-img)
-but also allows serving modern formats like `webp` when possible.
+Usage of `<nuxt-picture>` is almost identical to [`<nuxt-img>`](nuxt-img) but also allows serving modern formats like `webp` when possible.
 
-Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)
+Learn more about the [`<picture>` tag on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture).
 
 ## Props
 
 ::alert{type="info"}
- See props supported by <a href="/components/nuxt-img#props">nuxt-img</a>
+ See props supported by[`<nuxt-img>`](/components/nuxt-img#props)</a>
 ::
 
 ### `legacyFormat`

docs/content/4.api/2.$img.md

@@ -1,9 +1,10 @@
 ---
-title: $img utility
-description: Using $img utility to generate provider specific URLs.
+aside: false
 ---
 
-Sometimes it's required to directly use a generated image URL with applied transformations instead of `<nuxt-img>` and `<nuxt-picture>` components.
+# $img utility
+
+Sometimes it's required to directly use a generated image URL with applied transformations instead of `<nuxt-img>` and `<nuxt-picture>` components. This is where `$img` comes in.
 
 ## Usage