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

Cleanup and file reorganization

Browse Source
This commit is contained in:
Tom Raithel
2017-02-20 19:33:39 +01:00
parent 6cfd53a47a
commit 9f33c7a8ca
30 changed files with 176 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
js/client.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
const appReducer = (state = {}, action) => {
return state;
}
// Grab the state from a global variable injected into the server-generated HTML
const preloadedState = window.__TECHRADAR__;
// Allow the passed state to be garbage-collected
delete window.__TECHRADAR__;
// Create Redux store with initial state
const store = createStore(appReducer, preloadedState)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)

32
js/components/App.js Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { connect } from 'react-redux';
import Header from './Header';
import Router from './Router';
function App(props) {
return (
<div className="js--body">
<div className="page">
<div className="page__header">
<Header />
</div>
<div className="page__content">
<Router {...props} />
</div>
<div className="page__footer">
<div className="branding">
<span className="branding__logo"><img src="/assets/logo.svg"/></span>
<div className="branding__content"><span className="footnote">AOE is a leading provider of Enterprise Open Source web solutions.
Using current agile development methods, more than 250+ developers
and consultants in 8 global locations develop customized Open Source
solutions for global companies and corporations.</span>
</div>
</div>
</div>
</div>
</div>
)
}
export default connect(({ items, releases, pageName }) => ({ items, releases, pageName }))(App);

16
js/components/Header.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
export default function() {
return (
<div className="branding">
<a className="branding__logo" href="/"><img src="/assets/logo.svg"/></a>
<div className="branding__content">
<div className="nav">
<div className="nav__item"><a className="icon-link" href="/help.html"><span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?</a></div>
<div className="nav__item"><a className="icon-link" href="/overview.html"><span className="icon icon--overview icon-link__icon"></span>Technologies Overview</a></div>
<div className="nav__item"><a className="icon-link" href="#todo"><span className="icon icon--search icon-link__icon"></span>Search</a></div>
</div>
</div>
</div>
);
}

9
js/components/HeadlineGroup.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export default function({ children }) {
return (
<div className="headline-group">
{children}
</div>
);
}

10
js/components/HeroHeadline.js Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
export default function({ children, alt }) {
return (
<div className="hero-headline">
{children}
<span className="hero-headline__alt"> {alt}</span>
</div>
);
}

10
js/components/PageHelp.js Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
import HeroHeadline from './HeroHeadline';
export default function PageHelp() {
return (
<div>
<HeroHeadline>How to use AOE Technology Radar</HeroHeadline>
</div>
);
}

112
js/components/PageIndex.js Normal file
View File

@@ -0,0 +1,112 @@
import React from 'react';
import HeroHeadline from './HeroHeadline';
export default function PageIndex() {
return (
<div>
<div className="headline-group">
<HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline>
</div>
<div className="quadrant-grid">
<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>
);
}

86
js/components/PageOverview.js Normal file
View File

@@ -0,0 +1,86 @@
import React from 'react';
import classNames from 'classnames';
import HeadlineGroup from './HeadlineGroup';
import HeroHeadline from './HeroHeadline';
const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
class PageOverview extends React.Component {
constructor(...args) {
super(...args);
this.state = {
ring: rings[0],
};
}
handleRingClick = (ring) => (e) => {
e.preventDefault();
this.setState({
...this.state,
ring,
});
}
isRingActive(ringName) {
return this.state.ring === ringName;
}
render() {
return (
<div>
<HeadlineGroup>
<HeroHeadline>Technologies Overview</HeroHeadline>
</HeadlineGroup>
<div className="filter">
<div className="nav">
{
rings.map(ringName => (
<div className="nav__item" key={ringName}>
<a
className={classNames('badge badge--big', {
'badge--empty': !this.isRingActive(ringName),
[`badge--${ringName}`]: this.isRingActive(ringName),
})}
onClick={this.handleRingClick(ringName)}
href="#"
>
{ringName}
</a>
</div>
))
}
</div>
</div>
<div className="letter-index">
<div className="letter-index__group">
<div className="letter-index__letter">B</div>
<div className="letter-index__items">
<div className="item-list">
<div className="item-list__list">
<a className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
<div className="split split--overview">
<div className="split__left">
<div className="item__title">Bar</div>
</div>
<div className="split__right">
<div className="nav">
<div className="nav__item">Platforms and AOE Services</div>
<div className="nav__item"><span className="badge badge--assess">assess</span></div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default PageOverview;

24
js/components/Router.js Normal file
View File

@@ -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 <Comp {...props} />;
}

18
js/radar.js
View File

@@ -1,18 +0,0 @@
import filter from './filter';
import details from './details';
import applyPjax from './pjax';
const enhanceComponent = (selector, enhancer, fromPjax = false) => {
const $filter = [].slice.call(document.querySelectorAll(selector));
$filter.map((e) => enhancer(e, fromPjax));
}
const enhanceComponents = (fromPjax) => {
enhanceComponent('.js--filter', filter, fromPjax);
enhanceComponent('.js--details', details, fromPjax);
}
applyPjax();
enhanceComponents();
document.addEventListener("pjax:success", () => enhanceComponents(true));

52
js/server.js Normal file
View File

@@ -0,0 +1,52 @@
import React from 'react';
import { renderToString } from 'react-dom/server';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './components/App';
const appReducer = (state = {}, action) => {
return state;
}
export const renderPage = (radar, pageName) => {
// Create a new Redux store instance
const store = createStore(appReducer, {
...radar,
pageName
});
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<App />
</Provider>
)
// Grab the initial state from our Redux store
const preloadedState = store.getState()
// Send the rendered page back to the client
return renderFullPage(html, preloadedState);
// Save file
// return save(fullHtml, pageName);
}
const renderFullPage = (html, preloadedState) => {
return `
<html>
<head>
<title>AOE Technology Radar - AOE Tech Radar</title>
<link rel="stylesheet" href="/styles.css"/>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__TECHRADAR__ = ${JSON.stringify(preloadedState)}
</script>
<script src="/bundle.js"></script>
</body>
</html>
`
}