diff --git a/common/config.js b/common/config.js new file mode 100644 index 0000000..d848b4a --- /dev/null +++ b/common/config.js @@ -0,0 +1,18 @@ +export const getPageNames = (radar) => { + return [ + 'index', + 'overview', + 'help', + 'foo/bar', + ] +} + +const mappings = { + 'languages-and-frameworks': 'Languages & Frameworks', + 'methods-and-patterns': 'Methods & Patterns', + 'platforms-and-aoe-services': 'Platforms and AOE Services', + 'tools': 'Tools', +}; + + +const formatRelease = (release) => moment(release, 'YYYY-MM-DD').format('MMM YYYY'); diff --git a/tasks/file.js b/common/file.js similarity index 84% rename from tasks/file.js rename to common/file.js index 4ff8f38..61de168 100644 --- a/tasks/file.js +++ b/common/file.js @@ -1,3 +1,4 @@ +import { outputFile } from 'fs-extra'; import path from 'path'; import { walk } from 'walk'; @@ -13,10 +14,6 @@ export const staticPath = (...pathInSrc) => ( relativePath('static-pages', ...pathInSrc) ); -export const templatesPath = (...pathInSrc) => ( - relativePath('templates', ...pathInSrc) -); - export const stylesPath = (...pathInSrc) => ( relativePath('styles', ...pathInSrc) ); @@ -37,10 +34,6 @@ export const getAllMarkdownFiles = (folder) => ( getAllFiles(folder, isMarkdownFile) ); -export const getAllPugFiles = (folder) => ( - getAllFiles(folder, isPugFile) -); - const getAllFiles = (folder, predicate) => ( new Promise((resolve, reject) => { const walker = walk(folder, { followLinks: false }); @@ -69,4 +62,14 @@ const getAllFiles = (folder, predicate) => ( const isMarkdownFile = (name) => name.match(/\.md$/); -const isPugFile = (name) => name.match(/\.pug$/); +export const save = (html, fileName) => ( + new Promise((resolve, reject) => ( + outputFile(distPath(fileName), html, (err, data) => { + if (err) { + reject(err); + } else { + resolve(data); + } + }) + )) +); diff --git a/tasks/radar.js b/common/radar.js similarity index 80% rename from tasks/radar.js rename to common/radar.js index 203c94c..20bccae 100644 --- a/tasks/radar.js +++ b/common/radar.js @@ -7,11 +7,6 @@ import { distPath, getAllMarkdownFiles, } from './file'; -import { - item as itemTemplate, - quadrant as quadrantTemplate, - vars, -} from './template'; export const createRadar = async (tree) => { const fileNames = (await getAllMarkdownFiles(radarPath())); @@ -182,50 +177,6 @@ const revisionCreatesNewHistoryEntry = (revision) => { typeof revision.ring !== 'undefined'; }; -export const outputRadar = ({ items }) => { - const quadrants = groupByQuadrants(items); - - Object.entries(quadrants).map(([quadrantName, quadrant]) => ( - outputQuadrantPage(quadrantName, quadrant) - )); - - return Promise.all( - items.map(async (item) => { - - // Object.entries(quadrant).map(([itemName, item]) => ( - new Promise((resolve, reject) => { - outputFile(distPath(item.quadrant, `${item.name}.html`), itemTemplate(vars({ - itemsInRing: quadrants[item.quadrant][item.ring], - item, - })), (err, data) => { - if (err) { - reject(err); - } else { - resolve(data); - } - }) - }) - // )) - }) - ); -}; - - -const outputQuadrantPage = (quadrantName, quadrant) => ( - new Promise((resolve, reject) => { - outputFile(distPath(`${quadrantName}.html`), quadrantTemplate(vars({ - quadrantName, - quadrant, - })), (err, data) => { - if (err) { - reject(err); - } else { - resolve(data); - } - }) - }) -) - const flagWithIsNew = (items, allReleases) => ( items.map((item) => ({ ...item, diff --git a/components/PageOverview.js b/components/PageOverview.js deleted file mode 100644 index 62276d3..0000000 --- a/components/PageOverview.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; -import HeroHeadline from './HeroHeadline'; - -export default function PageOverview() { - return ( -
- Overview -
- ); -} diff --git a/js/client.js b/js/client.js new file mode 100644 index 0000000..a5b7a49 --- /dev/null +++ b/js/client.js @@ -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( + + + , + document.getElementById('root') +) diff --git a/components/App.js b/js/components/App.js similarity index 100% rename from components/App.js rename to js/components/App.js diff --git a/components/Header.js b/js/components/Header.js similarity index 100% rename from components/Header.js rename to js/components/Header.js diff --git a/js/components/HeadlineGroup.js b/js/components/HeadlineGroup.js new file mode 100644 index 0000000..31dc2a2 --- /dev/null +++ b/js/components/HeadlineGroup.js @@ -0,0 +1,9 @@ +import React from 'react'; + +export default function({ children }) { + return ( +
+ {children} +
+ ); +} diff --git a/components/HeroHeadline.js b/js/components/HeroHeadline.js similarity index 100% rename from components/HeroHeadline.js rename to js/components/HeroHeadline.js diff --git a/components/PageHelp.js b/js/components/PageHelp.js similarity index 100% rename from components/PageHelp.js rename to js/components/PageHelp.js diff --git a/components/PageIndex.js b/js/components/PageIndex.js similarity index 100% rename from components/PageIndex.js rename to js/components/PageIndex.js diff --git a/js/components/PageOverview.js b/js/components/PageOverview.js new file mode 100644 index 0000000..146a1bf --- /dev/null +++ b/js/components/PageOverview.js @@ -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 ( +
+ + Technologies Overview + +
+
+ { + rings.map(ringName => ( +
+ + {ringName} + +
+ )) + } +
+
+ +
+
+
B
+
+
+ +
+
+
+
+
+ ); + } +} + +export default PageOverview; diff --git a/components/Router.js b/js/components/Router.js similarity index 100% rename from components/Router.js rename to js/components/Router.js diff --git a/js/radar.js b/js/radar.js deleted file mode 100644 index 835736e..0000000 --- a/js/radar.js +++ /dev/null @@ -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)); diff --git a/tasks/static.js b/js/server.js similarity index 51% rename from tasks/static.js rename to js/server.js index 0c8eaee..ee98b61 100644 --- a/tasks/static.js +++ b/js/server.js @@ -1,30 +1,14 @@ -import { outputFile } from 'fs-extra'; import React from 'react'; import { renderToString } from 'react-dom/server'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; -import { distPath } from './file'; -import App from '../components/App'; +import App from './components/App'; const appReducer = (state = {}, action) => { return state; } -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, { @@ -43,10 +27,10 @@ export const renderPage = (radar, pageName) => { const preloadedState = store.getState() // Send the rendered page back to the client - const fullHtml = renderFullPage(html, preloadedState); + return renderFullPage(html, preloadedState); // Save file - save(fullHtml, pageName); + // return save(fullHtml, pageName); } const renderFullPage = (html, preloadedState) => { @@ -59,34 +43,10 @@ const renderFullPage = (html, preloadedState) => {
${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/package.json b/package.json index f5591eb..c20d4d2 100644 --- a/package.json +++ b/package.json @@ -24,22 +24,20 @@ "babel-preset-latest": "6.22.0", "babel-preset-react": "6.23.0", "babel-preset-stage-0": "6.22.0", + "classnames": "2.2.5", "front-matter": "2.1.2", "fs-extra": "2.0.0", "live-server": "1.2.0", "marked": "0.3.6", "moment": "2.17.1", - "pjax": "0.2.4", "postcss-cli": "2.6.0", "postcss-css-variables": "0.6.0", "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/static-pages/howto.pug b/static-pages/howto.pug deleted file mode 100644 index 63f99b4..0000000 --- a/static-pages/howto.pug +++ /dev/null @@ -1,14 +0,0 @@ -extends ../templates/default-page.pug - -block vars - - var noLogo=true - - var title="How to Use Technology Radar" - -block content - .headline-group - h1.hero-headline - | How to Use Technology Radar - .markdown - h2 What are quadrants? - p - | TODO diff --git a/static-pages/index.pug b/static-pages/index.pug deleted file mode 100644 index 6ac1126..0000000 --- a/static-pages/index.pug +++ /dev/null @@ -1,35 +0,0 @@ -extends ../templates/default-page.pug - -block vars - - var title='AOE Technology Radar' - -block content - .headline-group - .hero-headline - | Technology Radar - span.hero-headline__alt - = ' ' - = formatRelease(releases[releases.length - 1]) - div.quadrant-grid - each quadrant, quadrantName in groupByQuadrants(items) - .quadrant-grid__quadrant - .quadrant-section - .quadrant-section__header - .split - .split__left - h4.headline= translate(quadrantName) - .split__right - a.icon-link(href=`/${quadrantName}.html`) - span.icon.icon--pie.icon-link__icon - | Quadrant Overview - .quadrant-section__rings - each items, ringName in quadrant - .quadrant-section__ring - .ring-list - .ring-list__header - span(class=`badge badge--${ringName}`) - = ringName - each item in items - span.ring-list__item - a.link(href='/' + quadrantName + '/' + item.name + '.html') - = item.title diff --git a/static-pages/overview.pug b/static-pages/overview.pug deleted file mode 100644 index 20f0696..0000000 --- a/static-pages/overview.pug +++ /dev/null @@ -1,59 +0,0 @@ -extends ../templates/default-page.pug - -block vars - - var noLogo=true - - var title='Technologies Overview' - -block content - .js--filter( - data-index=JSON.stringify(groupByFirstLetter(items)) - ) - .headline-group - .hero-headline - | Technologies Overview - .filter - .nav - .nav__item - a.badge.badge--big( - href='#' - v-on:click="setRing('all')" - v-bind:class=`ring === 'all' ? 'badge--neutral' : ''` - ) all - each _, ringName in groupByRing(items) - .nav__item - a.badge.badge--big.badge--empty( - href='#' - v-on:click=`setRing('${ringName}')` - v-bind:class=`ring === '${ringName}' ? 'badge--${ringName}' : ''` - )= ringName - - div.letter-index - each indexItems, letter in groupByFirstLetter(items) - .letter-index__group( - v-if=`isGroupVisible('${letter}')` - ) - .letter-index__letter= letter - .letter-index__items - .item-list - .item-list__list - each item in indexItems - a.item.item--big.item--no-leading-border.item--no-trailing-border( - href=`/${item.quadrant}/${item.name}.html` - v-if=`isRingVisible('${item.ring}')` - ) - .split.split--overview - .split__left - .item__title - = item.title - if item.isNew - = ' ' - span.is-new new - if item.info - .item__info= item.info - .split__right - .nav - .nav__item - = translate(item.quadrant) - .nav__item - span(class=`badge badge--${item.ring}`) - = item.ring diff --git a/styles/components/badge.css b/styles/components/badge.css index 791de49..f769247 100644 --- a/styles/components/badge.css +++ b/styles/components/badge.css @@ -20,7 +20,7 @@ padding: 0 20px; } - &--neutral { + &--all { background: var(--color-gray-normal); border-color: var(--color-gray-normal); } diff --git a/tasks/assets.js b/tasks/assets.js index bbb4066..72bf8c2 100644 --- a/tasks/assets.js +++ b/tasks/assets.js @@ -2,7 +2,7 @@ import { copy } from 'fs-extra'; import { assetsPath, distPath, -} from './file'; +} from '../common/file'; copy(assetsPath(), distPath('assets'), (err) => { if (err) { diff --git a/tasks/build.js b/tasks/build.js index 6bd1f2c..6ef5180 100644 --- a/tasks/build.js +++ b/tasks/build.js @@ -2,16 +2,26 @@ import { createRadar, groupByQuadrants, outputRadar, -} from './radar'; -import { - renderApp, -} from './static'; +} from '../common/radar'; +import { save } from '../common/file'; +import { getPageNames } from '../common/config'; +import { renderPage } from '../js/server'; (async () => { try { const radar = await createRadar(); - renderApp(radar); + + getPageNames(radar).map((pageName) => { + const pageHtml = renderPage(radar, pageName); + console.log(pageHtml); + save(pageHtml, `${pageName}.html`); + }); + + // pages.map((pageHtml) => { + // save(pageHtml, `${pageName}.html`) + // }); + // console.log(pages); // outputRadar(radar); // const radarByQuadrants = groupByQuadrants(radar); diff --git a/tasks/clean.js b/tasks/clean.js index db3105e..72780b6 100644 --- a/tasks/clean.js +++ b/tasks/clean.js @@ -1,5 +1,5 @@ import { emptyDir } from 'fs-extra'; -import { distPath } from './file'; +import { distPath } from '../common/file'; var distDir = distPath(); diff --git a/tasks/static2.js b/tasks/static2.js deleted file mode 100644 index a2c1050..0000000 --- a/tasks/static2.js +++ /dev/null @@ -1,42 +0,0 @@ -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); - } - }) - )) - ))) -); diff --git a/tasks/template.js b/tasks/template.js index 807d4d0..cc7e824 100644 --- a/tasks/template.js +++ b/tasks/template.js @@ -1,6 +1,6 @@ import pug from 'pug'; import moment from 'moment'; -import { relativePath } from './file'; +import { relativePath } from '../common/file'; import { groupByQuadrants, groupByFirstLetter, diff --git a/templates/default-page.pug b/templates/default-page.pug deleted file mode 100644 index 89e0286..0000000 --- a/templates/default-page.pug +++ /dev/null @@ -1,41 +0,0 @@ -extends layout.pug - -block body - .page - .page__header - .branding - if noLogo - .branding__backlink - a.icon-link.icon-link--primary.icon-link--big(href='/') - span.icon.icon--back.icon-link__icon - | AOE Technology Radar - if !noLogo - a.branding__logo(href='/') - img(src='/assets/logo.svg') - .branding__content - .nav - .nav__item - a.icon-link(href='/howto.html') - span.icon.icon--question.icon-link__icon - | How to Use Technology Radar? - .nav__item - a.icon-link(href='/overview.html') - span.icon.icon--overview.icon-link__icon - | Technologies Overview - .nav__item - a.icon-link(href='#todo') - span.icon.icon--search.icon-link__icon - | Search - .page__content - block content - if !noFooter - .page__footer - .branding - span.branding__logo - img(src='/assets/logo.svg') - .branding__content - span.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. diff --git a/templates/item-page.pug b/templates/item-page.pug deleted file mode 100644 index 2a65cea..0000000 --- a/templates/item-page.pug +++ /dev/null @@ -1,72 +0,0 @@ -extends default-page.pug - -block vars - - var noLogo=true - - var noFooter=true - - var title=item.title - -block content - .item-page.js--details(data-items=JSON.stringify(itemsInRing)) - .item-page__nav - .item-page__nav__inner - .item-page__header(v-bind:style="navHeader.style") - h3.headline - = translate(item.quadrant) - .item-list - .item-list__header(v-bind:style="navHeader.style") - .split - .split__left - span(class=`badge badge--big badge--${item.ring}`) - = item.ring - .split__right - a.icon-link(href=`/${item.quadrant}.html`) - span.icon.icon--pie.icon-link__icon - | Quadrant Overview - .item-list__list - each ringItem, i in itemsInRing - a.item( - class=`${ringItem.name === item.name ? 'is-active' : ''}` - href=`/${ringItem.quadrant}/${ringItem.name}.html` - v-bind:style=`items[${i}].style` - ) - .item__title= ringItem.title - if ringItem.info - .item__info= ringItem.info - .item-page__content(v-bind:style="background.style") - .item-page__content__inner(v-bind:style="text.style") - .item-page__header - .split - .split__left - h1.hero-headline.hero-headline--inverse - = item.title - .split__right - span(class=`badge badge--big badge--${item.ring}`) - = item.ring - .markdown - != item.body - //- - a(href='/' + item.quadrant + '.html')= translate(item.quadrant) - h1 #{item.title} - = ' ' - small #{item.ring} - - - hr - - h4= item.revisions[0].version - h5 New: #{item.isNew ? 'YES' : 'NO'} - h5 Feature: #{item.isFeatured ? 'YES' : 'NO'} - - section - != item.revisions[0].body - hr - - ul - each revision, index in item.revisions - if index > 0 - li - h3 - = revision.version - = ' ' - = revision.ring - != revision.body diff --git a/templates/layout.pug b/templates/layout.pug deleted file mode 100644 index ee30eee..0000000 --- a/templates/layout.pug +++ /dev/null @@ -1,10 +0,0 @@ -block vars -html - head - title #{title} - AOE Tech Radar - link(rel='stylesheet', href='/styles.css') - body - .js--body - block body - block scripts - script(src='/bundle.js') diff --git a/templates/quadrant-page.pug b/templates/quadrant-page.pug deleted file mode 100644 index 5e08106..0000000 --- a/templates/quadrant-page.pug +++ /dev/null @@ -1,24 +0,0 @@ -extends default-page.pug - -block vars - - var noLogo=true - - var title=`${translate(quadrantName)}` - -block content - .headline-group - h1.hero-headline - = translate(quadrantName) - .quadrant-section - .quadrant-section__rings - each items, ringName in quadrant - .quadrant-section__ring - .item-list - .item-list__header - span(class=`badge badge--big badge--${ringName}`) - = ringName - .item-list__list - each ringItem in items - a.item.item--no-leading-border(href=`/${ringItem.quadrant}/${ringItem.name}.html`) - .item__title= ringItem.title - if ringItem.info - .item__info= ringItem.info diff --git a/webpack.config.js b/webpack.config.js index 6bb0e81..60a252a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,23 +2,18 @@ var path = require('path'); module.exports = { entry: { - bundle: './js/radar.js', + bundle: './js/client.js', }, output: { path: path.join(__dirname, 'dist'), filename: '[name].js', }, - resolve: { - alias: { - 'vue$': 'vue/dist/vue.common.js' - } - }, module: { rules: [ { test: /\.js?$/, include: [ - path.resolve(__dirname, "js") + path.resolve(__dirname, "js"), ], loader: "babel-loader",