DS2 Core

"Installation"

File	Processes to
src/js/scaffolding.js	public/assets/
src/scss/scaffolding.scss	public/assets/
src/pg/core/core.scss.pug	src/scss/
src/pg/core/download.php.pug	public

All other pug files should compile to from src/pg/ to a relative path of public/*

Running the core

functions

beforeArticleLoad - called before any patterns are started to load success - called when loading a pattern is successful if the result is an HTTP 200 afterArticleLoad - called after any patterns are started to load done - called when the ajax for any pattern is done, whether successful or not. This is a useful place to load any javascript initializations that pattern.

About the content variable

The content variable in _config.pug defines your array of patterns. It is made up of the following attributes:

• name - the hypenated name of the pattern
• status - this should be one of the statuses from your status array
• display - (optional) if present this will be displayed, as is, instead of the name
• template - (optional) [ pug (default) | md ] the file type of a pattern's index file
• core - (optional ) [ true | false ] if true, it will pull from the core folder
• files - (optional) an array of patterns under the parent.

By changing and resaving the _config.pug file, (our change is often adding or removing a random space) all of the pug patterns will recompile. Note that md templates will not recompile automatically when config is saved and updated as markdown files don't have an include.

Including PugJS in Pug files without compiling

If you wish to include Pug output as code in your instance, you can do this without manually creating a second 'dot container' version of the file. Including files with 'unrecognised' extensions does not compile them.

1. In your project config, create a Custom Tool called Pug pattern to pug file
2. Check Process automatically and set the command to 'cp {{input}} {{output}}' on Mac/Linux and 'copy {{input}} {{output}}' on Windows. (This is just your operating system's command line file copy executable.)
3. Set the Output to Relative to input
4. Set the Output Extension to .pug

In your design system implementation,

1. Create the files that you edit as _[pattern].pp files, and set them to auto compile. (You may wish to let your text editor know what they are, so the syntax highlighting works.
2. Save the file, ensure that it is set to in prepros it is set to process automatically.
3. Include the .pp file as your pug pattern with .language-pug and include the .pug file as your html output.

This will ensure that the .pug file will get processed and the .pp file will be handled as text will get compiled, but they should display correctly and remain in sync while maintaining the minimum number of files.

Credits

This framework includes PrismJS for code syntax highlighting. PrismJS is released under the MIT license>