QuantumJS
Edit Page
quantum-api
Transforms for writing API documentation and building changelogs.
About
This module provides entity transforms for writing the API documentation that you can see in the API section of this and the other module pages.
It also provides the ability to generate changelogs from the api as well as versioned pages when combined with quantum-version
Example
Example Markup
quantum.config.js (Javascript)
const api = require('quantum-api')
const html = require('quantum-html')

const htmlOptions = {
  entityTransforms: {
    api: api.entityTransforms()
}
}

module.exports = {
  pipeline: [
    html(htmlOptions)
],
pages: 'index.um'
}
index.um (Quantum)
@api example-api
  @function makeCoffee
    @description
      A function for making coffee
@arg sugar [Boolean]
  @description
    Whether to add Sugar
@arg milk [Boolean]
  @description
    Whether to add milk
Example Result
Functions
makeCoffee
A function for making coffee
sugarBoolean
Whether to add Sugar
Whether to add milk
Nesting content
It is possible to nest most api entities for a language inside it, for instance a function @arg may be an object so could contain @property entities.
Example Markup
Quantum
@api
  @function functionName
    @arg stringParma [String]
    @arg objectParam [Object]
      @property objectProp [Object]
        @property anotherObjectProp [Object]
          @description: And so on...

@object objectName [Object]
  @property objectProp [Object]
    @property anotherObjectProp [Object]
      @description: And so on...
Example Result
Functions
functionNamestringParmaStringobjectParamObject
Arguments
stringParmaString
objectParam
Properties
objectProp
Properties
anotherObjectProp
And so on...
objectName
Properties
objectProp
Properties
anotherObjectProp
And so on...
Entities
The below entities are provided by the entityTransforms function.
Standard Entities
Entities that exist regardless of what languages are used.
apiadded
The container for api content. All the entities provided by this module should be used inside an @api entity
Example
Quantum
@api apiName
Entities
groupadded
Define a custom group inside an api
Example Markup
Quantum
@api apiName
  @group Header
    @object obj1
@group [Multi word header]
  @object obj2
Example Result
Header
obj1
obj2
changelogadded
Define a changelog for a specific version.
Example Markup
Quantum
@changelog 1.0.0
  @description
    Description of changes in this version

@entry
  @header javascript
    @function jsFunction1
@change added
  @description: Added jsFunction1

@group Changelog group
  @entry
    @header javascript
      @function jsFunction2
@change added
  @description: Added jsFunction2
Example Result
1.0.0
Description of changes in this version
Entities
link
A link to add to the version header (e.g. to go to version x of the api)
changelogListadded
Define a collection of changelogs for multiple versions.
Behaves differently when using the fileTransform
Example Markup
Quantum
@changelogList
  @changelog 1.0.0
    @description
      Description of changes in this version

@entry
  @header javascript
    @function jsFunction1
@change added
  @description: Added jsFunction1

@group Changelog group
  @entry
    @header javascript
      @function jsFunction2
@change added
  @description: Added jsFunction2

@changelog 2.0.0
  @description
    Description of changes in this version

@entry
  @header javascript
    @function jsFunction1
@change updated
  @description: Updated jsFunction1
Example Result
1.0.0
Description of changes in this version
2.0.0
Description of changes in this version
File Transform Entities
Entities that are available or behave differently when using the fileTransform
changelogListadded
Processes and generates changelogs from content in @api sections.
See the Rendering Changelogs example.
Entities
groupByApi
Whether to group entries by api or render all entries in one set.
Example
Quantum
@changelogList
  @groupByApi true
process
Define the api content to process.
This is generally in the form of an @inline file or set of files.
reverseVisibleList
Whether to reverse the list of versions so the latest is at the top.
Example
Quantum
@changelogList
  @reverseVisibleList true
version
Define a version to show in the changelog.
Entries tagged with a version will be grouped and shown here.
Example
Quantum
@changelogList
  @version 1.0.0
    @link [path/to/version/1.0.0]
    @description
      Description of the changes in version 1
Entities
description
A description of the changes in a version.
link
A link to add to the version header (e.g. to go to version x of the api)
Shared Entities
All the entities provided by languages support these entities.
collapsedadded
Whether an api item should be collapsed when loading the page.
Example Markup
Quantum
@function collapsedFunction
  @collapsed true
  @description
    Collapsed function

@function openFunction
  @collapsed false
  @description
    Open function
Example Result
collapsedFunction
Collapsed function
openFunction
Open function
collapsibleadded
Whether an api item can be collapsed.
Example Markup
Quantum
@function collapsedFunction
  @collapsible true
  @description
    Collapsible function

@function openFunction
  @collapsible false
  @description
    Open function
Example Result
collapsedFunction
Collapsible function
openFunction
Open function
descriptionadded
The description of an entity.
Example Markup
Quantum
@property propertyName
  @description: Description of property
Example Result
propertyName
Description of property
extraadded
Extra information that should not be part of the description (e.g examples)
Example Markup
Quantum
@function functionName
  @description
    A function that returns true
@extra
  @bold[Example]:
  @@codeblock js
    functionName() // returns true
Example Result
functionName
A function that returns true
groupadded
Define a custom group inside an api
Example Markup
Quantum
@api apiName
  @function functionName
    @group Stuff
      @object object1
Example Result
Functions
functionName
Stuff
object1
Language: Javascript
Transforms provided by the javascript
language when passed in as an option.
constructoradded
Describes a constructor for a Prototype.
It is rendered in the same way as a function but does not expect a function name.
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@arg
@arg?
Example Markup
Quantum
@api
  @prototype Selection
    @collapsed false
    @constructor
      @arg param1 [String]
      @arg? param2 [Boolean]
        @default: @code[true]
Example Result
Prototypes
Selection
Constructors
Selectionparam1Stringparam2Boolean
Arguments
param1String
param2Boolean
Default: true
defaultadded
Describes the default value of an optional property or parameter
Example Markup
Quantum
@api
  @object objectName
    @collapsed false
    @property prop1 [Boolean]
      @collapsed false
      @default: @code[false]

@function functionName
  @collapsed false
  @arg? param1 [Boolean]
    @collapsed false
    @default: @code[true]
Example Result
Objects
objectName
Properties
prop1Boolean
Default: false
functionNameparam1Boolean
Arguments
param1Boolean
Default: true
eventadded
Describes a javascript event
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
You can also render these as a @function using @event ... [Function] or as an @object using @event ... [Object]. This allows the children of @function and @object to be used as children of this entity.
Example Markup
Event to document (Javascript)
window.addEventListener('onchange', (evt) => {
  ...
})
Quantum
@api
  @event onchange
    @description
      Description of event
@default: Object
Example Result
Events
onchange
Description of event
Object
functionadded
Describes a javascript Function
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
@arg
@arg?
@group
@event
@returns
Example Markup
Function to document (Javascript)
function something (param1, param2) {
  param2 = param2 || true
  ...
}
Quantum
@api
  @function something
    @arg param1 [String]
    @arg? param2 [Boolean]
      @default: @code[true]
Example Result
Functions
somethingparam1Stringparam2Boolean
Arguments
param1String
param2Boolean
Default: true
methodadded
Describes a method for a Prototype.
It is rendered in the same way as a function.
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
@arg
@arg?
@group
@event
@returns
Example Markup
Quantum
@api
  @prototype Selection
    @collapsed false
    @method methodName
      @arg param1 [String]
      @arg? param2 [Boolean]
        @default: @code[true]
Example Result
Prototypes
Selection
Methods
methodNameparam1Stringparam2Boolean
Arguments
param1String
param2Boolean
Default: true
objectadded
Describes a javascript object
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
@group
@property
@property?
@event
@prototype
@function
Example Markup
Object to document (Javascript)
const anObject = {
  prop1: true
}
Quantum
@api
  @object anObject
    @property prop1 [Boolean]
      @description
        The value of this property is @code[true]
Example Result
Objects
anObject
Properties
prop1Boolean
The value of this property is true
paramadded
Describes a function parameter
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
You can also render these as a @function using @arg ... [Function] or as an @object using @arg ... [Object]. This allows the children of @function and @object to be used as children of this entity.
Example Markup
Quantum
@api
  @function functionName
    @collapsed false
    @arg paramName [ParamType]
      @description
        Param Descripton
Example Result
Functions
functionNameparamNameParamType
Arguments
paramNameParamType
Param Descripton
param?added
Describes an optional function parameter
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
You can also render these as a @function using @arg ... [Function] or as an @object using @arg ... [Object]. This allows the children of @function and @object to be used as children of this entity.
Example Markup
Quantum
@api
  @function functionName
    @collapsed false
    @arg? paramName [ParamType]
      @description
        Param Descripton
Example Result
Functions
functionNameparamNameParamType
Arguments
paramNameParamType
Param Descripton
propertyadded
Describes an object property
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
You can also render these in the same way as a @function entity using @property ... [Function], or as an @object using @property ... [Object]. This allows the children of @function and @object to be used as children of this entity.
Example Markup
Quantum
@api
  @object objectName
    @property propertyName [PropertyType]
Example Result
Objects
objectName
Properties
propertyNamePropertyType
property?added
Describes an optional object property
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
You can also render these in the same way as a @function entity using @property ... [Function], or as an @object using @property ... [Object]. This allows the children of @function and @object to be used as children of this entity.
Example Markup
Quantum
@api
  @object objectName
    @property? propertyName [PropertyType]
Example Result
Objects
objectName
Properties
propertyNamePropertyType
prototypeadded
Describes a javscript prototype
The entities that can be used inside an entity of this type are as follows:
@description
@extra
@default
@constructor
@group
@property
@property?
@event
@method
@function
Example Markup
Quantum
@api
  @prototype Array
    @description
      The Array prototype
@constructor
  @description
    Create an array of @code[undefined] elements
@arg length [Number]
  @description: The length of the array to create

@method fill
  @description
    Fill an array with values
@arg value [Any]
  @description: The value to fill with
Example Result
Prototypes
Array
The Array prototype
Create an array of undefined elements
lengthNumber
The length of the array to create
fill
Fill an array with values
valueAny
The value to fill with
returnsadded
Describes the return type for a javascript function
The entities that can be used inside an entity of this type are as follows:
@description
@extra
You can also render these as a @function using @returns [Function] or as an @object using @returns [Object]. This allows the children of @function and @object to be used as children of this entity.
Example Markup
Quantum
@api
  @function functionName
    @collapsed false
    @returns Boolean
      @collapsed false
      @description: The return value of the function
Example Result
Functions
functionNameBoolean
Returns
The return value of the function
Language: CSS
Transforms provided by the css
language when passed in as an option.
classadded
Describes a css class
Example Markup
Class to document (CSS)
.red-background {
  background: red;
}
Quantum
@api
  @class red-background
    @description
      Makes the background of an element red
Example Result
Classes
red-background
Makes the background of an element red
extraClassadded
Describes a css class applied to a parent css class
Example Markup
Class to document (CSS)
.red-background {
  background: red;
}

.red-background.blue-text {
  color: blue;
}
Quantum
@api
  @class red-background
    @description
      Makes the background of an element red

@extraClass blue-text
  @description
    Makes the text blue on red-background elements
Example Result
Classes
red-background
Makes the background of an element red
blue-text
Makes the text blue on red-background elements
Language: Quantum
Transforms provided by the quantum
language when passed in as an option.
entityadded
Describes a quantum entity
Example Markup
Quantum
@api
  @entity class
    @description
      Describes a css class
Example Result
Entities
class
Describes a css class
paramadded
Describes a quantum entity parameter
Example Markup
Quantum
@api
  @entity groupByApi
    @arg boolean
Example Result
Entities
groupByApi
API
Below are all the properties of the object returned from require('quantum-api'). For information about different versions, see the Changelog
Objects
buildersadded
Provides functions for building entity transforms for entities in languages.
See the Custom Language example for a complete example.
Properties
body
Provides a set of EntityTransform functions for building the content of entities, such as descriptions or children.
Properties
Builds @default blocks for providing default values for parameters etc.
descriptionEntityTransform
Builds a @description block like this block of text.
Builds @extra blocks inside a selection for providing information, such as code examples or additional descriptions.
Builds @group blocks inside a selection.
headertypeStringdetailsBuilderEntityTransformEntityTransform
Builds a header transform for constructing api/changelog headers for entities from a type and a details builder.
Arguments
typeString
The type of the header to build, for instance function or object that will be used to class the header.
detailsBuilderEntityTransform
The EntityTransform for creating the text to display in the header from an entity.
It receives an entire api entity including children and should return an element (or array of elements) containing the header information for an api entity.
Returns
A EntityTransform for creating an api/changelog header for a selection.
Provides a transform for rendering an api item, such as @function by providing a header and a set of entity transforms to apply to content.
Arguments
options
Properties
classString
An additional class to give to api section if it has a header
The entity transforms to apply to the content of the item in the order they should be displayed
Example Markup
Javascript
const item = require('quantum-api').builders.body.item
const itemGroup = require('quantum-api').builders.body.itemGroup
const descriptions = itemGroup

const functionBuilder = item({
  ..., // Other options
  content: [ descriptions, params, returns ]
})

module.exports = () => ({
  entityTransforms: {
    function: functionBuilder
}
})
Quantum
@function something
  # Display order is determined by item, not by order in file
  @returns Boolean
  @arg a [String]
  @description: Description goes first
Example Result
somethingaStringBoolean
Description goes first
Arguments
Returns
The transform that will be used to render the header
renderAsOther
A mapping of Type: Item for rendering an item as a different type of item when it is given a type
Example Markup
Javascript
const item = require('quantum-api').builders.body.item
const functionBuilder = item({
  ... // Define a function builder
})

const propertyBuilder = item({
  ..., // Other options
  renderAsOther: { Function: functionBuilder }
})

module.exports = () => ({
  entityTransforms: {
    function: functionBuilder,
    property: propertyBuilder
}
})
Quantum
@property property [String]

@property something [Function]
  @arg p1 [String]
Example Result
propertyString
somethingp1String
Arguments
itemGrouplanguageStringtypeString / Array[String]titleStringoptionsObject
A function for defining a group of items to be used in an item content.
Arguments
languageString
The language the item group is part of
The type or types of entity that are part of this group (e.g. 'param' or ['param', 'param?']
titleString
The title to display above the group
options
Properties
noSortBoolean
Whether to sort entities in this group. Set to true for things like function parameters that have a fixed order.
Default: false
fileTransformsadded
The available file transforms.
Functions
changelogfileFileoptionsObjectFile
The FileTransform for processing @changelogList entities.
Arguments
fileFile
The file currently being processed.
options
Properties
changelogGroupByApiBoolean
Whether the changelog should be grouped by api.
Can also be set on a per- @changelogList basis using @groupByApi true
Default: false
changelogReverseVisibleListBoolean
Whether to reverse the list of changelog items to put the last one at the top to make it easier to document.
Can also be set on a per- @changelogList basis using @reverseVisibleList true
Default: false
languagesArray[Object]
The languages to use to render the changelog headers
This is where defined changelog objects are used from the languages
Returns
languagesadded
The languages available in the quantum-api module.
It is also possible to define Custom Languages
Properties
A function used to build the css language to provide entity transforms.
Returns
Object
An object definining how to display javascript documentation.
Properties
assetsArray[Asset]
The assets required to render the language.
changelog
The entity types and header function for generating changelog items.
Properties
createHeaderDomEntityTransform
The transform to use when building the changelog header for an entry
entityTypesArray[String]
The types to look for when building the changelog
entityTransformsObject[EntityTransform]
The entity transforms the language exposes
nameString
The name of the language
javascriptoptionsObjectObject
A function used to build the javascript language to provide entity transforms.
Arguments
options
Properties
typeLinks
The type links to use when linking types
Returns
Object
An object definining how to display javascript documentation.
Properties
assetsArray[Asset]
The assets required to render the language.
changelog
The entity types and header function for generating changelog items.
Properties
createHeaderDomEntityTransform
The transform to use when building the changelog header for an entry
entityTypesArray[String]
The types to look for when building the changelog
entityTransformsObject[EntityTransform]
The entity transforms the language exposes
nameString
The name of the language
quantumObject
A function used to build the quantum language to provide entity transforms.
Returns
Object
An object definining how to display quantum documentation.
Properties
assetsArray[Asset]
The assets required to render the language.
changelog
The entity types and header function for generating changelog items.
Properties
createHeaderDomEntityTransform
The transform to use when building the changelog header for an entry
entityTypesArray[String]
The types to look for when building the changelog
entityTransformsObject[EntityTransform]
The entity transforms the language exposes
nameString
The name of the language
Functions
entityTransformsoptionsObjectObject[EntityTransform]added
A function that returns a set of EntityTransform functions.
Arguments
options
The options to use when creating the set of entity transforms.
Properties
Defines the order itemGroup s of entities should be displayed in at the top-level.
The default set of apiBuilders are available as properties of this module under builders and languages
Default:
[
  builders.body.description,
  builders.body.extras,
  builders.body.groups,
  languages.javascript.properties,
  languages.javascript.prototypes,
  languages.javascript.objects,
  languages.javascript.functions,
  languages.css.classes,
  languages.quantum.entities
]
issueUrlissueNumberStringString
Builds the issue url from an issue number to display next to a changelog entry.
Default:
function issueUrl (issueNumber) {
  return undefined
}
Arguments
issueNumberString
The issue number
Returns
The built issue url
languagesArray[Language]
The languages to use the entity transforms for. Exposes the Language Entities.
Default:
[
  languages.javascript(),
  languages.css()
]
Returns
The entity transforms to use in quantum-html to define the entities that can be rendered.
fileTransformoptionsObjectFileTransformadded
A wrapper around the exposed file transforms.
Arguments
options
The options to use for the file transform.
The entire object will be passed to all the lower-level transforms
Properties
processChangelogsBoolean
Whether to process changelogs
Default: true
Using the module
Below are several examples with the code required and their output.
Standalone
Using the module to provide the entity transforms provides basic api documentation capabilities:
Example Markup
quantum.config.js (Javascript)
const html = require('quantum-html')
const api = require('quantum-api')

const apiOptions = {
  // Define api options here
}

const htmlOptions = {
  entityTransforms: {
    html: html.entityTransforms(),
    api: api.entityTransforms(apiOptions) // Add the api section renderers to the page
}
}

module.exports = {
  pages: '*.um',
  pipeline: [
    html.fileTransform(htmlOptions)
]
}
Quantum
@function exampleFunction
  @description: Function description
  @arg param1 [String]: Parameter
  @arg? param1 [String]: Optional parameter

@object exampleObject
  @description: Object description
Example Result
exampleFunctionparam1Stringparam1String
Function description
Arguments
param1String
Parameter
param1String
Optional parameter
exampleObject
Object description
Rendering Changelogs
Example Markup
quantum.config.js (Javascript)
const html = require('quantum-html')
const api = require('quantum-api')

const apiOptions = {
  // Define api options here
}

const htmlOptions = {
  entityTransforms: {
    html: html.entityTransforms(),
    api: api.entityTransforms(apiOptions) // Add the api section renderers to the page
}
}

module.exports = {
  pages: '*.um',
  pipeline: [
    api.fileTransform(apiOptions),
    html.fileTransform(htmlOptions)
]
}
path/index.um (Quantum)
@api moduleName
  @function exampleFunction
    @added 1.0.0
    @description: Function description
    @arg param1 [String]: Parameter
    @arg? param2 [String]: Optional parameter

@object exampleObject
  @description
    Object Description
@added 2.0.0
  @description
    Added an example object
path/changelog.um (Quantum)
@changelogList
  @groupByApi false
  @reverseVisibleList true
  @process
    @inline path/index.um
@version 2.0.0
  @description: Version 2.0.0 changes
@version 1.0.0
  @description: Version 1.0.0 changes
Example Result
2.0.0
Version 2.0.0 changes
exampleObject
Added
Added an example object
1.0.0
Version 1.0.0 changes
exampleFunctionparam1Stringparam2String
Added
Function description
Versioning APIs
You can use the same versioned api to produce multiple versioned pages that show a single version.
See quantum-version for more information.
Example Markup
quantum.config.js (Javascript)
const version = require('quantum-version')
const api = require('quantum-api')
const html = require('quantum-html')

const apiOptions = {
  // Define api options here
}

const htmlOptions = {
  entityTransforms: {
    html: html.entityTransforms(),
    api: api.entityTransforms(apiOptions) // Add the api section renderers to the page
}
}

module.exports = {
  pages: '*.um',
  pipeline: [
    version.fileTransform(versionOptions), // Generate versioned pages (e.g. page/1.0.0/index.html)
    html.pageTransform(htmlOptions)
]
}
path/index.um (Quantum)
@versionedPage
  @version 1.0.0
  @version 2.0.0

@api moduleName
  @function exampleFunction
    @added 1.0.0
    @description: Function description
    @arg param1 [String]: Parameter
    @arg? param2 [String]: Optional parameter

@object exampleObject
  @description
    Object Description
@added 2.0.0
  @description
    Added an example object
Example Result
target/1.0.0/index.html
exampleFunctionparam1Stringparam2Stringadded
Function description
Arguments
param1String
Parameter
param2String
Optional parameter
target/2.0.0/index.html
exampleFunctionparam1Stringparam2String
Function description
Arguments
param1String
Parameter
param2String
Optional parameter
exampleObjectadded
Added
Added an example object
Object Description
target/index.html (same as target/2.0.0/index.html)
exampleFunctionparam1Stringparam2String
Function description
Arguments
param1String
Parameter
param2String
Optional parameter
exampleObjectadded
Added
Added an example object
Object Description
Creating a Custom Language
To define a language to use with quantum api, you can build a custom language
Example Markup
custom-language.js (Javascript)
const dom = require('quantum-dom')
const path = require('path')
const api = require('quantum-api')

// Define the stylesheet asset we're using
const assets = [
  dom.asset({
    url: '/custom-language.css',
    filename: path.join(__dirname, 'custom-language.css')
  })
]

// Define the name of the language
const languageName = 'custom'

// Create a group of @thing entities for the @custom item
const things = api.builders.itemGroup(languageName, 'thing', 'Things')

function customDetails (selection, transformer) {
  // render the param string as the header details (e.g. for '@thing something' it would be 'something')
  return dom.create('div').text(selection.ps())
}
// Create the transform for the item header
const customHeader = api.builders.header('custom', customDetails)

// Create the @custom item transform
const customBuilder = api.builders.item({
  class: 'api-custom', // Set the class to add to the item
  header: customHeader, // Set the header renderer
  content: [ api.builders.body.description, things ] // Set the content to display (and the order)
})

// Create the @thing item transform
const thingBuilder = api.builders.item({
  class: 'api-thing',
  header: customHeader,
  content: [ api.builders.body.description ]
})

function changelogHeader (changelogHeaders) {
  const entityTypes = Object.keys(changelogHeaders)
  return (selection, transformer) => {
    // Check if the selection has one of the changelog types
    if (entityTypes.some(entityType => selection.has(entityType))) {
      let current = selection
      const sections = []

      // Move down the tree of entries to the bottom, adding each level as a 'section'
      while (entityTypes.some(entityType => current.has(entityType))) {
        current = current.select(entityTypes)
        const type = current.type()
        const baseType = type.replace('?', '')

        const section = dom.create('span')
          .class(`qm-changelog-custom-${baseType}`)
          // Render the header using the 'api' entity transform
          .add(changelogHeaders[type](current, transformer))

        sections.push(section)
      }
      return dom.create('span')
        .class('qm-changelog-custom-header')
        // Add all the built sections for the tree to the changelog header
        .add(sections)
    }
  }
}

// Define the function that gets the custom langugae
module.exports = function customLanguage () {
  const changelogHeaders = {
    custom: customHeader
  }

  return {
    assets: assets,
    name: languageName,
    // Export the entityTransforms we want to render with
    entityTransforms: {
      custom: customBuilder,
      thing: thingBuilder
    },
    // Export the changelog options
    changelog: {
      // Export the entity types to look for
      entityTypes: Object.keys(changelogHeaders),
      // Export the function for building the changelog header
      createHeaderDom: changelogHeader(changelogHeaders)
    }
  }
}
quantum.config.js (Javascript)
const html = require('quantum-html')
const api = require('quantum-api')
const customLanguage = require('./custom-language.js')

// Add the new language to the api options
const apiOptions = {
  languages: [
    customLanguage()
]
}

// Add the api entity transforms to htmlTransforms if they weren't there already
const htmlOptions = {
  entityTransforms: {
    api: api.entityTransforms(apiOptions)
}
}

// Add the fileTransform for rendering changelog content
module.exports = {
  pages: '**/*.um',
  pipeline: [
    api.fileTransform(apiOptions),
    html.fileTransform(htmlOptions)
]
}
custom-language.css (CSS)
/* Change the color of the toggle and border */
.api-custom {
  border-color: purple;
}
.api-custom > .qm-api-collapsible-heading .qm-api-collapsible-toggle {
  background: purple;
}

.api-thing {
  border-color: orange;
}
.api-thing > .qm-api-collapsible-heading .qm-api-collapsible-toggle {
  background: orange;
}
index.um (Quantum)
@custom something
  @added 1.0.0
    @description
      Added something
@description
  Description of something

@thing thing1: Thing 1
@thing thing2: Thing 2
Example Result
something
added
Added
Added something
Description of something
thing1
Thing 1
thing2
Thing 2
You can also render a changelog:
Example Markup
changelog.um (Quantum)
@changelogList
  @process
    @inline index.um
@version 1.0.0
Example Result
1.0.0
something
Added
Added something