@stageny/base
v2.0.9
Published
Simplistic static site generator
Downloads
234
Readme
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)
Page
- url
- meta
- content
- result
- render
- rawMeta
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