Skip to content

Commit

Permalink
Merge branch 'main' into feat/new-syntax
Browse files Browse the repository at this point in the history
  • Loading branch information
@farnabaz
farnabaz committed Jun 2, 2021
2 parents bfddc97 + c3d9a25 commit 2f2960b
Show file tree
Hide file tree
Showing 3 changed files with 142 additions and 132 deletions.
266 changes: 135 additions & 131 deletions docs/content/2.usage/2.components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,123 +4,125 @@ You can create your own Vue components in the `components/` folder. Check out [t

### `alert`

::code-group
:::::code-group

::code-block{label="Preview" preview}
::alert{type="info" style="margin-top: 0;"}
Check out an **info** alert with `code` and a [link](/).
::
::::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="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="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](/).
::
::
:::alert{type="danger" style="margin-bottom: 0;"}
Check out a **danger** alert with `code` and a [link](/).
:::
::::

```md [Code]
::alert{type="info" style="margin-top: 0;"}
Check out an **info** alert with `code` and a [link](/).
::
```md [Code]
:::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="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="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](/).
::
```
:::alert{type="danger" style="margin-bottom: 0;"}
Check out a **danger** alert with `code` and a [link](/).
:::
```

::
:::::

:props{of="components/atoms/Alert"}
::props{of="components/atoms/Alert"}

### `list`

::code-group
::code-block{label="Preview" active preview}
:::::code-group
::::code-block{label="Preview" active preview}

::list{type="primary"}
- **Important**
- Always
::
:::list{type="primary"}
- **Important**
- Always
:::

::list{type="success"}
- Amazing
- Congrats
::
:::list{type="success"}
- Amazing
- Congrats
:::

::list{type="info"}
- Do you know?
- You can also do this
::
:::list{type="info"}
- Do you know?
- You can also do this
:::

::list{type="warning"}
- Be careful
- Use with precautions
::
:::list{type="warning"}
- Be careful
- Use with precautions
:::

::list{type="danger"}
- Drinking too much
- Driving drunk
::
:::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
::
```
```md [Code]
:::list{type="primary"}
- **Important**
- Always
:::

:::list{type="success"}
- Amazing
- Congrats
:::

::
:::list{type="info"}
- Do you know?
- You can also do this
:::

:props{of="components/atoms/List"}
:::list{type="warning"}
- Be careful
- Use with precautions
:::

:::list{type="danger"}
- Drinking too much
- Driving drunk
:::
```

:::::

::props{of="components/atoms/List"}

### `badge`

::code-group
::code-block{label="Preview" active preview}
:badge[v1.2+]
::
::::code-group
:::code-block{label="Preview" active preview}

```md [Code]
:badge[v1.2+]
```
:badge[v1.2+]

:::

```md [Code]
:badge[v1.2+]
```

::
::::

### `code-group`

Expand All @@ -133,102 +135,104 @@ This component uses `slots`. See [`code-block`](#code-block) below.
````html
ℹ️ Backslashes are for demonstration

::code-group
::::code-group

::code-block{label="Yarn" active}
:::code-block{label="Yarn" active}
```bash
yarn add docus
\```
::
:::

```bash [NPM]
npm install docus
\```

::
::::
````

**Result**

::code-group
::::code-group

```bash [Yarn]
yarn add docus
```

```bash [NPM]
npm install docus
```
:::code-block{label="Yarn" active}
```bash
yarn add docus
```
:::

```bash [NPM]
npm install docus
```

::
::::

:props{of="components/atoms/CodeBlock"}
::props{of="components/atoms/CodeBlock"}

### `inject-content`

Cross-reference other files within your documentation (such as example code you want to include on multiple pages or across all languages).

::code-group
::code-block{label="Preview" active preview}
:inject-content{query="2.usage/_example"}
::
::::code-group
:::code-block{label="Preview" active preview}
::inject-content{query="2.usage/_example"}
:::

```md [Code]
:inject-content{query="2.usage/_example"}
::inject-content{query="2.usage/_example"}
```
::
::::

:props{of="components/atoms/InjectContent"}
::props{of="components/atoms/InjectContent"}

### `code-sandbox`

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

:props{of="components/atoms/CodeSandbox"}
::props{of="components/atoms/CodeSandbox"}

### `tweet`

Embed tweets easily in your documentation - with great performance. Tweets will be embedded statically without using any runtime JS.

::code-group
::code-block{label="Preview" active preview}
::::code-group
:::code-block{label="Preview" active preview}

:tweet{id="1314628331841761289"}
::tweet{id="1314628331841761289"}

::
:::

```md [Code]
:tweet{id="1314628331841761289"}
::tweet{id="1314628331841761289"}
```

::
::::

<!-- <props of="atoms/Tweet"></props> -->

### `props`

List accepted properties of a component.

::code-group
::code-block{label="Preview" active preview}
::::code-group
:::code-block{label="Preview" active preview}

:props{of="components/atoms/CodeBlock"}
::props{of="components/atoms/CodeBlock"}

::
:::

```md [Code]
:props{of="components/atoms/CodeBlock"}
::props{of="components/atoms/CodeBlock"}
```

::
::::

:props{of="components/atoms/Props"}
::props{of="components/atoms/Props"}
3 changes: 2 additions & 1 deletion docs/content/3.more/1.example.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
---
csb_link: https://codesandbox.io/embed/docus-starter-1xsm7?hidenavigation=1&theme=dark
fullscreen: true
---

# Example

> Live example of Docus on CodeSandbox :eyes:
:code-sandbox{src="https://codesandbox.io/embed/docus-starter-1xsm7?hidenavigation=1&theme=dark"}
<code-sandbox :src="csb_link"></code-sandbox>
5 changes: 5 additions & 0 deletions docs/content/templates/pricing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@ template: marketing
footer: false
---

<<<<<<< HEAD
::pricing-block
=======
:::pricing-block{yml}

>>>>>>> main
plans:
monthly:
base: true
Expand Down

0 comments on commit 2f2960b

Please sign in to comment.