quantum.config.js

Configuring Quantum

Quantum is configured by creating a config file called quantum.config.js which contains the pipeline definition as well as config for which files to build.

Available options

concurrencyNumberadded

How many pages that can be processed in parallel.

Default: 1

destStringadded

The target directory to output the built site files to.

Default: 'target'

fileReaderfileInfoFileInfooptionsObjectadded

The function used to load a file from disk and then convert it to a File object for use in a pipeline.

Arguments

fileInfoFileInfo

The FileInfo of the File to read.

options

The options to use when reading a file.

Properties

loader

The loader to use to read a file from disk.

resolveRootString

The path to resolve absolute files from.

Default: '.' (The current working directory)

loaderfileNameStringparentFilenameStringadded

The function to use for loading file content from disk.

Default:

function (filename) {
  return fs.readFileAsync(filename, 'utf-8')
}

Arguments

fileNameString

parentFilenameString

logLevelStringadded

The level of logging to use when running the command.

The available options are:

'none'
'error'
'all'

Default: 'all'

loggereventObjectadded

The logger to use when building and watching files.

It will be passed an event object from different stages of the pipeline.

Arguments

event

The object describing the event to log.

Every event has a type property, the events types used in Quantum are:

'header'
'message'
'build-page'
'page-load-error'
'copy-resource'
'error'
'end'
'error'

Properties for all events

typeString

The event type. This can be used to switch the behaviour of the logger.

Properties for event type 'header'

Events that should be logged as a header, e.g. 'Building Pages'

messageString

The header message to display.

Properties for event type 'message'

Informational events, e.g. 'Starting server on http://localhost:8080'

messageString

The message to display

Properties for event type 'build-page'

Events logged when building each page included in the pipeline.

destFilesArray[File]

The list of output files, including asset files such as CSS and JS

sourceFileFile

The source used when building a file

timeTakenNumber

The time taken to build the output file(s)

Properties for event type 'page-load-error'

Events logged for each file with an error

errorError

The error that was thrown

fileInfoFileInfo

The FileInfo object for the file that is in error

Properties for event type 'copy-resource'

Event logged when copying resources to the output directory.

fileInfoFileInfo

The resource file that has been copied

timeTakenNumber

The time taken to copy the resource (in milliseconds)

Properties for event type 'error'

Events logged when there are errors in the pipeline, excluding events that have explicit event loggers (e.g. 'page-load-error')

errorError

The error that was thrown

Properties for event type 'end'

The event logged at the end of a complete pipeline.

builtCountNumber

The total number of pages built in the pipeline

timeTakenNumber

The total time taken (in milliseconds)

pagesString / Array[String] / Array[Object]added

This property should describe the files that should be processed by quantum as pages.

pipelineArray[FileTransform]added

An array of FileTransform functions that take a page as the input and return a page (or array of pages) that have been transformed.

Here is the most basic pipeline you can define:

const html = require('quantum-html')

const pipeline = [
  html()
]

portNumberadded

The port to start the site on so it can be accessed in the browser (e.g. http://localhost:port ).

This is only used when watching.

Default: 8080

resolveRootStringadded

The path to resolve absolute files from.

Default: '.' (The current working directory)

Full-featured Example

Example

quantum.config.js (Javascript)

const html = require('quantum-html')
const api = require('quantum-api')
const version = require('quantum-version')
const template = require('quantum-template')
const diagram = require('quantum-diagram')
const markdown = require('quantum-markdown')
const codeHighlight = require('quantum-code-highlight')
const docs = require('quantum-docs')

// Provide type links for quantum-api
const typeLinks = {
  Array: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array',
  Boolean: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean',
  Function: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function',
  Number: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number',
  Object: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object',
  String: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String',
  Promise: 'https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise'
}

// Provide the languages to use when creating apis with quantum-api
const apiOptions = {
  languages: [
    api.languages.quantum(),
    api.languages.css(),
    api.languages.javascript({
      typeLinks: typeLinks
})
]
}

const htmlOptions = {
  embedAssets: false,
  // Output assets to `/resources`
  assetPath: '/resources',
  resourcesTarget: '/resources',
  entityTransforms: {
    // Add the entity transforms from all the quantum modules
    html: html.entityTransforms(),
    api: api.entityTransforms(apiOptions),
    diagram: diagram.entityTransforms(),
    markdown: markdown.entityTransforms(),
    docs: docs.entityTransforms(),
    highlight: codeHighlight.entityTransforms()
}
}

// Export the options for quantum to use
module.exports = {
  // The port to run quantum on when watching
  port: 9000,
  // The quantum pipeline to use when transforming files
  pipeline: [
    template.fileTransform(),
    api.fileTransform(apiOptions),
    version.fileTransform(),
    docs.fileTransform(),
    html.fileTransform(htmlOptions)
],
// The pages to include in the site
pages: {
  files: [
    'content/**/*.um'
],
base: 'content'
},
// The path to resolve absolute paths from
resolveRoot: 'content',
// Additional files to include on the site (e.g. custom CSS, SVG etc.)
resources: [
  {
    files: 'content/resources/**/*',
    dest: 'resources',
    watch: true
}
]
}