mirror of
https://github.com/movie-web/providers.git
synced 2025-09-13 15:43:26 +00:00
Initialize docs
This commit is contained in:
57
.docs/content/1.introduction/1.getting-started.md
Normal file
57
.docs/content/1.introduction/1.getting-started.md
Normal file
@@ -0,0 +1,57 @@
|
||||
# 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
Normal file
21
.docs/content/1.introduction/2.project-structure.md
Normal file
@@ -0,0 +1,21 @@
|
||||
# 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
Normal file
41
.docs/content/1.introduction/3.writing-pages.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# 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
Normal file
149
.docs/content/1.introduction/4.configuration.md
Normal file
@@ -0,0 +1,149 @@
|
||||
# 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
Normal file
2
.docs/content/1.introduction/_dir.yml
Normal file
@@ -0,0 +1,2 @@
|
||||
icon: ph:star-duotone
|
||||
navigation.redirect: /introduction/getting-started
|
Reference in New Issue
Block a user