movie-web/providers
1
0
Fork 0
mirror of https://github.com/movie-web/providers.git synced 2025-09-13 18:13:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initialize docs

Browse Source
This commit is contained in:
mrjvs
2023-09-14 20:39:04 +02:00
parent d24146e114
commit 787862e10c
29 changed files with 11166 additions and 1443 deletions
Download Patch File Download Diff File Expand all files Collapse all files

693
.docs/content/2.api/1.components.md Normal file
View File

@@ -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
- /introduction/getting-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"
---
::

88
.docs/content/2.api/2.composables.md Normal file
View File

@@ -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"
---
::

43
.docs/content/2.api/3.layouts.md Normal file
View File

@@ -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

2
.docs/content/2.api/_dir.yml Normal file
View File

@@ -0,0 +1,2 @@
title: 'API'
icon: heroicons-outline:bookmark-alt