Merge pull request #54 from XPRTZ/feature/mobile-friendly-ui

Feature/mobile friendly UI

README.md

@@ -12,7 +12,7 @@ To edit the contents of the radar, you can follow this approach:
 
 1. Clone this repo
 2. Execute `npm install` to install the necessary dependencies
-3. Execute `npm run dev` in the "site" folder to watch the "items" folder for changes and preview the site in the browser on http://localhost:8080
+3. Execute `npm run dev` to watch the "items" folder for changes and preview the site in the browser on http://localhost:8080
 4. Commit and push to make changes visible for the rest of the world
 
 ## Background information

package.json

@@ -6,16 +6,11 @@
   "scripts": {
     "parse": "node parser.js",
     "watchparse": "chokidar \"parser.js\" \"items/**/*.txt\" -c \"npm run parse\"",
-    "build": "webpack --mode production",
-    "dev-server": "webpack-dev-server --mode development",
+    "build": "webpack --mode production --config webpack.prod.js",
+    "dev-server": "webpack-dev-server --mode development --config webpack.dev.js",
     "dev": "npm-run-all --parallel watchparse dev-server",
-    "test": "jasmine",
-    "test:e2e": "cypress run --env host=$TEST_URL",
     "lint-prettier:check": "eslint . && prettier --check .",
     "lint-prettier:fix": "eslint . --fix && prettier --write .",
-    "start": "cypress open --env host=$TEST_URL",
-    "coverage": "nyc npm run test",
-    "quality": "npm run lint-prettier:check && npm run coverage",
     "copy-output": "node copyOutput.js",
     "prepare": "husky install"
   },
@@ -29,67 +24,52 @@
   ],
   "license": "AGPL-3.0",
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.16.11",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "babel-loader": "^9.1.3",
     "chokidar-cli": "^3.0.0",
-    "css-loader": "^6.7.1",
-    "cssnano": "^5.1.1",
+    "css-loader": "^6.8.1",
+    "cssnano": "^6.0.1",
     "csv-loader": "^3.0.5",
-    "cypress": "^9.5.1",
-    "dotenv": "^16.0.0",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-jasmine": "^4.1.3",
-    "expose-loader": "^3.1.0",
-    "html-webpack-plugin": "^5.5.0",
+    "dotenv": "^16.3.1",
+    "eslint": "^8.48.0",
+    "eslint-config-prettier": "^9.0.0",
+    "expose-loader": "^4.1.0",
+    "html-webpack-plugin": "^5.5.3",
     "husky": "^8.0.3",
-    "jasmine": "^4.0.2",
-    "jsdom": "^19.0.0",
-    "mini-css-extract-plugin": "^2.6.0",
-    "mochawesome": "^7.1.2",
-    "node-sass": "^7.0.1",
+    "jsdom": "^22.1.0",
+    "mini-css-extract-plugin": "^2.7.6",
     "npm-run-all": "^4.1.5",
-    "nyc": "^15.1.0",
-    "postcss-loader": "^6.2.1",
-    "postcss-preset-env": "^7.4.2",
-    "prettier": "^2.5.1",
-    "sass-loader": "^12.6.0",
-    "style-loader": "^3.3.1",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
-    "yargs": "^17.3.1"
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.1.3",
+    "prettier": "^3.0.3",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1",
+    "yargs": "^17.7.2"
   },
   "dependencies": {
-    "chance": "^1.1.8",
-    "d3": "^7.3.0",
-    "d3-tip": "^0.7.1",
+    "chance": "^1.1.11",
+    "d3": "^7.8.5",
+    "d3-tip": "^0.9.1",
     "fs-extra": "^11.1.1",
-    "jquery": "^3.6.0",
-    "jquery-ui": "^1.13.1",
+    "jquery": "^3.7.1",
+    "jquery-ui": "^1.13.2",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
-    "sanitize-html": "^2.7.0"
+    "sanitize-html": "^2.11.0"
   },
   "standard": {
     "globals": [
-      "Cypress",
-      "cy",
       "XMLHttpRequest"
-    ],
-    "env": [
-      "jasmine"
-    ],
-    "ignore": [
-      "radar-spec.js",
-      "ref-table-spec.js"
     ]
   },
   "engines": {
-    "node": ">=12 <18",
-    "npm": "~8.3.1"
+    "node": ">=18",
+    "npm": "~10.0.0"
   },
   "private": true
 }

src/gtm.js → src/analytics.js

@@ -1,7 +1,7 @@
 if (process.env.GTM_ID) {
   ;(function (w, d, s, l, i) {
     w[l] = w[l] || []
-    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
+    w[l].push({ 'gtm.start': new Date().getTime(), event: 'analytics.js' })
     var f = d.getElementsByTagName(s)[0]
     var j = d.createElement(s)
     var dl = l !== 'dataLayer' ? '&l=' + l : ''
@@ -10,3 +10,12 @@ if (process.env.GTM_ID) {
     f.parentNode.insertBefore(j, f)
   })(window, document, 'script', 'dataLayer', process.env.GTM_ID)
 }
+if (process.env.ADOBE_LAUNCH_SCRIPT_URL) {
+  ;(function (w, d, s, i) {
+    const l = d.createElement(s)
+    l.async = true
+    l.src = i
+    l.type = 'text/javascript'
+    d.head.append(l)
+  })(window, document, 'script', process.env.ADOBE_LAUNCH_SCRIPT_URL)
+}

src/common.js

@@ -1,5 +1,17 @@
 require('./stylesheets/base.scss')
 require('./images/tech-radar-landing-page-wide.png')
 require('./images/tw-logo.png')
-require('./images/favicon.ico')
+require('./images/favicon32.png')
 require('./images/search-logo-2x.svg')
+require('./images/banner-image-mobile.jpg')
+require('./images/banner-image-desktop.jpg')
+require('./images/new.svg')
+require('./images/existing.svg')
+require('./images/arrow-icon.svg')
+require('./images/first-quadrant-btn-bg.svg')
+require('./images/second-quadrant-btn-bg.svg')
+require('./images/third-quadrant-btn-bg.svg')
+require('./images/fourth-quadrant-btn-bg.svg')
+require('./images/arrow-white-icon.svg')
+require('./images/search-active-wave.svg')
+require('./images/pdf_banner.png')

src/config.js

@@ -0,0 +1,16 @@
+const config = () => {
+  const env = {
+    production: {
+      featureToggles: {
+        UIRefresh2022: true,
+      },
+    },
+    development: {
+      featureToggles: {
+        UIRefresh2022: true,
+      },
+    },
+  }
+  return process.env.ENVIRONMENT ? env[process.env.ENVIRONMENT] : env
+}
+module.exports = config

src/error.html

@@ -5,7 +5,9 @@
         <a href="https://www.thoughtworks.com"><img src="/images/tw-logo.png" /></a>
       </div>
       <div class="input-sheet__banner">
-        <div><h1>Build your own radar</h1></div>
+        <div>
+          <h1>Build your own radar</h1>
+        </div>
       </div>
       <div align="center">
         <p class="page-not-found">PAGE NOT FOUND</p>
@@ -19,7 +21,6 @@
         </div>
         <div class="support-link">
           <span><a href="https://www.thoughtworks.com/radar/byor">Get started on building your radar</a></span>
-          <span><a href="https://www.thoughtworks.com/radar/how-to-byor">How to build your radar</a></span>
         </div>
       </div>
     </div>

src/exceptions/fileNotFoundError.js

@@ -0,0 +1,8 @@
+class FileNotFoundError extends Error {
+  constructor(message) {
+    super(message)
+    this.message = message
+  }
+}
+
+module.exports = FileNotFoundError

src/exceptions/invalidConfigError.js

@@ -0,0 +1,8 @@
+class InvalidConfigError extends Error {
+  constructor(message) {
+    super(message)
+    this.message = message
+  }
+}
+
+module.exports = InvalidConfigError

src/exceptions/invalidContentError.js

@@ -0,0 +1,8 @@
+class InvalidContentError extends Error {
+  constructor(message) {
+    super(message)
+    this.message = message
+  }
+}
+
+module.exports = InvalidContentError