Here are the mu.js and wu.js files that are used to build this site.
What is mu? What is wu?
website/
mu.js
wu.js
md/
mu.md
wu.md
example.md
css/
typography.css
layout.css
output/
resources
// mu.js
'use strict'
const mu = require('/Users/monk/Studio/Live/mu')
const wu = require('./wu.js')
const build = async () => {
const rootFolder = './www'
try {
const pages = await mu.readFiles('md')
for (let page of pages) {
page.destination = rootFolder
page.ext = '.html'
page.content = marked(page.content)
page.content = wu.layout(page)
mu.writeFile(page)
}
const source = './css'
const destination = rootFolder + '/resources/bundle.css'
mu.bundleFiles(source, destination)
} catch (e) {
console.error(e)
}
}
console.log('\n\tmu\n')
build()
// wu.js
'use strict'
const wu = {}
wu.layout = (page) => {
const enso = (page.isMostlyCode) ? '' : wu.enso()
return `${wu.head(page)}
<body>
${wu.mw()}
${enso}
<div class="wrap ${page.isMostlyCode ? 'wrap--wide' : ''}">
${page.content}
${wu.footer()}
</div>
</body>
`
}
wu.head = (page) => {
return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>${page.title}</title>
<meta name="description" content="${page.description || ''}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./resources/bundle.css">
</head>`
}
wu.enso = () => {
return `<img class="enso" src="resources/enso.gif">`
}
wu.mw = () => {
return `
<a href="https://monkwest.com">
<img class="mw-logo" src="./resources/mw.png">
</a>
`
}
wu.footer = () => {
return `
<div class="footer">
<a href="https://mobile.twitter.com/monkwest" class="a--invisible">
<span class="icon-twitter"></span> @monkwest
</a>
</div>`
}