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

basic template for docs

Browse Source
This commit is contained in:
mrjvs
2023-09-14 21:07:35 +02:00
parent 787862e10c
commit 9c6b61b4f9
16 changed files with 103 additions and 1248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
.docs/content/0.index.md
View File

@@ -1,50 +1,25 @@
---
title: Home
title: "@movie-web/providers | For all your media scraping needs"
navigation: false
layout: page
main:
fluid: false
---
:ellipsis{right=0px width=75% blur=150px}
::block-hero
---
cta:
- Get started
- /introduction/getting-started
- Get Started
- /guide/why-neat-config
secondary:
- Open on GitHub →
- https://github.com/nuxt-themes/docus
- https://github.com/movie-web/providers
snippet: npm i @movie-web/providers
---
#title
The best place to start your documentation.
@movie-web/providers
#description
Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.org) components and enjoy the power of [Nuxt](https://nuxt.com).
#extra
::list
- **+50 Components** ready to build rich pages
- **Docs** and **Page** layouts
- Start from a `README`, scale to a framework documentation
- Navigation and Table of Contents generation
- Fully configurable design system
- Leverages [**Typography**](https://typography.nuxt.space/) and [**Elements**](https://elements.nuxt.dev)
- Used on [Content Documentation](https://content.nuxtjs.org)
::
#support
::terminal
---
content:
- npx nuxi@latest init -t themes/docus
- cd docs
- npm install
- npm run dev
---
::
Easily scrape all sorts of media sites for content
::
::card-grid
@@ -52,48 +27,25 @@ Write pages in [Markdown](https://content.nuxtjs.org), use [Vue](https://vuejs.o
What's included
#root
:ellipsis{left=0px width=40rem top=10rem blur=140px}
:ellipsis
#default
::card{icon=logos:nuxt-icon}
::card{icon="vscode-icons:file-type-light-json"}
#title
Nuxt Architecture
Scrape popular streaming websites.
#description
Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem.
Don't settle for just one media site for you content, use everything that's available.
::
::card{icon=IconNuxtStudio}
::card{icon="codicon:source-control"}
#title
Nuxt Studio ready
Multi-platform.
#description
Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
Scrape from browser or server, whichever you prefer.
::
::card{icon=logos:vue}
::card{icon="logos:typescript-icon-round"}
#title
Vue Components
Easy to use.
#description
Use built-in components (or your own!) inside your content.
::
::card{icon=simple-icons:markdown}
#title
Write Markdown
#description
Enjoy the ease and simplicity of Markdown and discover [MDC syntax](https://content.nuxtjs.org/guide/writing/mdc).
::
::card{icon=noto:rocket}
#title
Deploy anywhere
#description
Zero config on [Vercel](https://vercel.com) or [Netlify](https://netlify.com). Choose between static generation, on-demand rendering (Node) or edge-side rendering on [CloudFlare workers](https://workers.cloudflare.com).
::
::card{icon=noto:puzzle-piece}
#title
Extensible.
#description
Customize the whole design, or add components using slots - you can make Docus your own.
Get started with scraping your favourite media sites with just 5 lines of code. Fully typed of course.
::
::

61
.docs/content/1.Guide/1.usage.md Normal file
View File

@@ -0,0 +1,61 @@
# Usage
Let's get started with `@movie-web/providers`. First lets install the package.
::code-group
```bash [NPM]
npm install @movie-web/providers
```
```bash [Yarn]
yarn add @movie-web/providers
```
```bash [PNPM]
pnpm install @movie-web/providers
```
::
## Scrape your first item
To get started with scraping on the **server**, first you have to make an instance of the providers.
::code-group
```ts [index.ts (server)]
import { makeProviders, makeDefaultFetcher, targets } from '@movie-web/providers';
// this is how the library will make http requests
const myFetcher = makeDefaultFetcher(fetch);
// make an instance of the providers library
const providers = makeProviders({
fetcher: myFetcher,
// will be played on a native video player
target: targets.NATIVE
})
```
::
Perfect, now we can start scraping a stream:
::code-group
```ts [index.ts (server)]
// fetch some data from TMDB
const media = {
type: 'movie',
title: "Hamilton",
releaseYear: 2020,
tmdbId: "556574"
}
const output = await providers.runAll({
media: media
})
if (!output) console.log("No stream found")
console.log(`stream url: ${output.stream.playlist}`)
```
::
::alert{type="info"}
Thats it! Next up: [check out some examples](/examples).
::

2
.docs/content/1.Guide/_dir.yml Normal file
View File

@@ -0,0 +1,2 @@
icon: ph:star-duotone
navigation.redirect: /guide/why-neat-config

57
.docs/content/1.introduction/1.getting-started.md
View File

@@ -1,57 +0,0 @@
# Getting Started
From your Markdown files to a deployed website in few minutes.
## Play online
You can start playing with Docus in your browser using Stackblitz:
:button-link[Play on StackBlitz]{size="small" icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt-themes/docus-starter" blank}
## Create a new project
1. Start a fresh Docus project with:
```bash [npx]
npx nuxi@latest init docs -t themes/docus
```
2. Install the dependencies in the `docs` folder:
::code-group
```bash [npm]
npm install
```
```bash [yarn]
yarn install
```
```bash [pnpm]
pnpm install --shamefully-hoist
```
::
3. Run the `dev` command to start Docus in development mode:
::code-group
```bash [npm]
npm run dev
```
```bash [yarn]
yarn dev
```
```bash [pnpm]
pnpm run dev
```
::
::alert{type="success"}
✨ Well done! A browser window should automatically open for <http://localhost:3000>
::

21
.docs/content/1.introduction/2.project-structure.md
View File

@@ -1,21 +0,0 @@
# Project Structure
Docus is a Nuxt theme that provides a ready-to-use documentation website, if you are familiar with Nuxt, you will feel right at home.
## Directory Structure
This is the minimal directory structure to get an up and running Docus website.
```bash
content/
index.md
app.config.ts
nuxt.config.ts
```
The `content/` directory is where you [write Markdown pages](/introduction/writing-pages).
The `app.config.ts` is where you [configure Docus](/introduction/configuration) to fit your branding and design.
The `nuxt.config.ts` is your [Nuxt configuration](https://nuxt.com/docs/getting-started/configuration).

41
.docs/content/1.introduction/3.writing-pages.md
View File

@@ -1,41 +0,0 @@
# Writing Pages
Docus is made to let you write all your content in Markdown and Vue components with the MDC syntax.
Each Markdown pages in the `content/` folder will be mapped to a route.
| File | Generated route |
| ------------------------ | :-------------------- |
| `index.md` | `/` |
| `about.md` | `/about` |
| `blog/index.md` | `/blog` |
| `blog/hello.md` | `/blog/hello` |
| `1.guide/2.installation` | `/guide/installation` |
## Frontmatter
Docus supports multiple Front-matter attributes for pages.
```md [index.md]
---
title: "Get Started"
description: "Let's learn how to use my amazing module."
---
```
| **Key** | **Type** | **Default** | **Description** |
| ----------------------- | --------- | ----------- | ------------------------------------------------------------- |
| `layout` | `string` | `default` | Use any layout name like you would in `definePageMeta()` |
| `title` | `string` | | Defines the page title and H1 in docs pages |
| `description` | `string` | | Defines the page description and excerpt in docs pages |
| `redirect` | `string` | | A route path to redirect |
| `image` | `object` | | OpenGraph cover image |
| **Docs layout options** | | | |
| `aside` | `boolean` | | Toggles the visibility of aside navigation |
| `toc` | `boolean` | | Toggles the visibility of table of contents |
| `header` | `boolean` | | Toggles the visibility of the page header |
| `bottom` | `boolean` | | Toggles the visibility of page bottom section |
| **Navigation options** | | | |
| `navigation` | `boolean` | | Toggles the visibility of the page or directory in navigation |
| `navigation.title` | `string` | | Changes the name of the page or directory in navigation |
| `navigation.icon` | `string` | | Changes the icon of the page or directory in navigation |

149
.docs/content/1.introduction/4.configuration.md
View File

@@ -1,149 +0,0 @@
# Configuration
Learn how to configure Docus.
::code-group
```ts [Minimal app.config.ts]
export default defineAppConfig({
docus: {
title: 'Docus',
description: 'My Docus Project',
url: 'http://docus.dev'
}
})
```
```ts [Complete app.config.ts]
export default defineAppConfig({
docus: {
title: 'Docus',
description: 'My Docus Project',
url: 'http://docus.dev',
image: '/social-card-preview.png',
socials: {
twitter: '@nuxt_js',
github: 'nuxt-themes/docus',
},
github: {
root: 'content',
edit: true,
contributors: false
},
layout: 'default',
aside: {
level: 1,
filter: [],
},
header: {
title: false,
logo: true,
showLinkIcon: false
},
footer: {
credits: {
icon: 'IconDocus',
text: 'Powered by Docus',
href: 'https://docus.dev',
},
textLinks: [
{
text: 'Nuxt',
href: 'https://nuxt.com',
target: '_blank',
rel: 'noopener'
}
],
iconLinks: [
{
label: 'NuxtJS',
href: 'https://nuxtjs.org',
component: 'IconNuxtLabs',
},
{
label: 'Vue Telescope',
href: 'https://vuetelescope.com',
component: 'IconVueTelescope',
},
],
}
}
})
```
::
| **Key** | **Type** | **Default** | **Description** |
| ---------------------------- | ---------- | --------------------- | ---------------------------------------------------------------------------------------------------- |
| `title` | `string` | Docus | Website title |
| `titleTemplate` | `string` | Docus | Website title template |
| `description` | `string` | My Docus Project | Website description |
| `url` | `string` | | Website URL |
| `layout` | `string` | default | Fallback layout to use (supports `default` or `page`) |
| **Socials** | | | |
| `socials` | `object` | `{}` | Social links |
| `socials.github` | `string` | | The repository to use on GitHub links |
| `socials.twitter` | `string` | | The account to use on Twitter links |
| `socials.youtube` | `string` | | The channel to use on Youtube links |
| `socials.instagram` | `string` | | The account to use on Instagram links |
| `socials.facebook` | `string` | | The account to use on Facebook links |
| `socials.medium` | `string` | | The account to use on Medium links |
| `socials.[social]` | `object` | | Override social or display custom one |
| `socials.[social].label` | `string` | | A label to use for the social |
| `socials.[social].icon` | `string` | | A icon to use for the social |
| `socials.[social].href` | `string` | | A link to use for the social |
| `socials.[social].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
| **Header** | | | |
| `header` | `object` | | Header configuration |
| `header.logo` | `boolean` | | Whether or not to use `Logo.vue` as the header logo |
| `header.title` | `string` | | If set to a string, will be used in the header |
| `header.showLinkIcon` | `boolean` | | If set to `true` links icons will show in the header |
| `header.exclude` | `string[]` | | An array of path to exclude out from the header navigation |
| `header.fluid` | `boolean` | `true` | Make header `Container` fluid |
| **Main** | | | |
| `main` | `object` | | Main configuration |
| `main.fluid` | `boolean` | `true` | Make main content `Container` fluid |
| `main.padded` | `boolean` | `true` | Make main content `Container` padded |
| **Aside** | | | |
| `aside` | `object` | | Aside configuration |
| `aside.level` | `string` | 0 | Aside base level of nesting |
| `aside.collapsed` | `boolean` | | Will be used as default value for collapsible navigation categories |
| `aside.exclude` | `string[]` | | An array of path to exclude out from the aside navigation |
| **Footer** | | | |
| `footer` | `object` | | Footer configuration |
| `footer.credits` | `object` | | An object defining the bottom left credits |
| `footer.credits.icon` | `object` | | The icon to use for the credits |
| `footer.credits.text` | `object` | | The text to use for the credits |
| `footer.textLinks` | `array` | `[]` | An array of texts to display at the center of footer |
| `footer.textLinks[0].text` | `string` | | The text to display |
| `footer.textLinks[0].href` | `string` | | A link to use for the text |
| `footer.textLinks[0].target` | `string` | `_self` | Where to display the linked URL, as the name for a browsing context |
| `footer.textLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
| `footer.iconLinks` | `array` | `[]` | An array of icons to display in the footer |
| `footer.iconLinks[0].label` | `string` | | A label to use for the icon |
| `footer.iconLinks[0].href` | `string` | | A link to use for the icon |
| `footer.iconLinks[0].icon` | `string` | | The icon to use (can be a component name) |
| `footer.iconLinks[0].rel` | `string` | `noopener noreferrer` | A space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) |
| `footer.fluid` | `boolean` | `true` | Make footer `Container` fluid |
| **GitHub** | | | |
| `github` | `object` | `false` | GitHub integration configuration |
| `github.dir` | `string` | | Directory containing the files to be edited |
| `github.branch` | `string` | | Branch to start editing |
| `github.repo` | `string` | | Name of the GitHub repo to edit files |
| `github.owner` | `string` | | Owner of the repo |
| `github.edit` | `boolean` | | Toggle "Edit this page on Github" component on documentation pages |
**Search** ||||
| `fuse` | `object` || useFuse [options](https://vueuse.org/integrations/useFuse/) |
## Customizing the logo
To update the logo in the header, create a component in `components/Logo.vue` with your own logo.
In this example, the image is located at `/public/img`.
```vue [components/Logo.vue]
<template>
<img width="120" src="/img/YOURLOGO.png"/>
</template>
```

2
.docs/content/1.introduction/_dir.yml
View File

@@ -1,2 +0,0 @@
icon: ph:star-duotone
navigation.redirect: /introduction/getting-started

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

@@ -1,693 +0,0 @@
# 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
View File

@@ -1,88 +0,0 @@
# 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
View File

@@ -1,43 +0,0 @@
# 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
View File

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