Improve styling of documentation site and use Algolia search (#7753)

* Improve styling and add Netdata logo

* More CSS fixes, add Algolia search

* Remove -v from cp to make output less messy

* Cleanup and making more CSS improvements

* Tweaks and fixed badges

* Links and sidebar widths

* Better search result styling

* Additional CSS tweaks

* Responsiveness improvements

* Converting back to flexbox, a few other tweaks

* Finish comment

8 files changed, 318 insertions, 52 deletions

diff --git a/docs/generator/buildhtml.sh b/docs/generator/buildhtml.sh
index e6fa662c36..f09c331a85 100755
--- a/docs/generator/buildhtml.sh
+++ b/docs/generator/buildhtml.sh
@@ -23,7 +23,7 @@ git clone https://github.com/netdata/go.d.plugin.git ${GO_D_DIR}
 echo "Copying files"
 rm -rf ${SRC_DIR}
 mkdir ${SRC_DIR}
-find . -type d \( -path ./${GENERATOR_DIR} -o -path ./node_modules \) -prune -o -name "*.md" -exec cp -prv --parents '{}' ./${SRC_DIR}/ ';'
+find . -type d \( -path ./${GENERATOR_DIR} -o -path ./node_modules \) -prune -o -name "*.md" -exec cp -pr --parents '{}' ./${SRC_DIR}/ ';'
 
 # Copy Netdata html resources
 cp -a ./${GENERATOR_DIR}/custom ./${SRC_DIR}/
diff --git a/docs/generator/buildyaml.sh b/docs/generator/buildyaml.sh
index 85703f7989..4313b49392 100755
--- a/docs/generator/buildyaml.sh
+++ b/docs/generator/buildyaml.sh
@@ -73,8 +73,10 @@ theme:
       accent: "light green"
     custom_dir: custom/themes/material
     favicon: custom/img/favicon.ico
+    logo: custom/img/netdata_logo.svg
     language: '${language}'
 extra_css:
+  - "https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
   - "https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css"
   - "custom/css/netdata.css"
 extra_javascript:
diff --git a/docs/generator/custom/css/netdata.css b/docs/generator/custom/css/netdata.css
index e4d292fd77..18495df8be 100644
--- a/docs/generator/custom/css/netdata.css
+++ b/docs/generator/custom/css/netdata.css
@@ -1,32 +1,267 @@
-/* .md-nav__link {
-    white-space: nowrap;
-} */
+/* Fonts */
+@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,400i,500,700,700i&display=swap');
+
+body, input {
+    font-family: "IBM Plex Sans","Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
+}
 
 .md-typeset {
-    font-size: .75rem
+    font-size: .85rem;
+    line-height: 1.5;
+}
+
+/* Main structure */
+.md-container {
+    flex-flow: row wrap;
+}
+
+.md-grid {
+    max-width: 80rem;
+    display: flex;
+    position: relative;
+    overflow: visible;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.md-content {
+    margin-right: 0;
+    margin-bottom: 6rem;
+    margin-left: 0;
+    max-width: 45rem;
+    overflow: hidden;
+}
+
+.md-sidebar[data-md-state="lock"] {
+    position: sticky;
+}
+
+.md-sidebar {
+    position: sticky;
+    flex: 0 0 320px;
+}
+
+.md-sidebar--secondary {
+    right: 0;
+    margin-left: 0;
+    transform: none;
+    order: 3;
+}
+
+.md-content__inner {
+    margin-right: 2.5rem;
+    margin-left: 2.5rem;
+}
+
+@media screen and (max-width: 76.1875em) {
+    .md-sidebar--primary {
+        position: fixed;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .md-content__inner {
+        margin-right: 1rem;
+        margin-left: 1rem;
+    }
+}
+
+/*
+   Navigation
+*/
+
+.md-header-nav {
+    padding: 0 0.6rem;
+}
+
+@media only screen and (max-width: 76.25em) {
+    .md-header-nav {
+        padding: 0 2.5rem;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .md-header-nav {
+        padding: 0.3rem 1rem;
+    }
+
+    .md-header-nav__title {
+        display: none;
+    }
 }
 
-/* Underline text */
+[data-md-color-primary="blue-grey"] .md-header {
+    background: #35414A;
+}
+
+html [data-md-color-primary="blue-grey"] .md-nav--primary .md-nav__title--site {
+    background-color: #35414A;
+}
+
+[data-md-color-primary="blue-grey"] .md-nav__source {
+    background-color: #546e7a
+}
+
+.md-flex__cell {
+    vertical-align: middle;
+}
+
+.md-header-nav__button {
+    margin: 0;
+    padding: 0;
+    top: 2px;
+}
+
+/* Change the language selector dropdown to match new color. */
+.md-header-nav select#sel {
+    background-color: rgba(0,0,0,.26) !important;
+    padding: 3px;
+    margin-left: 5px;
+    margin-right: 20px;
+}
+
+@media only screen and (max-width: 500px) {
+    img[src='/custom/img/geography-16.png'] {
+        display: none;
+    }
+
+    .md-header-nav select#sel {
+        margin: 0;
+    }
+}
+
+/* Algolia search */
+#search_algolia {
+    font-size: 0.7rem;
+    padding: 0.4rem;
+    border-radius: 3px;
+    min-width: 300px;
+}
+
+@media only screen and (max-width: 76.25em) {
+    #search_algolia {
+        min-width: 100px;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    #search_algolia {
+        width: 150px;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    #search_algolia {
+        width: 100px;
+    }
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
+    font-size: 0.9rem !important;
+}
 
-.md-typeset a:not(.nav-button):not(.md-icon):not(.headerlink) {
-    border-bottom: 1px solid #272b30;
+.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
+    font-size: 0.7rem;
 }
 
-/*  Custom styling for the new documentation homepage.
-    In particular, the three buttons for install/getting started/configuration. */
+.algolia-autocomplete .algolia-docsearch-suggestion--title {
+    font-size: 0.8rem;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--text {
+    font-size: 0.7rem;
+    line-height: 1.5;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
+.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+   box-shadow: inset 0 -1px 0 0 #00CB51;
+}
+
+.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
+    color: #00AB44;
+    background: #F1F2F3;
+}
+
+@media only screen and (max-width: 768px) {
+    .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
+        font-size: 0.7rem;
+        font-weight: 400;
+    }
+
+    .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+        right: -150px !important;
+    }
+
+    .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu::before {
+        right: 248px;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .algolia-autocomplete .ds-dropdown-menu {
+        min-width: 400px;
+    }
+}
+
+/*
+   Left-hand navigation
+*/
+
+.md-nav {
+    font-size: 0.8rem;
+}
+
+/* Bold the first item on the docs sidebar: Netdata Documentation. */
+.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
+    font-weight: 700;
+}
+
+/* Hide the label at the top of the navigation menu. Does nothing. 
+   Well, it does do something on mobile, and this media query makes
+   sure it's hidden only on screens wide enough to not use the mobile sidebar. */
+@media only screen and (min-width:76.25em) {
+    .md-nav--primary .md-nav__title {
+        display: none;
+    }
+}
+
+/* Differentiate between main TOC items and sub-items. */
+
+.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
+    font-weight: 500;
+}
+
+[data-md-color-primary="blue-grey"] .md-nav__link--active, [data-md-color-primary="blue-grey"] .md-nav__link:active {
+    color: #00AB44;
+}
+
+/*
+   Documentation homepage
+   In particular, the three buttons for install/getting started/configuration.
+*/
 .homepage-nav {
-    display: grid;
-    grid-template-columns: repeat(4,[col-start] 1fr);
-    grid-gap: 2rem;
-    margin-top: 1.4rem;
-    margin-bottom: 2rem;
+    display: flex;
+    flex-flow: row wrap;
+    margin: 1.4rem -1rem 2rem -1rem;
 }
 
 .nav-page {
-    grid-column: span 2;
-    border-radius: 3px;
-    border: 1px solid #EFEFEF;
-    box-shadow: 0 8px 48px 4px rgba(86,91,115,0.15);
+    display: flex;
+    flex: 1 1 calc(50% - 2rem);
+    flex-direction: column;
+    margin: 1rem;
+    border-radius: 2px;
+}
+
+.md-typeset .nav-page:hover {
+    border: 0;
+}
+
+@media only screen and (max-width:76.25em) {
+    .nav-page {
+        flex: 1 1 100%;
+    }
 }
 
 .button-header {
@@ -34,17 +269,18 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    background: linear-gradient( to right, #306BAC, #56B2FF 140%);
+    border: 2px solid #00AB44;
     border-radius: 3px 3px 0 0;
 }
 
 .button-header h3 {
-    color: white;
+    color: #35414A;
+    font-weight: 700;
     margin: 0;
 }
 
 .button-header svg {
-    color: white;
+    color: #35414A;
     position: relative;
     transition-property: left;
     transition-timing-function: ease-in-out;
@@ -56,8 +292,13 @@
 }
 
 .button-text {
+    flex: 1 1 auto;
     color: #35414A;
     padding: 1rem 1.4rem;
+    border-right: 1px solid #AEB3B7;
+    border-bottom: 1px solid #AEB3B7;
+    border-left: 1px solid #AEB3B7;
+    border-radius: 0 0 3px 3px;
 }
 
 .button-text p {
@@ -74,26 +315,17 @@
     text-align: center;
 }
 
-/* Hide the label at the top of the navigation menu. Does nothing. 
-   Well, it does do something on mobile, and this media query makes
-   sure it's hidden only on screens wide enough to not use the mobile sidebar. */
-@media only screen and (min-width:76.25em) {
-    .md-nav--primary .md-nav__title {
-        display: none;
-    }
-}
-
-/* Change the language selector dropdown to match new color. */
-.md-header-nav select#sel {
-    background-color: rgba(0,0,0,.26) !important;
-    padding: 3px;
-    margin-left: 5px;
-    margin-right: 20px;
-}
+/*
+   Markdown/body content
+*/
 
-/* Add some whitespace to the bottom of each doc. */
-.md-content {
-    margin-bottom: 6rem;
+/* Make header a bit bolder with new IBM Plex Sans font. */
+.md-typeset h1,
+.md-typeset h2,
+.md-typeset h3,
+.md-typeset h4,
+.md-typeset h5 {
+    font-weight: 500;
 }
 
 /* Make sure inline code in tables don't break. */
@@ -123,7 +355,33 @@
     padding: 0;
 }
 
-/* Bold the first item on the docs sidebar: Netdata Documentation */
-.md-nav--primary > .md-nav__list > .md-nav__item:first-of-type {
-    font-weight: 700;
+/* Underline links, but not badges/icons. */
+.md-typeset a:not(.nav-button):not(.md-icon):not(.nav-page):not(.headerlink):not(.md-footer-social__link) {
+    color: #00AB44;
+}
+
+.md-typeset a:not(.nav-button):not(.md-icon):not(.nav-page):not(.headerlink):not(.md-footer-social__link):hover {
+    color: #35414A;
+    border-bottom: 1px solid #35414A;
+}
+
+/* Remove underlines on specific badges. */
+.md-typeset a[href='https://travis-ci.com/netdata/netdata'],
+.md-typeset a[href='https://bestpractices.coreinfrastructure.org/projects/2231'],
+.md-typeset a[href='https://www.gnu.org/licenses/gpl-3.0'],
+.md-typeset a[href='https://codeclimate.com/github/netdata/netdata'],
+.md-typeset a[href='https://www.codacy.com/app/netdata/netdata?utm_source=github.com&utm_medium=referral&utm_content=netdata/netdata&utm_campaign=Badge_Grade'],
+.md-typeset a[href='https://lgtm.com/projects/g/netdata/netdata/context:cpp'],
+.md-typeset a[href='https://lgtm.com/projects/g/netdata/netdata/context:javascript'],
+.md-typeset a[href='https://lgtm.com/projects/g/netdata/netdata/context:python'],
+.md-typeset a[href='https://hub.docker.com/r/netdata/netdata/'],
+.md-typeset a[href='https://hub.docker.com/r/firehol/netdata/'],
+.md-typeset a[href='https://hub.docker.com/r/titpetric/netdata/'],
+.md-typeset a[href='https://registry.my-netdata.io/#menu_netdata_submenu_registry'] {
+    border-bottom: 0 !important;
+}
+
+/* Fix the font size of admonition and details sections. */
+.md-typeset .admonition, .md-typeset details {
+    font-size: 0.75rem;
 }
\ No newline at end of file
diff --git a/docs/generator/custom/img/favicon.ico b/docs/generator/custom/img/favicon.ico
index 703716cd0e..35db50cda6 100644..100755
--- a/docs/generator/custom/img/favicon.ico
+++ b/docs/generator/custom/img/favicon.ico
diff --git a/docs/generator/custom/img/netdata_logo.svg b/docs/generator/custom/img/netdata_logo.svg
new file mode 100755
index 0000000000..30b9f2eed4
--- /dev/null
+++ b/docs/generator/custom/img/netdata_logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 114 114"><defs><style>.cls-1{fill:#fff;}</style></defs><title>logo_white_fill</title><g id="mask-2"><path class="cls-1" d="M70,102H47.24L.61,12H66.79a46.65,46.65,0,0,1,46.6,46.6A43.45,43.45,0,0,1,70,102Z"/></g></svg>
\ No newline at end of file
diff --git a/docs/generator/custom/img/netdata_text.svg b/docs/generator/custom/img/netdata_text.svg
new file mode 100755
index 0000000000..727cff15cd
--- /dev/null
+++ b/docs/generator/custom/img/netdata_text.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 398 398"><defs><style>.cls-1{fill:#fff;}</style></defs><title>logo_white_text_white</title><g id="mask-2"><path class="cls-1" d="M70.27,244H47.51L.88,154H67.06a46.65,46.65,0,0,1,46.6,46.6A43.44,43.44,0,0,1,70.27,244Z"/></g><g id="mask-2-2" data-name="mask-2"><path class="cls-1" d="M278,214h-8l-.06-30h7a15.53,15.53,0,0,1,15.52,15.52A14.51,14.51,0,0,1,278,214Zm-6.32-1.66H278a12.85,12.85,0,0,0,12.84-12.84A13.89,13.89,0,0,0,277,185.58H271.6Z"/></g><path class="cls-1" d="M157.22,183.91h2.33l19,27.67h.08V183.91h1.86v30.17h-2.19l-19.18-27.89h-.09v27.89h-1.86Z"/><path class="cls-1" d="M198.54,183.91h20.28v1.61H200.4V197.6h17.32v1.6H200.4v13.27H219v1.61H198.54Z"/><path class="cls-1" d="M231.62,185.52v-1.61h23.11v1.61H244.08v28.56h-1.86V185.52Z"/><path class="cls-1" d="M317.44,183.91h2l11.91,30.17h-2l-3.81-9.68H311.15l-3.85,9.68h-2ZM325,202.8l-6.46-17.07h-.08l-6.72,17.07Z"/><path class="cls-1" d="M339.66,185.52v-1.61h23.11v1.61H352.13v28.56h-1.86V185.52Z"/><path class="cls-1" d="M383.18,183.91h2l11.91,30.17h-2l-3.8-9.68H376.88L373,214.08h-2Zm7.56,18.89-6.46-17.07h-.09l-6.72,17.07Z"/></svg>
\ No newline at end of file
diff --git a/docs/generator/custom/themes/material/partials/footer.html b/docs/generator/custom/themes/material/partials/footer.html
index 0631a30426..c2eb070ba6 100644
--- a/docs/generator/custom/themes/material/partials/footer.html
+++ b/docs/generator/custom/themes/material/partials/footer.html
@@ -65,3 +65,12 @@
   }
 
 </script>
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script type="text/javascript"> docsearch({
+apiKey: '3af6387793ce3d86f1b9395ad6e4bc16',
+indexName: 'netdata',
+inputSelector: '#search_algolia',
+debug: true // Set debug to true if you want to inspect the dropdown
+});
+</script>
\ No newline at end of file
diff --git a/docs/generator/custom/themes/material/partials/header.html b/docs/generator/custom/themes/material/partials/header.html
index 85f874905a..ba902105ed 100644
--- a/docs/generator/custom/themes/material/partials/header.html
+++ b/docs/generator/custom/themes/material/partials/header.html
@@ -6,7 +6,7 @@
           {% if config.theme.logo.icon %}
             <i class="md-icon">{{ config.theme.logo.icon }}</i>
           {% else %}
-            <img src="{{ config.theme.logo | url }}" width="24" height="24">
+            <img src="{{ config.theme.logo | url }}" width="32" height="32">
           {% endif %}
         </a>
       </div>
@@ -30,12 +30,7 @@
         </div>
       </div>
       <div class="md-flex__cell md-flex__cell--shrink">
-        {% block search_box %}
-          {% if "search" in config["plugins"] %}
-            <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
-            {% include "partials/search.html" %}
-          {% endif %}
-        {% endblock %}
+        <input id="search_algolia" type="text" name="search" placeholder="Search Netdata's docs...">
       </div>
 
       <!-- netdata -->
@@ -105,4 +100,4 @@
       {% endif %}
     </div>
   </nav>
-</header>
+</header>
\ No newline at end of file