Add item detail page

package.json

@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npm run clean && npm run build:radar && npm run build:js && npm run build:css",
+    "build": "npm run clean && npm run build:pages && npm run build:js && npm run build:css && npm run build:assets",
+    "build:all": "npm run build",
     "build:pages": "babel-node ./tasks/build.js",
     "build:js": "webpack --config webpack.config.js",
     "build:css": "postcss -c postcss.config.json -o dist/styles.css styles/main.css",

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

@@ -1,11 +1,26 @@
 ---
-title:      "This is a long title that may break design"
+title:      "This is a long title"
 ring:       assess
+info:       React is a view library
 ---
 
-React blablab *React* - super "cool"
+React blablab *React* - super **"cool"**
+
+> Das ist aber askdfjas jkdfhas kdf af als
 
 
-<!--except-->
+# test h1
+
+## Test h2
+
+### Test h3
 
 Hier steht der Rest!
+
+- 123123
+- 12312 3
+- 123123123
+
+
+1. test
+2. adsfsdf

static-pages/index.pug

@@ -1,4 +1,4 @@
-extends ../templates/layout.pug
+extends ../templates/default-page.pug
 
 block vars
   - var title='Overview'
@@ -22,7 +22,7 @@ block content
               .split__left
                 h4.headline= translate(quadrantName)
               .split__right
-                a.icon-link(href='/') Quadrant Overview
+                a.icon-link(href=`/${quadrantName}.html`) Quadrant Overview
           .quadrant-section__rings
             each items, ringName in quadrant
               .quadrant-section__ring

styles/base.css

@@ -1,12 +1,15 @@
 :root {
   --color-gray-dark: #475157;
+  --color-gray-dark-alt: #4F585E;
   --color-gray-normal: #979797;
   --color-gray-light: #7D878D;
+
   --color-white: #fff;
   --color-green: #5CB449;
   --color-orange: #FAA03D;
   --color-blue: #40A7D1;
   --color-marine: #688190;
+  --color-brand: #F59134;
 }
 
 @font-face {

styles/components/badge.css

@@ -9,6 +9,14 @@
   height: 25px;
   overflow: hidden;
 
+  &--big {
+    border-radius: 15px;
+    font-size: 14px;
+    line-height: 30px;
+    height: 30px;
+    padding: 0 20px;
+  }
+
   &--adopt {
     background: var(--color-green);
   }
@@ -21,4 +29,5 @@
   &--hold {
     background: var(--color-marine);
   }
+
 }

styles/components/hero-headline.css

@@ -1,11 +1,16 @@
 .hero-headline {
   font-size: 38px;
   font-weight: 300;
+  line-height: 1.2;
   color: var(--color-white);
-  margin: 0 0 60px;
   padding: 0;
+  margin: 0;
 
   &__alt {
     color: var(--color-gray-light);
   }
+
+  &--inverse {
+    color: var(--color-gray-light);
+  }
 }

styles/components/icon-link.css

@@ -8,8 +8,16 @@
   line-height: 25px;
   color: var(--color-gray-normal);
 
+  &--primary {
+    color: var(--color-brand);
+  }
+
+  &--big {
+    font-size: 16px;
+  }
+
   &:hover {
-    color: var(--color-white);
+    text-decoration: underline;
   }
 
   &:before {

styles/components/item-details.css

@@ -0,0 +1,41 @@
+.item-details {
+  color: var(--color-gray-normal);
+  font-size: 16px;
+
+  & p {
+    margin: 20px 0;
+  }
+
+  & a {
+    color: var(--color-gray-normal);
+    text-decoration: underline;
+    &:hover {
+      color: var(--color-gray-dark);
+    }
+  }
+
+  & h1,
+  & h2,
+  & h3,
+  & h4,
+  & h5,
+  & h6 {
+    color: var(--color-gray-normal);
+  }
+
+  & h1 {
+    font-size: 2em;
+    margin: 1em 0;
+    font-weight: 300;
+  }
+
+  & h2 {
+    font-size: 1.5em;
+    margin: 1em 0;
+  }
+
+  & h3 {
+    font-size: 1.2em;
+    margin: 1em 0;
+  }
+}

styles/components/item-list.css

@@ -0,0 +1,8 @@
+.item-list {
+  &__header {
+    margin-bottom: 20px;
+  }
+  &__list {
+    
+  }
+}

styles/components/item-page.css

@@ -0,0 +1,32 @@
+.item-page {
+  display: flex;
+  height: 100vh;
+  &__nav,
+  &__content {
+    height: 100%;
+  }
+
+  &__header {
+    min-height: 40px;
+    margin: 50px 0 25px;
+  }
+
+  &__nav {
+    flex: 0 0 30%;
+    background: var(--color-gray-dark);
+    &__inner {
+      float: right;
+      width: 375px;
+      margin: 60px 40px 0 0;
+    }
+  }
+
+  &__content {
+    flex: 0 0 70%;
+    background: var(--color-white);
+    &__inner {
+      width: 680px;
+      margin: 60px 0 0 110px;
+    }
+  }
+}

styles/components/item.css

@@ -0,0 +1,25 @@
+.item {
+  padding: 10px;
+  border-bottom: 1px solid var(--color-gray-normal);
+  display: block;
+  text-decoration: none;
+
+  &.is-active {
+    background: var(--color-gray-dark-alt);
+  }
+
+  &:first-child {
+    border-top: 1px solid var(--color-gray-normal);
+  }
+
+  &__title {
+    font-size: 16px;
+    color: var(--color-white);
+  }
+
+  &__info {
+    margin-top: 5px;
+    font-size: 12px;
+    color: var(--color-gray-normal);
+  }
+}

styles/components/quadrant-grid.css

@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
+  margin-top: 60px;
 
   &__quadrant {
     flex: 0 0 45%;

tasks/build.js

@@ -1,5 +1,6 @@
 import {
   createRadar,
+  groupByQuadrants,
   outputRadar,
 } from './radar';
 import {
@@ -11,7 +12,9 @@ import {
   try {
     const radar = await createRadar();
     outputRadar(radar);
-    createStatic(radar);
+
+    // const radarByQuadrants = groupByQuadrants(radar);
+    createStatic(radar.quadrants);
 
     console.log('Built radar');
     // console.log(JSON.stringify(radar, null, 2));

tasks/radar.js

@@ -18,12 +18,24 @@ export const createRadar = async (tree) => {
   const revisions = await createRevisionsFromFiles(fileNames);
   const allReleases = getAllReleases(revisions);
   const items = createItems(revisions);
-  const itemsWithIsNewFlag = flagWithIsNew(items, allReleases);
+  const flaggedItems = flagWithIsNew(items, allReleases);
-  const quadrants = groupByQuadrants(itemsWithIsNewFlag);
 
-  return quadrants;
+  const quadrants = groupByQuadrants(flaggedItems);
+
+  return {
+    items: flaggedItems,
+    quadrants,
+  }
 };
 
+export const groupByQuadrants = (items) => (
+  items.reduce((quadrants, item) => ({
+    ...quadrants,
+    [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item),
+  }), {})
+);
+
+
 const createRevisionsFromFiles = (fileNames) => (
   Promise.all(fileNames.map((fileName) => {
     return new Promise((resolve, reject) => {
@@ -135,14 +147,17 @@ const revisionCreatesNewHistoryEntry = (revision) => {
          typeof revision.attributes.ring !== 'undefined';
 };
 
-export const outputRadar = (radar) => {
+export const outputRadar = ({ quadrants, items }) => {
+  Object.entries(quadrants).map(async ([quadrantName, quadrant]) => (
+    await outputQuadrantPage(quadrantName, quadrant)
+  ));
   return Promise.all(
-    Object.entries(radar).map(async ([quadrantName, quadrant]) => {
+    items.map(async (item) => {
-      await outputQuadrantPage(quadrantName, quadrant);
+
-      Object.entries(quadrant).map(([itemName, item]) => (
+      // Object.entries(quadrant).map(([itemName, item]) => (
         new Promise((resolve, reject) => {
-          outputFile(distPath(quadrantName, `${itemName}.html`), itemTemplate(vars({
+          outputFile(distPath(item.quadrant, `${item.name}.html`), itemTemplate(vars({
-            quadrantName,
+            itemsInRing: quadrants[item.quadrant][item.attributes.ring],
             item,
           })), (err, data) => {
             if (err) {
@@ -152,11 +167,12 @@ export const outputRadar = (radar) => {
             }
           })
         })
-      ))
+      // ))
     })
   );
 };
 
+
 const outputQuadrantPage = (quadrantName, quadrant) => (
   new Promise((resolve, reject) => {
     outputFile(distPath(`${quadrantName}.html`), quadrantTemplate(vars({
@@ -183,13 +199,6 @@ const isNewItem = (item, allReleases) => {
   return item.revisions[0].release === allReleases[allReleases.length-1]
 }
 
-const groupByQuadrants = (items) => (
-  items.reduce((quadrants, item) => ({
-    ...quadrants,
-    [item.quadrant]: addItemToQuadrant(quadrants[item.quadrant], item),
-  }), {})
-);
-
 const addItemToQuadrant = (quadrant = {}, item) => ({
   ...quadrant,
   [item.attributes.ring]: addItemToRing(quadrant[item.attributes.ring], item),

tasks/template.js

@@ -17,6 +17,6 @@ export const vars = (vars) => ({
   ...vars,
 })
 
-export const item = pug.compileFile(relativePath(templateFolder, 'item.pug'));
+export const item = pug.compileFile(relativePath(templateFolder, 'item-page.pug'));
 
-export const quadrant = pug.compileFile(relativePath(templateFolder, 'quadrant.pug'));
+export const quadrant = pug.compileFile(relativePath(templateFolder, 'quadrant-page.pug'));

tasks/watch.js

@@ -12,7 +12,8 @@ import {
   distPath,
 } from './file';
 
-const watchBuild = (name) => (eventType, fileName) => {
+
+const runBuild = (name) => (
   exec(`npm run build:${name}`, (error, stdout, stderr) => {
     if (error) {
       console.error(`exec error: ${error}`);
@@ -21,12 +22,16 @@ const watchBuild = (name) => (eventType, fileName) => {
     console.log(stdout);
     console.error(stderr);
   })
-}
+);
+
+const watchBuild = (name) => (eventType, fileName) => runBuild(name);
 
 const options = {
   recursive: true,
 }
 
+runBuild('all');
+
 watch(stylesPath(), options, watchBuild('css'));
 watch(jsPath(), options, watchBuild('js'));
 watch(assetsPath(), options, watchBuild('assets'));

templates/default-page.pug

@@ -0,0 +1,26 @@
+extends layout.pug
+
+block body
+  .page
+    .page__header
+      .branding
+        a.branding__logo(href='/')
+          img(src='/assets/logo.svg')
+        .branding__content
+          .nav
+            .nav__item
+              a.icon-link(href='/') How to Use Technology Radar?
+            .nav__item
+              a.icon-link(href='/') Technologies Overview
+    .page__content
+      block content
+    .page__footer
+      .branding
+        span.branding__logo
+          img(src='/assets/logo.svg')
+        .branding__content
+          span.footnote
+            | AOE is a leading provider of Enterprise Open Source web solutions.
+            | Using current agile development methods, more than 250+ developers
+            | and consultants in 8 global locations develop customized Open Source
+            | solutions for global companies and corporations.

templates/item-page.pug

@@ -0,0 +1,76 @@
+extends layout.pug
+
+block vars
+  //-
+    - var title=item.attributes.title
+
+block body
+  .item-page
+    .item-page__nav
+      .item-page__nav__inner
+        .nav
+          .nav__item
+            a.icon-link.icon-link--primary.icon-link--big(href='/') AOE Technology Radar
+        .item-page__header
+          h3.headline
+            = translate(item.quadrant)
+        .item-list
+          .item-list__header
+            .split
+              .split__left
+                span(class=`badge badge--big badge--${item.attributes.ring}`)
+                  = item.attributes.ring
+              .split__right
+                a.icon-link(href=`/${item.quadrant}.html`) Quadrant Overview
+          .item-list__list
+            each ringItem in itemsInRing
+              a.item(class=`${ringItem.name === item.name ? 'is-active' : ''}` href=`/${ringItem.quadrant}/${ringItem.name}.html`)
+                .item__title= ringItem.attributes.title
+                if ringItem.attributes.info
+                  .item__info= ringItem.attributes.info
+    .item-page__content
+      .item-page__content__inner
+        .split
+          .split__left
+          .split__right
+            .nav
+              .nav__item
+                a.icon-link(href='/') How to Use Technology Radar?
+              .nav__item
+                a.icon-link(href='/') Technologies Overview
+        .item-page__header
+          .split
+            .split__left
+              h1.hero-headline.hero-headline--inverse
+                = item.attributes.title
+            .split__right
+              span(class=`badge badge--big badge--${item.attributes.ring}`)
+                = item.attributes.ring
+        .item-details
+          != item.body
+  //-
+    a(href='/' + item.quadrant + '.html')= translate(item.quadrant)
+    h1 #{item.attributes.title}
+      = ' '
+      small #{item.attributes.ring}
+
+
+    hr
+
+    h4= item.revisions[0].version
+    h5 New: #{item.isNew ? 'YES' : 'NO'}
+    h5 Feature: #{item.attributes.isFeatured ? 'YES' : 'NO'}
+
+    section
+      != item.revisions[0].body
+    hr
+
+    ul
+      each revision, index in item.revisions
+        if index > 0
+          li
+            h3
+              = revision.version
+              = ' '
+              = revision.attributes.ring
+            != revision.body

templates/item.pug

@@ -1,33 +0,0 @@
-extends layout.pug
-
-block vars
-  //-
-    - var title=item.attributes.title
-
-block content
-  //-
-    a(href='/' + quadrantName + '.html')= translate(quadrantName)
-    h1 #{item.attributes.title}
-      = ' '
-      small #{item.attributes.ring}
-
-
-    hr
-
-    h4= item.revisions[0].version
-    h5 New: #{item.isNew ? 'YES' : 'NO'}
-    h5 Feature: #{item.attributes.isFeatured ? 'YES' : 'NO'}
-
-    section
-      != item.revisions[0].body
-    hr
-
-    ul
-      each revision, index in item.revisions
-        if index > 0
-          li
-            h3
-              = revision.version
-              = ' '
-              = revision.attributes.ring
-            != revision.body

templates/layout.pug

@@ -4,28 +4,6 @@ html
     title #{title} - AOE Tech Radar
     link(rel='stylesheet', href='/styles.css')
   body
-    .page
+    block body
-      .page__header
+    block scripts
-        .branding
+      script(src='/bundle.js')
-          a.branding__logo(href='/')
-            img(src='/assets/logo.svg')
-          .branding__content
-            .nav
-              .nav__item
-                a.icon-link(href='/') How to Use Technology Radar?
-              .nav__item
-                a.icon-link(href='/') Technologies Overview
-      .page__content
-        block content
-        block scripts
-          script(src='/bundle.js')
-      .page__footer
-        .branding
-          span.branding__logo
-            img(src='/assets/logo.svg')
-          .branding__content
-            span.footnote
-              | AOE is a leading provider of Enterprise Open Source web solutions.
-              | Using current agile development methods, more than 250+ developers
-              | and consultants in 8 global locations develop customized Open Source
-              | solutions for global companies and corporations.

templates/quadrant-page.pug

@@ -1,4 +1,4 @@
-extends layout.pug
+extends default-page.pug
 
 block vars
   - var title='Quadrant'