docs: upgrade docus and improve structure (#564)

* docs: upgrade docus

* docs: ready

* chore: update

* docs: bigger update

* chore: upgrade plausible

* docs: update

* docs: fix cover

* chore: upgrade deps

* docs: update

* chore: move to generate

* chore: rename to get started

* docs: improvements

* chore: disable releases and contributors fetching

* docs: typo

* docs: update

* hofix: disable github module

* refactor: dist is already ignored for all levels

* small updates and add vercel.json

* add generate to avoid failing netlify

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

docs/.env.example

@@ -0,0 +1,2 @@
+# Used for GitHub integration
+GITHUB_TOKEN=

docs/content/1.index.md

@@ -0,0 +1,37 @@
+---
+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
+navigation: false
+---
+
+::block-hero
+---
+cta:
+  - Get Started
+  - /get-started
+secondary:
+  - Star on GitHub →
+  - https://github.com/nuxt/image
+snippet: yarn add -D @nuxt/image
+---
+
+#top
+[Learn more about Nuxt 3 current support](https://github.com/nuxt/image/discussions/548)
+
+#title
+Nuxt [Image]{.text-primary-500}
+
+#description
+Plug-and-play image optimization for Nuxt apps. Resize and transform your images using built-in optimizer or your favorite images CDN.
+
+#extra
+  ::list
+  - [`<nuxt-img>`](/components/nuxt-img) drop-in replacement for the native `<img>` element
+  - [`<nuxt-picture>`](/components/nuxt-picture) drop-in replacement for the native `<picture>` element.
+  - Built-in image resizer and transformer with [unjs/ipx](https://github.com/unjs/ipx)
+  - Support [18+ providers](/providers/cloudflare)
+  - Generate responsive sizes
+  - Optimize using modern formats such as `webp` and `avif`
+  ::
+::

docs/content/1.getting-started/1.installation.md → docs/content/2.get-started.md

@@ -1,15 +1,20 @@
 ---
-title: Installation
+title: Getting Started
 description: Using image module in your Nuxt project is only one command away. ✨
+icon: heroicons-outline:lightning-bolt
+layout: page
 ---
 
+::article-hero
+::
+
 ::alert{type="info"}
 
-You are reading the `v1` documentation compatible with **Nuxt 3** (experimental). Check out the [image.nuxtjs.org](https://image.nuxtjs.org/getting-started/installation) for **Nuxt 2** compatible version. ([Announcement](https://github.com/nuxt/image/discussions/548)).
+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 devDependency to your project:
+Add `@nuxt/image-edge` as a development dependency to your project:
 
 ::code-group
   ```bash [yarn]
@@ -23,12 +28,14 @@ Add `@nuxt/image-edge` as a devDependency to your project:
 
 Add the module to `modules` in your `nuxt.config`:
 
-```ts [nuxt.config.js]
-export default {
+```ts [nuxt.config.ts]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
   modules: [
     '@nuxt/image-edge',
   ]
-}
+})
 ```
 
 ::alert{type="success"}
@@ -37,17 +44,15 @@ You can now start using [`<nuxt-img>`](/components/nuxt-img) and [`<nuxt-picture
 
 ## Configuration
 
-Add an `image` section in your `nuxt.config.js`:
+Add an `image` section in your `nuxt.config`:
 
-```ts [nuxt.config.js]
-export default {
-  image: {
-    // Options
-  }
+```ts [nuxt.config.ts]
+image: {
+  // Options
 }
 ```
 
-See [module options](/api/options) for available options.
+See the [image configuration](/configuration) for all available options and features to customize.
 
 ## Troubleshooting
 
@@ -69,15 +74,9 @@ If an error occurs during installation:
 
 - Try recreating lock-file:
 
-::code-group
-  ```bash [yarn]
-  rm yarn.lock && yarn
-  ```
-
-  ```bash [npm]
-  rm package-lock.json && npm i
-  ```
-::
+```bash
+npx nuxt@latest upgrade --force
+```
 
 - If there is still an error related to `sharp` and `node-gyp`, it is is probably becase your OS architecture or NodeJS version is not included in pre-built binaries and needs to built from source (for example, this sometimes occurs on Apple M1). Checkout [node-gyp](https://github.com/nodejs/node-gyp#installation) for install requirements.