✨优化文档

10 files changed, 1176 insertions, 0 deletions

diff --git a/docs/.docs/content/0.index.md b/docs/.docs/content/0.index.md
new file mode 100644
index 0000000..d909fd8
--- /dev/null
+++ b/docs/.docs/content/0.index.md
@@ -0,0 +1,99 @@
+---
+title: Home
+navigation: false
+layout: page
+main:
+  fluid: false
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+::block-hero
+---
+cta:
+  - Get started
+  - /introduction/getting-started
+secondary:
+  - Open on GitHub →
+  - https://github.com/nuxt-themes/docus
+---
+
+#title
+The best place to start your documentation.
+
+#description
+Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com).
+
+#extra
+  ::list
+  - **+50 Components** ready to build rich pages
+  - **Docs** and **Page** layouts
+  - Start from a `README`, scale to a framework documentation
+  - Navigation and Table of Contents generation
+  - Fully configurable design system
+  - Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev)
+  - Used on [Content Documentation](https://content.nuxtjs.org)
+  ::
+
+#support
+  ::terminal
+  ---
+  content:
+  - npx nuxi@latest init -t themes/docus
+  - cd docs
+  - npm install
+  - npm run dev
+  ---
+  ::
+::
+
+::card-grid
+#title
+What's included
+
+#root
+:ellipsis{left=0px width=40rem top=10rem blur=140px}
+
+#default
+  ::card{icon=logos:nuxt-icon}
+  #title
+  Nuxt Architecture
+  #description
+  Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem.
+  ::
+
+  ::card{icon=IconNuxtStudio}
+  #title
+  Nuxt Studio ready
+  #description
+  Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
+  ::
+
+  ::card{icon=logos:vue}
+  #title
+  Vue Components
+  #description
+  Use built-in components (or your own!) inside your content.
+  ::
+
+  ::card{icon=simple-icons:markdown}
+  #title
+  Write Markdown
+  #description
+  Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
+  ::
+
+  ::card{icon=noto:rocket}
+  #title
+  Deploy anywhere
+  #description
+  Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com).
+  ::
+
+  ::card{icon=noto:puzzle-piece}
+  #title
+  Extensible.
+  #description
+  Customize the whole design, or add components using slots - you can make Docus your own.
+  ::
+::
diff --git a/docs/.docs/content/1.introduction/1.getting-started.md b/docs/.docs/content/1.introduction/1.getting-started.md
new file mode 100644
index 0000000..4c08c14
--- /dev/null
+++ b/docs/.docs/content/1.introduction/1.getting-started.md
@@ -0,0 +1,57 @@
+# Getting Started
+
+From your Markdown files to a deployed website in few minutes.
+
+## Play online
+
+You can start playing with Docus in your browser using Stackblitz:
+
+:button-link[Play on StackBlitz]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank}
+
+## Create a new project
+
+1. Start a fresh Docus project with:
+
+```bash [npx]
+npx nuxi@latest init docs -t themes/docus
+```
+
+2. Install the dependencies in the `docs` folder:
+
+::code-group
+
+  ```bash [npm]
+  npm install
+  ```
+
+  ```bash [yarn]
+  yarn install
+  ```
+
+  ```bash [pnpm]
+  pnpm install --shamefully-hoist
+  ```
+
+::
+
+3. Run the `dev` command to start Docus in development mode:
+
+::code-group
+
+```bash [npm]
+npm run dev
+```
+
+```bash [yarn]
+yarn dev
+```
+
+```bash [pnpm]
+pnpm run dev
+```
+
+::
+
+::alert{type="success"}
+✨ Well done! A browser window should automatically open for <http://localhost:3000>
+::
diff --git a/docs/.docs/content/1.introduction/2.project-structure.md b/docs/.docs/content/1.introduction/2.project-structure.md
new file mode 100644
index 0000000..1446a52
--- /dev/null
+++ b/docs/.docs/content/1.introduction/2.project-structure.md
@@ -0,0 +1,21 @@
+# Project Structure
+
+Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.
+
+## Directory Structure
+
+This is the minimal directory structure to get an up and running Docus website.
+
+```bash
+content/
+  index.md
+app.config.ts
+nuxt.config.ts
+```
+
+The `content/` directory is where you [write Markdown pages](/introduction/writing-pages).
+
+The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design.
+
+
+The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration).
diff --git a/docs/.docs/content/1.introduction/3.writing-pages.md b/docs/.docs/content/1.introduction/3.writing-pages.md
new file mode 100644
index 0000000..a321324
--- /dev/null
+++ b/docs/.docs/content/1.introduction/3.writing-pages.md
@@ -0,0 +1,41 @@
+# Writing Pages
+
+Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
+
+Each Markdown pages in the `content/` folder will be mapped to a route.
+
+| File                     | Generated route       |
+| ------------------------ | :-------------------- |
+| `index.md`               | `/`                   |
+| `about.md`               | `/about`              |
+| `blog/index.md`          | `/blog`               |
+| `blog/hello.md`          | `/blog/hello`         |
+| `1.guide/2.installation` | `/guide/installation` |
+
+## Frontmatter
+
+Docus supports multiple Front-matter attributes for pages.
+
+```md [index.md]
+---
+title: "Get Started"
+description: "Let's learn how to use my amazing module."
+---
+```
+
+| **Key**                 | **Type**  | **Default** | **Description**                                               |
+| ----------------------- | --------- | ----------- | ------------------------------------------------------------- |
+| `layout`                | `string`  | `default`   | Use any layout name like you would in `definePageMeta()`      |
+| `title`                 | `string`  |             | Defines the page title and H1 in docs pages                   |
+| `description`           | `string`  |             | Defines the page description and excerpt in docs pages        |
+| `redirect`              | `string`  |             | A route path to redirect                                      |
+| `image`                 | `object`  |             | OpenGraph cover image                                         |
+| **Docs layout options** |           |             |                                                               |
+| `aside`                 | `boolean` |             | Toggles the visibility of aside navigation                    |
+| `toc`                   | `boolean` |             | Toggles the visibility of table of contents                   |
+| `header`                | `boolean` |             | Toggles the visibility of the page header                     |
+| `bottom`                | `boolean` |             | Toggles the visibility of page bottom section                 |
+| **Navigation options**  |           |             |                                                               |
+| `navigation`            | `boolean` |             | Toggles the visibility of the page or directory in navigation |
+| `navigation.title`      | `string`  |             | Changes the name of the page or directory in navigation       |
+| `navigation.icon`       | `string`  |             | Changes the icon of the page or directory in navigation       |
diff --git a/docs/.docs/content/1.introduction/4.configuration.md b/docs/.docs/content/1.introduction/4.configuration.md
new file mode 100644
index 0000000..8ea9b0c
--- /dev/null
+++ b/docs/.docs/content/1.introduction/4.configuration.md
@@ -0,0 +1,130 @@
+# Configuration
+
+Learn how to configure Docus.
+
+::code-group
+
+```ts [Minimal app.config.ts]
+export default defineAppConfig({
+  docus: {
+    title: 'Docus',
+    description: 'My Docus Project',
+    url: 'http://docus.dev'
+  }
+})
+```
+
+```ts [Complete app.config.ts]
+export default defineAppConfig({
+  docus: {
+    title: 'Docus',
+    description: 'My Docus Project',
+    url: 'http://docus.dev',
+    image: '/social-card-preview.png',
+    socials: {
+      twitter: '@docus_',
+      github: 'nuxtlabs/docus',
+    },
+    github: {
+      root: 'content',
+      edit: true,
+      contributors: false
+    },
+    layout: 'default',
+    aside: {
+      level: 1,
+      filter: [],
+    },
+    header: {
+      title: false,
+      logo: true,
+      showLinkIcon: false
+    },
+    footer: {
+      credits: {
+        icon: 'IconDocus',
+        text: 'Powered by Docus',
+        href: 'https://docus.dev',
+      },
+      textLinks: [
+        {
+          text: 'NuxtJS',
+          href: 'https://nuxtjs.org',
+          target: '_blank'
+        }
+      ],
+      iconLinks: [
+        {
+          label: 'NuxtJS',
+          href: 'https://nuxtjs.org',
+          component: 'IconNuxtLabs',
+        },
+        {
+          label: 'Vue Telescope',
+          href: 'https://vuetelescope.com',
+          component: 'IconVueTelescope',
+        },
+      ],
+    }
+  }
+})
+```
+
+::
+
+| **Key**                      | **Type**   | **Default**      | **Description**                                                     |
+| ---------------------------- | ---------- | ---------------- | ------------------------------------------------------------------- |
+| `title`                      | `string`   | Docus            | Website title                                                       |
+| `titleTemplate`              | `string`   | Docus            | Website title template                                              |
+| `description`                | `string`   | My Docus Project | Website description                                                 |
+| `url`                        | `string`   |                  | Website URL                                                         |
+| `layout`                     | `string`   | default          | Fallback layout to use (supports `default` or `page`)               |
+| **Socials**                  |            |                  |                                                                     |
+| `socials`                    | `object`   | `{}`             | Social links                                                        |
+| `socials.github`             | `string`   |                  | The repository to use on GitHub links                               |
+| `socials.twitter`            | `string`   |                  | The account to use on Twitter links                                 |
+| `socials.youtube`            | `string`   |                  | The channel to use on Youtube links                                 |
+| `socials.instagram`          | `string`   |                  | The account to use on Instagram links                               |
+| `socials.facebook`           | `string`   |                  | The account to use on Facebook links                                |
+| `socials.medium`             | `string`   |                  | The account to use on Medium links                                  |
+| `socials.[social]`           | `object`   |                  | Override social or display custom one                               |
+| `socials.[social].label`     | `string`   |                  | A label to use for the social                                       |
+| `socials.[social].icon`      | `string`   |                  | A icon to use for the social                                        |
+| `socials.[social].href`      | `string`   |                  | A link to use for the social                                        |
+| **Header**                   |            |                  |                                                                     |
+| `header`                     | `object`   |                  | Header configuration                                                |
+| `header.logo`                | `boolean`  |                  | Whether or not to use `Logo.vue` as the header logo                 |
+| `header.title`               | `string`   |                  | If set to a string, will be used in the header                      |
+| `header.showLinkIcon`        | `boolean`  |                  | If set to `true` links icons will show in the header                |
+| `header.exclude`             | `string[]` |                  | An array of path to exclude out from the header navigation          |
+| `header.fluid`               | `boolean`  | `true`           | Make header `Container` fluid                                       |
+| **Main**                     |            |                  |                                                                     |
+| `main`                       | `object`   |                  | Main configuration                                                  |
+| `main.fluid`                 | `boolean`  | `true`           | Make main content `Container` fluid                                 |
+| `main.padded`                | `boolean`  | `true`           | Make main content `Container` padded                                |
+| **Aside**                    |            |                  |                                                                     |
+| `aside`                      | `object`   |                  | Aside configuration                                                 |
+| `aside.level`                | `string`   | 0                | Aside base level of nesting                                         |
+| `aside.collapsed`            | `boolean`  |                  | Will be used as default value for collapsible navigation categories |
+| `aside.exclude`              | `string[]` |                  | An array of path to exclude out from the aside navigation           |
+| **Footer**                   |            |                  |                                                                     |
+| `footer`                     | `object`   |                  | Footer configuration                                                |
+| `footer.credits`             | `object`   |                  | An object defining the bottom left credits                          |
+| `footer.credits.icon`        | `object`   |                  | The icon to use for the credits                                     |
+| `footer.credits.text`        | `object`   |                  | The text to use for the credits                                     |
+| `footer.textLinks`           | `array`    | `[]`             | An array of texts to display at the center of footer                |
+| `footer.textLinks[0].text`   | `string`   |                  | The text to display                                                 |
+| `footer.textLinks[0].href`   | `string`   |                  | A link to use for the text                                          |
+| `footer.textLinks[0].target` | `string`   | `_self`          | Where to display the linked URL, as the name for a browsing context |
+| `footer.iconLinks`           | `array`    | `[]`             | An array of icons to display in the footer                          |
+| `footer.iconLinks[0].label`  | `string`   |                  | A label to use for the icon                                         |
+| `footer.iconLinks[0].href`   | `string`   |                  | A link to use for the icon                                          |
+| `footer.iconLinks[0].icon`   | `string`   |                  | The icon to use (can be a component name)                           |
+| `footer.fluid`               | `boolean`  | `true`           | Make footer `Container` fluid                                       |
+| **GitHub**                   |            |                  |                                                                     |
+| `github`                     | `object`   | `false`          | GitHub integration configuration                                    |
+| `github.dir`                 | `string`   |                  | Directory containing the files to be edited                         |
+| `github.branch`              | `string`   |                  | Branch to start editing                                             |
+| `github.repo`                | `string`   |                  | Name of the GitHub repo to edit files                               |
+| `github.owner`               | `string`   |                  | Owner of the repo                                                   |
+| `github.edit`                | `boolean`  |                  | Toggle "Edit this page on Github" component on documentation pages  |
diff --git a/docs/.docs/content/1.introduction/_dir.yml b/docs/.docs/content/1.introduction/_dir.yml
new file mode 100644
index 0000000..ff0894d
--- /dev/null
+++ b/docs/.docs/content/1.introduction/_dir.yml
@@ -0,0 +1,2 @@
+icon: ph:star-duotone
+navigation.redirect: /introduction/getting-started
diff --git a/docs/.docs/content/2.api/1.components.md b/docs/.docs/content/2.api/1.components.md
new file mode 100644
index 0000000..d22340f
--- /dev/null
+++ b/docs/.docs/content/2.api/1.components.md
@@ -0,0 +1,693 @@
+# Components
+
+Discover every component you can use in your content.
+
+
+## `<Alert />`
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    ::alert{type="info" style="margin-top: 0;"}
+    Check out an **info** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="success"}
+    Check out a **success** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="warning"}
+    Check out a **warning** alert with `code` and a [link](/).
+    ::
+
+    ::alert{type="danger" style="margin-bottom: 0;"}
+    Check out a **danger** alert with `code` and a [link](/).
+    ::
+  ::
+
+  ```md [Code]
+  ::alert{type="info"}
+  Check out an **info** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="success"}
+  Check out a **success** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="warning"}
+  Check out a **warning** alert with `code` and a [link](/).
+  ::
+
+  ::alert{type="danger"}
+  Check out a **danger** alert with `code` and a [link](/).
+  ::
+  ```
+
+::
+
+<!-- 
+::props{of="Alert"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Alert.vue"
+---
+::
+
+---
+
+## `<Badge />`
+
+`<Badge />` support same types as `<Alert />`.
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    ::div{style="display:flex; gap: 1rem;"}
+      :badge[v1.2]
+
+      :badge[Deprecated]{type="warning"}
+
+      ::badge{type="danger"}
+      Not found!
+      ::
+    ::
+  ::
+
+  ```md [Code]
+  :badge[v1.2]
+  
+  :badge[Deprecated]{type="warning"}
+  
+  ::badge{type="danger"}
+  Not found!
+  ::
+  ```
+
+::
+
+<!-- 
+::props{of="Badge"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Badge.vue"
+---
+::
+
+---
+
+## `<BlockHero />`
+
+::code-group
+
+   ::code-block{label="Preview"}
+    ::block-hero
+    ---
+    cta:
+      - Get started
+      - /get-started
+    secondary:
+      - Open on GitHub →
+      - https://github.com/nuxtlabs/docus
+    snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
+    ---
+    #title
+    Document-driven framework
+  
+    #description
+    Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.
+    ::
+   ::
+
+   ```md [Code]
+   ::block-hero
+   ---
+   cta:
+     - Get started
+     - /get-started
+   secondary:
+     - Open on GitHub →
+     - https://github.com/nuxtlabs/docus
+   snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
+   ---
+   #title
+   Document-driven framework
+ 
+   #description
+   Docus reconciles content creators and developers by offering to both the best tools to create and scale content-based websites.
+   ::
+   ```
+
+::
+
+<!-- 
+::props{of="BlockHero"}
+::
+-->
+
+::source-link
+---
+source: "components/content/BlockHero.vue"
+---
+::
+
+---
+
+## `<ButtonLink />`
+::code-group
+
+  ::code-block{label="Preview" preview}
+    :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
+  ::
+
+  ```md [Code]
+  :button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
+  ```
+
+::
+
+<!-- 
+::props{of="Alert"}
+::
+-->
+
+::source-link
+---
+source: "components/content/ButtonLink.vue"
+---
+::
+
+---
+
+## `<Callout />`
+
+`<Callout />` support same types as `<Alert />`.
+
+::code-group
+
+  ::code-block{label="Preview"}
+    ::callout
+    #summary
+    This is a callout! Click me to open.
+
+    #content
+    This is the content of the callout.
+    ::
+
+    ::callout{type="warning"}
+    #summary
+    This is a callout! Click me to open.
+
+    #content
+    This is the content of the callout.
+    ::
+  ::
+
+   ```md [Code]
+   ::callout
+   #summary
+   This is a callout! Click me to open.
+
+   #content
+   This is the content of the callout.
+   ::
+    
+   ::callout{type="warning"}
+   #summary
+   This is a callout! Click me to open.
+
+   #content
+   This is the content of the callout.
+   ::
+   ```
+
+::
+
+<!-- 
+::props{of="Callout"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Callout.vue"
+---
+::
+
+---
+
+## `<Card />`
+
+::code-group
+
+  ::code-block{label="Preview"}
+    ::card
+    ---
+    icon: logos:nuxt-icon
+    ---
+    #title
+    Nuxt Architecture.
+    #description
+    Based on **Nuxt 3** and **Nuxt Content**. :br
+    Use Nuxt to build a static site, or a serverless app.
+    ::
+  ::
+
+  ```md [Code]
+   ::card{icon="logos:nuxt-icon"}
+   #title
+   Nuxt Architecture.
+   #description
+   Based on **Nuxt 3** and **Nuxt Content**. :br
+   Use Nuxt to build a static site, or a serverless app.
+   ::
+   ```
+
+::
+
+<!-- 
+::props{of="Card"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Card.vue"
+---
+::
+
+---
+
+## `<CardGrid />`
+
+::code-group
+  
+  ::code-block{label="Preview"}
+    ::card-grid
+    #title
+    What's included?
+
+    #root
+    :ellipsis
+
+    #default
+      ::card
+      #title
+      Nuxt Architecture.
+      #description
+      Harness the full power of Nuxt and the Nuxt ecosystem.
+      ::
+      ::card
+      #title
+      Vue Components.
+      #description
+      Use built-in components (or your own!) inside your content.
+      ::
+      ::card
+      #title
+      Write Markdown.
+      #description
+      Enjoy the ease and simplicity of Markdown and discover MDC syntax.
+      ::
+    ::
+  ::
+
+  ```md [Code]
+  ::card-grid
+  #title
+  What's included
+
+  #root
+  :ellipsis
+
+  #default
+    ::card
+    #title
+    Nuxt Architecture.
+    #description
+    Harness the full power of Nuxt and the Nuxt ecosystem.
+    ::
+    ::card
+    #title
+    Vue Components.
+    #description
+    Use built-in components (or your own!) inside your content.
+    ::
+    ::card
+    #title
+    Write Markdown.
+    #description
+    Enjoy the ease and simplicity of Markdown and discover MDC syntax.
+    ::
+  ::
+  ```
+
+::
+
+<!-- 
+::props{of="CardGrid"}
+::
+-->
+
+::source-link
+---
+source: "components/content/CardGrid.vue"
+---
+::
+
+---
+
+## `<CodeGroup />`
+
+This component uses `slots` to create a tab panel of your code examples or preview.
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    ::code-group
+      ```bash [Yarn]
+      yarn add docus
+      ```
+
+      ```bash [NPM]
+      npm install docus
+      ```
+    ::
+  ::
+
+  ```md [Code]
+  ::code-group
+    ```bash [Yarn]
+    yarn add docus
+    ```
+    ```bash [NPM]
+    npm install docus
+    ```
+  ::
+  ```
+
+::
+
+::source-link
+---
+source: "components/content/CodeGroup.vue"
+---
+::
+
+---
+
+## `<CodeBlock />`
+
+To be used inside a `<CodeGroup />` component to display a preview of some rendered code.
+
+::code-group
+
+::code-block{label="Preview" preview}
+  ::badge
+  Hello World!
+  ::
+::
+
+```md [Code]
+/* Added as a child of `<CodeGroup />` */
+
+::code-block{label="Preview" preview}
+  ::badge
+  Hello World!
+  ::
+::
+```
+
+::
+
+<!-- 
+::props{of="CodeBlock"}
+::
+-->
+
+::source-link
+---
+source: "components/content/CodeBlock.vue"
+---
+::
+
+---
+
+## `<CopyButton />`
+
+
+::code-group
+
+::code-block{label="Preview" preview}
+  :copy-button{content="hey!"}
+::
+
+```md [Code]
+:copy-button{content="hey!"}
+```
+
+::
+
+<!-- 
+::props{of="CodeBlock"}
+::
+-->
+
+::source-link
+---
+source: "components/content/CopyButton.vue"
+---
+::
+
+---
+
+## `<Icon />`
+
+Icon component gives you access to all **100,000+** icons from [icones.js.org](https://icones.js.org).
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+  :icon{name="logos:nuxt-icon"}
+  :icon{name="logos:vue"}
+  :icon{name="logos:nuxt-icon"}
+  ::
+
+  ```md [Code]
+  :icon{name="logos:nuxt-icon"}
+  :icon{name="logos:vue"}
+  :icon{name="logos:nuxt-icon"}
+  ```
+
+::
+
+<!-- 
+::props{of="Icon"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Icon.vue"
+---
+::
+
+---
+
+## `<List />`
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    ::list{type="primary"}
+    - **Important**
+    - Always
+    ::
+
+    ::list{type="success"}
+    - Amazing
+    - Congrats
+    ::
+
+    ::list{type="info"}
+    - Do you know?
+    - You can also do this
+    ::
+
+    ::list{type="warning"}
+    - Be careful
+    - Use with precautions
+    ::
+
+    ::list{type="danger"}
+    - Drinking too much
+    - Driving drunk
+    ::
+
+  ::
+
+  ```md [Code]
+  ::list{type="primary"}
+  - **Important**
+  - Always
+  ::
+
+  ::list{type="success"}
+  - Amazing
+  - Congrats
+  ::
+
+  ::list{type="info"}
+  - Do you know?
+  - You can also do this
+  ::
+
+  ::list{type="warning"}
+  - Be careful
+  - Use with precautions
+  ::
+
+  ::list{type="danger"}
+  - Drinking too much
+  - Driving drunk
+  ::
+  ```
+
+::
+
+<!-- 
+::props{of="List"}
+::
+-->
+
+::source-link
+---
+source: "components/content/List.vue"
+---
+::
+
+<!--
+---
+
+## `<Props />`
+
+The props component lets you display the available props from any other component in your project.
+
+It is powered by [nuxt-component-meta](https://github.com/nuxtlabs/nuxt-component-meta).
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    ::props{of="Icon"}
+    ::
+  ::
+
+  ```md [Code]
+  ::props{of="Icon"}
+  ::
+  ```
+
+::
+
+::props{of="Props"}
+::
+
+::source-link
+---
+source: "components/content/Props.vue"
+---
+::
+
+---
+-->
+## `<Sandbox />`
+
+Embed CodeSandbox/StackBlitz easily in your documentation with great performances.
+
+Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to load when visible in the viewport.
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
+  ::
+
+  ```md [Code]
+  :sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
+  ```
+
+::
+
+<!-- 
+::props{of="Sandbox"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Sandbox.vue"
+---
+::
+
+---
+
+## `<Terminal />`
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    :terminal{content="nuxi build"}
+  ::
+
+  ```md [Code]
+  :terminal{content="nuxi build"}
+  ```
+
+::
+
+<!-- 
+::props{of="Terminal"}
+::
+-->
+
+::source-link
+---
+source: "components/content/Terminal.vue"
+---
+::
+
+---
+
+## `<VideoPlayer />`
+
+::code-group
+
+  ::code-block{label="Preview" preview}
+    ::div
+      :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
+    ::
+  ::
+
+  ```md [Code]
+  ::div
+    :video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
+  ::
+  ```
+
+::
+
+<!-- 
+::props{of="VideoPlayer"}
+::
+-->
+
+::source-link
+---
+source: "components/content/VideoPlayer.vue"
+---
+::
diff --git a/docs/.docs/content/2.api/2.composables.md b/docs/.docs/content/2.api/2.composables.md
new file mode 100644
index 0000000..4c0bea2
--- /dev/null
+++ b/docs/.docs/content/2.api/2.composables.md
@@ -0,0 +1,88 @@
+# Composables
+
+Discover the Docus composables to use in your custom Vue components and pages.
+
+## `useDocus()`
+
+`useDocus()`{lang=ts} gives access to docus runtime config, all default values and your custom config from `app.config.ts`
+
+- `config` refers to the merged config of the current page.
+
+`main`, `header`, `aside`, `footer` and `titleTemplate` can be set from `_dir.yml` and any `page.md` file.
+
+The configs in `app.config` file will be used as defaults.
+
+```vue
+<script setup>
+const { config } = useDocus()
+</script>
+
+<template>
+  <div>
+    <h1>{{ config.title }}</h1>
+    <p>{{ config.description }}</p>
+  </div>
+</template>
+```
+
+- `tree` refers to the current navigation tree that is displayed in the `aside` component.
+
+```vue
+<script setup>
+const { tree } = useDocus()
+</script>
+
+<template>
+  <DocsAsideTree :links="tree" />
+</template>
+```
+
+::source-link
+---
+source: "composables/useDocus.ts"
+---
+::
+
+## `useMenu()`
+
+`useMenu()` gives access to `$menu` plugin controlling mobile navigation globally.
+
+```ts
+const {
+  // Is menu visible
+  visible,
+  // Close menu function
+  close,
+  // Open menu function
+  open,
+  // Toggle menu function
+  toggle
+} = useMenu()
+```
+
+::source-link
+---
+source: "composables/useMenu.ts"
+---
+::
+
+## `useScrollspy()`
+
+`useScrollspy()` is used in `docs` layout to make the ToC display the currently visible headings.
+
+```ts
+const {
+  // Headings on the page
+  visibleHeadings,
+  // Active headings (for the current page)
+  activeHeadings,
+  // Update headings (an array of DOM nodes)
+  updateHeadings
+} = useScrollspy()
+```
+
+::source-link
+---
+source: "composables/useScrollspy.ts"
+---
+::
diff --git a/docs/.docs/content/2.api/3.layouts.md b/docs/.docs/content/2.api/3.layouts.md
new file mode 100644
index 0000000..25dc458
--- /dev/null
+++ b/docs/.docs/content/2.api/3.layouts.md
@@ -0,0 +1,43 @@
+# Layouts
+Docus provides multiple built-in layouts for displaying your Markdown pages.
+
+## `default`
+
+The default layout for every page created in the project. This layout renders multiple section alongside the content:
+
+- Aside navigation menu (togglable with `aside: false/true`)
+- Page bottom section (togglable with `bottom: false/true`)
+- Table of content (togglable with `toc: false/true`)
+
+```md [index.md]
+---
+aside: true
+bottom: true
+toc: false
+---
+
+Your awesome content
+```
+
+Current page is live sample of default layout.
+
+## `page`
+
+`page` layout is content focused layout. This layout does not render aside menu of table of contents.
+
+
+This layout accept some configuration from content front-matter.
+
+- `fluid`: By setting `fluid: true` in content front-matter the content will be rendered in full width.
+- `constrainedClass`: Using this option you can modify layout container look. Like constraining layout width of changing the background.
+- `padded`: Setting `padded: true` in front-matter will add horizontal padding in the layout.
+
+```md [index.md]
+---
+title: Home
+layout: page
+fluid: true
+---
+```
+
+Check [Home page](/) as live sample of page layout
diff --git a/docs/.docs/content/2.api/_dir.yml b/docs/.docs/content/2.api/_dir.yml
new file mode 100644
index 0000000..b340141
--- /dev/null
+++ b/docs/.docs/content/2.api/_dir.yml
@@ -0,0 +1,2 @@
+title: 'API'
+icon: heroicons-outline:bookmark-alt