diff --git a/js/components/HeadlineGroup.js b/js/components/HeadlineGroup.js
index 31dc2a2..36aff99 100644
--- a/js/components/HeadlineGroup.js
+++ b/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 (
-
+
{children}
);
diff --git a/js/components/IsNew.js b/js/components/IsNew.js
new file mode 100644
index 0000000..fadb642
--- /dev/null
+++ b/js/components/IsNew.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default function IsNew({ item }) {
+ if (item.isNew) {
+ return
NEW;
+ }
+ return null;
+}
diff --git a/js/components/Item.js b/js/components/Item.js
index f88f720..b52bb1b 100644
--- a/js/components/Item.js
+++ b/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}
>
-
{item.title}
+
+ {item.title}
+
+
{
item.info && (
{item.info}
diff --git a/js/components/ItemRevision.js b/js/components/ItemRevision.js
new file mode 100644
index 0000000..4352260
--- /dev/null
+++ b/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 (
+
+
+ {revision.ring} | {formatRelease(revision.release)}
+
+
+
+ );
+}
diff --git a/js/components/ItemRevisions.js b/js/components/ItemRevisions.js
new file mode 100644
index 0000000..3a59401
--- /dev/null
+++ b/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 (
+
+
+
+ Revisions:
+
+
+
+ {revisions.map((revision) => )}
+
+ );
+}
diff --git a/js/components/PageIndex.js b/js/components/PageIndex.js
index 53f49b8..c4b8dbd 100644
--- a/js/components/PageIndex.js
+++ b/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 (
- AOE Technology Radar
+ AOE Technology Radar
diff --git a/js/components/PageItem.js b/js/components/PageItem.js
index 016d7aa..121a9f6 100644
--- a/js/components/PageItem.js
+++ b/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 {
-
{item.title}
+
+ {item.title}
+
+
diff --git a/js/components/QuadrantSection.js b/js/components/QuadrantSection.js
index cc99e6c..95deca8 100644
--- a/js/components/QuadrantSection.js
+++ b/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"
>
- {item.title}
+
+ {item.title}
+
+
))
}
diff --git a/js/date.js b/js/date.js
new file mode 100644
index 0000000..2cf096a
--- /dev/null
+++ b/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');
diff --git a/radar/2017-09-01/react.md b/radar/2017-09-01/react.md
new file mode 100644
index 0000000..dad95eb
--- /dev/null
+++ b/radar/2017-09-01/react.md
@@ -0,0 +1,5 @@
+---
+ring: adopt
+---
+
+TODO: Updated text here!
diff --git a/styles/components/headline-group.css b/styles/components/headline-group.css
index 41c422a..c9c1650 100644
--- a/styles/components/headline-group.css
+++ b/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;
+ }
+ }
}
diff --git a/styles/components/headline.css b/styles/components/headline.css
index 66c7638..0803a8f 100644
--- a/styles/components/headline.css
+++ b/styles/components/headline.css
@@ -4,4 +4,8 @@
color: var(--color-white);
font-size: 20px;
font-weight: normal;
+
+ &--dark {
+ color: var(--color-gray-light);
+ }
}
diff --git a/styles/components/is-new.css b/styles/components/is-new.css
index 90ba1a2..927c43f 100644
--- a/styles/components/is-new.css
+++ b/styles/components/is-new.css
@@ -7,4 +7,5 @@
position: relative;
vertical-align: top;
margin-top: -2px;
+ left: 5px;
}
diff --git a/styles/components/item-revision.css b/styles/components/item-revision.css
new file mode 100644
index 0000000..a72808f
--- /dev/null
+++ b/styles/components/item-revision.css
@@ -0,0 +1,5 @@
+.item-revision {
+ &+.item-revision {
+ margin-top: 40px;
+ }
+}
diff --git a/tasks/watch.js b/tasks/watch.js
index 167f78b..055f883 100644
--- a/tasks/watch.js
+++ b/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);