Adding new pages to your application

You are now really convinced SaaSBox frontend templates are the way to go, you have picked a template you want to use and want to modify it with new pages, and import a new design from elsewhere. This is the right section to get started.

Converting HTML files into pug files

You can import any html page into SaaSBox and use them to create new templates, or add pages to existing ones.

Step 1. Download the HTML page or snippet

Step 2. Install and run html2pug conversion tool as below to create a new pug file

build> npm install -g html2pug
build> html2pug < index.html > index.pug
# Here input is index.html and output is index.pug

Step 3. Run the pugfix.py script on the <filename>.pug file. See below for details.

Pugfix.py tool enables using Pug with Tailwind CSS

Download here:

4KB

pugfix.py

Pugfix.py does two things:

• It fixes all Tailwinds CSS classes to replace illegal characters. Every incompatible class name (those that use a "." or "/" in them) is converted to use an underscore "_". As an example, a tailwind class name such as px-1.5 becomes px-1_5.

• It adds an asset() tag to all static file references. Wrapping all asset file references in the pug file with the "asset()" function is required by SaaSBox to correctly reference the right content distribution (CDN) URL for the asset after it is deployed.

Using pugfix.py you can convert an entire template directory with pug files.

Usage:

pugfix.py ./index.pug

# For converting an entire folder of pug files:

pugfix.py <foldername>

If the pugfix.py is not executable on your terminal, add execute permissions as follows:

chmod ugoa+x pugfix.py