From 5efcffbff1bba9bb346c12c48abc9cbc09d438c9 Mon Sep 17 00:00:00 2001 From: Rushan Date: Fri, 16 Sep 2022 22:46:52 +0400 Subject: [PATCH] Implement Algolia search (#553) --- source/_static/img/icons/docs.svg | 1 - source/_static/img/icons/search-dark.svg | 1 - source/_static/img/icons/search.svg | 1 - source/_static/js/algolia.js | 9 - source/_static/js/main.js | 117 ++----- source/_static/scss/includes/_header.scss | 26 -- source/_static/scss/includes/_search.scss | 345 +++++++++++-------- source/_static/scss/includes/_theme.scss | 17 +- source/_static/scss/includes/_toc.scss | 1 + source/_static/scss/includes/_variables.scss | 3 - source/_templates/header.html | 5 +- source/_templates/layout.html | 5 + source/_templates/searchbox.html | 23 +- source/default-conf.py | 5 +- 14 files changed, 249 insertions(+), 310 deletions(-) delete mode 100644 source/_static/img/icons/docs.svg delete mode 100644 source/_static/img/icons/search-dark.svg delete mode 100644 source/_static/img/icons/search.svg delete mode 100644 source/_static/js/algolia.js diff --git a/source/_static/img/icons/docs.svg b/source/_static/img/icons/docs.svg deleted file mode 100644 index 4eaa74c3..00000000 --- a/source/_static/img/icons/docs.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/img/icons/search-dark.svg b/source/_static/img/icons/search-dark.svg deleted file mode 100644 index e3f653e8..00000000 --- a/source/_static/img/icons/search-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/img/icons/search.svg b/source/_static/img/icons/search.svg deleted file mode 100644 index d05bc384..00000000 --- a/source/_static/img/icons/search.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/js/algolia.js b/source/_static/js/algolia.js deleted file mode 100644 index b7270c6d..00000000 --- a/source/_static/js/algolia.js +++ /dev/null @@ -1,9 +0,0 @@ -docsearch({ - apiKey: '0ba0d26da4d1483f96c03fe508304a64', - indexName: 'minio', - inputSelector: '#algolia input[type=text], - debug: false, - algoliaOptions: { - hitsPerPage: 8, - } -}); diff --git a/source/_static/js/main.js b/source/_static/js/main.js index 6f39ba74..62c7ed8e 100644 --- a/source/_static/js/main.js +++ b/source/_static/js/main.js @@ -1,14 +1,6 @@ window.addEventListener("DOMContentLoaded", (event) => { const tocMenuEl = document.querySelector("#table-of-contents > ul.simple"); var readModeLs = localStorage.getItem("read-mode"); - - // -------------------------------------------------- - // Detect macOS - // -------------------------------------------------- - function isMac() { - return navigator.platform.toUpperCase().indexOf('MAC') >= 0; - } - // -------------------------------------------------- // Detect parent iframe. @@ -102,24 +94,6 @@ window.addEventListener("DOMContentLoaded", (event) => { })(); - // -------------------------------------------------- - // Get meta key based on the OS - // -------------------------------------------------- - (function () { - const metaKeyEl = document.getElementById("search-meta-key"); - - if(metaKeyEl) { - if(isMac()) { - metaKeyEl.innerHTML = "⌘"; - } - else { - metaKeyEl.classList.add("ctrl"); - metaKeyEl.innerHTML = "Ctrl"; - } - } - })(); - - // -------------------------------------------------- // TOC // -------------------------------------------------- @@ -135,7 +109,6 @@ window.addEventListener("DOMContentLoaded", (event) => { else { tocAsideEL.style.display = "none"; } - // Treat the TOC as a dropdown in mobile const tocToggleEl = document.querySelector(".topic-title"); @@ -187,45 +160,6 @@ window.addEventListener("DOMContentLoaded", (event) => { }); })(); - - // -------------------------------------------------- - // Search - // -------------------------------------------------- - (function () { - const searchToggleEl = document.querySelectorAll(".search-toggle"); - const searchParentEl = document.querySelector(".header__hero"); - const searchInputEl = document.querySelector(".search__text"); - const searchCloseEl = document.getElementById("search-close"); - const searchDocEL = document.getElementById("search-documentation") - - if(searchInputEl) { - // Open - searchToggleEl.forEach((item) => { - item.addEventListener("click", (event) => { - // Hide opened toc menu on mobile - if(tocMenuEl) { - tocMenuEl.closest(".content__toc").classList.remove("active"); - } - - // Toggle search - searchParentEl.classList.add("active"); - searchInputEl.focus(); - }); - }); - - // Close - searchCloseEl.addEventListener("click", (event) => { - searchParentEl.classList.remove("active"); - searchInputEl.value = ""; - }); - } - - // Add ID to search result page - if(searchDocEL) { - document.documentElement.classList.add("search-doc"); - } - })(); - // -------------------------------------------------- // Asides: Sidebar and Nav @@ -291,26 +225,6 @@ window.addEventListener("DOMContentLoaded", (event) => { }); }); })(); - - - // -------------------------------------------------- - // Focus search input on key combination - // -------------------------------------------------- - (function () { - const root = document.documentElement; - - document.addEventListener("keydown", (event) => { - if(!root.classList.contains("read-mode")) { - const searchInputEl = document.querySelector(".search__text"); - var metaKey = isMac() ? event.metaKey : event.ctrlKey - - if (metaKey && event.key === "/") { - searchInputEl.focus(); - window.scrollTo(0, 0); - } - } - }); - })(); // -------------------------------------------------- @@ -369,7 +283,7 @@ window.addEventListener("DOMContentLoaded", (event) => { } })(); - + // -------------------------------------------------- // Headerlink wrappers // -------------------------------------------------- @@ -382,4 +296,33 @@ window.addEventListener("DOMContentLoaded", (event) => { }); } })(); + + // -------------------------------------------------- + // Search + // -------------------------------------------------- + (function () { + const docSearchEl = document.getElementById("docsearch"); + + if(docSearchEl) { + // Init Docsearch + docsearch({ + container: '#docsearch', + appId: 'E1CSOK3UC2', + indexName: 'minio', + apiKey: '6bc246d81fd3b79f51cf88f0b2481bac', + placeholder: 'Search Documentation', + }); + + // Trigger Docsearch modal on custom button clicks + const searchToggleEls = document.querySelectorAll(".search-toggle"); + const docSearchBtn = document.querySelector(".DocSearch-Button"); + + searchToggleEls.forEach(item => { + item.addEventListener("click", (event) => { + event.preventDefault(); + docSearchBtn.click(); + }); + }); + } + })(); }); \ No newline at end of file diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss index eca1918b..d00aaf7c 100644 --- a/source/_static/scss/includes/_header.scss +++ b/source/_static/scss/includes/_header.scss @@ -124,32 +124,6 @@ width: 5rem; } } - - .header__hero { - position: absolute; - right: 0; - width: 100%; - height: $search-height; - padding: 0 var(--content-padding); - top: 3.25rem; - - & > h2 { - display: none; - } - - @include breakpoint-min(breakpoints(xl)) { - max-width: 31.5rem; - - } - - @include breakpoint-max(breakpoints(lg)) { - top: 7rem - } - - &:not(.active) { - display: none; - } - } } } diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss index 37e246bc..ef8471e8 100644 --- a/source/_static/scss/includes/_search.scss +++ b/source/_static/scss/includes/_search.scss @@ -1,178 +1,223 @@ +@import 'https://cdn.jsdelivr.net/npm/@docsearch/css@3'; + :root { - // Hide redundant elements from search result page - &.search-doc { - .search-toggle, - .content__toc, - h1#search-documentation, - #search-progress, - #search-documentation ~ p { - display: none; - } - } - - &.read-mode { - .search__inner { - border-color: var(--search-border-color); - - &:focus-within { - border-color: var(--search-focus-border-color); - } - } - - .search__text { - @include breakpoint-min(breakpoints(lg)) { - height: 2.25rem; - } - } - } - - &:not(.read-mode) { - .search__inner { - @include breakpoint-min(breakpoints(xl)) { - background-image: var(--search-icon); - padding-left: 2.25rem; - } - - &:focus-within { - box-shadow: 0 0 0 0.3rem var(--search-focus-shadow); - } - } - } + --docsearch-muted-color: var(--text-muted-color); + --docsearch-key-gradient: none; + --docsearch-key-shadow: none; + --docsearch-text-color: var(--text-color); + --docsearch-searchbox-focus-background: var(--ds-search-bg); + --docsearch-modal-shadow: none; + --docsearch-highlight-color: var(--link-color); + --docsearch-hit-shadow: none; + --docsearch-hit-background: transparent; + --docsearch-hit-height: 3rem; + --docsearch-footer-shadow: none; + --docsearch-footer-background: transparent; + --docsearch-hit-color: var(--text-color); + --docsearch-logo-color: var(--text-muted-color); } -// Search UI -.search__inner { - position: relative; - display: inline-flex; - width: 100%; - background-color: var(--search-bg); +#docsearch { + display: flex; + justify-content: center; +} + +.DocSearch-Button { + --docsearch-searchbox-shadow: 0 0 0 0.3rem var(--ds-search-focus-shadow); + --docsearch-searchbox-background: var(--ds-search-bg); + border-radius: $border-radius; - border: 1px solid transparent; - align-items: center; - padding: 0 0.3rem; - background-position: top 0.825rem left 1rem; - background-repeat: no-repeat; - transition: box-shadow 200ms, border-color 200ms; + width: 100%; + margin: 1rem 0 0 0; + height: 2.75rem; + padding: 0 1rem; + font-family: inherit; + transition: box-shadow 200ms ease-in-out; + + .DocSearch-Button-Placeholder { + font-size: 0; + color: var(--ds-search-placeholder-color); + + &:before { + content: "Search Documentation"; + font-size: $font-size-sm; + font-weight: normal; + } + } + + .DocSearch-Button-Key { + font-family: inherit; + width: auto; + margin: 0; + height: auto; + line-height: 1; + + & > svg { + margin-right: 2px; + } + } + + .DocSearch-Button-Keys { + min-width: 0; + height: 0; + font-size: 0.7rem; + display: flex; + opacity: 0.75; + padding-top: 1px; + } @include breakpoint-min(breakpoints(xl)) { max-width: 31.5rem; } +} - kbd { - position: absolute; - pointer-events: none; - top: 0; - right: 0; - display: flex; - border: 1px solid var(--theme-light-hover-bg); - border-radius: $border-radius; - padding: 0.325rem 0.3rem 0.175rem; - line-height: 100%; - top: 0.525rem; - right: 0.525rem; - transition: opacity 300ms; +.DocSearch-Search-Icon { + width: 0.9rem; + margin-right: 0.25rem; +} - & > span { - &:not(:first-child) { - font-size: 0.8rem; - } +.DocSearch-Modal { + overflow: hidden; + backdrop-filter: blur(1rem); +} - &:not(:last-of-type) { - display: inline-block; - padding: 0 0.1rem; - } +.DocSearch-Form { + --docsearch-searchbox-shadow: none; + --docsearch-highlight-color: var(--text-color); - &.ctrl { - font-size: 0.6rem; - text-transform: uppercase; - } - } + padding: 0 1.25rem; + border-radius: 0; +} + +.DocSearch-SearchBar { + --docsearch-spacing: 0; + + background-color: var(--ds-search-bg); +} + +.DocSearch-Hit-title { + font-size: $font-size-sm; + text-overflow: ellipsis; + overflow: hidden; + margin-top: 1px; +} + +.DocSearch-Hit-action-button, +.DocSearch-Hit-icon, +.DocSearch-Reset, +.DocSearch-MagnifierLabel, +.DocSearch-Hit-action { + & > svg { + width: 0.9rem; } } -.search__text { - appearance: none; - border: 0; - height: $search-height; - background-color: transparent; - color: var(--search-color); - font-size: 0.85rem; - width: 100%; - padding: 0 0.5rem 0 0.25rem; - - &::placeholder { - color: var(--search-placeholder-color); +.DocSearch-Hit-action, +.DocSearch-Hit-icon { + svg { + color: var(--text-muted-color); } +} - @include breakpoint-between(breakpoints(lg), breakpoints(xl)) { - height: 2rem; - } +.DocSearch-Hit-icon { + width: 2.1rem; + height: 2.1rem; + border-radius: $border-radius; + display: grid; + place-content: center; + background-color: var(--ds-search-bg); + margin-right: 0.4rem; +} +.DocSearch-Hit-action-button { + opacity: 0.65; + transition: opacity 200ms; + + &:hover, &:focus { - & ~ kbd { - opacity: 0; + path { + fill: transparent } } + + &:hover { + background-color: transparent; + opacity: 1; + } } -// Search form in results page -#search-documentation { - & ~ form { - & > input { - &[type="submit"] { - display: none; - } - - &[type="text"] { - appearance: none; - height: $search-height; - color: var(--search-color); - font-size: 0.85rem; - width: 100%; - padding: 0 1rem 0.15rem 2.5rem; - border: 1px solid var(--search-border-color); - border-radius: $border-radius; - background: transparent var(--search-icon) no-repeat center left 1rem; - - &:focus { - border-color: var(--search-focus-border-color); - } - } - } - } +.DocSearch-Input { + font-size: $font-size-md; + padding-left: 0.5rem; } -// Search results -#search-results { - & > h2 { - margin-bottom: -0.75rem; - font-size: 1.25rem; - } -} +.DocSearch-Hits { + mark { + --docsearch-highlight-color: var(--text-color); -.search-summary { - color: var(--text-muted-color); -} - -ul.search { - list-style: none; - margin: 0; - - & > li { - background-image: none; - padding: 0.5rem 0; - - & > a { - display: block; - } - - & > span { - font-size: $font-size-sm; - color: var(--text-muted-color); - } - - & + li { - border-top: 1px solid var(--theme-light-bg); - } + text-decoration: underline; + text-underline-offset: 0.15rem; + text-decoration-thickness: 1px; } + + &:last-of-type { + margin-bottom: 1rem; + } +} + +.DocSearch-Hit-content-wrapper { + font-weight: $font-weight-normal; +} + +.DocSearch-Hit { + --docsearch-highlight-color: var(--ds-highlight-color); + --docsearch-hit-active-color: var(--text-color); + + & > a { + border-radius: $border-radius; + padding-left: 0.5rem; + } +} + +.DocSearch-Hit-source { + --docsearch-highlight-color: var(--text-muted-color); + --docsearch-modal-background: transaprent; + + font-weight: $font-weight-normal; + margin: 0 0.25rem; + font-size: $font-size-sm; +} + +.DocSearch-Hit-path { + --docsearch-hit-active-color: var(--text-muted-color); + + font-size: 0.65rem; +} + +.DocSearch-Hit-content-wrapper { + margin: 0.25rem; +} + +.DocSearch-HitsFooter { + margin-bottom: 0; + padding-bottom: 0; +} + +.DocSearch-Logo { + transform: scale(0.85); + transform-origin: right; + margin-right: 0.35rem; + opacity: 0.75; +} + +.DocSearch-Cancel { + --docsearch-highlight-color: var(--text-muted-color); + + font-size: $font-size-sm; + padding-right: 1rem; +} + +.DocSearch-NoResults-Prefill-List, +.DocSearch-Commands { + display: none; } \ No newline at end of file diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index 88bce391..1b1e878f 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/source/_static/scss/includes/_theme.scss @@ -41,15 +41,6 @@ $theme-properties: ( --content-nav-sub-active-color: $theme-red $dark-0, --content-nav-icon-filter: none (invert(100%) sepia(12%) saturate(777%) hue-rotate(181deg) brightness(100%) contrast(85%)), - // Search - --search-bg: $white $dark-100, - --search-border-color: $light-300 $dark-300, - --search-focus-border-color: $light-400 $dark-400, - --search-placeholder-color: #7e7e7e #697995, - --search-color: $black $text-dark-color, - --search-icon: url(../img/icons/search.svg) url(../img/icons/search-dark.svg), - --search-focus-shadow: rgba($white, 0.15) #1b232f, - // Sidebar --sidebar-bg: $light-100 $dark-100, --sidebar-hide-bg: $light-500 $dark-400, @@ -119,6 +110,14 @@ $theme-properties: ( --alert-warning-color: #b2404b #bb4a55, --alert-warning-code-bg: #f3dfe1 #3d1014, --alert-warning-link-decoration-color: #e3c3c6 #54141a, + + // Doc Search + --docsearch-modal-background: rgba($white, 0.85) rgba($dark-100, 0.6), + --docsearch-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851), + --ds-highlight-color: rgba(120, 133, 152, 0.125) rgba(16, 21, 28, 0.3), + --ds-search-bg: $white $dark-100, + --ds-search-placeholder-color: #7e7e7e #697995, + --ds-search-focus-shadow: rgba($white, 0.15) #1b232f, ); // Activate dark/light themes diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss index 8862765a..24acbf77 100644 --- a/source/_static/scss/includes/_toc.scss +++ b/source/_static/scss/includes/_toc.scss @@ -65,6 +65,7 @@ div.topic { color: var(--headings-color); margin: 0; line-height: 1; + font-size: $font-size-md; @include breakpoint-max(breakpoints(lg)) { padding: 0.85rem 1rem; diff --git a/source/_static/scss/includes/_variables.scss b/source/_static/scss/includes/_variables.scss index b6f0b5c1..9996f535 100644 --- a/source/_static/scss/includes/_variables.scss +++ b/source/_static/scss/includes/_variables.scss @@ -74,9 +74,6 @@ $border-radius: 0.1875rem; $border-radius-sm: 0.125rem; $border-radius-lg: 0.3125rem; -// Search -$search-height: 2.65rem; - // Nav - FIXME $nav-sub-hover-bg: #f8f8f8; $nav-mobile-bg: $white; diff --git a/source/_templates/header.html b/source/_templates/header.html index 49b34d5f..a139d645 100644 --- a/source/_templates/header.html +++ b/source/_templates/header.html @@ -45,9 +45,10 @@ {%- include "top-navigation.html" %} -
+

Documentation

- {%- include "searchbox.html" %} + +
\ No newline at end of file diff --git a/source/_templates/layout.html b/source/_templates/layout.html index 2867668e..ab48c259 100644 --- a/source/_templates/layout.html +++ b/source/_templates/layout.html @@ -4,6 +4,11 @@ {# Custom CSS overrides #} {% block extrahead %} + + + + +