pagejs
v1.0.0
Published
Generate HTML5 with javascript.
Downloads
12
Readme
PageJS
Theme-able HTML markup generator.
API
Sample usage:
const Page = require('@ayn/pagejs')
let page = new Page({ title: 'Hello World!' })
.div(_=>{
_.div('I am a div inside a div.')
_.h1({ style: 'color: red;' },'Cool, uh?', _=>{
_.br()
_.span('I am inside h1, so I am red too!')
})
})
let markup = page.getMarkup()Constructor
Constructor takes a single object used for configuration, here are the default values:
{
doctype: '<!doctype html>',
lang: 'en',
charset: 'utf-8',
title: 'Untitled paged',
body: 'No content.',
theme: null,
tags: {
self_closing: [
'area', 'base', 'br', 'col', 'embed', 'wbr', 'input',
'img', 'source', 'link', 'meta', 'param', 'hr', 'track'
],
autoclose: false,
}
}Methods
There is only one method.
page.getMarkup()Returns the markup code of the page or in the case of a child element (obtained through a tag callback) a subset of it.
Child elements also contain two properties el.parent and el.siblings.
You can also process objects directly.
new Page().getMarkup({
div: {
attributes: { style: 'background: purple' },
content: 'wowza',
children: []
}
})Themes
Plain HTML is useful but not very practical in rapid development.
PageJS supports themes in the form of a JSON object. You can create your own as well as used pre-existing ones. This makes working with css frameworks even easier than working with them directly.
Here's an example:
let page = new Page({theme:'boostrap-4', title: 'Admin Panel' })
.navbar({ class: 'dark_dark' }, _=>{
_.brand({ href:'website.com' }, 'COMPANY')
_.toggler()
})
.container({ class: 'fluid', style: 'padding: 20px'}, _=>{
_.breadcrumb(_=>{
_.item('Home')
_.item('Library')
})
_.jumbotron(_=>{
_.h1('Hello, world!')
_.p('Welcome to my page! It was made with JS.')
_.br()
_.btn('Learn more')
})
})Which results in
Themes allow for the creation of sudo tags and sudo classes.
You can check out a base theme file here as well as find information on its structure.
Compiling
You can use the pagejs-webpack-plugin.
To compile .page.js files into .html if you wish to skip html all together in your projects.
Sponsors
If you would like to support me
or feel free to hire me!