✨优化文档

4 files changed, 826 insertions, 0 deletions

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