✨优化文档

1 files changed, 693 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"
+---
+::