Initialize docs

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

View 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>
::

View 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).

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

View 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>
```

View File

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