Real-world examples

Here are some real-world Spignite examples. Even though we didn't talk about existing operations, these examples will be understandable.

Simple website

const { Spig } = require('spignite');
​
Spig.hello();
​
Spig
  .on('/**/*.{md,njk}')
​
  ._("INIT")
  .pageMeta()
  .pageLinks()
  .tags()
​
  ._("RENDER")
  .render()
  .applyTemplate()
  .htmlMinify()
;
​
Spig
  .on('/**/*.{png,jpg,gif}')
​
  ._("INIT")
  .assetLinks()
​
  ._("IMG")
  .imageMinify()
;
​
Spig.run();

This is how one simple website is built. Let's dig the code.

• Spig.hello defines the HELLO phase with all the default operations that works on default structure: dealing with css, javascript, images, static etc. Content and layers are not covered.

• INIT phase for markdown files collect some meta-data (attributes) and define the output links. Similar thing happens on the second set (images), where only output links are defined.

• INIT phase on the first set also collect tags and pages that defines them.

• RENDER phase is one that process markdown files to HTML (render() operation), then applies the template, and finally, performs the HTML minification of the code.

• Images set does not have the RENDER phase, but the IMG phase, where images gets minified.

The order of phases is: HELLO, INIT, RENDER, IMG.

Advanced example

const { Spig } = require('spignite');
​
Spig.hello();
​
function postsToRoot(path) {
  if (path.dirname.startsWith('/posts/')) {
    path.dirname = path.dirname.substr(6);
  }
}
​
Spig
  .on('/**/*.{md,njk}')
  .watchSite()
​
  ._('META')
  .pageMeta()
  .readingTime()
  .tags()
  .summary()
​
  ._('INIT')
  .do('slug-from-title', fileRef => {...})
  .pageLinks()
  .rename(postsToRoot)
​
  ._('RENDER')
  .render()
  .applyTemplate()
  .htmlMinify()
;
​
Spig
  .on('/**/*.{png,jpg,gif}')
​
  ._('IMAGES')
  .assetLinks()
  .rename(postsToRoot);
​
Spig
  .on('/index.json')
​
  ._('RENDER^BEFORE')
  .pageMeta()
  .applyTemplate()
;
​
Spig.run();

This example has two custom javascript codes: one is a function postsToRoot and the second is a lambda in line #22 (removed for simplicity).

• Content files this time defines also reading time and extract the summary, all in META phase. In other words, we just collect meta-data about the content.

• INIT phase is all about links. It defines page slugs from the page title and removes the /post/ prefix from the URL.

• RENDER phase is the same as in previous example.

• IMAGES process the images from the content folder. Note that images from the /src/images are processed in HELLO phase, defined in defaults by Spig.hello().

• index.json is some kind of meta-data file that needs to exist on website. It is executed before RENDER phase. This is the only time in the pipeline when we have both the target links defined AND the content is still in Markdown.