Scripts

Scripts are bundled and built with Webpack. The configuration is very basic by default, in order to write JavaScript in ES6 you must configure Webpack with Babel. See the Custom JavaScript Build docs.

Be sure to point the webpack.config.js entry point to your root JavaScript file. The built file will become available to you in your Nunjucks templates:

<!DOCTYPE html>
<html lang="en-US">
 <head>
  {{ 'styles/main.css' | file | style }}
  {{ 'main.js' | file | script }}
 </head>
 <body></body>
</html>

In the Writeroom

When working in the Pagedip Writeroom, no JavaScript will be executed. Any interactive elements or functionality in the theme that requires JavaScript will not be active until viewed live. If the theme requires javascript to set up parts of the page, you may considering having alternate CSS that creates a smooth user experience when working in the Writeroom.

If you need to have styles active only when working in the Writeroom, you could use the template variable inEdit to allow you to target styles for the editing environment. For example, one way to do it could be like this:

// layout.html
<body class="{% if inEdit %}in-edit{% endif %}"></body>

// main.scss
body.in-edit {
 // Writeroom specific styling
}

Styles Assets

Published with Pagedip • Last updated January 29th 2018