Skip to content

Commit

Permalink
docs: update components
Browse files Browse the repository at this point in the history
  • Loading branch information
@atinux
atinux committed Nov 16, 2022
1 parent 636bfed commit 408fc4a
Showing 1 changed file with 59 additions and 126 deletions.
185 changes: 59 additions & 126 deletions .docs/content/2.api/1.components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,52 +58,17 @@ source: "components/content/Alert.vue"

---

## `<ArticleHero />`

Uses the current page to display an article heading.

To be used with `page` layout.

::code-group

::code-block{label="Preview"}
:article-hero
::

```md [Code]
:article-hero
```

::

<!--
::props{of="ArticleHero"}
::
-->

::source-link
---
source: "components/content/ArticleHero.vue"
---
::

---

## `<Badge />`

`<Badge />` support same types as `<Alert />`.

::code-group

::code-block{label="Preview" preview}
::div{class="flex items-center gap-4"}
::badge
v1.2
::
::div{style="display:flex; gap: 1rem;"}
:badge[v1.2]

::badge{type="warning"}
Deprecated
::
:badge[Deprecated]{type="warning"}

::badge{type="danger"}
Not found!
Expand All @@ -112,18 +77,12 @@ source: "components/content/ArticleHero.vue"
::

```md [Code]
::div{class="flex items-center gap-4"}
::badge
v1.2
::

::badge{type="warning"}
Deprecated
::

::badge{type="danger"}
Not found!
::
:badge[v1.2]

:badge[Deprecated]{type="warning"}

::badge{type="danger"}
Not found!
::
```

Expand Down Expand Up @@ -203,11 +162,11 @@ source: "components/content/BlockHero.vue"
::code-group

::code-block{label="Preview" preview}
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank .mr-2}
: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 .mr-2}
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxtlabs/docus-starter" blank}
```

::
Expand Down Expand Up @@ -294,22 +253,17 @@ source: "components/content/Callout.vue"
#title
Nuxt Architecture.
#description
Based on **Nuxt 3** and **Nuxt Content**.
<br/>
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
---
::card{icon="logos:nuxt-icon"}
#title
Nuxt Architecture.
#description
Based on **Nuxt 3** and **Nuxt Content**.
<br/>
Based on **Nuxt 3** and **Nuxt Content**. :br
Use Nuxt to build a static site, or a serverless app.
::
```
Expand All @@ -336,31 +290,29 @@ source: "components/content/Card.vue"
::code-block{label="Preview"}
::card-grid
#title
What's included
What's included?

#root
:ellipsis

#default
::card
---
description: Harness the full power of Nuxt and the Nuxt ecosystem.
title: Nuxt Architecture.
---
#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.
---
#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.
---
#title
Write Markdown.
#description
Enjoy the ease and simplicity of Markdown and discover MDC syntax.
::
::
::
Expand All @@ -374,26 +326,24 @@ source: "components/content/Card.vue"
:ellipsis

#default
::card
---
description: Harness the full power of Nuxt and the Nuxt ecosystem.
title: Nuxt Architecture.
---
::

::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.
---
::
::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.
::
::
```

Expand Down Expand Up @@ -435,7 +385,6 @@ This component uses `slots` to create a tab panel of your code examples or previ
```bash [Yarn]
yarn add docus
```

```bash [NPM]
npm install docus
```
Expand Down Expand Up @@ -495,13 +444,11 @@ source: "components/content/CodeBlock.vue"
::code-group

::code-block{label="Preview" preview}
::copy-button{content="hey!"}
::
:copy-button{content="hey!"}
::

```md [Code]
::copy-button{content="hey!"}
::
:copy-button{content="hey!"}
```

::
Expand All @@ -526,21 +473,15 @@ Icon component gives you access to all **100,000+** icons from [icones.js.org](h
::code-group

::code-block{label="Preview" preview}
::icon{name="logos:nuxt-icon" .mb-4}
::
::icon{name="logos:vue" .mb-4}
::
::icon{name="logos:nuxt-icon"}
::
:icon{name="logos:nuxt-icon"}
:icon{name="logos:vue"}
:icon{name="logos:nuxt-icon"}
::

```md [Code]
::icon{name="logos:nuxt-icon" .mb-4}
::
::icon{name="logos:vue" .mb-4}
::
::icon{name="logos:nuxt-icon"}
::
:icon{name="logos:nuxt-icon"}
:icon{name="logos:vue"}
:icon{name="logos:nuxt-icon"}
```

::
Expand Down Expand Up @@ -673,13 +614,11 @@ Using the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/AP
::code-group

::code-block{label="Preview" preview}
::sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
::
: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"}
::
:sandbox{src="https://codesandbox.io/embed/nuxt-content-l164h?hidenavigation=1&theme=dark"}
```

::
Expand All @@ -702,13 +641,11 @@ source: "components/content/Sandbox.vue"
::code-group

::code-block{label="Preview" preview}
::terminal{content="nuxi build"}
::
:terminal{content="nuxi build"}
::

```md [Code]
::terminal{content="nuxi build"}
::
:terminal{content="nuxi build"}
```

::
Expand All @@ -732,15 +669,13 @@ source: "components/content/Terminal.vue"

::code-block{label="Preview" preview}
::div{class="flex items-center justify-center w-full"}
::video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::
:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::
::

```md [Code]
::div{class="flex items-center justify-center w-full"}
::video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::
:video-player{src="https://www.youtube.com/watch?v=o9e12WbKrd8"}
::
```

Expand All @@ -756,5 +691,3 @@ source: "components/content/Terminal.vue"
source: "components/content/VideoPlayer.vue"
---
::

---

1 comment on commit 408fc4a

@vercel
Copy link

@vercel vercel bot commented on 408fc4a Nov 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docus – ./

docus-theme.vercel.app
docus-nuxtlabs.vercel.app
docus.dev
docus-git-dev-nuxtlabs.vercel.app
www.docus.dev

Please sign in to comment.