Add more components

js/components/App.js

@@ -3,11 +3,12 @@ import { connect } from 'react-redux';
 
 import actions from '../actions';
 import Header from './Header';
+import Footer from './Footer';
 import Router from './Router';
 
 function App(props) {
   return (
-    <div className="js--body">
+    <div>
       <div className="page">
         <div className="page__header">
           <Header {...props} />
@@ -16,14 +17,7 @@ function App(props) {
           <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>
+          <Footer {...props} />
         </div>
       </div>
     </div>

js/components/Branding.js

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export default function Branding({ logoContent, children }) {
+  return (
+    <div className="branding">
+      <div className="branding__logo">
+        {logoContent}
+      </div>
+      <div className="branding__content">
+        {children}
+      </div>
+    </div>
+  );
+}

js/components/Footer.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Branding from './Branding';
+
+export default function Footer() {
+  return (
+    <Branding
+      logoContent={<img src="/assets/logo.svg"/>}
+    >
+      <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>
+    </Branding>
+  );
+}

js/components/Header.js

@@ -1,29 +1,29 @@
 import React from 'react';
+import Branding from './Branding';
 import Link from './Link';
 
 export default function Header() {
   return (
-    <div className="branding">
-      <Link pageName="index" className="branding__logo"><img src="/assets/logo.svg"/></Link>
-      <div className="branding__content">
-        <div className="nav">
-          <div className="nav__item">
-            <Link pageName="help" className="icon-link">
-              <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
-            </Link>
-          </div>
-          <div className="nav__item">
-            <Link pageName="overview" className="icon-link">
-              <span className="icon icon--overview icon-link__icon"></span>Technologies Overview
-            </Link>
-          </div>
-          <div className="nav__item">
-            <a className="icon-link" href="#todo">
-              <span className="icon icon--search icon-link__icon"></span>Search
-            </a>
-          </div>
+    <Branding
+      logoContent={<Link pageName="index"><img src="/assets/logo.svg"/></Link>}
+    >
+      <div className="nav">
+        <div className="nav__item">
+          <Link pageName="help" className="icon-link">
+            <span className="icon icon--question icon-link__icon"></span>How to Use Technology Radar?
+          </Link>
+        </div>
+        <div className="nav__item">
+          <Link pageName="overview" className="icon-link">
+            <span className="icon icon--overview icon-link__icon"></span>Technologies Overview
+          </Link>
+        </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>
+    </Branding>
   );
 }

js/components/Item.js

@@ -2,11 +2,12 @@ import React from 'react';
 import classNames from 'classnames';
 import Link from './Link';
 
-export default function Item({ item, noLeadingBorder = false}) {
+export default function Item({ item, noLeadingBorder = false, active = false}) {
   return (
     <Link
       className={classNames('item', {
         'item--no-leading-border': noLeadingBorder,
+        'is-active': active,
       })}
       pageName={`${item.quadrant}/${item.name}`}
     >

js/components/ItemList.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Item from './Item';
+
+export default function ItemList({ children, items, activeItem, noLeadingBorder }) {
+  return (
+    <div className="item-list">
+      <div className="item-list__header">
+        {children}
+      </div>
+      <div className="item-list__list">
+        {
+          items.map(item => (
+            <Item
+              key={item.name}
+              item={item}
+              noLeadingBorder={noLeadingBorder}
+              active={typeof activeItem === 'object' && activeItem !== null && activeItem.name === item.name}
+            />
+          ))
+        }
+      </div>
+    </div>
+  );
+}

js/components/PageItem.js

@@ -1,12 +1,51 @@
 import React from 'react';
 import HeroHeadline from './HeroHeadline';
+import Badge from './Badge';
+import ItemList from './ItemList';
+import Link from './Link';
+import { groupByQuadrants } from '../../common/model';
 
 export default function PageItems({ pageName, items }) {
   const [quadrantName, itemName] = pageName.split('/');
   const item = items.filter(item => item.quadrant === quadrantName && item.name === itemName)[0];
+  const itemsInRing = groupByQuadrants(items)[item.quadrant][item.ring];
+
   return (
-    <div>
-      <HeroHeadline>{item.title}</HeroHeadline>
+    <div className="item-page">
+      <div className="item-page__nav">
+        <div className="item-page__nav__inner">
+          <div className="item-page__header">
+            <h3 className="headline">Languages &amp; Frameworks</h3>
+          </div>
+          <ItemList items={itemsInRing} activeItem={item}>
+            <div className="split">
+              <div className="split__left">
+                <Badge big type={item.ring}>{item.ring}</Badge>
+              </div>
+              <div className="split__right">
+                <Link className="icon-link" pageName={item.quadrant}>
+                  <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
+                </Link>
+              </div>
+            </div>
+          </ItemList>
+        </div>
+      </div>
+      <div className="item-page__content">
+        <div className="item-page__content__inner">
+          <div className="item-page__header">
+            <div className="split">
+              <div className="split__left">
+                <h1 className="hero-headline hero-headline--inverse">{item.title}</h1>
+              </div>
+              <div className="split__right">
+                <Badge big type={item.ring}>{item.ring}</Badge>
+              </div>
+            </div>
+          </div>
+          <div className="markdown" dangerouslySetInnerHTML={{__html: item.body}} />
+        </div>
+      </div>
     </div>
   );
 }

js/components/QuadrantSection.js

@@ -1,26 +1,17 @@
 import React from 'react';
 import { translate, rings } from '../../common/config';
 import Badge from './Badge';
-import Item from './Item';
 import Link from './Link';
+import ItemList from './ItemList';
 
 const renderList = (ringName, quadrantName, groups, big) => {
   const itemsInRing = groups[quadrantName][ringName];
 
   if (big === true) {
     return (
-      <div className="item-list">
-        <div className="item-list__header">
-          <Badge type={ringName} big={big}>{ringName}</Badge>
-        </div>
-        <div className="item-list__list">
-          {
-            itemsInRing.map(item => (
-              <Item key={item.name} item={item} noLeadingBorder />
-            ))
-          }
-        </div>
-      </div>
+      <ItemList items={itemsInRing} noLeadingBorder>
+        <Badge type={ringName} big={big}>{ringName}</Badge>
+      </ItemList>
     );
   }
 

tasks/build.js

@@ -14,7 +14,6 @@ import { renderPage } from '../js/server';
 
     getPageNames(radar).map((pageName) => {
       const pageHtml = renderPage(radar, pageName);
-      console.log(pageHtml);
       save(pageHtml, `${pageName}.html`);
     });