@stageny/base NPM

Introduction

Stageny (without plugins) is a basic but powerful static site generator that focuses on performance, versatility and simplicity. It has been born out of the wish for a (node/js only) replacement for Middleman.

It compiles pages written in many templates languages (but prefering PUG) into HTML. It does not compile to CSS or JS or anything else.

A page is built with those 4 elements

Pages

A page has two parts: frontmatter data and the actual template. (JS is slightly special, see below).

The frontmatter will be parsed right away so you can use it for routing / sitemap. It will be accessible in templates via _meta. Put into data what you want to populate to the merged data object.

i-am-a-page.html.pug

---
title: I am a page
data:
  date*: new Date()
layout: default
---

h1 #{_meta.title} from #{date.toLocaleString()}
p With not much content

or i-am-a-page.html.js

module.exports = {
	 data: {
		 title: 'I am a page',
		 layout: 'default',
		 data: {
		 	date: () => new Date()
		 }
	 },
	 render(data) {
		 return `
			<h1>${data._meta.title} from ${data.date}</h1>
			<p>With not much content</p>
		`
	 }
}

Stageny in its core supports Components and Layouts.

Layouts

A page's frontmatter layout: default points to a specific layout:

layouts/default.pug:

html
	head
		title #{_meta.title}
	body
		!= content

A layout too can have frontmatter which will be overruled by the page (except for layout which you use to define a super layout).

Components

Components must be uniquely named, no matter their file path. Frontmatter serves as default paramters.

components/Button.pug:

---
tag: button
content: Button
---

#{tag}.Button(type=(tag === 'button' && tag))!= content

content is a special parameter, at least in pug, as the slot will be put into it.

page.html.pug:

+Component('Button')
	i.Icon(data-icon="plus")
	| Add

page.html.js:

module.exports = function(data) {
	return data.component('Button', {
		content: `<i class="Icon" data-icon="plus"></i> Add`
	})
}

Data

Data can be global or on a page level.

Data will be applied in this order:

_page and internal component helper
data and _data (if Data Plugin)
helpers and _helpers (if Helper Plugin)
page frontmatter (also via _page.meta)

Events / Plugins

Plugins (and helpers) can sneak into any of those events:

init (before first run)
on every run: - start - sitemap (array of pages) - for every page: - beforepageprocess (file) - beforepagedata (file, data) - afterpagedata (file, data) - beforepagerender (file) - afterpagerender (file) - afterpagewrite (file) - pageerror (file) - end