Add ability to display revisions

js/components/HeadlineGroup.js

@@ -1,8 +1,10 @@
 import React from 'react';
+import classNames from 'classnames';
 
-export default function({ children }) {
+export default function({ children, secondary = false }) {
   return (
-    <div className="headline-group">
+    <div
+      className={classNames('headline-group', {'headline-group--secondary': secondary})}>
       {children}
     </div>
   );

js/components/IsNew.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default function IsNew({ item }) {
+  if (item.isNew) {
+    return <span className="is-new">NEW</span>;
+  }
+  return null;
+}

js/components/Item.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import Link from './Link';
+import IsNew from './IsNew';
 
 export default function Item({ item, noLeadingBorder = false, active = false, style = {}}) {
   return (
@@ -12,7 +13,10 @@ export default function Item({ item, noLeadingBorder = false, active = false, st
       pageName={`${item.quadrant}/${item.name}`}
       style={style}
     >
-      <div className="item__title">{item.title}</div>
+      <div className="item__title">
+        {item.title}
+        <IsNew item={item} />
+      </div>
       {
         item.info && (
           <div className="item__info">{item.info}</div>

js/components/ItemRevision.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Badge from './Badge';
+import { formatRelease } from '../date';
+
+export default function ItemRevision({ revision }) {
+  return (
+    <div className="item-revision">
+      <div>
+        <Badge type={revision.ring}>{revision.ring} | {formatRelease(revision.release)}</Badge>
+      </div>
+      <div className="markdown" dangerouslySetInnerHTML={{__html: revision.body}} />
+    </div>
+  );
+}

js/components/ItemRevisions.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import HeadlineGroup from './HeadlineGroup';
+import ItemRevision from './ItemRevision';
+
+export default function ItemRevisions({ revisions }) {
+  return (
+    <div>
+      <HeadlineGroup secondary>
+        <h4 className="headline headline--dark">
+          Revisions:
+        </h4>
+      </HeadlineGroup>
+
+      {revisions.map((revision) => <ItemRevision key={revision.release} revision={revision} />)}
+    </div>
+  );
+}

js/components/PageIndex.js

@@ -1,15 +1,18 @@
 import React from 'react';
+import { formatRelease } from '../date';
+
 import HeroHeadline from './HeroHeadline';
 import QuadrantGrid from './QuadrantGrid';
 import Fadeable from './Fadeable';
 import SetTitle from './SetTitle';
 
 export default function PageIndex({ leaving, onLeave, items, navigate, ...props }) {
+  const newestRelease = props.releases.slice(-1)[0];
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
       <SetTitle {...props} title="Technology Radar" />
       <div className="headline-group">
-        <HeroHeadline alt="March 2017">AOE Technology Radar</HeroHeadline>
+        <HeroHeadline alt={formatRelease(newestRelease)}>AOE Technology Radar</HeroHeadline>
       </div>
       <QuadrantGrid items={items} />
     </Fadeable>

js/components/PageItem.js

@@ -4,6 +4,8 @@ import ItemList from './ItemList';
 import Link from './Link';
 import FooterEnd from './FooterEnd';
 import SetTitle from './SetTitle';
+import ItemRevisions from './ItemRevisions';
+import IsNew from './IsNew';
 import { createAnimation, createAnimationRunner } from '../animation';
 
 import { translate } from '../../common/config';
@@ -207,6 +209,7 @@ class PageItem extends React.Component {
                 </div>
               </div>
               <div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
+              {item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)} />}
             </div>
           </div>
         </div>

js/components/PageItemMobile.js

@@ -4,6 +4,7 @@ import ItemList from './ItemList';
 import Link from './Link';
 import Fadeable from './Fadeable';
 import SetTitle from './SetTitle';
+import ItemRevisions from './ItemRevisions';
 
 import { translate } from '../../common/config';
 import { groupByQuadrants } from '../../common/model';
@@ -43,6 +44,7 @@ class PageItem extends React.Component {
                 </div>
               </div>
               <div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
+              {item.revisions.length > 1 && <ItemRevisions revisions={item.revisions.slice(1)} />}
             </div>
           </div>
         </div>

js/components/PageOverview.js

@@ -7,6 +7,7 @@ import Link from './Link';
 import Search from './Search';
 import Fadeable from './Fadeable';
 import SetTitle from './SetTitle';
+import IsNew from './IsNew';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
@@ -130,7 +131,10 @@ class PageOverview extends React.Component {
                           >
                             <div className="split split--overview">
                               <div className="split__left">
-                                <div className="item__title">{item.title}</div>
+                                <div className="item__title">
+                                  {item.title}
+                                  <IsNew item={item} />
+                                </div>
                               </div>
                               <div className="split__right">
                                 <div className="nav nav--relations">

js/components/QuadrantSection.js

@@ -3,6 +3,7 @@ import { translate, rings } from '../../common/config';
 import Badge from './Badge';
 import Link from './Link';
 import ItemList from './ItemList';
+import IsNew from './IsNew';
 
 const renderList = (ringName, quadrantName, groups, big) => {
   const itemsInRing = groups[quadrantName][ringName];
@@ -26,7 +27,10 @@ const renderList = (ringName, quadrantName, groups, big) => {
             key={item.name}
             className="ring-list__item"
           >
-            <Link className="link" pageName={`${item.quadrant}/${item.name}`}>{item.title}</Link>
+            <Link className="link" pageName={`${item.quadrant}/${item.name}`}>
+              {item.title}
+              <IsNew item={item} />
+            </Link>
           </span>
         ))
       }

js/date.js

@@ -0,0 +1,6 @@
+import moment from 'moment';
+
+const isoDateToMoment = isoDate => moment(isoDate, 'YYYY-MM-DD');
+
+export const formatRelease = isoDate =>
+  isoDateToMoment(isoDate).format('MMMM YYYY');

radar/2017-09-01/react.md

@@ -0,0 +1,5 @@
+---
+ring:       adopt
+---
+
+TODO: Updated text here!

styles/components/headline-group.css

@@ -3,4 +3,11 @@
   @media (--until-sm) {
     margin: 30px 0;
   }
+
+  &--secondary {
+    margin: 10px 0;
+    @media (--until-sm) {
+      margin: 5px 0;
+    }
+  }
 }

styles/components/headline.css

@@ -4,4 +4,8 @@
   color: var(--color-white);
   font-size: 20px;
   font-weight: normal;
+
+  &--dark {
+    color: var(--color-gray-light);
+  }
 }

styles/components/is-new.css

@@ -7,4 +7,5 @@
   position: relative;
   vertical-align: top;
   margin-top: -2px;
+  left: 5px;
 }

styles/components/item-revision.css

@@ -0,0 +1,5 @@
+.item-revision {
+  &+.item-revision {
+    margin-top: 40px;
+  }
+}

tasks/watch.js

@@ -37,8 +37,8 @@ watch(jsPath(), options, watchBuild('pages'));
 watch(assetsPath(), options, watchBuild('assets'));
 watch(radarPath(), options, watchBuild('pages'));
 
-var params = {
+const params = {
     root: relativePath('dist'),
-    logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
+    logLevel: 0, // 0 = errors only, 1 = some, 2 = lots
 };
 liveServer.start(params);