Skip to content

Latest commit

 

History

History
121 lines (92 loc) · 5.37 KB

2.configuration.md

File metadata and controls

121 lines (92 loc) · 5.37 KB
Raw

Configuration

Tailor Docus for your own identity easily 🌈

Website

You can create a content/settings.json file to configure the website.

{
  "title": "Docus",
  "url": "https://docus.dev",
  // Optional
  "layout": "docs",
  "logo": "logo.svg",
  "twitter": "@nuxt_js",
  "github": "nuxtlabs/docus"
}

Properties

Key Type Description
title String Documentation title
description String Brief summary about documentation, added for search engine optimization and social sharing
url String Url of your deployed documentation.
layout String The layout of your documentation (defaults to docs). Can be changed to readme to have a one-page doc.
logo String Object Logo of the project, can be an Object to set a logo per color mode. To display the logo, see header.logo section.
header.logo Boolean Defaults to false, set to true to display the logo in header.
header.title Boolean Defaults to true, set to false to hide the title and only display the logo in header.
twitter String Twitter username to link in the header. Example: @nuxt_js.
github Object or String Can be a String to act as github.repo if no other config is needed.
github.repo String GitHub repository for the project. This will enable displaying the last version, the releases page, the link at the top and the Edit this page on GitHub link on each page. Example: nuxt/content.
github.url String For GitHub Enterprise, in addition to github.repo, you have to assign an url. Example: https://hostname. Defaults to https://github.com.
github.apiUrl String For GitHub Enterprise, in addition to github.repo, you have to assign an api url. Example: https://hostname/api/v3/repos. Defaults to https://api.github.com/repos.
github.branch String The default branch for the GitHub repository of your project, used in the Edit this page on GitHub link on each page (defaults to main if it cannot be detected).
github.dir String The default dir of your project, used in the Edit this page on GitHub link on each page (defaults to ''). Change it if docus is not at the root of your repository.
github.releases Boolean Defaults to true, set to false to disable the releases page.
algolia Object This option allows you to use Algolia DocSearch. In order to enable it, you need to provide at least the apiKey and the indexName. See example below.
credits Boolean Defaults to true, set to false to hide Made with Docus credits

Algolia Search

This option allows you to use Algolia DocSearch. In order to enable it, you need to provide at least the apiKey and the indexName:

"algolia": {
  "apiKey": "<API_KEY>",
  "indexName": "<INDEX_NAME>",
  "langAttribute": "language"
}

If you use i18n, make sure the <langAttribute> is the same as the html lang selector in the config (defaults to language).

Take a look at the @nuxt/content docsearch config for an example.

Theme

Create content/theme.json file to configure the theme.

{
  "colors": {
    "primary": "#06B6D4",
    "code": {
      "string": "#679c0d"
    }
  }
}

The theme design is based on a primary color to make it easy to override, you can specify it using colors.primary in your content/theme.json, the color palette (50 to 900) is generated using theme-colors.

Properties

Key Type Description
colors Object An object containing all colors for the theme.
colors.primary String The primary color of the theme, the value should be hexadecimal or rgb (145,22,74). Default value is #3073F1.
colors.code Object The object containing the colors of Prism theme. You know the list of all available colors names, look at Prism theme vars documentaion

Nuxt

docus exports a function to setup the nuxt.config.js and allows you to add/override the Nuxt config.

You can checkout the default nuxt.config.js from Docus. We use defu.arrayFn to merge the default configuration with the one provided.

Example with custom configuration:

import { withDocus } from 'docus'

export default withDocus({
  buildModules: [
    'vue-plausible'
  ]
  plausible: {
    domain: 'docus.dev'
  }
})

Windi CSS

You can override the default Windi config by creating your own windi.config.js.

module.exports = {
  theme: {
    extend: {
      // ...
    }
  }
}

As with the Nuxt config, we use defu.arrayFn to merge configurations.