Refactor techradar to subfolder

2017-04-04 18:10:44 +02:00
parent 461c4e7dda
commit 1323610982
11 changed files with 23 additions and 14 deletions
--- 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
--- 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',
--- 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) => (
--- 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) => {
--- 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.
--- 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>
  );
--- 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>
--- 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>
    `
--- 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",
--- 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);
--- 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: [