Configuration

Configuration for Propulsion is done in the propulsion.settings.json file in the project’s root directory. Here you can setup a variety options to customize your build of Propulsion.

Project Branding

The primary

Configuration Logo and Name
Parameter	Type	Description
`projectName`	String	This is the project name, it will fill in the `<title>` and be displayed in the side bar top if no logo is provided
`projectLogo`	String	This is the project logo, it will is displayed in the side bar top, and should be added as a path to an image file
`styleCompilePath`	String	Path of the design systems CSS file, expects a list of forward-slash (`/`) separted folder names
`styleCompileFile`	String	File name and extenstion of the design system CSS file
`language`	String	Defines the default language for the system in the `<html>` element’s `lang` attribute

{
	"projectName": "The Awesomeness System",
	"projectLogo": "./src/assets/awesomeness-logo.svg",
	"styleCompilePath": "./dist/css",
	"styleCompileFile": "main.css",
	"language": "en",
}

These settings are passed on verbatium to Eleventy, and values should follow Eleventy’s supported languages shorthand. If you do need to modify the Eleventy settings beyond what is possible here, review the Advanced Configuration instructions.

Defaults

CSS File Location
Parameter	Default Type	Description
`defaultTemplateEngine`	String or `false`	Define a template language or set to `false`
`defaultMarkdownEngine`	String or `false`	Define a template language or set to `false`
`defaultMarkdownEngine`	Array	Provide a comma-separated list of supported template formats within square brackets

{
	"defaultTemplateEngine": "njk",
	"defaultMarkdownEngine": "njk",
	"templateFormats": ["njk", "md"],
}

Main Eleventy Directories

The directories section has three parts, the first is main. These parameters are all directories that are passed directly to Eleventy to compile the HTML. To learn more about how this functions, see Eleventy Configuration Options

Main Eleventy Directories
Parameter	Type	Description
`input`	Directory Path as String	Primary source directory for tempate files
`output`	Directory Path as String	Primary output directory for compiled HTML files
`includes`	Directory Path as String	Partials directory relative to the `input` path
`layouts`	Directory Path as String	Layouts directory relative to the `input` path
`data`	Directory Path as String	Data directory relative to the `input` path

{
	...
	"directories": {
		"main": {
			"input": "src/docs",
			"output": "dist",
			"includes": "../catalysts",
			"layouts": "../schematics",
			"data": "../data"
		}
	},
	...
}

Watch and Copy Directories

The second and third parts of the directories section is for setting up directories to watch during development builds and to copy files during the build.

CSS File Location
Parameter	Default Type	Description
`watch`	Array	This parameter takes an array of directories from the projects root that the build will watch for changes when running `npm start`
`copy`	Array of Objects	The copy parameter takes an array of objects consisting of a key value pair of input and output directories. The input directories are relative to the project root directory, while the output directories are relative to the defined `main.output` directory.

{
	...
	"directories": {
		...
		"watch": [
			"src/static",
			"config/assets",
			"config/tasks",
			"config/styles",
			"config/scripts"
		],
		"copy": [
			{"src/static": "/"},
			{"config/assets": "/propulsion"}
		]
	},
	...
}

Custom Styling

Custom styling is a feature unique to Propulsion that allows you to customize the user interface and code block styles.

User Interface Styles

The user interface styles for Propulsion, including vertical and horizontal toolbars and documentation styles.

User Interface Styles
Parameter	Type	Description
`fontFamily`	Font Stack List	Default font for the Propulsion interface, including the toolbars and documentation
`uiBackgroundColor`	Color: `hsl()`, HEX, etc.	Background color for the vertical and horizontal toolbars
`uiBorderWidth`	Unit Value: `px`, `rem`, etc.	Border thickness between sections and elements
`uiBorderColor`	Color: `hsl()`, HEX, etc.	Border color between sections and elements
`uiLinkDefaultColor`	Color: `hsl()`, HEX, etc.	Documentation default link color
`uiLinkHoverColor`	Color: `hsl()`, HEX, etc.	Documentation hover state link color
`uiLinkVisitedColor`	Color: `hsl()`, HEX, etc.	Documentation visited state link color
`uiSidebarWidth`	Unit Value: `px`, `rem`, etc.	Width of the navigation toolbar
`uiNavTextColor`	Color: `hsl()`, HEX, etc.	Navigation button default text color
`uiNavTextHoverColor`	Color: `hsl()`, HEX, etc.	Navigation button hover state text color
`uiNavBackgroundHoverColor`	Color: `hsl()`, HEX, etc.	Navigation button hover state background color
`uiNavTextActiveColor`	Color: `hsl()`, HEX, etc.	Navigation button active state text color
`uiNavBackgroundActiveColor`	Color: `hsl()`, HEX, etc.	Navigation button active state background color

{
	"styles": {
		"fontFamily": "system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans',Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'",
		"uiBackgroundColor": "hsl(213deg 6% 93%)",
		"uiBorderWidth": "1px",
		"uiBorderColor": "hsl(213deg 6% 80%)",
		"uiLinkDefaultColor": "hsl(213deg 100% 48%)",
		"uiLinkHoverColor": "hsl(213deg 100% 48%)",
		"uiLinkVisitedColor": "hsl(303deg 100% 28%)",
		"uiSidebarWidth": "14rem",
		"uiNavTextColor": "hsl(213deg 6% 32%)",
		"uiNavTextHoverColor": "hsl(213deg 6% 32%)",
		"uiNavBackgroundHoverColor": "hsl(213deg 6% 89%)",
		"uiNavTextActiveColor": "hsl(213deg 6% 100%)",
		"uiNavBackgroundActiveColor": "hsl(213deg 100% 48%)"
	}
}

Code Syntax Highlighting Styles

The syntax highlighting of code blocks is used in the component code view as well as in code blocks within any documentation. These parameters define the font, background color, and various text colors of the code block. Syntax highlighting is performed by the official Eleventy plugin which is based on the Prism.js project.

User Interface Styles
Parameter	Type	Description
`codeFont`	Font Stack List	Defines the font stack used for code blocks
`codeDefaultBackground`	Color: `hsl()`, HEX, etc.	Sets the background color for the code block
`codeDefaultColor`	Color: `hsl()`, HEX, etc.	Defines the default color
`codeCommentColor`	Color: `hsl()`, HEX, etc.	Defines the color for comments
`codePunctuationColor`	Color: `hsl()`, HEX, etc.	Defines the color punctuation
`codeTagColor`	Color: `hsl()`, HEX, etc.	Defines the color for attribute names, deleted blocks, namespaces, and markup tags
`codeNameColor`	Color: `hsl()`, HEX, etc.	Defines the color for the name of function declaration
`codeNumberColor`	Color: `hsl()`, HEX, etc.	Defines the color for booleans, functions, and numbers
`codePropertyColor`	Color: `hsl()`, HEX, etc.	Defines the color for class names, constants, properties, and symbols
`codeRuleColor`	Color: `hsl()`, HEX, etc.	Defines the color for at-rules, important, keywords, and selectors.
`codeValueColor`	Color: `hsl()`, HEX, etc.	Defilnes the color for attribute values, char, regex, strings, and variables
`codeOperatorColor`	Color: `hsl()`, HEX, etc.	Defines the color of an entity, operator, and url
`codeInsertedColor`	Color: `hsl()`, HEX, etc.	Defines the color for inserted blocks

Example of the codeStyles parameters:

{
	...
	"codeStyles": {
		"codeFont": "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace",
		"codeDefaultBackground": "hsl(217deg 13% 99%)",
		"codeDefaultColor": "hsl(217deg 22% 32%)",
		"codeCommentColor": "hsl(217deg 13% 50%)",
		"codePunctuationColor": "hsl(217deg 10% 40%)",
		"codeTagColor": "hsl(39deg 67% 69%)",
		"codeNameColor": "hsl(187deg 47% 55%)",
		"codeNumberColor": "hsl(207deg 82% 66%)",
		"codePropertyColor": "hsl(286deg 60% 67%)",
		"codeRuleColor": "hsl(95deg 38% 62%)",
		"codeValueColor": "hsl(355deg 65% 65%)",
		"codeOperatorColor": "hsl(5deg 48% 51%)",
		"codeInsertedColor": "hsl(29deg 54% 61%)"
	}
}