From 13236109822db086a3deb3eaba65cfde387f005e Mon Sep 17 00:00:00 2001
From: Mathias Schopmans <mathias.schopmans@aoe.com>
Date: Tue, 4 Apr 2017 18:10:44 +0200
Subject: [PATCH] Refactor techradar to subfolder

---
 README.md                 | 1 +
 common/config.js          | 4 ++++
 common/file.js            | 2 +-
 js/client.js              | 4 +++-
 js/components/Footer.js   | 4 ++--
 js/components/Link.js     | 2 +-
 js/components/LogoLink.js | 3 ++-
 js/server.js              | 9 +++++----
 package.json              | 2 +-
 tasks/watch.js            | 4 ++--
 webpack.config.js         | 2 +-
 11 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 8de6c02..e8b69a0 100644
--- a/README.md
+++ b/README.md
@@ -53,3 +53,4 @@ If an item is overwritten in a new release, the attributes from the new item are
 -  [ ] Make mobile friendly
 -  [ ] Add mobile navigation and search
 -  [ ] Create more react components for already existing CSS comps
+-  [ ] Refactor hardcoded subfolder in routing
diff --git a/common/config.js b/common/config.js
index 8484771..92f6702 100644
--- a/common/config.js
+++ b/common/config.js
@@ -5,6 +5,10 @@ export const quadrants = [
   'tools',
 ];
 
+export function assetUrl(file) {
+  return `/techradar/assets/${file}`
+}
+
 export const getPageNames = (radar) => {
   return [
     'index',
diff --git a/common/file.js b/common/file.js
index e75c4bf..933911d 100644
--- a/common/file.js
+++ b/common/file.js
@@ -27,7 +27,7 @@ export const jsPath = (...pathInSrc) => (
 );
 
 export const distPath = (...pathInDist) => (
-  relativePath('dist', ...pathInDist)
+  relativePath('dist', 'techradar', ...pathInDist)
 );
 
 export const getAllMarkdownFiles = (folder) => (
diff --git a/js/client.js b/js/client.js
index 2651663..5e509e7 100644
--- a/js/client.js
+++ b/js/client.js
@@ -18,7 +18,9 @@ const getPageNameFromPath = (path) => {
 }
 
 const historyManager = store => {
-  const history = createHistory();
+  const history = createHistory({
+    basename: '/techradar'
+  });
 
   // If browser-back button is pressed, provide new pageName to store
   history.listen((location, action) => {
diff --git a/js/components/Footer.js b/js/components/Footer.js
index 63688c1..5bc53da 100644
--- a/js/components/Footer.js
+++ b/js/components/Footer.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import Branding from './Branding';
-import { getItemPageNames, isMobileViewport } from '../../common/config';
+import { assetUrl, getItemPageNames, isMobileViewport } from '../../common/config';
 
 export default function Footer({ items, pageName }) {
   return (
     <div className={classNames('footer', {'is-hidden': !isMobileViewport() && getItemPageNames(items).includes(pageName)})}>
       <Branding
         modifier="footer"
-        logoContent={<img src="/assets/logo.svg" width="150px" height="60px" />}
+        logoContent={<img src={assetUrl('logo.svg')} width="150px" height="60px" />}
       >
         <span className="footnote">
       AOE is a leading global provider of services for digital transformation and digital business models. AOE relies exclusively on established Enterprise Open Source technologies. This leads to innovative solutions, digital products and portals in agile software projects, and helps build long-lasting, strategic partnerships with our customers.
diff --git a/js/components/Link.js b/js/components/Link.js
index c2c54d0..9d76c5a 100644
--- a/js/components/Link.js
+++ b/js/components/Link.js
@@ -9,7 +9,7 @@ function Link({ pageName, children, navigate, className, style = {}}) {
   };
 
   return (
-    <a href={`/${pageName}.html`} onClick={handleClick} style={style} {...{ className }}>
+    <a href={`/techradar/${pageName}.html`} onClick={handleClick} style={style} {...{ className }}>
       {children}
     </a>
   );
diff --git a/js/components/LogoLink.js b/js/components/LogoLink.js
index 2e28b60..f5b55c8 100644
--- a/js/components/LogoLink.js
+++ b/js/components/LogoLink.js
@@ -1,13 +1,14 @@
 import React from 'react';
 import classNames from 'classnames';
 import Link from './Link';
+import { assetUrl } from '../../common/config';
 
 export default function LogoLink({ small=false }) {
   return (
     <Link pageName="index" className={classNames('logo-link', { 'logo-link--small': small })}>
       <span className="logo-link__icon icon icon--back"></span>
       <span className="logo-link__slide">
-        <img className="logo-link__img" src="/assets/logo.svg" width="150px" height="60px" />
+        <img className="logo-link__img" src={assetUrl('logo.svg')} width="150px" height="60px" />
         <span className="logo-link__text">
           Technology Radar
         </span>
diff --git a/js/server.js b/js/server.js
index b1129c1..32450c5 100644
--- a/js/server.js
+++ b/js/server.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { renderToString } from 'react-dom/server';
 import { createStore } from 'redux';
 import { Provider } from 'react-redux';
+import {assetUrl} from '../common/config'
 
 import App from './components/App';
 import appReducer from './reducer';
@@ -36,20 +37,20 @@ const renderFullPage = (html, pageTitle, preloadedState) => {
     <head>
       <meta charset="utf-8">
       <title>${pageTitle} | AOE Technology Radar</title>
-      <link rel="stylesheet" href="/assets/css/styles.css"/>
+      <link rel="stylesheet" href="${assetUrl('css/styles.css')}"/>
       <link rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?c2sn1i">
-      <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon">
+      <link rel="shortcut icon" href="${assetUrl('favicon.ico')}" type="image/x-icon">
       <meta name="format-detection" content="telephone=no">
       <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
       <meta property="og:title" content="${pageTitle} | AOE Technology Radar" />
-      <meta property="og:image" content="/assets/logo.svg" />
+      <meta property="og:image" content="${assetUrl('logo.svg')}" />
     </head>
     <body>
       <div id="root">${html}</div>
       <script>
         window.__TECHRADAR__ = ${JSON.stringify(preloadedState)}
       </script>
-      <script src="/bundle.js"></script>
+      <script src="${assetUrl('js/bundle.js')}"></script>
     </body>
   </html>
     `
diff --git a/package.json b/package.json
index c636998..d0e1147 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "build:pages": "cross-env RENDER_MODE=server babel-node ./tasks/build.js",
     "build:js": "cross-env RENDER_MODE=client webpack --config webpack.config.js",
     "build:jsprod": "cross-env RENDER_MODE=client webpack -p --config webpack.config.js",
-    "build:css": "postcss -c postcss.config.json -o dist/assets/css/styles.css styles/main.css",
+    "build:css": "postcss -c postcss.config.json -o dist/techradar/assets/css/styles.css styles/main.css",
     "build:assets": "babel-node ./tasks/assets.js",
     "watch": "babel-node ./tasks/watch.js",
     "clean": "babel-node ./tasks/clean.js",
diff --git a/tasks/watch.js b/tasks/watch.js
index 2aa5a61..167f78b 100644
--- a/tasks/watch.js
+++ b/tasks/watch.js
@@ -8,7 +8,7 @@ import {
   jsPath,
   radarPath,
   staticPath,
-  distPath,
+  relativePath,
 } from '../common/file';
 
 
@@ -38,7 +38,7 @@ watch(assetsPath(), options, watchBuild('assets'));
 watch(radarPath(), options, watchBuild('pages'));
 
 var params = {
-    root: distPath(),
+    root: relativePath('dist'),
     logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
 };
 liveServer.start(params);
diff --git a/webpack.config.js b/webpack.config.js
index d33d311..4c4fea5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,7 @@ module.exports = {
   },
   output: {
     path: path.join(__dirname, 'dist'),
-    filename: '[name].js',
+    filename: 'techradar/assets/js/[name].js',
   },
   module: {
     rules: [