What is hbt?

hbt stands for HTML Bundler & Template Engine.

hbt = HTML + Super Power

Why hbt?

Although frameworks like Vue, React, Angular has made our life very easy. However sometimes for small projects and portfolio we often use Just vanilla js and have just one index.html file. In that case sometimes HTML file gets really long and hand to maintain. But worry not hbt is here to rescue. With hbt you have many super powers like come splitting and a lot more. And since hbt is a Dev Dependency and works as compiler your end code will have 0 performance loss.

Installing hbt

npm i hbt -D

Usage

Create a js file and populate it like shown below and run it with node

const { compile } = require('hbt')

//Path to development file
const dev = "./dev/index.html"

//Path to production file
const build = "./build/index.html"

//If you wanna pass some data define them
// you'll be able to access them using data.propertyName
const data = {
	title: "My Website",
	links: ["home", "about", "login"]
}

//Optionally you can pass some option
// here are available options and their default
const ops = {
	info: true, //Is set false fewer console logs will be shown
	watch: false, //Weather to auto recompile on file change or not
	minify: false //if set true output HTML will be minify
}

//Only first 2 arguments are required
compile(dev, build, data, ops)

3 Rules To follow

1. To output data use {{}} syntax. You'd be able to use JavaScript inside those braces

<title>{{ data.title }}</title>

2. To execute JavaScript statement that doesn't output anything use <%%> syntax.

<ul>

   <% data.links.map(link => { %>

      <li>{{ link }}</li>

   <% }) %>

</ul>

3. While using hbt only use single qoutes. Double quotes will cause issue.

hbt utilities

lorem

You may have used lorem ipsum. Its basically random text generator. hbt has a function to do that. Just call hbt.lorem function with number of words you want.

<p>{{ hbt.lorem(8) }}</p>

The output will be

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

picsum

Similar to lorem ipsum there is lorem picsum to genrate random image url.

To get a url of a square image:

<img src="{{ hbt.picsum(200) }}" alt="">

The output will be

<img src="https://picsum.photos/200" alt="">

Or to get a url of a square image of specific width and height:

<img src="{{ hbt.picsum(200, 300) }}" alt="">

The output will be

<img src="https://picsum.photos/200/300" alt="">

Lastly you can set third argument to true to get same image every time

<img src="{{ hbt.picsum(200, 300, true) }}" alt="">

The output will be

<img src="https://picsum.photos/seed/picsum/200/300" alt="">

font

You can use the font function to get google font cdn

<link href="{{ hbt.font('Roboto') }}" rel="stylesheet">

The output will be

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">

You can add array of font weights as second argument

<link href="{{ hbt.font('Roboto', [100, 400, 900]) }}" rel="stylesheet">

The output will be

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;900&display=swap" rel="stylesheet">

resource

This is a really powerful utility of hbt. With this function you can download resources from CDN and link it in HTML directly. It takes three argument: CDN link, folder to save in(starting after build folder), and name to save as. eg:

<link href="{{ hbt.resource('https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css', '/css/', 'bootstrap.css') }}" rel="stylesheet">

The output will be

<link href="/css/bootstrap.css" rel="stylesheet">

This will create css folder(if doesn't exists) inside build folder and download bootstrap CSS locally. While using this make sure url absolutely point to the file.

include

include is another really helpful function. You can use it to import HTML Component/File or svg file in your html.

{{ hbt.include('./components/footer.html') }}

If you want you can also pass data in include function. Then in that file/component you'll be able to use those data using data.property

{{ hbt.include('./components/footer.html', {year: 2020}) }}

cdn

hbt also ships with some useful CDN links. you can access them using hbt.cdn.name

<link href="{{ hbt.cdn.MDI }}" rel="stylesheet">

The output will be

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Available CDNs:

Font awesome: FA

Material design icons: MDI

Bootstrap CSS: BOOTSTRAP_CSS

Bootstrap JS: BOOTSTRAP_JS

JQuery: JQUERY

Popper: POPPER

Advance examples

Nesting statements

<% if(data.todos.length > 0){ %>

	<ul>

		<% data.todos.map(todo => { %>

			<li>{{ todos.title }}</li>

		<% }) %>

	</ul>

<% }else{ %>

	<p>No todos yet</p>

<% } %>

downloading hbt cdn

<link href="{{ hbt.resource(hbt.cdn.BOOTSTRAP_CSS, '/css/', 'bootstrap.css') }}" rel="stylesheet">

passing big data

<%

const post = {
	title: "hbt rocks",
	img: "https://fakeurl.com/img.jpg",
	reacts: 75,
	tags: ["hbt", "bundler", "template engine"]
}

%>

{{ hbt.include('./components/card.html', post) }}