Home

Hello beautiful static world

October 13, 2020 @ 17:55 UTC

This page is created with the CABB[0] static site generator. Uses Commonmark.js for MD -> HTML conversion.

[0] Check the video on the bottom of this page for the origins of the name "CABB"

Basic usage is simple

1. Create markdown posts in src/*
2. Manually add any media (images/video) to public/media/*
3. Render the pages with ./render.sh (output in public/*)

Images

Images need to be manually added to public/media/*.

• Unordered list
• Another item
  • A nested item

1. Numbered item
2. Second numbered item

Let's try a little longer piece of code - this is the utilities/md2html.js script that generates the HTML:

#!/usr/bin/env node
const commonmark = require('commonmark')
const fs = require('fs')

const reader = new commonmark.Parser()
const writer = new commonmark.HtmlRenderer()

function md2html(input) {
    let html = writer.render(reader.parse(input))
    
    // Add class="full-bleed" to images and remove <p> tags encapsulating it
    let re = /<p><img src(.*)<\/p>/gi
    let replaced = html.replace(re, '<img class="full-bleed" src$1')
    return replaced
}

fs.readFile(process.argv[2], 'utf-8', function (err, data) {
    if (err) {
        console.log(err) // might not want this here..
    }
    else {
        console.log(md2html(data))
    }
})

Would be kind of nice to have syntax highlighting, might add that later. And if there was also a way to add line numbers without breaking copy/paste then that would be a nice extra. Maybe Highlight.js, although it doesn't seem to have numbering.

Here's another image:

Here's embedding a Youtube video. Simply a matter of pasting the embed code from Youtube straight into the markdown file.

This:

<iframe width="560" height="315" src="https://www.youtube.com/embed/EbxwGi8bTO8?start=71" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Renders this:

More details

For more details on under the hood stuff, check the project README.md.

Back to top