diff --git a/components/App.js b/components/App.js index d8e82f4..fab58f1 100644 --- a/components/App.js +++ b/components/App.js @@ -1,126 +1,18 @@ import React from 'react'; import { connect } from 'react-redux'; -function App({ items, releses, pageName }) { +import Header from './Header'; +import Router from './Router'; + +function App(props) { return (
-
- -
- -
-
+
-
-
Technology Radar Mar 2017
-
-
-
-
-
-
-
-

Platforms and AOE Services

-
- -
-
-
-
-
-
assess
- Bar -
-
-
-
-
-
-
-
-
-
-

Methods & Patterns

-
- -
-
-
-
-
-
trial
- Foo -
-
-
-
-
-
-
-
-
-
-

Tools

-
- -
-
-
-
-
-
hold
- Grunt 2 -
-
-
-
-
-
-
-
-
-
-

Languages & Frameworks

-
- -
-
-
-
-
-
trial
- React -
-
-
- -
-
-
-
adopt
- Vue -
-
-
-
-
hold
- Something else -
-
-
-
-
-
+
diff --git a/components/Header.js b/components/Header.js new file mode 100644 index 0000000..bf9397e --- /dev/null +++ b/components/Header.js @@ -0,0 +1,16 @@ +import React from 'react'; + +export default function() { + return ( +
+ + +
+ ); +} diff --git a/components/HeroHeadline.js b/components/HeroHeadline.js new file mode 100644 index 0000000..e74edba --- /dev/null +++ b/components/HeroHeadline.js @@ -0,0 +1,10 @@ +import React from 'react'; + +export default function({ children, alt }) { + return ( +
+ {children} + {alt} +
+ ); +} diff --git a/components/PageHelp.js b/components/PageHelp.js new file mode 100644 index 0000000..a27c016 --- /dev/null +++ b/components/PageHelp.js @@ -0,0 +1,10 @@ +import React from 'react'; +import HeroHeadline from './HeroHeadline'; + +export default function PageHelp() { + return ( +
+ How to use AOE Technology Radar +
+ ); +} diff --git a/components/PageIndex.js b/components/PageIndex.js new file mode 100644 index 0000000..f3717e7 --- /dev/null +++ b/components/PageIndex.js @@ -0,0 +1,112 @@ +import React from 'react'; +import HeroHeadline from './HeroHeadline'; + +export default function PageIndex() { + return ( +
+
+ AOE Technology Radar +
+
+
+
+
+
+
+

Platforms and AOE Services

+
+ +
+
+
+
+
+
assess
+ Bar +
+
+
+
+
+
+
+
+
+
+

Methods & Patterns

+
+ +
+
+
+
+
+
trial
+ Foo +
+
+
+
+
+
+
+
+
+
+

Tools

+
+ +
+
+
+
+
+
hold
+ Grunt 2 +
+
+
+
+
+
+
+
+
+
+

Languages & Frameworks

+
+ +
+
+
+
+
+
trial
+ React +
+
+
+ +
+
+
+
adopt
+ Vue +
+
+
+
+
hold
+ Something else +
+
+
+
+
+
+
+ ); +} diff --git a/components/PageOverview.js b/components/PageOverview.js new file mode 100644 index 0000000..62276d3 --- /dev/null +++ b/components/PageOverview.js @@ -0,0 +1,10 @@ +import React from 'react'; +import HeroHeadline from './HeroHeadline'; + +export default function PageOverview() { + return ( +
+ Overview +
+ ); +} diff --git a/components/Router.js b/components/Router.js new file mode 100644 index 0000000..c364f2b --- /dev/null +++ b/components/Router.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PageIndex from './PageIndex'; +import PageOverview from './PageOverview'; +import PageHelp from './PageHelp'; + +export default function Router({ pageName, ...props}) { + let Comp; + switch (pageName) { + case 'index': + Comp = PageIndex; + break; + case 'overview': + Comp = PageOverview; + break; + case 'help': + Comp = PageHelp; + break; + default: + Comp = 'div'; + break; + } + + return ; +} diff --git a/tasks/build.js b/tasks/build.js index 8797f02..6bd1f2c 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -11,7 +11,7 @@ import { (async () => { try { const radar = await createRadar(); - renderApp(radar, 'index'); + renderApp(radar); // outputRadar(radar); // const radarByQuadrants = groupByQuadrants(radar); diff --git a/tasks/static.js b/tasks/static.js index 68a4460..0c8eaee 100644 --- a/tasks/static.js +++ b/tasks/static.js @@ -11,7 +11,21 @@ const appReducer = (state = {}, action) => { return state; } -export const renderApp = (radar, pageName) => { +const getPageNames = (radar) => { + return [ + 'index', + 'overview', + 'help', + 'foo/bar', + ] +} + +export const renderApp = (radar) => { + const pageNames = getPageNames(radar); + pageNames.map(pageName => renderPage(radar, pageName)) +} + +export const renderPage = (radar, pageName) => { // Create a new Redux store instance const store = createStore(appReducer, { ...radar,