Adds documentation site changes (sticky nav, copy button, back to top button) (#2043)

* Adds back to top button

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Makes sidebar sticky

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Gives more real estate to the main pane

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds copy button

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds copy button to code snippets

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds copy as curl

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Moved copy buttons to the bottom right of snippets

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Moved edit page footer to the bottom of the page

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Implemented scrolling to the active link in navbar on reload

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Adds feedback buttons

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

_includes/copy-curl.html

@@ -0,0 +1 @@
+<label hidden class="copy-curl-label">copy</label>

_includes/copy.html

@@ -0,0 +1 @@
+<label hidden class="copy-label">copy</label>

_includes/feedback.html

@@ -0,0 +1,9 @@
+<div class="div-feedback">
+    <div class="feedback-header">WAS THIS PAGE HELPFUL?</div>
+    <div>
+        <button id="yes" type="button" value="yes" class="feedback-button">&#10004; Yes</button>
+        <button id="no" type="button" value="no" class="feedback-button">&#10006; No</button>
+        <p id="feedback-response"></p>
+    </div>
+    <p class="text-small text-grey-dk-100">See a problem? Submit <a href="https://github.com/opensearch-project/documentation-website/issues">issues</a> or <a href="https://github.com/opensearch-project/documentation-website/edit/main/{{ page.path }}">edit this page</a> on <a href="https://github.com/opensearch-project/documentation-website/">GitHub</a>.</p>
+</div>

_layouts/default.html

@@ -97,9 +97,6 @@ layout: table_wrappers
           {% endfor %}
         {% endif %}
       </nav>
-      <div class="site-footer">
-        <p class="text-small text-grey-dk-100">See a problem? Submit <a href="https://github.com/opensearch-project/documentation-website/issues">issues</a> or <a href="https://github.com/opensearch-project/documentation-website/edit/main/{{ page.path }}">edit this page</a> on <a href="https://github.com/opensearch-project/documentation-website/">GitHub</a>.</p>
-      </div>
     </div>
     <div class="copy-banner">
       <div class="container">
@@ -151,6 +148,10 @@ layout: table_wrappers
             {{ content }}
           {% endif %}
           
+          <a class="top-link" href="#top">
+            &uarr;
+          </a>
+
           {% if page.has_children == true and page.has_toc != false %}
             <hr>
             <h2 class="text-delta">Table of contents</h2>
@@ -163,6 +164,9 @@ layout: table_wrappers
             </ul>
           {% endif %}
 
+          <hr>
+          {% include feedback.html %}
+
           {% capture footer_custom %}
             {%- include footer_custom.html -%}
           {% endcapture %}
@@ -226,5 +230,8 @@ layout: table_wrappers
   {% if site.search_enabled == false and site.use_custom_search == true %}
   <script src="{{ '/assets/js/search.js' | relative_url }}"></script>
   {% endif %}
+  <script src="{{ '/assets/js/copy.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/nav-scroll.js' | relative_url }}"></script>
+  <script src="{{ '/assets/js/feedback.js' | relative_url }}"></script>
 </body>
 </html>

_sass/custom/custom.scss

@@ -54,6 +54,12 @@ code {
 
 .site-nav {
   padding-top: 1rem;
+
+  display: static;
+  position: sticky;
+  top: 1rem;
+  max-height: calc(100vh - 2rem);
+  overflow-x: hidden;
 }
 
 .nav-category {
@@ -108,6 +114,14 @@ code {
   }
 }
 
+.div-feedback {
+  text-align: center;
+  margin: auto;
+  width: 50%;
+  border: 3px solid $grey-lt-300;
+  padding: 10px;
+}
+
 .external-arrow {
   position: relative;
   top: 0.125rem;
@@ -186,6 +200,100 @@ img {
   @include btn-color($white, $green-300);
 }
 
+// Back to top button
+.top-link {
+  display: block;
+  color: $body-text-color;
+  font-size: 2rem;
+  font-weight: bold;
+  border-width:2px; 
+  border-style:solid;
+  border-color: $grey-lt-300;
+  border-radius: 12px;
+  box-shadow: 1px 2px $grey-dk-000;
+  padding: 0.1rem 1rem;
+  position: fixed;
+  bottom: 30px;
+  right: 40px;
+  &:hover {
+    border-color: $body-text-color;
+  }
+}
+
+.copy-button-wrap {
+  background-color: $sidebar-color;
+  padding: 0.2rem 2rem;
+  display: flex;
+  justify-content: flex-end; 
+}
+ 
+// Copy code button
+.copy-button {
+  display: inline;
+  background-color: $base-button-color;
+  color: $body-text-color;
+  border-width: 1px; 
+  border-style: solid;
+  border-color: $grey-lt-300;
+  border-radius: 12px;
+  height: fit-content;
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 0.2rem 0.4rem;
+  margin: 0.4rem 0.2rem; 
+  opacity: 0.7;
+  &:hover {
+    border-color: $body-text-color;
+    opacity: 1;
+  }
+}
+
+.copy-button:active {
+  transform: scale(0.98);
+  box-shadow: 0 1px 2px;
+}
+
+// Copy as curl button
+.copy-curl-button {
+  @extend .copy-button;
+}
+
+.copy-curl-button:active {
+  transform: scale(0.98);
+  box-shadow: 0 1px 2px;
+}
+
+// Feedback buttons
+.feedback-button {
+  color: $body-text-color;
+  background-color: $sidebar-color;
+  font-size: 0.9rem;
+  border-width:2px; 
+  border-style:solid;
+  border-color: $grey-lt-300;
+  border-radius: 12px;
+  box-shadow: 1px 2px $grey-dk-000;
+  padding: 0.1rem 1rem;
+  margin-left: 0.4rem;
+  margin-right: 0.4rem;
+  width: 4.8rem;
+  transition-duration: 0.4s;
+  &:hover {
+    background-color: $base-button-color;
+  }
+}
+
+// Feedback question
+.feedback-header {
+    @include heading-sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    margin-top: 1rem;
+    margin-bottom: 2.5rem;
+    font-size: 14px !important;
+}
+
+
 // Tables
 th,
 td {
@@ -226,14 +334,13 @@ p.label {
 // Modifies margins in xl layout to support TOC
 .side-bar {
   @include mq(xl) {
-    width: calc((100% - #{$nav-width + $content-width + $toc-width}) / 2 + #{$nav-width});
-    min-width: $nav-width;
+    width: calc(#{$nav-width} + 1rem);
   }
 }
 
 .main {
   @include mq(xl) {
-    margin-left: calc((100% - #{$nav-width + $content-width + $toc-width}) / 2 + #{$nav-width});
+    max-width: calc(100% - (#{$nav-width + $toc-width} + 4rem));
   }
 }
 

assets/js/copy.js

@@ -0,0 +1,75 @@
+const copyLabels = document.querySelectorAll('.copy-label');
+const copyCurlLabels = document.querySelectorAll('.copy-curl-label');
+
+addButtons(copyLabels, false);
+addButtons(copyCurlLabels, true);
+
+function addButtons(labels, curl) {
+    labels.forEach((copyLabel) => {
+        const snippet = copyLabel.parentNode.previousElementSibling;
+        const text = snippet.innerText.trim();
+
+        var buttonWrap = document.createElement('div');
+        buttonWrap.className = 'copy-button-wrap';
+        buttonWrap.appendChild(createButton(text, 'Copy', 'Copy snippet to clipboard', false));
+        if (curl) {           
+            buttonWrap.appendChild(createButton(text, 'Copy as cURL', 'Copy snippet as cURL', true));
+        }
+        
+        snippet.style.marginBottom = 0;
+        snippet.style.paddingBottom = 0;
+        snippet.parentNode.replaceChild(buttonWrap, snippet.nextElementSibling);
+    });
+}
+
+function createButton(textToCopy, buttonText, buttonAriaLabel, curl) {
+    var copyButton = document.createElement('button');
+    copyButton.className = 'copy-button';
+    copyButton.type = 'button';
+    copyButton.innerText = buttonText;
+    copyButton.ariaLabel = buttonAriaLabel;
+
+    if (curl) {
+        copyButton.addEventListener('click', function onClick() {
+            // Copy snippet as curl
+            window.navigator.clipboard.writeText(addCurl(textToCopy));
+        });
+    }
+    else {
+        copyButton.addEventListener('click', function onClick() {
+            // Copy snippet to clipboard
+            window.navigator.clipboard.writeText(textToCopy);
+        });
+    }
+
+    return copyButton;
+}
+
+function addCurl(textToCopy) {
+    const firstSpaceIndex = textToCopy.indexOf(" ");
+    const httpMethod = textToCopy.substring(0, firstSpaceIndex);
+
+    const firstCurlyIndex = textToCopy.indexOf("{");
+    var body;
+    var path;
+    if (firstCurlyIndex == -1) {
+        body = "";
+        path = textToCopy.substring(firstSpaceIndex + 1);
+    }
+    else {
+        body = textToCopy.substring(firstCurlyIndex); 
+        path = textToCopy.substring(firstSpaceIndex + 1, firstCurlyIndex).trim();
+    }
+
+    var result = "curl -X" + httpMethod + " \"http://localhost:9200";
+    if (!(path.startsWith("/"))) {
+        result += "/"; 
+    }
+    result += path + "\"";
+
+    if (body.length > 0) {
+        result += " -H 'Content-Type: application/json' -d'\n" + body + "'";
+    }
+
+    return result;
+}

assets/js/feedback.js

@@ -0,0 +1,13 @@
+const feedbackButtons = document.querySelectorAll('.feedback-button');
+
+feedbackButtons.forEach((button) => {
+    button.addEventListener('click', function onClick(event) {
+        var url = window.location.href;
+        console.log(url);
+        console.log(button.value);
+        gtag('event', 'feedback', { 
+            'event_category': url, 
+            'event_action': button.value
+        });
+    });
+});

assets/js/nav-scroll.js

@@ -0,0 +1,12 @@
+let siteNav = document.querySelector('.site-nav');
+
+document.addEventListener('DOMContentLoaded', () => {
+    const scroll = localStorage.getItem('scroll');
+    if (scroll !== null) {
+        siteNav.scrollTop = parseInt(scroll);
+    }
+});
+
+window.addEventListener('beforeunload', () => {
+  localStorage.setItem('scroll', siteNav.scrollTop);
+});