boxedjs
Advanced tools
Readme
A simple static HTML templating engine.
While working on my personal website, which is just static HTML and CSS, I realised I would need some very basic templating system. I didn't want to clutter the project with too powerful or overly-complicated engines, just to repeat my footer and header in all the pages of the website.
So I wrote this.
NOTE: This is intended as an experiment and nothing more.
npm install -g boxedjs
You can create a project manually or with the project starter option:
boxed create [project-template] [project-name]
in the folder where you want to start a new project.
The available templates are simple-website and simple-blog.
The script needs to be run in the root folder of the project and it expects the following project structure:
/
├── src/
├── assets/
├── pages/
├── templates/
├── .boxedrc
where the content of the folders is the following:
src/assets: contains all the styling files, images and other files but html.src/pages: contains the pages of your websitesrc/templates: contains the templates used inside the pagesThis file contains the configuration for the project. By default it has the following content:
{
"name": "Untitled project",
"folders": {
"pages": "src/pages",
"templates": "src/templates",
"assets": "src/assets",
"dist": "dist"
}
}
Feel free to customise it to suit your project structure better.
Whenever you want to use one of the templates in one of the pages you can require them like the following:
<!-- src/pages/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My templated website</title>
</head>
<body>
[[header]] <!-- Template src/templates/header.html -->
<div>
<p>Occaecat eu occaecat cupidatat et in dolore ullamco do dolore laboris magna deserunt in fugiat aute irure occaecat veniam tempor fugiat qui cillum ad aliquip dolore labore pariatur ut dolore est sit minim amet irure.
</p>
</div>
[[footer]] <!-- Template src/templates/footer.html -->
</body>
</html>
The code above, will result in a page called index.html which will contain the injected content of the templates.
While the approach above can be enough if you want to build simple, and unique pages, what about more complex cases like a blog post?
Boxedjs allows you to specify pages in different formats (json or yaml) which contains information about a page, which will be then applied to a specific template. To follow the blog example, you could try to create a page like the following:
src/pages/blog-post-1.json
{
"path": "post-1",
"template": "post",
"content": {
"title": "Blog post 1",
"author": "Emanuele Libralato",
"date": "22 September 2017",
"content": "In do mollit eu magna eairure dolor excepteur et deserunt tempor duis commodo sed eiusmod in ullamco nisi sit eu est occaecat culpa excepteur."
}
}
and then the template which will be applied to this page:
src/templates/post.html
<!DOCTYPE html>
<html lang="">
<body>
<h1 class="text-center">Hello Human! This is a blog post</h1>
<h1>[[[ title ]]]</h1>
<h2>[[[ author ]]] - [[[ date ]]]</h2>
<p>[[[ content ]]]</p>
</body>
</html>
Boxedjs will generate a page called dist/post-1/index.html.
You can find more specific examples in the example folder.
Once you finished writing your HTML, you can just run:
cd root_of_project
boxed
The website will be exported in the dist/ folder.
You can run boxedjs specifying the option -w or --watch.
This will watch the full folder and will build a new version whenever there is a new change.
The folder examples of this repository contains the output of the two project templates simple-website and simple-blog.
FAQs
A simple static HTML templating engine.
The npm package boxedjs receives a total of 13 weekly downloads. As such, boxedjs popularity was classified as not popular.
We found that boxedjs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.