New docs app without l4j vulnerabilities

src/main/resources/docs/.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
     'eslint:recommended'
   ],
   parserOptions: {
-    parser: 'babel-eslint'
+    "parser": "@babel/eslint-parser",
+    "requireConfigFile": false,
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

src/main/resources/docs/babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    presets: ['@babel/preset-env'],
+}

src/main/resources/docs/package.json

@@ -3,38 +3,33 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "webpack-dev-server --mode development",
+    "build": "webpack --mode production"
   },
   "dependencies": {
     "bootstrap": "^4.4.1",
-    "bootstrap-vue": "^2.9.0",
+    "bootstrap-sidebar": "^0.2.2-retry",
+    "bootstrap-vue": "^2.21.2",
     "core-js": "^3.6.4",
-    "vue": "^2.6.11",
-    "vue-bootstrap-sidebar": "^1.0.6",
-    "vue-router": "^3.1.5"
+    "eslint": "^8.4.1",
+    "eslint-plugin-vue": "^8.2.0",
+    "vue": "^2.6.14",
+    "vue-bootstrap-sidebar": "^1.0.9",
+    "vue-router": "^3.5.3"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.2.0",
-    "@vue/cli-plugin-eslint": "~4.2.0",
-    "@vue/cli-plugin-router": "~4.2.0",
-    "@vue/cli-service": "~4.2.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.1.2",
-    "lint-staged": "^9.5.0",
-    "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.{js,jsx,vue}": [
-      "vue-cli-service lint",
-      "git add"
-    ]
+    "@babel/core": "^7.16.5",
+    "@babel/eslint-parser": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "babel-loader": "^8.2.3",
+    "eslint-webpack-plugin": "^3.1.1",
+    "html-webpack-plugin": "^5.5.0",
+    "rimraf": "^3.0.2",
+    "vue-loader": "^15.9.8",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
   }
 }

src/main/resources/docs/public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/css?family=Muli:400,500,600,700,800&amp;display=swap&amp;display=block" rel="stylesheet" async="">
     <title>Selenium POM Framework - documentation</title>
   </head>

src/main/resources/docs/src/App.vue

@@ -97,10 +97,96 @@
   })
 </script>
 
-<style lang="scss">
+<style lang="css">
 @import '~bootstrap';
 @import '~bootstrap-vue';
-@import '~vue-bootstrap-sidebar/src/scss/default-theme';
+.vue-bootstrap-sidebar {
+  transition: all 0.3s;
+  min-width: 250px;
+  max-width: 250px;
+  height: 100vh;
+  z-index: 1031;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.vue-bootstrap-sidebar.sidebar-hidden {
+  margin-left: -250px;
+}
+.vue-bootstrap-sidebar.sidebar-visible {
+  margin-left: 0;
+}
+.vue-bootstrap-sidebar .sidebar-header {
+  padding: 10px;
+}
+.vue-bootstrap-sidebar .list-group-item {
+  padding: 0 !important;
+  border: none;
+}
+.vue-bootstrap-sidebar .list-group-item .dropdown-toggle:after {
+  position: absolute;
+  right: 20px;
+  margin-top: 10px;
+}
+.vue-bootstrap-sidebar .list-group-item .sidebar-menu-item {
+  text-align: left;
+  padding-left: 5px;
+}
+.vue-bootstrap-sidebar .list-group-item .sidebar-menu-item .fa-icon {
+  display: inline-block;
+  text-align: center;
+  width: 25px;
+}
+.vue-bootstrap-sidebar .list-group-item .sidebar-menu-item .link-name {
+  display: inline;
+  text-align: left;
+}
+.vue-bootstrap-sidebar .list-group-item .sidebar-menu-item.child-level-1 {
+  padding-left: 15px !important;
+}
+.vue-bootstrap-sidebar .list-group-item .sidebar-menu-item.child-level-1 .fa-icon {
+  display: inline-block;
+  text-align: center;
+  width: 25px;
+}
+.vue-bootstrap-sidebar .list-group-item .sidebar-menu-item.child-level-1 .link-name {
+  display: inline;
+  text-align: left;
+}
+.vue-bootstrap-sidebar .sidebar-button {
+  position: fixed;
+  top: 10px;
+  left: 200px;
+  transition: all 0.3s;
+}
+.vue-bootstrap-sidebar .sidebar-button.visible {
+  left: 200px;
+}
+.vue-bootstrap-sidebar .sidebar-button.hidden {
+  left: 0;
+}
+#navbar :first-child {
+  transition: all 0.3s;
+}
+#navbar.sidebar > nav {
+  padding-left: 270px;
+}
+#navbar.no-sidebar > nav {
+  padding-left: 50px;
+}
+#content {
+  transition: all 0.3s;
+  padding-top: 20px;
+}
+#content.sidebar {
+  margin-left: 250px;
+}
+#content.no-sidebar {
+  margin-left: 0px;
+}
+
+/*Custom Styles*/
+
 body {
   font-size: 16px;
   line-height: 1.6;
@@ -149,12 +235,18 @@ a:active, a > div:active {
 .remove-bottom-margin {
   margin-bottom: 0!important;
 }
-  pre {
-    padding: 16px;
-    overflow: auto;
-    font-size: 85%;
-    line-height: 1.45;
-    background-color: #f6f8fa;
-    border-radius: 3px;
-  }
+pre {
+  padding: 16px;
+  overflow: auto;
+  font-size: 85%;
+  line-height: 1.45;
+  background-color: #f6f8fa;
+  border-radius: 3px;
+}
+
+/* Sidebar Item Styles */
+
+.vue-bootstrap-sidebar .list-group-item a.sidebar-menu-item .link-name {
+  color: #fff;
+}
 </style>

src/main/resources/docs/src/router/index.js

@@ -92,7 +92,7 @@ const routes = [
 
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.BASE_URL,
+  base: '/',
   routes
 })
 

src/main/resources/docs/webpack.config.js

@@ -0,0 +1,24 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const ESLintPlugin = require('eslint-webpack-plugin');
+
+module.exports = {
+    entry: './src/main.js',
+    module: {
+        rules: [
+            { test: /\.js$/, use: 'babel-loader' },
+            { test: /\.vue$/, use: 'vue-loader' },
+            { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
+        ]
+    },
+    devServer: {
+        historyApiFallback: true,
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: './public/index.html',
+        }),
+        new ESLintPlugin(),
+        new VueLoaderPlugin(),
+    ]
+};