# htmlify-js

> Simple tool for maintaining files in a static website.

Latest version **1.0.5** (published 2023-07-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install htmlify-js
pnpm add htmlify-js
yarn add htmlify-js
bun add htmlify-js
```

Provides the command `htmlify-js`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-07-12 |
| First published | 2023-05-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Joe Bannouna |
| Maintainers | joebannouna |
| Keywords | static, html, htmlify, compiler, components, reusable, template, engine, htmlify-js |

## Links

- npm: https://www.npmjs.com/package/htmlify-js
- Repository: https://github.com/JoeBannouna/htmlify-js
- Homepage: https://github.com/JoeBannouna/htmlify-js#readme
- Issues: https://github.com/JoeBannouna/htmlify-js/issues
- npm.io page: https://npm.io/package/htmlify-js

## Dependencies (2)

- [dotenv](https://npm.io/package/dotenv.md) ^16.3.1
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-07-12
- 1.0.4 — 2023-05-28
- 1.0.3 — 2023-05-28
- 1.0.2 — 2023-05-27
- 1.0.1 — 2023-05-27
- 1.0.0 — 2023-05-27

## README

# 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
```bash
npm install htmlify-js -g
```

Local installation
```bash
npm install htmlify-js --save-dev
```

## Usage

Create an `index.comp` file
```html
@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
```html
<!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
```html
</body>
</html>
```

Now to compile, run:
```bash
npx htmlify-js
```

#### index.html (output)
```html
<!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
```env
MY_EXAMPLE_ENV_VAR="Welcome!"
```

### index.comp
```html
<div>@env "MY_EXAMPLE_ENV_VAR"</div>
```

### index.html (output)
```html
<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)
```json
{
  "targetDir": ".",
  "outDir": ".",
  "watch": false,
  "inputExtension": "comp",
  "outputExtension": "html",
  "outputExtension": false
}
```

#### Settings
- `targetDir` directory where the source files are located
- `outDir` directory where the compiled files will be at
- `inputExtension` 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)

---
_Source: https://npm.io/package/htmlify-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._