1.0.5 • Published 10 months ago
htmlify-js v1.0.5
htmlify-js
A simple library to manage files in a static website where reusability and component functionality is needed.
- ✅ Compile files to html using reusable compoenents.
- ✅ Nest compoenents within components
- ✅ Need to make a change? Update a component, recompile, and all files using it will update.
- ✅ Watch option for live development
Installation
Global installation
npm install htmlify-js -g
Local installation
npm install htmlify-js --save-dev
Usage
Create an index.comp
file
@include "header"
<h1>Htmlify makes static code resuable!</h1>
@include "footer"
In the same directory, create _header.comp
and _footer.comp
files (_
is used to identify sub-components).
_header.comp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>htmlify-js</title>
</head>
<body>
_footer.comp
</body>
</html>
Now to compile, run:
npx htmlify-js
index.html (output)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Htmlify makes static code resuable!</h1>
</body>
</html>
Environment variables
Warning ⚠️: Do not environment variables that contain sensitive info. The variables will end up in the compiled HTML and anyone is able to view them. Only include variables that are meant to be seen, such as public keys etc..
Used as follows:
.env
MY_EXAMPLE_ENV_VAR="Welcome!"
index.comp
<div>@env "MY_EXAMPLE_ENV_VAR"</div>
index.html (output)
<div>Welcome!</div>
Configuration
For more control, create an htmlify.config.json
file in the root directory of where you run the compilation:
htmlify.config.json (default settings)
{
"targetDir": ".",
"outDir": ".",
"watch": false,
"inputExtension": "comp",
"outputExtension": "html",
"outputExtension": false
}
Settings
targetDir
directory where the source files are locatedoutDir
directory where the compiled files will be atinputExtension
extension of files that htmlify-js will look for to compile (.comp by default)outputExtension
extension of files that htmlify-js will compile to (.html by default)envDir
directory of.env
file to use environtment variables in template (false by default)