diff --git a/.babelrc b/.babelrc index 69f50c4..d4d2df4 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["latest", "stage-0"] + "presets": ["latest", "stage-0", "react"] } diff --git a/components/App.js b/components/App.js new file mode 100644 index 0000000..d8e82f4 --- /dev/null +++ b/components/App.js @@ -0,0 +1,140 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +function App({ items, releses, pageName }) { + 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 +
+
+
+
+
+
+
+
+
+ +
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. +
+
+
+
+
+ ) +} + +export default connect(({ items, releases, pageName }) => ({ items, releases, pageName }))(App); diff --git a/package.json b/package.json index 1a00900..f5591eb 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "babel-cli": "6.22.2", "babel-loader": "6.2.10", "babel-preset-latest": "6.22.0", + "babel-preset-react": "6.23.0", "babel-preset-stage-0": "6.22.0", "front-matter": "2.1.2", "fs-extra": "2.0.0", @@ -34,6 +35,10 @@ "postcss-easy-import": "2.0.0", "postcss-nested": "1.0.0", "pug": "2.0.0-beta9", + "react": "15.4.2", + "react-dom": "15.4.2", + "react-redux": "5.0.2", + "redux": "3.6.0", "vue": "2.1.10", "walk": "2.3.9", "webpack": "2.2.0" diff --git a/react/index.js b/react/index.js new file mode 100644 index 0000000..e69de29 diff --git a/tasks/build.js b/tasks/build.js index 2ec328b..8797f02 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -4,17 +4,18 @@ import { outputRadar, } from './radar'; import { - createStatic, + renderApp, } from './static'; (async () => { try { const radar = await createRadar(); - outputRadar(radar); + renderApp(radar, 'index'); + // outputRadar(radar); // const radarByQuadrants = groupByQuadrants(radar); - createStatic(radar); + // createStatic(radar); console.log('Built radar'); // console.log(JSON.stringify(radar, null, 2)); diff --git a/tasks/static.js b/tasks/static.js index a2c1050..68a4460 100644 --- a/tasks/static.js +++ b/tasks/static.js @@ -1,42 +1,78 @@ import { outputFile } from 'fs-extra'; -import pug from 'pug'; -import frontmatter from 'front-matter'; -import marked from 'marked'; -import { - staticPath, - distPath, - getAllPugFiles, -} from './file'; -import { - vars, -} from './template'; +import React from 'react'; +import { renderToString } from 'react-dom/server'; +import { createStore } from 'redux'; +import { Provider } from 'react-redux'; -export const createStatic = async (radar) => { - const paths = await getAllPugFiles(staticPath()); - const fileNames = getPlainFileNames(paths); - return renderStaticPages(radar, fileNames); - return fileNames; -}; +import { distPath } from './file'; +import App from '../components/App'; -const getPlainFileNames = (paths) => ( - paths.map((fileName) => { - const [ nameWithSuffix ] = fileName.split('/').slice(-1); - return nameWithSuffix.substr(0, nameWithSuffix.length - 4); - }) -) +const appReducer = (state = {}, action) => { + return state; +} -const renderStaticPages = (radar, fileNames) => ( - Promise.all(fileNames.map((name) => ( - new Promise((resolve, reject) => ( - outputFile(distPath(`${name}.html`), pug.renderFile(staticPath(`${name}.pug`), vars({ - ...radar, - })), (err, data) => { - if (err) { - reject(err); - } else { - resolve(data); - } - }) - )) - ))) +export const renderApp = (radar, pageName) => { + // Create a new Redux store instance + const store = createStore(appReducer, { + ...radar, + pageName + }); + + // Render the component to a string + const html = renderToString( + + + + ) + + // Grab the initial state from our Redux store + const preloadedState = store.getState() + + // Send the rendered page back to the client + const fullHtml = renderFullPage(html, preloadedState); + + // Save file + save(fullHtml, pageName); +} + +const renderFullPage = (html, preloadedState) => { + return ` + + + AOE Technology Radar - AOE Tech Radar + + + +
${html}
+ + + + + + + + + + Redux Universal Example + + + + + + + ` +} + +const save = (html, pageName) => ( + new Promise((resolve, reject) => ( + outputFile(distPath(`${pageName}.html`), html, (err, data) => { + if (err) { + reject(err); + } else { + resolve(data); + } + }) + )) ); diff --git a/tasks/static2.js b/tasks/static2.js new file mode 100644 index 0000000..a2c1050 --- /dev/null +++ b/tasks/static2.js @@ -0,0 +1,42 @@ +import { outputFile } from 'fs-extra'; +import pug from 'pug'; +import frontmatter from 'front-matter'; +import marked from 'marked'; +import { + staticPath, + distPath, + getAllPugFiles, +} from './file'; +import { + vars, +} from './template'; + +export const createStatic = async (radar) => { + const paths = await getAllPugFiles(staticPath()); + const fileNames = getPlainFileNames(paths); + return renderStaticPages(radar, fileNames); + return fileNames; +}; + +const getPlainFileNames = (paths) => ( + paths.map((fileName) => { + const [ nameWithSuffix ] = fileName.split('/').slice(-1); + return nameWithSuffix.substr(0, nameWithSuffix.length - 4); + }) +) + +const renderStaticPages = (radar, fileNames) => ( + Promise.all(fileNames.map((name) => ( + new Promise((resolve, reject) => ( + outputFile(distPath(`${name}.html`), pug.renderFile(staticPath(`${name}.pug`), vars({ + ...radar, + })), (err, data) => { + if (err) { + reject(err); + } else { + resolve(data); + } + }) + )) + ))) +);