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');