Add simple templating with pug

package.json

@@ -18,6 +18,7 @@
     "front-matter": "2.1.1",
     "fs-extra": "2.0.0",
     "marked": "0.3.6",
+    "pug": "2.0.0-beta6",
     "walk": "2.3.9"
   }
 }

radar/2016-02-01/languages-and-frameworks/react.md

@@ -10,17 +10,3 @@ Hier noch ein [link](http://www.google.de) zu google
 <!--except-->
 
 Hier steht der Rest!
-
-History
--------
-
-{% include
-  history-entry.html
-  ring="trial"
-  date="2017-12-10"
-  content="This is a history entry
-
-  - Foo
-  - Bar
-  "
-%}

radar/2016-02-02/languages-and-frameworks/react.md

@@ -3,24 +3,9 @@ title:      "React"
 ring:       trial
 ---
 
-Hier steht eine Einleitung über *React* - super "cool"
+React blablab *React* - super "cool"
 
-Hier noch ein [link](http://www.google.de) zu google
 
 <!--except-->
 
 Hier steht der Rest!
-
-History
--------
-
-{% include
-  history-entry.html
-  ring="trial"
-  date="2017-12-10"
-  content="This is a history entry
-
-  - Foo
-  - Bar
-  "
-%}

scripts/radar.js

@@ -4,6 +4,7 @@ import path from 'path';
 import frontmatter from 'front-matter';
 import marked from 'marked';
 import { srcPath, distPath } from './file';
+import { item as itemTemplate } from './template';
 
 export const createRadar = async (tree) => {
   const fileNames = await getAllMarkdownFiles();
@@ -52,7 +53,7 @@ const createRevisionsFromFiles = (fileNames) => (
             ...itemInfoFromFilename(fileName),
             fileName,
             attributes: fm.attributes,
-            body: fm.body,
+            body: marked(fm.body),
           });
         }
       });
@@ -98,6 +99,7 @@ const addRevisionToItem = (item = {
     ...rest,
   } = revision;
   return {
+    quadrant,
     attributes: {
       ...item.attributes,
       ...revision.attributes,
@@ -111,20 +113,17 @@ export const outputRadar = (radar) => {
   return Promise.all(
     Object.entries(radar).map(([quadrantName, quadrant]) => (
       Object.entries(quadrant).map(([itemName, item]) => (
-        new Promise((resolve, reject) => (
+        new Promise((resolve, reject) => {
-          outputFile(distPath(quadrantName, `${itemName}.html`), getItemHtml(item), (err, data) => {
+          console.log(JSON.stringify(item, null, 2));
+          outputFile(distPath(quadrantName, `${itemName}.html`), itemTemplate(item), (err, data) => {
             if (err) {
               reject(err);
             } else {
               resolve(data);
             }
           })
-        ))
+        })
       ))
     ))
   );
 };
-
-const getItemHtml = (item) => (`
-  <h1>${item.attributes.title}</h1>
-`)

scripts/template.js

@@ -0,0 +1,6 @@
+import pug from 'pug';
+import { relativePath } from './file';
+
+const templateFolder = 'templates';
+
+export const item = pug.compileFile(relativePath(templateFolder, 'item.pug'));

templates/item.pug

@@ -0,0 +1,19 @@
+extends layout.pug
+
+block content
+  a(href='/' + quadrant + '.html') #{quadrant}
+  h1 #{attributes.title}
+    = ' '
+    small #{attributes.ring}
+
+  hr
+  section
+    != revisions[0].body
+  hr
+
+  ul
+    each revision, index in revisions
+      if index > 0
+        li
+          = revision.version
+          != revision.body

templates/layout.pug

@@ -0,0 +1,7 @@
+html
+  head
+    title #{attributes.title} - AOE Tech Radar
+    block scripts
+      script(src='/jquery.js')
+  body
+    block content