Site redesign (WIP) (Kong#376)

* Enterprise documentation redesign:
Header section updated
Left navigation sidebar added

* Added Welcome text

* Enterprise documentation section support
Added Knowledge base resources
Added 'Whats New' callout element

* Right TOC sidebar in Enterprise docs

* Navtabs support

* Design tweaks related to responsiveness

* Feedback widget

* Fixed formatting

* Knowledge base links added

* Welcome text moved to page content section

* Navtabs formatting fix

* Added What's new page to fix missing link test

* Enterprise Installation page redesign

* Reverted accidentally removed section and typo

* adjusting toc header depth

Co-authored-by: Vladimir Hrusovsky <[email protected]>

app/_assets/javascripts/app.js

@@ -304,6 +304,12 @@ $(function () {
     if ($(window).width() <= 800) {
       $('.sidebar-toggle').click(function () {
         $('.page-navigation').addClass('sidebar-open')
+        const docsSidebar = $('.docs-sidebar')
+        if (docsSidebar.hasClass('sidebar-open')) {
+          docsSidebar.removeClass('sidebar-open')
+        } else {
+          docsSidebar.addClass('sidebar-open')
+        }
       })
       $('.page-navigation > .close-sidebar').click(function () {
         $('.page-navigation').removeClass('sidebar-open')
@@ -429,4 +435,90 @@ $(function () {
       }
     })
   }
+
+  // watch scroll and update active scroll-to anchor links
+  $window.scroll(() => {
+    const anchors = $('a.header-link')
+    const scrollToLinks = $('a.scroll-to')
+    if (!anchors.length || !scrollToLinks.length) {
+      return
+    }
+
+    let activeSet = false
+    scrollToLinks.removeClass('active')
+    $(anchors.get().reverse()).each((index, element) => {
+      const $element = $(element)
+
+      // window top + header section
+      if ((window.scrollY + NAV_HEIGHT + 80) >= $element.offset().top) {
+        $(`a.scroll-to[href$="${$element.attr('href')}"]`).addClass('active')
+        activeSet = true
+        return false
+      }
+    })
+
+    if (!activeSet) {
+      scrollToLinks.first().addClass('active')
+    }
+  })
+
+  // navtabs
+  const navtabs = $('div[data-navtab-id]')
+  navtabs.click(function () {
+    const navtabTitle = $(this)
+    const navtabID = navtabTitle.data('navtab-id')
+    const navtabContent = $(`div[data-navtab-content='${navtabID}']`)
+
+    if (navtabContent.length === 0) {
+      console.err(`No navtab content found for navtab=${navtabID}`)
+      return
+    }
+
+    navtabTitle.siblings().removeClass('active')
+    navtabTitle.addClass('active')
+    navtabContent.siblings().css('display', 'none')
+    navtabContent.css('display', 'block')
+  })
+  // set first navtab as active
+  $('.navtabs').each(function (index, navtabs) {
+    const navtabsTabs = $(navtabs).find('div[data-navtab-id]')
+    navtabsTabs.first().addClass('active')
+    $(`div[data-navtab-content='${navtabsTabs.first().data('navtab-id')}']`).css('display', 'block')
+  })
+
+  // feedback widget
+  function sendFeedback (result, comment = '') {
+    $.ajax({
+      type: 'POST',
+      url: 'https://script.google.com/macros/s/AKfycbzA9EgTcX2aEcfHoChlTNA-MKX75DAOt4gtwx9WMcuMBNHHAQ4/exec',
+      data: JSON.stringify([result, comment, window.location.pathname])
+    })
+
+    $('.feedback-thankyou').css('visibility', 'visible')
+    setTimeout(() => {
+      $('#feedback-widget-checkbox').prop('checked', false)
+    }, 2000)
+  }
+
+  $('#feedback-comment-button-back').click(function () {
+    $('.feedback-options').css('visibility', 'visible')
+    $('.feedback-comment').css('visibility', 'hidden')
+  })
+
+  $('#feedback-comment-button-submit').click(function () {
+    $('.feedback-comment').css('visibility', 'hidden')
+    sendFeedback('no', $('#feedback-comment-text').val())
+  })
+
+  $('.feedback-options-button').click(function () {
+    const button = $(this)
+    const result = button.data('feedback-result')
+
+    $('.feedback-options').css('visibility', 'hidden')
+    if (result === 'yes') {
+      sendFeedback('yes')
+    } else {
+      $('.feedback-comment').css('visibility', 'visible')
+    }
+  })
 })

app/_assets/stylesheets/accordion.less

@@ -0,0 +1,78 @@
+.accordion-container {
+  position: relative;
+  margin: 0;
+  padding: 0;
+
+  > li {
+    border-bottom: 1px solid #ebebeb;
+    list-style: none;
+    margin: 0;
+
+    input {
+      display: none;
+
+      &:checked {
+        + label {
+          border-left-color: rgb(0, 112, 191);
+
+          i {
+            transform: rotate(180deg);
+          }
+
+          img {
+            opacity: 1;
+            filter: none;
+          }
+
+          + div {
+            opacity: 1;
+            max-height: 1500px;
+          }
+        }
+      }
+    }
+
+    a {
+      color: rgba(0, 0, 0, 0.7);
+    }
+
+    label {
+      position: relative;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin: 0;
+      font-size: 14px;
+      line-height: 30px;
+      padding: 16px 16px 16px 15px;
+      border-left: 2px solid transparent;
+      transition: border-left-color 0.5s linear;
+
+      img {
+        width: 20px;
+        margin-right: 18px;
+        opacity: 0.5;
+        transition: opacity 0.5s linear;
+        filter: grayscale(1);
+      }
+
+      i {
+        position: absolute;
+        color: #5b5b5b;
+        font-size: 12px;
+        opacity: 0.3;
+        right: 16px;
+        top: 24px;
+      }
+    }
+
+    div {
+      overflow: hidden;
+      max-height: 0;
+      padding: 0 22px;
+      opacity: 0;
+      border-left: 2px solid rgb(0, 112, 191);
+      transition: all 0.5s linear;
+    }
+  }
+}

app/_assets/stylesheets/dropdown.less

@@ -60,6 +60,14 @@
       }
     }
   }
+
+  &.no-right-border {
+    button {
+      border-right: none;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
 }
 
 .dropdown-menu > .active > a {

app/_assets/stylesheets/feedback-widget.less

@@ -0,0 +1,122 @@
+.feedback-widget-container {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  z-index: 10;
+
+  input {
+    display: none;
+
+    &:checked {
+      + label + .feedback-container {
+        transform: translateX(0) scale(1);
+      }
+    }
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    background: @blue;
+    font-size: 20px;
+    color: white;
+    cursor: pointer;
+  }
+
+  .feedback-container {
+    position: absolute;
+    background: white;
+    margin-bottom: 16px;
+    padding: 32px 64px;
+    bottom: 100%;
+    right: 0;
+    box-shadow: 1px 0 10px rgba(0, 0, 0, 0.2);
+    transform: translateX(500px) scale(0);
+    transition: 0.5s transform;
+
+    .feedback-options {
+      position: relative;
+      transition: opacity 0.5s;
+
+      .feedback-options-title {
+        text-align: center;
+        font-size: 18px;
+        font-weight: 600;
+        color: @navy-dark;
+        white-space: nowrap;
+      }
+
+      .feedback-options-buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 24px;
+
+        .feedback-options-button {
+          font-size: 24px;
+          cursor: pointer;
+          padding: 8px;
+          color: @blue;
+          transition: transform 0.25s;
+
+          &:not(:first-of-type) {
+            margin-left: 24px;
+          }
+
+          &:hover {
+            transform: scale(1.2);
+          }
+        }
+      }
+    }
+
+    .feedback-comment {
+      visibility: hidden;
+      position: absolute;
+      left: 16px;
+      top: 16px;
+      right: 16px;
+      bottom: 16px;
+
+      textarea {
+        width: 100%;
+        resize: none;
+      }
+
+      .feedback-comment-buttons {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        button {
+          &.button-primary {
+            background: @blue;
+          }
+
+          &:not(:first-of-type) {
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+
+    .feedback-thankyou {
+      visibility: hidden;
+      position: absolute;
+      left: 32px;
+      top: 32px;
+      right: 32px;
+      bottom: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 20px;
+      color: @blue;
+      text-align: center;
+    }
+  }
+}