mirror of https://github.com/crossplane/docs.git
Adds Algolia DocSearch components and manual style overrides (#226)
* Adds Algolia DocSearch components and manual style overrides Signed-off-by: Pete Lumbis <pete@upbound.io> * Auto close menu on mobile when search box is clicked Signed-off-by: Pete Lumbis <pete@upbound.io> * Add search hotkey indicators Signed-off-by: Pete Lumbis <pete@upbound.io> Signed-off-by: Pete Lumbis <pete@upbound.io>
This commit is contained in:
Pete Lumbis
GitHub
parent
83fbecce6d
commit
dd80b838c5
|
|
@ -10,6 +10,9 @@ disableKinds:
|
|||
- term
|
||||
- RSS
|
||||
|
||||
ignoreFiles:
|
||||
- README.md
|
||||
|
||||
build:
|
||||
writeStats: true
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,245 @@
|
|||
@include media-breakpoint-down(lg) {
|
||||
|
||||
.search-icon {
|
||||
right: initial !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button2 {
|
||||
.searchLabel {
|
||||
.thedocs{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
padding-right: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.docsearch {
|
||||
|
||||
.DocSearch-Button2 {
|
||||
|
||||
font-size: 1rem;
|
||||
font-weight: initial;
|
||||
box-shadow: initial !important;
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: $brightSun;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Button {
|
||||
display: flex !important;
|
||||
|
||||
/* In order to get the buttons to render like Bootstrap buttons
|
||||
the following just copies all the styles of the desired button and
|
||||
overrides the Algolia generated button. */
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-color: $brightSun;
|
||||
color: var(--bs-btn-hover-color);
|
||||
background-color: var(--bs-btn-hover-bg);
|
||||
}
|
||||
--docsearch-primary-color: #5468ff;
|
||||
--docsearch-text-color: #1c1e21;
|
||||
--docsearch-spacing: 12px;
|
||||
--docsearch-icon-stroke-width: 1.4;
|
||||
--docsearch-highlight-color: var(--docsearch-primary-color);
|
||||
--docsearch-muted-color: #969faf;
|
||||
--docsearch-container-background: rgba(101,108,133,0.8);
|
||||
--docsearch-logo-color: #5468ff;
|
||||
--docsearch-modal-width: 560px;
|
||||
--docsearch-modal-height: 600px;
|
||||
--docsearch-modal-background: #f5f6f7;
|
||||
--docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;
|
||||
--docsearch-searchbox-height: 56px;
|
||||
--docsearch-searchbox-background: #ebedf0;
|
||||
--docsearch-searchbox-focus-background: #fff;
|
||||
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
|
||||
--docsearch-hit-height: 56px;
|
||||
--docsearch-hit-color: #444950;
|
||||
--docsearch-hit-active-color: #fff;
|
||||
--docsearch-hit-background: #fff;
|
||||
--docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
|
||||
--docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);
|
||||
--docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);
|
||||
--docsearch-footer-height: 44px;
|
||||
--docsearch-footer-background: #fff;
|
||||
--docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12);
|
||||
--bs-blue: #0d6efd;
|
||||
--bs-indigo: #6610f2;
|
||||
--bs-purple: #6f42c1;
|
||||
--bs-pink: #d63384;
|
||||
--bs-red: #dc3545;
|
||||
--bs-orange: #fd7e14;
|
||||
--bs-yellow: #ffc107;
|
||||
--bs-green: #198754;
|
||||
--bs-teal: #20c997;
|
||||
--bs-cyan: #0dcaf0;
|
||||
--bs-black: #000;
|
||||
--bs-white: #fff;
|
||||
--bs-gray: #6c757d;
|
||||
--bs-gray-dark: #343a40;
|
||||
--bs-gray-100: #f8f9fa;
|
||||
--bs-gray-200: #e9ecef;
|
||||
--bs-gray-300: #dee2e6;
|
||||
--bs-gray-400: #ced4da;
|
||||
--bs-gray-500: #adb5bd;
|
||||
--bs-gray-600: #6c757d;
|
||||
--bs-gray-700: #495057;
|
||||
--bs-gray-800: #343a40;
|
||||
--bs-gray-900: #212529;
|
||||
--bs-primary: #0d6efd;
|
||||
--bs-secondary: #6c757d;
|
||||
--bs-success: #198754;
|
||||
--bs-info: #0dcaf0;
|
||||
--bs-warning: #ffc107;
|
||||
--bs-danger: #dc3545;
|
||||
--bs-light: #f8f9fa;
|
||||
--bs-dark: #212529;
|
||||
--bs-primary-rgb: 13, 110, 253;
|
||||
--bs-secondary-rgb: 108, 117, 125;
|
||||
--bs-success-rgb: 25, 135, 84;
|
||||
--bs-info-rgb: 13, 202, 240;
|
||||
--bs-warning-rgb: 255, 193, 7;
|
||||
--bs-danger-rgb: 220, 53, 69;
|
||||
--bs-light-rgb: 248, 249, 250;
|
||||
--bs-dark-rgb: 33, 37, 41;
|
||||
--bs-white-rgb: 255, 255, 255;
|
||||
--bs-black-rgb: 0, 0, 0;
|
||||
--bs-body-color-rgb: 33, 37, 41;
|
||||
--bs-body-bg-rgb: 255, 255, 255;
|
||||
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--bs-body-font-family: var(--bs-font-sans-serif);
|
||||
--bs-body-font-size: 1rem;
|
||||
--bs-body-font-weight: 400;
|
||||
--bs-body-line-height: 1.5;
|
||||
--bs-body-color: #212529;
|
||||
--bs-body-bg: #fff;
|
||||
--bs-border-width: 1px;
|
||||
--bs-border-style: solid;
|
||||
--bs-border-color: #dee2e6;
|
||||
--bs-border-color-translucent: rgba(0, 0, 0, 0.175);
|
||||
--bs-border-radius: 0.375rem;
|
||||
--bs-border-radius-sm: 0.25rem;
|
||||
--bs-border-radius-lg: 0.5rem;
|
||||
--bs-border-radius-xl: 1rem;
|
||||
--bs-border-radius-2xl: 2rem;
|
||||
--bs-border-radius-pill: 50rem;
|
||||
--bs-link-color: #0d6efd;
|
||||
--bs-link-hover-color: #0a58ca;
|
||||
--bs-code-color: #d63384;
|
||||
--bs-highlight-bg: #fff3cd;
|
||||
color-scheme: light dark;
|
||||
--body-background: white;
|
||||
--body-font-color: rgba(52, 58, 64, 1);
|
||||
--content-link-color: #0a539a;
|
||||
--anchor-link-color: #6d7a86;
|
||||
--code-background: #e9ecef;
|
||||
--code-color: #505a72;
|
||||
--nav-tab-background-color: var(--body-background);
|
||||
--active-tab-color: #f3807b;
|
||||
--inactive-tab-hover-color: #37ccb7;
|
||||
--nav-highlight-color: rgba(80,90,114, .1);
|
||||
--dropdown-highlight: var(--nav-highlight-color);
|
||||
--dropdown-background: var(--body-background);
|
||||
--latest-pill-background: #f3807b;
|
||||
--latest-pill-color: #141414;
|
||||
--dropdown-color: var(--body-font-color);
|
||||
--dropdown-border-color: #b2bac1;
|
||||
--toc-font-color: #6b7884;
|
||||
--toc-mobile-menu-outline: #ffcd3c;
|
||||
--toc-mobile-menu-background: #f8f9fa;
|
||||
--hint-important: rgba(255, 145, 0, 1);
|
||||
--hint-important-background: rgba(255, 145, 0, .1);
|
||||
--hint-warning: rgba(255, 82, 82, 1);
|
||||
--hint-warning-background: rgba(255, 82, 82, .1);
|
||||
--hint-tip: rgba(0,200,82,1);
|
||||
--hint-tip-background: rgba(0,200,82,.1);
|
||||
--hint-note: rgba(0,176,255,1);
|
||||
--hint-note-background: rgba(0,176,255,.1);
|
||||
--code-block-background-color: #19212C;
|
||||
--code-line-numbers-background-color: #151c25;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
--bs-offcanvas-zindex: 1045;
|
||||
--bs-offcanvas-width: 400px;
|
||||
--bs-offcanvas-padding-x: 1rem;
|
||||
--bs-offcanvas-padding-y: 1rem;
|
||||
--bs-offcanvas-color: ;
|
||||
--bs-offcanvas-bg: #fff;
|
||||
--bs-offcanvas-border-color: var(--bs-border-color-translucent);
|
||||
--bs-offcanvas-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
||||
--bs-offcanvas-height: auto;
|
||||
--bs-offcanvas-border-width: 0;
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 0;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
text-transform: none;
|
||||
-webkit-appearance: button;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-top: var(--bs-gutter-y);
|
||||
--bs-btn-padding-x: 0.75rem;
|
||||
--bs-btn-padding-y: 0.375rem;
|
||||
--bs-btn-font-family: ;
|
||||
--bs-btn-font-size: 1rem;
|
||||
--bs-btn-font-weight: 400;
|
||||
--bs-btn-line-height: 1.5;
|
||||
--bs-btn-bg: transparent;
|
||||
--bs-btn-border-width: 1px;
|
||||
--bs-btn-border-radius: 0.375rem;
|
||||
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
--bs-btn-disabled-opacity: 0.65;
|
||||
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
|
||||
font-family: var(--bs-btn-font-family);
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
|
||||
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
||||
--bs-btn-color: #6c757d;
|
||||
--bs-btn-border-color: #6c757d;
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg: #6c757d;
|
||||
--bs-btn-hover-border-color: #6c757d;
|
||||
--bs-btn-focus-shadow-rgb: 108, 117, 125;
|
||||
--bs-btn-active-color: #fff;
|
||||
--bs-btn-active-bg: #6c757d;
|
||||
--bs-btn-active-border-color: #6c757d;
|
||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||
--bs-btn-disabled-color: #6c757d;
|
||||
--bs-btn-disabled-bg: transparent;
|
||||
--bs-btn-disabled-border-color: #6c757d;
|
||||
--bs-gradient: none;
|
||||
--bs-badge-padding-x: 0.65em;
|
||||
--bs-badge-padding-y: 0.35em;
|
||||
--bs-badge-font-size: 0.75em;
|
||||
--bs-badge-font-weight: 700;
|
||||
--bs-badge-color: #fff;
|
||||
--bs-badge-border-radius: 0.375rem;
|
||||
display: inline-block;
|
||||
padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
border-radius: var(--bs-border-radius-pill) !important;
|
||||
line-height: 1.5;
|
||||
color: var(--body-font-color);
|
||||
background-color: var(--dropdown-background);
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-weight: initial;
|
||||
box-shadow: initial !important;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
.DocSearch-Modal {
|
||||
margin-top: 90px;
|
||||
background: var(--body-background);
|
||||
|
||||
.DocSearch-SearchBar{
|
||||
|
||||
.DocSearch-Form{
|
||||
box-shadow: inset 0 0 0 .75px $brightSun;
|
||||
background: var(--search-box-background);
|
||||
|
||||
.DocSearch-MagnifierLabel{
|
||||
fill: currentColor !important;
|
||||
color: var(--body-font-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Input{
|
||||
color: var(--body-font-color) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.DocSearch-Hit[aria-selected=true] {
|
||||
a{
|
||||
background: var(--nav-highlight-color) !important;
|
||||
}
|
||||
|
||||
mark {
|
||||
font-weight: 600 !important;
|
||||
color: var(--body-font-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-icon, .DocSearch-Hit-Select-Icon{
|
||||
color: var(--body-font-color) !important;
|
||||
fill: currentColor !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-path{
|
||||
color: var(--result-path) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.DocSearch-Hits {
|
||||
|
||||
a{
|
||||
background: var(--body-background);
|
||||
}
|
||||
|
||||
.DocSearch-Hit-content-wrapper {
|
||||
overflow-y: hidden;
|
||||
|
||||
.DocSearch-Hit-title{
|
||||
color: var(--body-font-color) !important;
|
||||
|
||||
mark{
|
||||
color: var(--content-link-color);
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit-path{
|
||||
color: var(--result-path);
|
||||
}
|
||||
|
||||
}
|
||||
.DocSearch-Hit-source{
|
||||
color: var(--hint-note);
|
||||
background: var(--body-background);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Footer{
|
||||
background: var(--body-background);
|
||||
box-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
.search {
|
||||
background-color: rgba(73, 80, 87, 1);
|
||||
|
||||
svg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
input, ::placeholder{
|
||||
background-color: rgba(73, 80, 87, 1);
|
||||
color: #bcbcba;
|
||||
border: none;
|
||||
}
|
||||
|
||||
input {
|
||||
// width: 100%;
|
||||
padding: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
// &::after {
|
||||
// display: block;
|
||||
// content: "";
|
||||
// clear: both;
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
.gdoc-search__list,
|
||||
.gdoc-language__list {
|
||||
background: var(--body-background);
|
||||
//border-radius: $border-radius;
|
||||
//box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: .5rem !important;
|
||||
list-style: none;
|
||||
top: calc(100% + 0.5rem);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.gdoc-search {
|
||||
position: relative;
|
||||
box-shadow: 0.2px 0.3px 0.3px hsl(0deg, 0%, 0% / 0.50);
|
||||
|
||||
|
||||
svg{
|
||||
filter: brightness(4);
|
||||
}
|
||||
|
||||
&:hover{
|
||||
box-shadow: 0.5px 1.0px 1.0px hsl(0deg, 0%, 0% / 0.49);
|
||||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
position: absolute;
|
||||
left: 0.5rem;
|
||||
color: rgba(73, 80, 87, 1);
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
padding-left: 2rem;
|
||||
|
||||
//border: $border-1 solid var(--accent-color);
|
||||
//border-radius: $border-radius;
|
||||
|
||||
//background: var(--accent-color-lite);
|
||||
//color: var(--body-font-color);
|
||||
|
||||
&:required + &__spinner {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&__spinner {
|
||||
position: absolute;
|
||||
margin: 0.5rem;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
|
||||
// border: $border-1 solid transparent;
|
||||
// border-top-color: var(--body-font-color);
|
||||
border-radius: 50%;
|
||||
|
||||
//@include spin(1s);
|
||||
}
|
||||
|
||||
&__list {
|
||||
visibility: hidden;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
> li > span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> li + li {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
svg.gdoc-icon {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-within &__list.has-hits,
|
||||
&__list.has-hits:active {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
.bd-sidebar-container {
|
||||
background-color: var(--body-background) !important;
|
||||
position: sticky;
|
||||
top: 5rem;
|
||||
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: var(--btn-close-color)!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ $font-family-sans-serif: "Avenir-Roman", "Avenir" !default;
|
|||
$font-family-monospace: "Consolas" !default;
|
||||
$line-height-base: 1.8 !default;
|
||||
$font-size-root: 18px !default;
|
||||
$font-size-base: 1.125 !default;
|
||||
$font-size-base: 1.125rem !default;
|
||||
$body-font-size: 19px !default;
|
||||
|
||||
$aquaMarine: #3de2cb !default;
|
||||
|
|
|
|||
|
|
@ -30,4 +30,8 @@
|
|||
--toc-font-color: #{darken(#FAFAFA, 15)};
|
||||
--toc-mobile-menu-outline: #ffcd3c;
|
||||
--toc-mobile-menu-background: #2e3d52;
|
||||
|
||||
//Search Related
|
||||
--search-box-background: #3D4856;
|
||||
--result-path: #e3f5ff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,10 @@
|
|||
@import "hints";
|
||||
@import "callouts";
|
||||
@import "anchor";
|
||||
// @import "search";
|
||||
/* purgecss start ignore */
|
||||
@import "search-button";
|
||||
@import "search-results";
|
||||
/* purgecss end ignore */
|
||||
@import "skippy";
|
||||
@import "clipboard-js";
|
||||
@import "fonts";
|
||||
|
|
@ -42,4 +42,8 @@
|
|||
|
||||
--hint-note: rgba(0,176,255,1); //"info",
|
||||
--hint-note-background: rgba(0,176,255,.1);
|
||||
|
||||
//Search Results
|
||||
--result-path: #141414;
|
||||
--search-box-background: var(--body-background);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
</div>
|
||||
<div class="d-flex"><button type="button" class="btn-close bi align-self-center p-0" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button></div>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
{{ partial "left-nav" . }}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,7 @@
|
|||
</div>
|
||||
<div class="d-flex"><button type="button" class="btn-close bi align-self-center p-0" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdSidebar"></button></div>
|
||||
</div>
|
||||
<div class="offcanvas-body">
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ partial "left-nav" . }}
|
||||
</aside>
|
||||
|
||||
<main class="bd-main order-1">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
{{ $current := . }}
|
||||
{{ $version_section := (where .Site.Sections ".Page.Params.version" .Page.Params.version) }}
|
||||
<nav class="bd-links-nav w-100 pt-3" aria-label="Docs navigation">
|
||||
<nav class="bd-links-nav w-100" aria-label="Docs navigation">
|
||||
|
||||
<div class="bd-links-container">
|
||||
<div class="container nav-container d-flex w-100">
|
||||
<div class="container flex-row">
|
||||
<div class="container nav-container pe-0 d-flex w-100">
|
||||
<div class="container flex-row pe-0">
|
||||
<div class="d-flex flex-column ">
|
||||
<div class="d-flex"><a href="{{ .FirstSection.Permalink }} ">{{ .FirstSection.Title }}</a></div>
|
||||
</div>
|
||||
|
|
@ -36,9 +36,9 @@
|
|||
{{ if or $isCurrent (eq .thisPage .current.Parent) }}
|
||||
{{ $expand = true }}
|
||||
{{ end }}
|
||||
<div class="section-container container">
|
||||
<div class="section-container container pe-0">
|
||||
{{ if $isParent }}
|
||||
<div class="container nav-container d-flex w-100 {{if eq .thisPage $.current}}active{{ else if $expand }}active-parent{{end}}">
|
||||
<div class="container nav-container pe-0 d-flex w-100 {{if eq .thisPage $.current}}active{{ else if $expand }}active-parent{{end}}">
|
||||
<div class=" d-flex w-100 border-0">
|
||||
<a class="" href="{{.thisPage.Permalink}}">{{.thisPage.Title}}</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
{{ partialCached "meta-common" . }}
|
||||
{{ if .Page.Params.version }}
|
||||
<meta name="docsearch:version" content="{{.Page.Params.version}}" />
|
||||
{{if eq .Page.Params.version "master" }}
|
||||
<!-- "master" is not a SemVer version. Set it to 0.0.0 to derank it in search -->
|
||||
<meta name="docsearch:version" content="0.0.0-master" />
|
||||
{{ else }}
|
||||
<meta name="docsearch:version" content="{{.Page.Params.version}}" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<title>{{ if .IsHome }}{{ .Site.Title | markdownify }} · {{ .Site.Params.subtitle | markdownify }}{{ else }}{{ .Title | markdownify }} · {{ .Site.Title | markdownify }} v{{ .Site.Params.docs_version }}{{ end }}</title>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<symbol id="check2" viewBox="0 0 16 16">
|
||||
<title>Check</title>
|
||||
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
|
||||
</symbol>
|
||||
<symbol id="x" viewBox="0 0 16 16">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.0 KiB |
|
|
@ -0,0 +1,6 @@
|
|||
<div class="offcanvas-body">
|
||||
<div class="container-fluid p-0">
|
||||
{{ partial "search-button" . }}
|
||||
{{ partial "docs-sidebar" . }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,4 +5,19 @@
|
|||
|
||||
{{ if eq hugo.Environment "production" -}}
|
||||
{{ partialCached "analytics" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
|
||||
|
||||
<script>
|
||||
|
||||
docsearch({
|
||||
container: '#docSearch',
|
||||
appId: '9UXKYX61NK',
|
||||
indexName: 'crossplane',
|
||||
apiKey: 'e07e181044d561f6a4cb7261931d980a',
|
||||
placeholder: 'Search the docs'
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!-- this is the ideal manually created button but it breaks the DocSearch javascript -->
|
||||
<!-- we override almost all style elements of the docSearch and child elements -->
|
||||
<!-- <div class="search-container d-flex row pt-3 ps-4 docsearch opacity-50" aria-label="Docs navigation">
|
||||
|
||||
<button type="button" class="DocSearch-Button2 badge btn btn-outline-secondary bd-dropdown rounded-pill py-0" data-bs-toggle="modal" data-bs-target="#searchModal">
|
||||
<span class="searchLabel align-middle pe-4">Searchthe docs</span></span>
|
||||
<span class="search-icon" ><svg class="bi"><use xlink:href="#search"></use></svg></span>
|
||||
</button>
|
||||
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="search-container d-flex row pt-3 ps-4 docsearch opacity-50" data-bs-target="#bdSidebar" data-bs-dismiss="offcanvas" aria-label="Docs navigation">
|
||||
<div class="p-0" id="docSearch"></div>
|
||||
</div>
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
<!-- search is temporarily turned off -->
|
||||
<div class="container search invisible d-flex shadow mb-3">
|
||||
<div class="bg-transparent">
|
||||
<svg class="bi"><use xlink:href="#search"></use></svg>
|
||||
</div>
|
||||
<div class="bg-transparent">
|
||||
<input
|
||||
type="text"
|
||||
id="gdoc-search-input"
|
||||
class=""
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
maxlength="64"
|
||||
data-site-base-url="{{ .Site.BaseURL }}"
|
||||
data-site-lang="{{ .Site.Language.Lang }}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="gdoc-search flex align-center">
|
||||
<svg class="gdoc-icon gdoc_search"><use xlink:href="#search"></use></svg>
|
||||
<input
|
||||
type="text"
|
||||
id="gdoc-search-input"
|
||||
class="gdoc-search__input"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
maxlength="64"
|
||||
data-site-base-url="{{ .Site.BaseURL }}"
|
||||
data-site-lang="{{ .Site.Language.Lang }}"
|
||||
/>
|
||||
<div class="gdoc-search__spinner spinner hidden"></div>
|
||||
<ul id="gdoc-search-results" class="gdoc-search__list"></ul>
|
||||
</div> -->
|
||||
|
|
@ -19,4 +19,9 @@
|
|||
{{ $style = resources.Get "scss/docs.scss" | toCSS $sassOptions }}
|
||||
{{ end }}
|
||||
|
||||
<link href="{{ $style.Permalink}}" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" media="print" onload="this.media='all'"/>
|
||||
|
||||
<link href="{{ $style.Permalink}}" rel="stylesheet">
|
||||
|
||||
<link rel="preconnect" href="https://9UXKYX61NK-dsn.algolia.net" crossorigin />
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue