🌍
Real-world examples

See Spignite in action.
Here are some real-world Spignite examples. Even though we didn't talk about existing operations, these examples will be understandable.
Simple website
import { Spig } from "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 work with the default folder structure: dealing with CSS, javascript, images, static files, etc. Content and layers are not covered in this phase.
INIT phase for markdown files collects some meta-data (attributes) and defines the output links. A similar thing happens on the second set (images), where only output links are defined.
INIT phase on the first set also collects tags and pages that define them.
RENDER phase is one that processes 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 get minified.
The order of phases is as defined in the file: HELLO, INIT, RENDER, IMG.
Don't forget the alternative syntax if this one looks awkward 😊
Advanced example
1
import { Spig } from "spignite";
2
​
3
Spig.hello();
4
​
5
function postsToRoot(path) {
6
  if (path.dirname.startsWith('/posts/')) {
7
    path.dirname = path.dirname.substr(6);
8
  }
9
}
10
​
11
Spig
12
  .on('/**/*.{md,njk}')
13
  .watchSite()
14
​
15
  ._('META')
16
  .pageMeta()
17
  .readingTime()
18
  .tags()
19
  .summary()
20
​
21
  ._('INIT')
22
  .do('slug-from-title', fileRef => {...})
23
  .pageLinks()
24
  .rename(postsToRoot)
25
​
26
  ._('RENDER')
27
  .render()
28
  .applyTemplate()
29
  .htmlMinify()
30
;
31
​
32
Spig
33
  .on('/**/*.{png,jpg,gif}')
34
​
35
  ._('IMAGES')
36
  .assetLinks()
37
  .rename(postsToRoot);
38
​
39
Spig
40
  .on('/index.json')
41
​
42
  ._('RENDER^BEFORE')
43
  .pageMeta()
44
  .applyTemplate()
45
;
46
​
47
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).
We are also collecting reading time and extracting the summary, all in the META phase. In other words, we just collect more 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 the 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 the 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.
Processing
Structures
Last modified 1yr ago