From 113858c1704c60c86ba0b00cd548da8575915d7f Mon Sep 17 00:00:00 2001 From: Tom Raithel Date: Tue, 22 Aug 2017 22:31:50 +0200 Subject: [PATCH] Add ability to display revisions --- js/components/HeadlineGroup.js | 6 ++++-- js/components/IsNew.js | 8 ++++++++ js/components/Item.js | 6 +++++- js/components/ItemRevision.js | 14 ++++++++++++++ js/components/ItemRevisions.js | 17 +++++++++++++++++ js/components/PageIndex.js | 5 ++++- js/components/PageItem.js | 3 +++ js/components/PageItemMobile.js | 2 ++ js/components/PageOverview.js | 6 +++++- js/components/QuadrantSection.js | 6 +++++- js/date.js | 6 ++++++ radar/2017-09-01/react.md | 5 +++++ styles/components/headline-group.css | 7 +++++++ styles/components/headline.css | 4 ++++ styles/components/is-new.css | 1 + styles/components/item-revision.css | 5 +++++ tasks/watch.js | 4 ++-- 17 files changed, 97 insertions(+), 8 deletions(-) create mode 100644 js/components/IsNew.js create mode 100644 js/components/ItemRevision.js create mode 100644 js/components/ItemRevisions.js create mode 100644 js/date.js create mode 100644 radar/2017-09-01/react.md create mode 100644 styles/components/item-revision.css 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.revisions.length > 1 && }
diff --git a/js/components/PageItemMobile.js b/js/components/PageItemMobile.js index 880fb66..e389130 100644 --- a/js/components/PageItemMobile.js +++ b/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 {
+ {item.revisions.length > 1 && }
diff --git a/js/components/PageOverview.js b/js/components/PageOverview.js index 4e25a4c..474491f 100644 --- a/js/components/PageOverview.js +++ b/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 { >
-
{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);