https://github.com/beforesemicolon/html-plus
HTML Template System and Site Builder
https://github.com/beforesemicolon/html-plus
express expressjs html html5 node nodejs site-builder static-site-generator template-engine template-language
Last synced: 8 months ago
JSON representation
HTML Template System and Site Builder
- Host: GitHub
- URL: https://github.com/beforesemicolon/html-plus
- Owner: beforesemicolon
- License: mit
- Created: 2021-05-27T23:25:02.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T07:25:00.000Z (about 2 years ago)
- Last Synced: 2025-08-15T04:33:57.710Z (10 months ago)
- Topics: express, expressjs, html, html5, node, nodejs, site-builder, static-site-generator, template-engine, template-language
- Language: JavaScript
- Homepage: https://html-plus.beforesemicolon.com/
- Size: 5.13 MB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# HTML+
HTML Template system to build websites
[](https://html-plus.beforesemicolon.com/)
```html
{post.title}
{post.thumbnail}
{post.description}
```
## Install
Install the engine inside your project directory.
```
npm install @beforesemicolon/html-plus
```
## Basic Express Server Setup
You can get started quickly with express with this few lines of code:
```javascript
// server.js
const express = require('express');
const http = require('http');
const path = require('path');
const {engine} = require('@beforesemicolon/html-plus');
const app = express();
(async () => {
// initialize the engine by passing the express app
// and the absolute path to the HTML pages directory
// everything else is taken care of for you
// from routing to processing linked files on your pages
await engine(app, path.resolve(__dirname, './pages'));
const server = http.createServer(app);
server.listen(3000, () => {
console.log('listening on port 3000');
})
})()
```
With the above setup you can organize your html files in a structure that you would like
your page routes to be.
The way you organize your page structure will be used to create your website route.
```
# File Structure # Routes
- server.js
- pages
- index.html /
- contact.html /contact
- about.html /about
- 404.html /404
- projects
- index.html /projects
- todo-project.html /projects/todo-project
```
## Template Tags & Attributes
HTML+ comes with couple of built-in tags that are meant to aid you with your pages. These are:
* **[include](https://html-plus.beforesemicolon.com/documentation/api-reference/include-tag)**: lets you include reusable partial html parts
* **[inject](https://html-plus.beforesemicolon.com/documentation/api-reference/inject-tag)**: lets you inject html into partial files. Works like html slot
* **[variable](https://html-plus.beforesemicolon.com/documentation/api-reference/variable-tag)**: lets you create scope data inside your template
* **[fragment](https://html-plus.beforesemicolon.com/documentation/api-reference/fragment-tag)**: lets you exclude the wrapping tag from rendering as a place to add logic
There are also some built-in attributes that let you control your tags even further. These are:
* **[if](https://html-plus.beforesemicolon.com/documentation/api-reference/if-attribute)**: lets you conditionally render a tag
* **[repeat](https://html-plus.beforesemicolon.com/documentation/api-reference/repeat-attribute)**: allows you to specify how the tag repeats bases on data you provide
* **[fragment](https://html-plus.beforesemicolon.com/documentation/api-reference/fragment-attribute)**: has the same purpose as the tag version of it
These list have the potential to grow but you can also [create your own tags and attributes](https://html-plus.beforesemicolon.com/documentation/advanced-templating)
that fits your project. You can come up with your own rules and behavior for the template and this
is what makes HTML+ more appealing. It allows you to extend the template easily
## Template Data Binding
HTML+ also lets you bind data from files directly into your templates.
All data is scoped and immutable. This is done using curly braces. Take the following file structure as example:
```
- pages
index.html
data
posts.json
```
You can reference the `post.json` file inside your template like so.
```html
{post.title}
{post.description}
```
For special attributes you don't need the curly braces to bind data, but everywhere else you need to wrap
your data reference inside curly braces. [Check full DOC to learn more](https://html-plus.beforesemicolon.com/documentation/).