QuantumJS
Home
Introduction
OverviewQuick StartThe Markup LanguageCore ConceptsUsing the CLI / APIQuantum vs Markdown
Config
quantum.config.js
Core Modules
quantum-corequantum-domquantum-html
Optional Modules
quantum-apiquantum-code-highlightquantum-diagramquantum-docsquantum-markdownquantum-templatequantum-version
Edit Page
quantum-docs
A collection of entities and transforms useful for writing documentation.
About
The docs module consists of a collection of entites that make it easier to write documentation, providing both layout and visual modifiers such as sidebars, content sections and a dynamic table of contents.
Entities
The below entities are provided by the entityTransforms function.
Entities
boldadded
Make a section of text bold.
Example Markup
Quantum
This text is @bold[bold]!
Example Result
This text is bold!
bottomSectionadded
Creates a footer for the page. Generally used with @sidebarPage and @relatedButtons
Example Markup
Quantum
@sidebarPage
  @sidebar
    @navigationMenu
      @section Introduction
        @page /: Home

@content
  @topSection
    @title Example Page

@contentSection
  @topic Topic

@bottomSection
  @relatedButtons
    @button /
      @title: Related 1
      @description: More Info
Example Result
Introduction
Home
Topic
Related 1
More Info
breadcrumbadded
Creates a breadcumb trail of items.
Example Markup
Quantum
@breadcrumb
  @item /: Somewhere
Example Result
Somewhere
contentSectionadded
Creates a content section for a page. Usually used with @topSection
Example Markup
Quantum
@topSection
  @title quantum-docs

@contentSection
  @topic Content
    Page content
Example Result
quantum-docs
Content
Page content
fullWidthadded
Breaks an element out of the @contentSection to make it span the entire width of the page.
Example Markup
Quantum
@fullWidth
  @notice Something
    Content
Example Result
Something
Content
groupadded
Creates a horizontal group of elements using flex styles.
Example Markup
Quantum
@group
  @summary Head
    @description
      Desc
@summary Head
  @description
    Desc
Example Result
Head
Desc
Head
Desc
headeradded
Creates the titlebar for a page
Example Markup
Quantum
@header
  @title Some header
  @icon /resources/logo.png
Example Result
Some header
Entities
icon
Adds an icon to the header
title
Sets the text for the header
imageadded
Add an image to the page. The content of the entity is used as the alt-text as well as the title text.
Example Markup
Quantum
@image [/resources/quantum-sm.png]: Quantum Logo

@image [/resources/quantum-sm.png]
  @title: Small Quantum Logo
  @width 50
Example Result
Quantum LogoSmall Quantum Logo
Entities
height
The height to set on the image
title
The title to set on the image when using @width and @height
width
The width to set on the image
italicadded
Make a section of text italic.
Example Markup
Quantum
This text is @italic[italic]!
Example Result
This text is italic!
listadded
Creates an ordered or unordered list using @item entities.
Example Markup
Quantum
# unordered list
@list
  @item: Item
  @item: Item
  @item: Item

# ordered list
@list ordered
  @item: Item
  @item: Item
  @item: Item
Example Result
  • Item
  • Item
  • Item
  1. Item
  2. Item
  3. Item
Entities
item
Creates an item in the list
navigationMenuadded
Creates a list of links to be used as a navigation. It is generally combined with a @sidebar entity
Example Markup
Quantum
@navigationMenu
  @section Something
    @page /#page-1: Page 1
    @page /#page-2: Page 2
    @page /#page-3: Page 3

@section Another thing
  @page /#page-1: Page 1
  @page /#page-2: Page 2
  @page /#page-3: Page 3
Example Result
Something
Page 1Page 2Page 3
Another thing
Page 1 Page 2 Page 3
Entities
page
Creates a link to a page. The content is used as the link text.
section
Creates a group of pages in a navigation menu
noticeadded
Displays a notice on the page to highlight important points.
Example Markup
Quantum
@notice [Notice Heading]
  @description
    Notice Content
Example Result
Notice Heading
Notice Content
relatedButtonsadded
Creates a set of related links for the bottom of a page. Generally used inside a @bottomSection
Example Markup
Quantum
@bottomSection
  @relatedButtons
    @button /
      @title: Related 1
      @description: More Info
Example Result
Related 1
More Info
Entities
button
Creates a related button
Entities
description
The short description of a related button.
title
The title for a related button
sectionadded
Creates a section of content. These are intended to be used inside @topic entities.
The title is converted to an anchor so it can be linked to directly on a page.
They are used used to populate the @tableOfContents when using the fileTransform
Example Markup
Quantum
@section Section Heading
  Section Content
Example Result
Section Heading
Section Content
sidebarPageadded
Creates a page with a sidebar. Generally this makes sense to use in conjunciton with @sidebar, @topSection and @contentSection to provide a nice layout.
Example Markup
Quantum
@sidebarPage
  @sidebar
    @navigationMenu
      @section Introduction
        @page /: Home

@content
  @topSection
    @title Example Page

@contentSection
  @topic Topic
Example Result
Introduction
Home
Topic
Entities
content
The content for the @sidebarPage
sidebar
Creates the sidebar for a @sidebarPage Any content can be used inside it but it works well with the @navigationMenu
strikethroughadded
Strikes through a section of text.
Example Markup
Quantum
This text @strikethrough[has a line through it]
Example Result
This text has a line through it
subsectionadded
Creates a subsection inside a @section entity.
A subsection is designed as a more specific section of content inside an @section. Subsections are not used in the @tableOfContents and do not have an anchor added to the heading.
Example Markup
Quantum
@subsection Subsection Heading
  Subsection Content
Example Result
Subsection Heading
Subsection Content
summaryadded
Creates a summary section with a set of links to provide more information.
Example Markup
Quantum
@summary Summary Head
  @description
    Summary Content
@link ./: Link to more information
Example Result
Summary Head
Summary Content
Link to more information
tableadded
A nicer way of creating a table, as opposed to using @tr and @td
Example Markup
Quantum
@table
  @header
    @cell
      Something
@cell
  Something else
@row
  @cell
    Cell content
@cell
  Other content
@row
  @cell
    Cell content
@cell
  Other content
Example Result
Something
Something elseOther contentOther content
Entities
cell
Creates a table cell. Should be used inside a @header or @row
header
Creates a header row for the table
row
Creates a table row
tableOfContentsadded
Used to create a table of contents on a page.
Generally this should be used with the fileTransform to provide an auto-generated contents, however it is possible to create one manually.
Example Markup
Quantum
@tableOfContents Contents
  @topic Something
    @section Section
@topic Something else
@topic Another topic
Example Result

Contents

Something else
Another topic
topSectionadded
Creates a top section for a page with a title and description. Usually used with @contentSection
Example Markup
Quantum
@topSection
  @title quantum-docs
  @description
    Some description
@source [http://example.com/this-page.um]: Edit Page
@breadcrumb
  @item #: Page 1
  @item #: Page 2
  @item #: This page

@contentSection
  @topic Content
Example Result
quantum-docs
Some description
Edit Page
Page 1Page 2This page
Content
Entities
breadcrumb
Creates a breadcumb trail of items in the top section.
description
Add a description of the current page to display below the title
source
Creates a link to the source of the current page
title
Adds a title section and also sets the <title> for a given page.
topicadded
Creates a topic section. These are intended to be the 'top level' of the page content.
A topic is a section or group of sections about a particular thing.
The title is converted to an anchor so it can be linked to directly on a page.
They are used used to populate the @tableOfContents when using the fileTransform
Example Markup
Quantum
@topic Topic Heading
  Topic Content
Example Result
Topic Heading
Topic Content
versionSelectoradded
Displays a version selector based on the currently available versions.
Example Markup
Quantum
@versionSelector
  @versionList
    @current 1.0.0
    @version 1.0.0
    @version 2.0.0
    @version 3.0.0
Example Result
API
Below are all the properties of the object returned from require('quantum-docs'). For information about different versions, see the Changelog
Functions
entityTransformsObject[EntityTransform]added
A function that returns a set of EntityTransform functions for use in quantum-html
Returns
Object[EntityTransform]
The entity transforms to use in quantum-html to define the entities that can be rendered.
fileTransformoptionsObjectFileTransformadded
A function that returns a FileTransform for populating the @tableOfContents
Arguments
options
Properties
tableOfContents
Options relating to the @tableOfContents entity
Properties
enabledBoolean
Whether to populate the table of contents
Default: true
Returns
FileTransform