Comment on page
🌍
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.
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 theHELLO
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 theIMG
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 😊
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 inHELLO
phase, defined in defaults bySpig.hello()
.index.json
is some kind of meta-data file that needs to exist on the website. It is executed beforeRENDER
phase. This is the only time in the pipeline when we have both the target links defined and the content is still in Markdown.
Last modified 1yr ago