diff --git a/_includes/copy-curl.html b/_includes/copy-curl.html new file mode 100644 index 00000000..529dd00d --- /dev/null +++ b/_includes/copy-curl.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/copy.html b/_includes/copy.html new file mode 100644 index 00000000..1e08f5f3 --- /dev/null +++ b/_includes/copy.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/_includes/feedback.html b/_includes/feedback.html new file mode 100644 index 00000000..c8c262a2 --- /dev/null +++ b/_includes/feedback.html @@ -0,0 +1,9 @@ +
+
WAS THIS PAGE HELPFUL?
+
+ + +

+
+

See a problem? Submit issues or edit this page on GitHub.

+
\ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 93728666..2ef4c43a 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -97,9 +97,6 @@ layout: table_wrappers {% endfor %} {% endif %} -
-

See a problem? Submit issues or edit this page on GitHub.

-
@@ -150,6 +147,10 @@ layout: table_wrappers {% else %} {{ content }} {% endif %} + + + ↑ + {% if page.has_children == true and page.has_toc != false %}
@@ -163,6 +164,9 @@ layout: table_wrappers {% endif %} +
+ {% 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 %} {% endif %} + + + diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss index f807f5bd..826ffc35 100755 --- a/_sass/custom/custom.scss +++ b/_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)); } } diff --git a/assets/js/copy.js b/assets/js/copy.js new file mode 100644 index 00000000..90d47c90 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/assets/js/feedback.js b/assets/js/feedback.js new file mode 100644 index 00000000..5b7ffc61 --- /dev/null +++ b/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 + }); + }); +}); diff --git a/assets/js/nav-scroll.js b/assets/js/nav-scroll.js new file mode 100644 index 00000000..c45b2159 --- /dev/null +++ b/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); +});