Djeex/docudjeex
Djeex/docudjeex
1
1
Fork 0
Code Issues 11 Pull Requests Projects 1 Activity

First commit

Browse Source
This commit is contained in:
Djeex 2024-11-09 21:39:43 +00:00
commit a2cfd31a8d
23 changed files with 17334 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
.eslintrc.cjs Normal file
View File

@ -0,0 +1,14 @@
module.exports = {
root: true,
extends: ['@nuxt/eslint-config'],
ignorePatterns: [
'dist',
'node_modules',
'.output',
'.nuxt'
],
rules: {
'vue/max-attributes-per-line': 'off',
'vue/multi-word-component-names': 'off'
}
}

12
.gitignore vendored Executable file
View File

@ -0,0 +1,12 @@
node_modules
*.iml
.idea
*.log*
.nuxt
.vscode
.DS_Store
coverage
dist
sw.*
.env
.output

1
.npmrc Normal file
View File

@ -0,0 +1 @@
strict-peer-dependencies=false

57
README.md Executable file
View File

@ -0,0 +1,57 @@
# Docus Starter
Starter template for [Docus](https://docus.dev).
## Clone
Clone the repository (using `nuxi`):
```bash
npx nuxi init -t themes/docus
```
## Setup
Install dependencies:
```bash
yarn install
```
## Development
```bash
yarn dev
```
## Edge Side Rendering
Can be deployed to Vercel Functions, Netlify Functions, AWS, and most Node-compatible environments.
Look at all the available presets [here](https://v3.nuxtjs.org/guide/deploy/presets).
```bash
yarn build
```
## Static Generation
Use the `generate` command to build your application.
The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting.
```bash
yarn generate
```
## Preview build
You might want to preview the result of your build locally, to do so, run the following command:
```bash
yarn preview
```
---
For a detailed explanation of how things work, check out [Docus](https://docus.dev).

39
app.config.ts Normal file
View File

@ -0,0 +1,39 @@
// https://github.com/nuxt-themes/docus/blob/main/nuxt.schema.ts
export default defineAppConfig({
docus: {
title: 'Docus',
description: 'The best place to start your documentation.',
image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
socials: {
twitter: 'nuxt_js',
github: 'nuxt-themes/docus',
nuxt: {
label: 'Nuxt',
icon: 'simple-icons:nuxtdotjs',
href: 'https://nuxt.com'
}
},
github: {
dir: '.starters/default/content',
branch: 'main',
repo: 'docus',
owner: 'nuxt-themes',
edit: true
},
aside: {
level: 0,
collapsed: false,
exclude: []
},
main: {
padded: true,
fluid: true
},
header: {
logo: true,
showLinkIcon: true,
exclude: [],
fluid: true
}
}
})

99
content/0.index.md Normal file
View File

@ -0,0 +1,99 @@
---
title: Home
navigation: false
layout: page
main:
fluid: false
---
:ellipsis{right=0px width=75% blur=150px}
::block-hero
---
cta:
- Get started
- /introduction/getting-started
secondary:
- Open on GitHub →
- https://github.com/nuxt-themes/docus
---
#title
The best place to start your documentation.
#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
---
::
::
::card-grid
#title
What's included
#root
:ellipsis{left=0px width=40rem top=10rem blur=140px}
#default
::card{icon=logos:nuxt-icon}
#title
Nuxt Architecture
#description
Harness the full power of [Nuxt 3](https://v3.nuxtjs.org) and its [modules](https://modules.nuxtjs.org) ecosystem.
::
::card{icon=IconNuxtStudio}
#title
Nuxt Studio ready
#description
Edit your theme content and appearance with live-preview within [Nuxt Studio](https://nuxt.studio).
::
::card{icon=logos:vue}
#title
Vue Components
#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.
::
::

57
content/1.introduction/1.getting-started.md Normal file
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>
::

21
content/1.introduction/2.project-structure.md Normal file
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).

41
content/1.introduction/3.writing-pages.md Normal file
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 page 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
content/1.introduction/4.configuration.md Normal file
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>
```

2
content/1.introduction/_dir.yml Normal file
View File

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

693
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
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
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
content/2.api/_dir.yml Normal file
View File

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

12
nuxt.config.ts Executable file
View File

@ -0,0 +1,12 @@
export default defineNuxtConfig({
// https://github.com/nuxt-themes/docus
extends: ['@nuxt-themes/docus'],
devtools: { enabled: true },
modules: [
// Remove it if you don't use Plausible analytics
// https://github.com/nuxt-modules/plausible
'@nuxtjs/plausible'
],
compatibilityDate: '2024-10-24'
})

15970
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

21
package.json Executable file
View File

@ -0,0 +1,21 @@
{
"name": "docus-starter",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "nuxi dev",
"build": "nuxi build",
"generate": "nuxi generate",
"preview": "nuxi preview",
"lint": "eslint ."
},
"devDependencies": {
"@nuxt-themes/docus": "latest",
"@nuxt/devtools": "^1.6.0",
"@nuxt/eslint-config": "^0.6.1",
"@nuxtjs/plausible": "^1.0.3",
"@types/node": "^22.9.0",
"eslint": "^9.14.0",
"nuxt": "^3.14.159"
}
}

BIN
public/cover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

6
renovate.json Executable file
View File

@ -0,0 +1,6 @@
{
"extends": ["github>nuxt/renovate-config-nuxt"],
"lockFileMaintenance": {
"enabled": true
}
}

4
tokens.config.ts Normal file
View File

@ -0,0 +1,4 @@
import { defineTheme } from 'pinceau'
export default defineTheme({
})

3
tsconfig.json Executable file
View File

@ -0,0 +1,3 @@
{
"extends": "./.nuxt/tsconfig.json"
}