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 -gLocal installation
npm install htmlify-js --save-devUsage
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-jsindex.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
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
-
targetDirdirectory where the source files are located -
outDirdirectory where the compiled files will be at -
inputExtensionextension of files that htmlify-js will look for to compile (.comp by default) -
outputExtensionextension of files that htmlify-js will compile to (.html by default) -
envDirdirectory of.envfile to use environtment variables in template (false by default)