updated node version and other packages (#1341)

* updated node version and other packages

* Update Dockerfile

* regenerated min css

* min css

* wip

* removed console logs

* updated uglidy-js; minify argohub-redirect separately

* wip

* wip

* updated .nvmrc, added prettier rules, updated package.lock

* updated .nvmrc, added prettier rules, updated package.lock

* fixed gitops layout

* formated argohub-redirect

* removed commnets

Author: alinashklyar

.babelrc.js

@@ -1,19 +1,21 @@
 {
   "root": true,
-  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "es6": true
   },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "ecmaVersion": 2022
+  },
   "extends": "eslint:recommended",
-  "plugins": ["compat"],
   "rules": {
     // Possible Errors
     "no-await-in-loop": "error",
     "no-extra-parens": "error",
     "no-prototype-builtins": "error",
     "no-template-curly-in-string": "error",
-    "compat/compat": "error",
     "valid-jsdoc": "error",
 
     // Best Practices

.eslintrc.json

@@ -0,0 +1 @@
+22

.nvmrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "printWidth": 120,
+  "quoteProps": "as-needed",
+  "proseWrap": "preserve",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

.prettierrc

@@ -1,14 +1,14 @@
 {
-  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
-  "plugins": [
-    "stylelint-order"
-  ],
+  "extends": ["stylelint-config-standard-scss"],
+  "plugins": ["stylelint-scss", "stylelint-order"],
   "rules": {
     "at-rule-empty-line-before": [null,
       "except": ["first-nested"]
     ],
     "at-rule-name-space-after": "always",
     "at-rule-no-vendor-prefix": true,
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
     "at-rule-semicolon-space-before": "never",
     "block-closing-brace-empty-line-before": null,
     "block-closing-brace-newline-after": null,

.stylelintrc

@@ -16,7 +16,6 @@ The site is automatically deployed when commits are merged/pushed in `master`, h
 
 To compile scss files into css run the command `npm run css` or in the live mode `npm run watch-css`.
 To compile js files into a bundle run the command `npm run js` or in the live mode `npm run watch-js`.
-Node version `9.11.2`
 
 ### Preview documentation locally (Legacy method)
 

README.md

@@ -3,7 +3,8 @@
   const SITE_GITOPS_COLLECTION = "{{ site.gitops_collection }}";
   const SITE_IS_GITOPS_COLLECTION = "{{ page.collection }}" === "{{ site.gitops_collection }}";
 </script>
-<script src="{{ site.baseurl }}/assets/js/src/argohub-redirect.js"></script>
+<script src="{{ site.baseurl }}/assets/js/argohub-redirect/argohub-redirect.min.js"></script>
+
 
 <script src="{{ site.cdn.jquery }}" integrity="{{ site.cdn.jquery_hash }}" crossorigin="anonymous"></script>
 <script>window.jQuery || document.write('<script src="{{ site.baseurl }}/assets/js/vendor/jquery.min.js"><\/script>')</script>

_includes/scripts.html

@@ -1,3 +1,6 @@
+/* eslint-disable no-implicit-globals, strict */
+/* global SITE_BASE_URL, SITE_GITOPS_COLLECTION, SITE_IS_GITOPS_COLLECTION */
+
 const GITOPS_DOC_COOKIE = 'cfdoctype=gitops'
 const IS_GITOPS_DOC_COOKIE_SET = document.cookie.includes(GITOPS_DOC_COOKIE)
 
@@ -7,9 +10,10 @@ async function getArgoHubRedirectURL(currentPath) {
   currentPath = currentPath.replace(SITE_BASE_URL, '')
 
   const redirectMap = await fetchRedirectMap()
-
   const newPath = redirectMap[currentPath]
-  if (!newPath) return null
+  if (!newPath) {
+    return null
+  }
 
   const newURL =
     newPath === `/${SITE_GITOPS_COLLECTION}/`
@@ -20,16 +24,20 @@ async function getArgoHubRedirectURL(currentPath) {
 }
 
 async function handleRedirect() {
-  if (SITE_IS_GITOPS_COLLECTION || !IS_GITOPS_DOC_COOKIE_SET) return
+  if (SITE_IS_GITOPS_COLLECTION || !IS_GITOPS_DOC_COOKIE_SET) {
+    return
+  }
 
   const argoHubRedirectURL = await getArgoHubRedirectURL(location.pathname)
-  if (!argoHubRedirectURL) return
+  if (!argoHubRedirectURL) {
+    return
+  }
 
   location.href = argoHubRedirectURL
 }
 
 async function fetchRedirectMap() {
-  const response = await fetch(`${SITE_BASE_URL}/assets/js/src/argohub-redirect-mapping.json`)
+  const response = await fetch(`${SITE_BASE_URL}/assets/js/argohub-redirect/argohub-redirect-mapping.json`)
   if (!response.ok) {
     throw new Error('Failed to fetch the collections redirect map.')
   }
@@ -64,6 +72,7 @@ function toggleSegmentDropdown() {
   select.classList.toggle('open')
 }
 
+// eslint-disable-next-line no-unused-vars
 function handleDropdownKeydown(event) {
   const select = document.querySelector('.custom-select')
   const options = select.querySelectorAll('.option')
@@ -77,59 +86,33 @@ function handleDropdownKeydown(event) {
       break
     case 'ArrowDown':
       event.preventDefault()
-      if (!isOpen) toggleSegmentDropdown()
+      if (!isOpen) {
+        toggleSegmentDropdown()
+      }
       options[0].focus()
       break
     case 'Escape':
-      if (isOpen) toggleSegmentDropdown()
-      break
-  }
-}
-
-function handleOptionKeydown(event, option, selectedValue) {
-  const select = document.querySelector('.custom-select')
-  const options = select.querySelectorAll('.option')
-  const currentIndex = Array.from(options).indexOf(option)
-
-  switch (event.key) {
-    case 'Enter':
-    case ' ':
-      event.preventDefault()
-      selectSegmentOption(option, selectedValue)
-      break
-    case 'ArrowDown':
-      event.preventDefault()
-      if (currentIndex < options.length - 1) {
-        options[currentIndex + 1].focus()
+      if (isOpen) {
+        toggleSegmentDropdown()
       }
       break
-    case 'ArrowUp':
-      event.preventDefault()
-      if (currentIndex > 0) {
-        options[currentIndex - 1].focus()
-      }
-      break
-    case 'Escape':
-      select.classList.remove('open')
-      select.querySelector('.select-display').focus()
+    default:
       break
   }
 }
 
 async function selectSegmentOption(option, selectedValue) {
   const selectDisplay = document.querySelector('.select-display')
-
   selectDisplay.textContent = option.textContent
 
   const redirectMap = await fetchRedirectMap()
-
   const pathname = window.location.pathname
   const currentPath = pathname.replace(SITE_BASE_URL, '')
 
   if (selectedValue === 'enterprise') {
     removeGitOpsDocumentationCookie()
 
-    const enterprisePath = Object.keys(redirectMap).find((key) => redirectMap[key] === currentPath)
+    const enterprisePath = Object.keys(redirectMap).find(key => redirectMap[key] === currentPath)
 
     if (enterprisePath) {
       window.location.href = `${SITE_BASE_URL}${enterprisePath}`
@@ -149,7 +132,40 @@ async function selectSegmentOption(option, selectedValue) {
   }
 }
 
-document.addEventListener('click', (e) => {
+// eslint-disable-next-line no-unused-vars
+function handleOptionKeydown(event, option, selectedValue) {
+  const select = document.querySelector('.custom-select')
+  const options = select.querySelectorAll('.option')
+  const currentIndex = Array.from(options).indexOf(option)
+
+  switch (event.key) {
+    case 'Enter':
+    case ' ':
+      event.preventDefault()
+      selectSegmentOption(option, selectedValue)
+      break
+    case 'ArrowDown':
+      event.preventDefault()
+      if (currentIndex < options.length - 1) {
+        options[currentIndex + 1].focus()
+      }
+      break
+    case 'ArrowUp':
+      event.preventDefault()
+      if (currentIndex > 0) {
+        options[currentIndex - 1].focus()
+      }
+      break
+    case 'Escape':
+      select.classList.remove('open')
+      select.querySelector('.select-display').focus()
+      break
+    default:
+      break
+  }
+}
+
+document.addEventListener('click', e => {
   const select = document.querySelector('.custom-select')
   if (!select.contains(e.target)) {
     select.classList.remove('open')

assets/css/docs.min.css

@@ -5,7 +5,7 @@
 .btn-link {
   color: $bd-link-color;
 
-  @include hover {
+  &:hover {
     color: $bd-link-color;
     border-color: transparent;
   }

assets/css/docs.min.css.map

@@ -1,7 +1,8 @@
 a {
   color: rgba($bd-link-color, .99);
+  text-decoration: none;
 
-  @include hover {
+  &:hover {
     color: $bd-link-hover-color;
   }
 
@@ -47,6 +48,7 @@ ul > li {
   a:not([data-type="image"]):not([data-anchorjs-icon="#"]) {
     color: $bd-link-default;
     border-bottom: none;
+    text-decoration: none;
     transition: color .3s ease-in-out, border-bottom .3s ease-in-out;
 
     &:hover {

assets/js/src/argohub-redirect-mapping.json renamed to assets/js/argohub-redirect/argohub-redirect-mapping.json

@@ -171,7 +171,7 @@
   line-height: 1;
   color: $cf-light;
 
-  @include hover {
+  &:hover {
     color: $bd-link-hover-color;
   }
 }

assets/js/src/argohub-redirect.js renamed to assets/js/argohub-redirect/argohub-redirect.js

@@ -119,8 +119,6 @@ $grid-breakpoints: (
   xl: 1274px,
   xxl: 1600px
 );
-@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-@include _assert-starts-at-zero($grid-breakpoints);
 
 // Grid containers
 //
@@ -133,7 +131,6 @@ $container-max-widths: (
   xl: 1214px,
   xxl: 1540px
 );
-@include _assert-ascending($container-max-widths, "$container-max-widths");
 
 // Grid columns
 //

assets/js/argohub-redirect/argohub-redirect.min.js

@@ -0,0 +1,20 @@
+@mixin make-container($padding-x: $container-padding-x) {
+  width: 100%;
+  padding-right: $padding-x;
+  padding-left: $padding-x;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint, $container-max-width in $max-widths {
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      max-width: $container-max-width;
+    }
+  }
+}
+
+.custom-container {
+  @include make-container();
+  @include make-container-max-widths();
+}

assets/scss/_buttons.scss

@@ -3,22 +3,12 @@
  * Copyright 2018 Codefresh, Inc.
  */
 
-// Load Bootstrap variables and mixins
+@use "bootstrap/scss/bootstrap" as *;
 
-//@import "../../scss/functions";
-@import "../../node_modules/bootstrap/scss/functions";
-
-//@import "../../scss/variables";
-@import "../../node_modules/bootstrap/scss/variables";
-
-//@import "../../scss/mixins";
-@import "../../node_modules/bootstrap/scss/mixins";
 
 // Load docs components
 @import "variables";
 
-@import "../../node_modules/bootstrap/scss/bootstrap-grid";
-
 @import "root";
 @import "reboot";
 @import "code";
@@ -43,6 +33,7 @@
 @import "modal";
 @import "select";
 @import "divider";
+@import "custom-overrides";
 
 // Load docs dependencies
 @import "syntax";