AJR/TechRadarAJR
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add dynamic index-page

Browse Source
This commit is contained in:
Tom Raithel
2017-02-20 22:15:54 +01:00
parent c8ee3da561
commit 00b31d8414
3 changed files with 80 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
common/config.js
View File

@@ -7,6 +7,20 @@ export const getPageNames = (radar) => {
] ]
} }
export const quadrants = [
'languages-and-frameworks',
'methods-and-patterns',
'platforms-and-aoe-services',
'tools',
];
export const rings = [
'assess',
'trial',
'hold',
'adopt',
];
const messages = { const messages = {
'languages-and-frameworks': 'Languages & Frameworks', 'languages-and-frameworks': 'Languages & Frameworks',
'methods-and-patterns': 'Methods & Patterns', 'methods-and-patterns': 'Methods & Patterns',

104
js/components/PageIndex.js
View File

@@ -1,112 +1,14 @@
import React from 'react'; import React from 'react';
import HeroHeadline from './HeroHeadline'; import HeroHeadline from './HeroHeadline';
import QuadrantGrid from './QuadrantGrid';
export default function PageIndex() { export default function PageIndex({ items }) {
return ( return (
<div> <div>
<div className="headline-group"> <div className="headline-group">
<HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline> <HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline>
</div> </div>
<div className="quadrant-grid"> <QuadrantGrid items={items} />
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Platforms and AOE Services</h4>
</div>
<div className="split__right"><a className="icon-link" href="/platforms-and-aoe-services.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
<span className="ring-list__item"><a className="link" href="/platforms-and-aoe-services/bar.html">Bar</a></span>
</div>
</div>
</div>
</div>
</div>
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Methods &amp; Patterns</h4>
</div>
<div className="split__right"><a className="icon-link" href="/methods-and-patterns.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
<span className="ring-list__item"><a className="link" href="/methods-and-patterns/foo.html">Foo</a></span>
</div>
</div>
</div>
</div>
</div>
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Tools</h4>
</div>
<div className="split__right"><a className="icon-link" href="/tools.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
<span className="ring-list__item"><a className="link" href="/tools/grunt.html">Grunt 2</a></span>
</div>
</div>
</div>
</div>
</div>
<div className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">Languages &amp; Frameworks</h4>
</div>
<div className="split__right"><a className="icon-link" href="/languages-and-frameworks.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
</div>
</div>
<div className="quadrant-section__rings">
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react.html">React</a></span>
</div>
</div>
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react123.html">This is a long title</a></span><span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue123.html">Vue 123</a></span>
</div>
</div>
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--adopt">adopt</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue.html">Vue</a></span>
</div>
</div>
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
<span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue1230.html">Something else</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
); );
} }

63
js/components/QuadrantGrid.js Normal file
View File

@@ -0,0 +1,63 @@
import React from 'react';
import { groupByQuadrants } from '../../common/model';
import { translate, quadrants, rings } from '../../common/config';
const renderRing = (ringName, quadrantName, groups) => {
if (!groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
return null;
}
return (
<div className="quadrant-section__ring">
<div className="ring-list">
<div className="ring-list__header"><span className={`badge badge--${ringName}`}>{ringName}</span></div>
{
(groups[quadrantName][ringName]).map(item => (
<span
key={item.name}
className="ring-list__item"
>
<a className="link" href={`/${item.quadrant}/${item.name}.html`}>{item.title}</a>
</span>
))
}
</div>
</div>
);
}
const renderQuadrant = (quadrantName, groups) => {
return (
<div key={quadrantName} className="quadrant-grid__quadrant">
<div className="quadrant-section">
<div className="quadrant-section__header">
<div className="split">
<div className="split__left">
<h4 className="headline">{translate(quadrantName)}</h4>
</div>
<div className="split__right">
<a className="icon-link" href={`/${quadrantName}.html`}>
<span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
</a>
</div>
</div>
</div>
<div className="quadrant-section__rings">
{
rings.map((ringName) => renderRing(ringName, quadrantName, groups))
}
</div>
</div>
</div>
);
}
export default function({ items }) {
const groups = groupByQuadrants(items);
return (
<div className="quadrant-grid">
{
quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))
}
</div>
);
}