risk-ladder/bin/preprocess.js

/**
 * Generate html files, target-dependent
 * Context for embedding page is loaded from markdown file
 */
const process = require('process');
const path = require('path');
const fs = require('fs');
const posthtml = require('posthtml');
const expressions = require('posthtml-expressions');
const marked = require('marked');
const config = require('../build.json');


const target = process.env.NODE_ENV || 'development';

// Change current directory to script location so that
// the relative paths of the resources can be resolved
process.chdir(path.dirname(process.argv[1]));

function createDirectory(dir) {
    fs.mkdirSync(
        dir,
        { recursive: true },
        (error) => {
            if (error !== null) {
                console.error('Error while creating directory', error);
            }
        }
    );
}

function createVisualisationHtml() {
    const visualisation = fs.readFileSync(
        path.join(
            '../',
            config.path.input,
            config.path.html,
            config.path.skeletons,
            config.html.visualisation.skeleton
        ), 'utf8'
    );

    // "D-dis is insanity, Max!"
    // Generate html file for the visualisation
    posthtml(
        expressions({
            locals: {
                javascript: path.join(config.path.js, `${config.main}${config[target].infix}.js`),
                stylesheet: path.join(config.path.css, `${config.main}${config[target].infix}.css`)
            }
        })
    ).process(visualisation)
        .then((result) => {
            fs.writeFileSync(
                path.join(
                    '../',
                    config.path.build,
                    config.html.visualisation.name
                ), result.html
            );
        });
}

function createContextHtml() {
    // Load context from markdown file
    const md = fs.readFileSync(
        path.join(
            '../',
            config.path.input,
            config.path.html,
            config.path.markdown,
            config.context
        ), 'utf8');

    // Convert markdown to html
    var converted = marked(md);

    // Load html skeleton
    const skeleton = fs.readFileSync(
        path.join(
            '../',
            config.path.input,
            config.path.html,
            config.path.skeletons,
            config.html.index.skeleton
        ), 'utf8');

    // Compile html
    // 1: Assign variables to iframe in context
    // 2: Place generated html from (1) into skeleton
    // write file
    posthtml(
        expressions({
            locals: {
                d3: config.html.visualisation.name,
                width: `${config.width}px`,
                height: `${config.height}px`
            }
        })
    ).process(converted)
        .then((result) => posthtml(expressions({locals: { content: result.html }}))
            .process(skeleton)
            .then((result) => {
                fs.writeFileSync(
                    path.join(
                        '../',
                        config.path.build,
                        config.html.index.name
                    ), result.html
                );
            }));
}

function createHtml() {
    createVisualisationHtml();
    createContextHtml();
}

createDirectory(path.join('../', config.path.build));
createDirectory(path.join('../', config.path.output));
createHtml();