Advanced Configuration

If you want want to fine tune Propulsion further, this is the place to start.

Modifying Propulsion should be done with extreme caution and intentionality. An understanding of both Eleventy and Node.js build tools is strongly recommended before undertaking changes, as this can affect the build reliability of your Propulsion instance.

All advanced configuration is done in the config directory.

Eleventy Specific Files

The Eleventy config for Propulsion is propulsion.config.js. This file bring together the Propulsion settings file and Propulsion’s custom code for Eleventy.

The remainder of the Eleventy-specific files can be found in the tasks directory.

propulsion.after.js
Contains any script that should run after the Eleventy build.
Read about After Events on 11ty.dev
propulsion.before.js
Contains any script that should run before the Eleventy build.
Read about Before Events on 11ty.dev
propulsion.copy.js
Runs any directory and file copies defined in the Propulsion settings during the Eleventy build.
Read about Passthrough Copy on 11ty.dev
propulsion.data.js
Provides custom global data for the Eleventy build.
Read about Custom Global Data on 11ty.dev
propulsion.shortcodes.js
Defines custom Shortcodes used in Propulsion, such as propulsionLoader.
Read about Shortcodes on 11ty.dev
propulsion.watch.js
Defines any directory and files to watch from the Propulsion settings during the Eleventy build.
Read about Watch Targets on 11ty.dev

Tools

The tools directory contains all the JavaScript related to generating the Propulsion markup. Unlike a standard Eleventy layout template, the Propulsion template is build via a short code, allowing it to be built independent of any specific templating language. The following files handle different aspects of the layout build.

page.js
Combines all the partials to generate the full Propulsion template.
ui.button.js
Component for buttons withing the Propulsion UI
ui.content.js
Generates the component and documentation views and blocks, including the codeblock and iframe views.
ui.head.js
Renders the `` tag used on Propulsion-generated pages.
ui.header.js
Component to generate the top toolbar of the component view.
ui.nav.js
Generates the side navigation toolbar, which reads the outputs the file listing of the `docs` directory.
ui.styles.js
Renders the custom styles defined in the `propulsion.settings.json` file from the [User Interface](/docs/configuration/#user-interface-styles) and [Code Syntax Highlighting](/docs/configuration/#code-syntax-highlighting-styles) Styles.
ui.svg.js
Component that loads in the defined icon from the sprite-sheet.svg file.
logo.svg
The Propulsion logo as displayed in the side toolbar.
sprite-sheet.svg
This sprite sheet contains all the user interface icons for Propulsion. The full SVG code is embedded on each page in Propulsion, and then called using the <use /> SVG element.

Scripts

Propulsion’s JavaScript is written in TypeScript, found in the scripts directory, and compiled during build. The @types directory stores any custom-defined TypeScript types.

Styles

Propulsion’s CSS is written in Sass, found in the styles directory, and compiled during build. The Propulsion Sass files follow the BEM naming convention with an Inverted Triangle architecture. Class names contain a prefix name spacing beginning with pr for Propulsion followed by the appropriate inverted triangle section: