Awesome
<p align="center"> <img src="logo.svg?sanitize=true" alt="motionless logo"><br/> </p>Motionless is a static site generator for making websites using plain JavaScript and HTML with Node. There's no special templating or config language to learn. Instead you load plain HTML files and then use querySelectors and the DOM API to change pages using JavaScript, just like you would in the browser. Motionless has batteries included - it bundles dependencies for doing static site stuff like markdown rendering, parsing HTML, reading and writing files, querySelectors, etc. The result is a concise JavaScript API to specify exactly how to turn your HTML file into multiple web pages with different content. Motionless has a bias towards shipping sites fast and tries to save on typing.
Install
npm i motionless
Use
The fastest way to get started is with the motionless-site node template:
npm i motionless-site YOUR-SITE-NAME
cd YOUR-SITE-NAME
This will create a new project in YOUR-SITE-NAME
that use motionless to build pages.
To start from scratch instead, there is a minimal working example in the example folder. You can use the live-reload
package (npm i live-reload
) to serve your build directory while you build your static site.
Static site recipes
The following are some recipes for doing common static site tasks.
In this first example we load an HTML file and a markdown file and replace the <main>
element with a rendered version of the markdown.
const m = require('motionless');
// load and parse index.html to use as a template
const template = m.dom(m.load("index.html"));
// load README.md and render it to an HTML string
const content = m.md(m.load("README.md"));
// set the <main> tag contents to the rendered markdown
template.$("main").innerHTML = content;
// save the whole thing into the file readme.html
m.save("readme.html", template.render());
Here's another example building a table of contents from all of the <h2>
tags on the page. We use the hyperscript helper to generate HTML using JavaScript code.
// get a list of the h2 headers in the page
const headers = template.$$("h2");
if (headers.length) {
// build a list of <li> tags with an <a> link for every header
const items = headers.map((h2)=>{
// add a named href the TOC can link to
h2.appendChild(t.h("a", {"className": "pilcrow", "name": m.slug(h2.textContent)}, " "))
// create the TOC <li> link tag
return t.h("li", {}, t.h("a", {"href": "#" + m.slug(h2.textContent)}, h2.textContent));
});
// create the top level <ul> tag containing the items
const toc = template.h("ul", {"className": "toc"}, items);
// prepend the table of contents inside the <main> tag
template.$("main").prepend(toc);
}
A final example showing how to load up several markdown pages and render them using a single template.
m = require('motionless');
// load our basic page
template = m.dom(m.load("index.html"));
// list the content folder full of markdown files
m.dir("content").forEach(function(pagefile) {
const page = m.load("content/" + pagefile);
const title = pagefile.replace(/\-/g, " ").replace(".md", "");
// set the main part of the template, the title, and the h1 tag
template.$("main").innerHTML = m.md(page);
template.$("title").textContent = title;
template.$("h1").textContent = title;
// save the updated HTML file
m.save(pagefile.replace(".md", ".html"), template.render());
});
API
m.load(path)
Reads the entire file at path
and returns a string synchronously.
m.save(path, contents)
A simple alias for writeFileSync
to write the string contents
into the file at path
.
m.dir(path)
A simple alias for readdirSync
to get a listing of files in the directory at path
.
m.glob(globstring)
An instance of node-glob to provide a convenient way to generate file listings using wildcards etc.
m.dom(html)
Parses the html
string using jsdom
and returns a jsDOM object that behaves just like a browser HTML Node
.
For convenience the returned jsdom object has some useful properties set:
template.doc
- convenient access to thedocument
object.template.$
- a shortcut fortemplate.doc.querySelector
returning a single HTMLNode
.template.$$
- a shortcut forquerySelectorAll
returning a JavaScript array of HTMLNode
s.template.h
- a hyperscript instance you can use to build new DOM elements.template.render()
- convenience function for returning the HTML string of the rendered document.
m.remove(element)
Convenience function to remove HTML element
from it's parent node.
m.md(markdown)
Render the markdown
string to an HTML string. If you want to modify the rendered markdown using the DOM API just wrap it with m.dom()
like this:
const content = m.dom(m.md(m.load("README.md")));
m.minify(various)
An instance of minify that you can use to crunch various types of files. For example CSS and JavaScript:
const styles = await minify('style.css');
const js = await minify('main.js').catch(console.error);
m.slug(text)
Converts text
into a URL-friendly path, for example: My Wonderful Webpage
becomes my-wonderful-webpage
.
Who
Hi, 👋 I'm Chris and I made this. You can find me online at mccormick.cx and @mccrmx. I made this so I can ship static websites fast using Node.