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
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.
# For converting an entire folder of pug files:
If the pugfix.py is not executable on your terminal, add execute permissions as follows: