Improve quadrant pages

scripts/build.js

@@ -13,8 +13,8 @@ import {
     outputRadar(radar);
     createStatic(radar);
 
-    console.log('Radar build!');
+    console.log('Built radar');
-    console.log(JSON.stringify(radar, null, 2));
+    // console.log(JSON.stringify(radar, null, 2));
   } catch(e) {
     console.error('error:', e);
   }

scripts/clean.js

@@ -3,11 +3,10 @@ import { distPath } from './file';
 
 var distDir = distPath();
 
-console.log('<<< start cleaning dist dir: ', distDir);
 
 emptyDir(distDir, (err) => {
   if (!err) {
-    console.log('done cleaning dist dir >>>');
+    console.log('Cleaned dist dir', distDir);
   } else {
     console.error(err);
   }

scripts/radar.js

@@ -7,7 +7,11 @@ import {
   distPath,
   getAllMarkdownFiles,
 } from './file';
-import { item as itemTemplate } from './template';
+import {
+  item as itemTemplate,
+  quadrant as quadrantTemplate,
+  vars,
+} from './template';
 
 export const createRadar = async (tree) => {
   const fileNames = (await getAllMarkdownFiles(radarPath())).reverse();
@@ -85,13 +89,14 @@ const addRevisionToItem = (item = {
 
 export const outputRadar = (radar) => {
   return Promise.all(
-    Object.entries(radar).map(([quadrantName, quadrant]) => (
+    Object.entries(radar).map(async ([quadrantName, quadrant]) => {
+      await outputQuadrantPage(quadrantName, quadrant);
       Object.entries(quadrant).map(([itemName, item]) => (
         new Promise((resolve, reject) => {
-          outputFile(distPath(quadrantName, `${itemName}.html`), itemTemplate({
+          outputFile(distPath(quadrantName, `${itemName}.html`), itemTemplate(vars({
             quadrantName,
             item,
-          }), (err, data) => {
+          })), (err, data) => {
             if (err) {
               reject(err);
             } else {
@@ -100,6 +105,21 @@ export const outputRadar = (radar) => {
           })
         })
       ))
-    ))
+    })
   );
 };
+
+const outputQuadrantPage = (quadrantName, quadrant) => (
+  new Promise((resolve, reject) => {
+    outputFile(distPath(`${quadrantName}.html`), quadrantTemplate(vars({
+      quadrantName,
+      quadrant,
+    })), (err, data) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve(data);
+      }
+    })
+  })
+)

scripts/static.js

@@ -7,6 +7,9 @@ import {
   distPath,
   getAllPugFiles,
 } from './file';
+import {
+  vars,
+} from './template';
 
 export const createStatic = async (radar) => {
   const paths = await getAllPugFiles(staticPath());
@@ -25,9 +28,9 @@ const getPlainFileNames = (paths) => (
 const renderStaticPages = (radar, fileNames) => (
   Promise.all(fileNames.map((name) => (
     new Promise((resolve, reject) => (
-      outputFile(distPath(`${name}.html`), pug.renderFile(staticPath(`${name}.pug`), {
+      outputFile(distPath(`${name}.html`), pug.renderFile(staticPath(`${name}.pug`), vars({
         radar,
-      }), (err, data) => {
+      })), (err, data) => {
         if (err) {
           reject(err);
         } else {

scripts/template.js

@@ -3,4 +3,20 @@ import { relativePath } from './file';
 
 const templateFolder = 'templates';
 
+export const vars = (vars) => ({
+  translate: (text) => {
+    const mappings = {
+      'languages-and-frameworks': 'Languages & Frameworks',
+      'methods-and-patterns': 'Methods & Patterns',
+      'platforms-and-aoe-services': 'Platforms and AOE Services',
+      'tools': 'Tools',
+    };
+
+    return mappings[text.trim()] || '-';
+  },
+  ...vars,
+})
+
 export const item = pug.compileFile(relativePath(templateFolder, 'item.pug'));
+
+export const quadrant = pug.compileFile(relativePath(templateFolder, 'quadrant.pug'));

static-pages/index.pug

@@ -7,7 +7,7 @@ block content
   ul
     each quadrant, quadrantName in radar
       li
-        h4= quadrantName
+        h4= translate(quadrantName)
         ul
           each radarItem, itemName in quadrant
             li

templates/item.pug

@@ -4,7 +4,7 @@ block vars
   - var title=item.attributes.title
 
 block content
-  a(href='/' + quadrantName + '.html') #{quadrantName}
+  a(href='/' + quadrantName + '.html')= translate(quadrantName)
   h1 #{item.attributes.title}
     = ' '
     small #{item.attributes.ring}

templates/layout.pug

@@ -5,7 +5,8 @@ html
     block scripts
       script(src='/jquery.js')
 
-  h3 AOE Tech Radar
+  h3
+    a(href='/') AOE Tech Radar
 
   hr
 

templates/quadrant.pug

@@ -0,0 +1,12 @@
+extends layout.pug
+
+block vars
+  - var title='Quadrant'
+
+block content
+  h1
+    = translate(quadrantName)
+  ul
+    each radarItem, itemName in quadrant
+      li
+        a(href='/' + quadrantName + '/' + itemName + '.html')= radarItem.attributes.title