Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Dark Documentation

Welcome to the source for the Dark documentation. Contribute your improvements as a pull request, or report problems in an issue.

View the live docs here:

The Dark docs are built using Docusaurus. If you're trying to do something beyond the scope of this README, check out their docs.

What's In This Document

Get Started in 5 Minutes

To change these docs and test the results locally:

npm install
npm run-script start

Documentation structure

Dark's documentation is organized into four categories:

  • tutorials
  • how-to guides
  • background information and discussion
  • reference material

This follows the Divio Documentation System. Using this system, documentation in each category should not do the work of any other category. For example, a tutorial should just step the user through doing the work, and should not provide background expanations or other reference material or discussion.

In the future, we intend to provide access to all this material in the app, with context-sensitive reference materials available for all product and language features, and interactive tutorials and how-to guides built-in.


  • "teaching a child how to cook"
  • tells them what to do
  • does not explain why they are doing it
  • include specifics and let them learn the generalities over time
  • assume that "obvious" things are not known
  • do not include choices
  • should be bulletproof

How-to guides

  • "recipes"
  • should have very specific names such as "how to add a custom domain to Dark"


  • background material to understand further
  • provides context

Reference material

  • just descriptions
  • follows the structure of the project/language (eg each type is represented)

Project Structure

There are two important branches:

  • main
  • gh-pages

The website is hosted from gh-pages, but everything there is auto-generated from main. When we want to make changes, we create a new branch off main with the format username/my-change and make as many commits as we need to. Then, we create a new pull request from that branch with main as the base. When the pull request is merged, CircleCI will automatically deploy the changes from main to the website (it runs a script against the source files on main and deploys the generated website to gh-pages).

Directory Structure

The project file structure in main is

docs/ -- this file

  .circleci/config.yml -- used to autodeploy via circle ci

  .gitignore -- ignores autogenerated files that shouldn't sync via git

  .spelling -- a place to add words not in a standard dictionary

  docs/ -- individual markdown documentation pages

    plugins/ -- docusaurus plugins

  package.json -- helper scripts

  docusaurus.config.js -- core site configuration

  sidebars.json -- sidebar sections and pages

    img/ -- static images, for posts, and also favicon.ico


Editing Content

Editing an existing docs page

Edit docs by navigating to docs/ and editing the corresponding document:


id: page-needs-edit
title: This Doc Needs To Be Edited

Edit me...

For more information about docs, click here

Adding Content

Adding a new docs page to an existing sidebar

  1. Create the doc as a new markdown file in /docs, example docs/
id: newly-created-doc
title: This Doc Needs To Be Edited

My new content here..
  1. Refer to that doc's ID in an existing sidebar in sidebar.json:
// Add newly-created-doc to the Getting Started category of docs
  "docs": {
    "Getting Started": [
      "newly-created-doc" // new doc here

For more information about adding new docs, click here

Adding items to your site's top navigation bar

  1. Add links to docs, custom pages or external links by editing the headerLinks field of siteConfig.js:


  headerLinks: [
    /* you can add docs */
    { doc: 'my-examples', label: 'Examples' },
    /* you can add custom pages */
    { page: 'help', label: 'Help' },
    /* you can add external links */
    { href: '', label: 'GitHub' },

For more information about the navigation bar, click here

Adding custom pages

  1. Docusaurus uses React components to build pages. The components are saved as .js files in pages/en:
  2. If you want your page to show up in your navigation header, you will need to update siteConfig.js to add to the headerLinks element:


  headerLinks: [
    { page: 'my-new-custom-page', label: 'My New Custom Page' },

For more information about custom pages, click here.

Checking formatting

We run some tools to ensure that the docs are consistently formatted and to find common errors. If you run npm run format you should pass the linter.

markdownlint is run automatically in CI - you can run it locally as npm run lint.

How CI Auto-deploys

The .circleci/config.yml file describes the CircleCI configuration. It watches for commits/merges into the main branch, runs a script to generate the contents of gh-pages, and pushes gh-pages to github.

Publishing Changes Manually

NOTE: You shouldn't need to do this because CircleCI runs this automatically.

On the commandline (remember to replace <YOUR USERNAME> with your github username):


If you're using ssh instead of https, replace GIT_USER=<YOUR USERNAME> with USE_SSH=true.


Dark's documentation






No releases published


No packages published