Implement basic templating

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+
+[Makefile]
+indent_style = tab

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+out
+!out/.gitkeep

README.md

@@ -1,5 +1,25 @@
-Hier dokumentieren wir wie wir unser Portfolio erstellen.
+# Portfolio (Mobiles FabLab)
 
-Resourcen:
-- [Druckvorlage](https://www.wir-machen-druck.de/broschueren-drahtheftung-din-a5-quer-extrem-guenstig-drucken,category,9437.html
+> Content and (PDF-) generators for our portfolio (digital & print)
+
+## Resources:
+- [Print layout](https://www.wir-machen-druck.de/broschueren-drahtheftung-din-a5-quer-extrem-guenstig-drucken,category,9437.html
 )
+
+## Dev Setup
+```sh
+npm install
+```
+
+## Usage
+1. Place content inside `content` directory (markdown with yaml front matter)
+2. Define build targets in `targets.js`. Keys of the object are valid values for the `target` arugment to the generate command
+3. Create templates (in `templates` directory)
+4. Generate output: `npm run generate <target>`
+
+## Guides
+### Templating
+This project uses handlebars.js for templating. Please refer to the [Language Guide](https://handlebarsjs.com/guide) on how to write handlebars templates.
+
+### Markdown
+The markdown parser used in this project is called [markdown-it](https://github.com/markdown-it/markdown-it). It implements the CommonMark standard plus some extensions. Please refer to the [CommonMark Spec](https://spec.commonmark.org/current/) for valid syntax.

config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    templateDir: './templates',
+}

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "portfolio",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "authors": [
+    {
+      "name": "Alexander Kutschera",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Julian Heyder",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Joseph Paul",
+      "email": "[email protected]"
+    }
+  ],
+  "repository": "[email protected]:mobiles-fablab/portfolio.git/portfolio",
+  "scripts": {
+    "generate": "node src/generate.js"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "handlebars": "^4.7.7",
+    "markdown-it": "^12.0.4",
+    "yaml-front-matter": "^4.1.1"
+  }
+}

src/generate.js

@@ -0,0 +1,68 @@
+const Loader = require('./loader')
+const Parser = require('./parser')
+const Renderer = require('./renderer')
+
+const targets = require('../targets')
+const config = require('../config')
+
+const target = process.argv.slice(2)[0]
+if (!target) {
+    displayUsage()
+    console.error('Please specify the <target> argument\n')
+    process.exit(-1)
+}
+
+process.exit(run(target))
+
+/**
+ * Run the generator.
+ *
+ * @param  {string} target
+ * @return {int}
+ */
+function run(target) {
+    if (!(target in targets)) {
+        console.error(`Target "${target}" not defined\n`)
+        return -1
+    }
+
+    const targetConfig = targets[target]
+
+    const renderer = new Renderer(config.templateDir)
+
+    const results = []
+    const loader = new Loader(targetConfig.sourceDir)
+    for (const page of loader.iterate()) {
+        results.push(generate(page, targetConfig, renderer))
+    }
+
+    console.log(renderer.render(targetConfig.skeleton, {
+        pages: results,
+    }))
+
+    return 0
+}
+
+/**
+ * Generate a single page.
+ *
+ * @param  {object} page
+ * @param  {object} targetConfig
+ * @param  {Renderer} renderer
+ * @return {[type]}
+ */
+function generate(page, targetConfig, renderer) {
+    const parser = new Parser()
+    const html = parser.toHtml(page.__content)
+    delete page.__content
+    page.content = html
+
+    return renderer.render(targetConfig.template, page)
+}
+
+/**
+ * Display CLI usage instructions.
+ */
+function displayUsage() {
+    console.info('Usage: generate.js <target>\n')
+}

src/loader.js

@@ -0,0 +1,47 @@
+var fs = require('fs')
+var yamlFront = require('yaml-front-matter')
+
+const DEFAULT_CONFIG = {
+    extensions: ['.md'],
+}
+
+class Loader {
+    constructor(directory, config = {}) {
+        this.directory = directory
+        this.config = Object.assign(Object.assign({}, DEFAULT_CONFIG), config)
+    }
+
+    *iterate() {
+        const files = fs.readdirSync(this.directory, { withFileTypes: true })
+        for (const entry of files) {
+            if (!this.fileIsRelevant(entry)) continue
+
+            yield this.parse(entry.name)
+        }
+    }
+
+    parse(filename) {
+        const rawContent = fs.readFileSync(this.directory + '/' + filename)
+        const page = yamlFront.loadFront(rawContent)
+        page.filename = filename
+
+        return page
+    }
+
+    fileIsRelevant(entry) {
+        if (!entry.isFile()) return false
+
+        let matchedExtension = false
+        for (const ext of this.config.extensions) {
+            if (entry.name.endsWith(ext)) {
+                matchedExtension = true
+                break
+            }
+        }
+        if (!matchedExtension) return false
+
+        return true
+    }
+}
+
+module.exports = Loader

src/parser.js

@@ -0,0 +1,13 @@
+var MarkdownIt = require('markdown-it')
+
+class Parser {
+    constructor() {
+        this.md = new MarkdownIt()
+    }
+
+    toHtml(markdown) {
+        return this.md.render(markdown)
+    }
+}
+
+module.exports = Parser

src/renderer.js

@@ -0,0 +1,25 @@
+const Handlebars = require("handlebars")
+var fs = require('fs')
+
+class Renderer {
+    constructor(directory) {
+        this.directory = directory
+        this.hb = Handlebars.create()
+        this.templates = {}
+    }
+
+    render(template, attributes) {
+        this.compileTemplate(template)
+
+        return this.templates[template](attributes)
+    }
+
+    compileTemplate(filename) {
+        if (filename in this.templates) return
+
+        const content = fs.readFileSync(this.directory + '/' + filename, 'utf-8')
+        this.templates[filename] = this.hb.compile(content)
+    }
+}
+
+module.exports = Renderer

targets.js

@@ -0,0 +1,8 @@
+module.exports = {
+    portfolio: {
+        sourceDir: 'content/portfolio',
+        template: 'portfolio.html',
+        skeleton: '_skeleton.html',
+        outputDir: `out/portfolio`,
+    }
+}

templates/_skeleton.html

@@ -0,0 +1,5 @@
+{{#each pages}}
+    <div class="page">
+        {{ this }}
+    </div>
+{{/each}}