SaaSBox
Search…
Adding new pages to your application

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
1
build> npm install -g html2pug
2
build> html2pug < index.html > index.pug
3
# Here input is index.html and output is index.pug
Copied!
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:
pugfix.py
4KB
Text
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:
1
pugfix.py ./index.pug
2
3
# For converting an entire folder of pug files:
4
5
pugfix.py <foldername>
Copied!
If the pugfix.py is not executable on your terminal, add execute permissions as follows:
chmod ugoa+x pugfix.py