minio/docs
1
0
Fork 0
mirror of https://github.com/minio/docs.git synced 2025-07-28 19:42:10 +03:00
Code Activity

Implement Algolia search (#553)

Browse Source
This commit is contained in:
Rushan
2022-09-16 22:46:52 +04:00
committed by GitHub
parent 8842084dd0
commit 5efcffbff1
14 changed files with 249 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
source/_static/img/icons/docs.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="16" fill="#4b4b4b" fill-rule="evenodd" xmlns:v="https://vecta.io/nano"><rect width="2.5" height="16" rx="1.25"/><rect x="5" width="2.5" height="16" rx="1.25"/><rect x="10" width="2.5" height="16" rx="1.25"/><rect transform="rotate(337 18.25 8)" x="17" width="2.5" height="16" rx="1.25"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 352 B

1
source/_static/img/icons/search-dark.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" xmlns:v="https://vecta.io/nano"><path d="M11.5 6.5a5 5 0 1 1-10 0 5 5 0 1 1 10 0h0zm-1.59 5.535A6.5 6.5 0 0 1 2.47 1.401a6.5 6.5 0 0 1 8.619 9.703l1.845 2.096a.75.75 0 1 1-1.127.99L9.91 12.036v-.001z" fill="#8a93a4" fill-rule="evenodd"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 306 B

1
source/_static/img/icons/search.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" fill="none" xmlns:v="https://vecta.io/nano"><path fill-rule="evenodd" d="M11.5 6.5a5 5 0 1 1-10 0 5 5 0 0 1 10 0Zm-1.59 5.535a6.5 6.5 0 1 1 1.179-.931l1.845 2.096a.75.75 0 0 1-1.127.99L9.91 12.036Z" fill="#3d3d3d"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 284 B

9
source/_static/js/algolia.js
View File

@ -1,9 +0,0 @@
docsearch({
apiKey: '0ba0d26da4d1483f96c03fe508304a64',
indexName: 'minio',
inputSelector: '#algolia input[type=text],
debug: false,
algoliaOptions: {
hitsPerPage: 8,
}
});

117
source/_static/js/main.js
View File

@ -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();
});
});
}
})();
});

26
source/_static/scss/includes/_header.scss
View File

@ -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;
}
}
}
}

345
source/_static/scss/includes/_search.scss
View File

@ -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;
}

17
source/_static/scss/includes/_theme.scss
View File

@ -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

1
source/_static/scss/includes/_toc.scss
View File

@ -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;

3
source/_static/scss/includes/_variables.scss
View File

@ -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;

5
source/_templates/header.html
View File

@ -45,9 +45,10 @@
{%- include "top-navigation.html" %}
<div class="header__hero">
<div class="header__hero hidden-rm">
<h2>Documentation</h2>
{%- include "searchbox.html" %}
<div id="docsearch"></div>
</div>
</div>
</header>

5
source/_templates/layout.html
View File

@ -4,6 +4,11 @@
{# Custom CSS overrides #}
{% block extrahead %}
<link rel="preload" href="_static/fonts/inter/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="_static/fonts/inter/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="_static/fonts/inter/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://E1CSOK3UC2-dsn.algolia.net" crossorigin />
<!-- Google Tag Manager -->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

23
source/_templates/searchbox.html
View File

@ -1,22 +1,5 @@
{%- if pagename != "search" and builder != "singlehtml" %}
<form class="search" action="{{ pathto('search') }}" method="get" role="search">
<div class="search__inner">
<button id="search-close" class="icon visible-rm" type="button">
<svg width="13" height="10" viewBox="0 0 12 10">
<path d="M1.707 4.137H11.5c.277 0 .5.23.5.516 0 .137-.051.27-.145.363s-.223.152-.355.152H1.707l3.148 3.254a.53.53 0 0 1 0 .73c-.098.102-.223.152-.355.152s-.258-.051-.355-.152l-4-4.133c-.195-.203-.195-.531 0-.734l4-4.133A.5.5 0 0 1 4.5 0a.5.5 0 0 1 .355.152.53.53 0 0 1 0 .73zm0 0" fill-rule="evenodd"/>
</svg>
Hide Search
</button>
<input type="text" class="search__text" id="algolia" name="q" aria-labelledby="searchlabel" placeholder="Search Documentation" />
<kbd class="hidden-rm">
<span id="search-meta-key"></span>
<span>+</span>
<span>/</span>
</kbd>
</div>
</form>
<form class="search" action="{{ pathto('search') }}" method="get" role="search">
<input type="text" class="search__text" name="q" aria-labelledby="searchlabel" placeholder="Search Documentation" />
</form>
{%- endif %}

5
source/default-conf.py
View File

@ -264,7 +264,10 @@ html_static_path = ['_static']
html_css_files = ['css/main.min.css', 'custom.css']
html_js_files = ['js/main.js']
html_js_files = [
('https://cdn.jsdelivr.net/npm/@docsearch/js@3', {'defer': 'defer'}),
('js/main.js', {'defer': 'defer'}),
]
# Add https://www.min.io/robots.txt to html_extra_path list once available.
html_extra_path = [ 'extra']