htmlify-js
v1.0.5
Published
Simple tool for maintaining files in a static website.
Downloads
27
Maintainers
joebannounaReadme
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 ⚠️: 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
targetDirdirectory where the source files are locatedoutDirdirectory where the compiled files will be atinputExtensionextension 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)