A newer release of the API3 Technical documentation is available.

# Theme

Table of Contents

The api3-docs project uses the VuePress default theme. The theme is configured in the .vuepress/config.json file. This document speaks to some of the key theme settings and overrides used by this project.

# config.themeConfig.sidebarDepth

The sidebarDepth is set to a depth of 0 so that only Heading 1 elements are listed in the sidebar. Headings 2-3 will appear in the TOC (Table of Contents) to the right of the page content as defined in config.markdown.

The sidebar is a JSON object with a set of routes. The value of each route is the sidebar.json file that will be used for the route. The sidebar for the route is located in the route's root folder.

sidebar: {
  '/airnode/v0.8/': require(`../airnode/v0.8/sidebar.js`),
  '/airnode/v0.7/': require(`../airnode/v0.7/sidebar.js`),
  '/airnode/v0.6/': require(`../airnode/v0.6/sidebar.js`),
  '/airnode/v0.5/': require(`../airnode/v0.5/sidebar.js`),
  '/airnode/v0.4/': require(`../airnode/v0.4/sidebar.js`),
  '/airnode/v0.3/': require(`../airnode/v0.3/sidebar.js`),
  '/airnode/v0.2/': require(`../airnode/v0.2/sidebar.js`),
  '/airnode/pre-alpha/': require(`../airnode/pre-alpha/sidebar.js`),
  '/dapis/': require(`../dapis/sidebar.js`),
  '/ois/v1.1/': require(`../ois/v1.1/sidebar.js`),
  '/ois/v1.0/': require(`../ois/v1.0/sidebar.js`),
  '/qrng/': require(`../qrng/sidebar.js`),
  '/dao-members/': require(`../dao-members/sidebar.js`),
  '/api3/': require(`../api3/sidebar.js`),
  '/dev/': require(`../dev/sidebar.js`),
  '/operations/': require(`../operations/sidebar.js`),
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# config.markdown

The markdown key technically is not part of the default theme. It does however impact the UI of the content.

markdown: {
    lineNumbers: true,
    toc: { includeLevel: [2, 3] },
  }

1
2
3
4

lineNumbers: Adds line numbers to code blocks.
toc: Sets the header levels the TOC will display.

# index.styl

There are overrides to the default theme in .vuepress/components/index.styl. Such overrides are common practice when using VuePress. There are four groups of changes which are detailed in index.styl using code comments.

Content
Navbar
Sidebar
TOC

# config.themeConfig.smoothScroll

As of 2021-02-17 smoothScroll=true will cause the TOC hyperlinks to require a double click for Ubuntu Firefox users. Change this back to true should Firefox remedy the issue.

← Setup Plugins and Packages →