Skip to content

Commit fe4fda2

Browse files
solimantsolimant
committed
Integrate DocSearch
1 parent 4ffc644 commit fe4fda2

File tree

3 files changed

+117
-0
lines changed

3 files changed

+117
-0
lines changed

‎packages/dev/docs/src/Layout.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,7 @@ function Page({children, currentPage, publicUrl, styles, scripts}) {
201201
}
202202
}
203203
)}} />
204+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
204205
</head>
205206
<body>
206207
{children}
@@ -213,6 +214,7 @@ function Page({children, currentPage, publicUrl, styles, scripts}) {
213214
document.head.appendChild(script);
214215
});
215216
`}} />
217+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />
216218
</body>
217219
</html>
218220
);

‎packages/dev/docs/src/client.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import docsStyle from './docs.css';
1515
import {listen} from 'quicklink';
1616
import React, {useEffect, useState} from 'react';
1717
import ReactDOM from 'react-dom';
18+
import {SearchField} from '@react-spectrum/searchfield';
1819
import ShowMenu from '@spectrum-icons/workflow/ShowMenu';
1920
import {ThemeSwitcher} from './ThemeSwitcher';
2021
import {watchModals} from '@react-aria/aria-modal-polyfill';
@@ -177,8 +178,30 @@ function Hamburger() {
177178
);
178179
}
179180

181+
function DocSearch() {
182+
useEffect(() => {
183+
// the following comes from docsearch.min.js
184+
// eslint-disable-next-line no-undef
185+
docsearch({
186+
apiKey: '9b5a0967c8bb751b5048ecfc99917979',
187+
indexName: 'react-spectrum',
188+
inputSelector: '#algolia-doc-search',
189+
debug: false // Set debug to true to inspect the dropdown
190+
});
191+
}, []);
192+
193+
return (
194+
<SearchField
195+
aria-label="Search"
196+
UNSAFE_className={docsStyle.docSearchBox}
197+
id="algolia-doc-search"
198+
placeholder="Search" />
199+
);
200+
}
201+
180202
ReactDOM.render(<>
181203
<Hamburger />
204+
<DocSearch />
182205
<ThemeSwitcher />
183206
</>, document.querySelector('.' + docsStyle.pageHeader));
184207

‎packages/dev/docs/src/docs.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -571,6 +571,7 @@ h2.sectionHeader {
571571
}
572572

573573
.pageHeader {
574+
gap: var(--spectrum-global-dimension-size-100);
574575
position: fixed;
575576
top: 0;
576577
display: inline-flex;
@@ -585,6 +586,71 @@ h2.sectionHeader {
585586
[dir='rtl'] & {
586587
left: 0;
587588
}
589+
590+
& :global(.algolia-autocomplete .ds-dropdown-menu) {
591+
border-color: var(--spectrum-alias-border-color-dark, var(--spectrum-global-color-gray-400));
592+
border-radius: var(--spectrum-global-dimension-size-65);
593+
border-style: solid;
594+
border-width: var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10));
595+
box-shadow: unset;
596+
filter: drop-shadow(0 1px 4px var(--spectrum-alias-dropshadow-color));
597+
598+
& [class^='ds-dataset-'] {
599+
background-color: var(--spectrum-global-color-gray-50);
600+
border: unset;
601+
}
602+
603+
&:before {
604+
background-color: var(--spectrum-global-color-gray-50);
605+
border-right-color: var(--spectrum-alias-border-color-dark, var(--spectrum-global-color-gray-400));
606+
border-top-color: var(--spectrum-alias-border-color-dark, var(--spectrum-global-color-gray-400));
607+
z-index: -1;
608+
}
609+
610+
& :global(.algolia-docsearch-suggestion) {
611+
background-color: var(--spectrum-global-color-gray-50);
612+
}
613+
614+
& :global(.algolia-docsearch-suggestion.algolia-docsearch-suggestion__main) {
615+
text-decoration: none;
616+
}
617+
618+
& :global(.algolia-docsearch-suggestion--category-header) {
619+
border-bottom-color: var(--spectrum-global-color-gray-300);
620+
color: var(--spectrum-global-color-gray-900);
621+
font-weight: var(--spectrum-global-font-weight-semi-bold);
622+
text-transform: uppercase;
623+
}
624+
625+
& :global(.algolia-docsearch-suggestion--highlight) {
626+
background: var(--spectrum-alias-text-highlight-color);
627+
color: var(--spectrum-global-color-blue-700);
628+
}
629+
630+
& :global(.algolia-docsearch-suggestion--subcategory-column) {
631+
color: var(--spectrum-global-color-gray-800);
632+
}
633+
634+
& :global(.algolia-docsearch-suggestion--subcategory-column:before) {
635+
background: var(--spectrum-global-color-gray-300);
636+
}
637+
638+
& :global(.ds-suggestion.ds-cursor .algolia-docsearch-suggestion:not(.suggestion-layout-simple) .algolia-docsearch-suggestion--content) {
639+
background-color: var(--spectrum-alias-background-color-hover-overlay);
640+
}
641+
642+
& :global(.algolia-docsearch-suggestion--content:before) {
643+
background: var(--spectrum-global-color-gray-300);
644+
}
645+
646+
& :global(.algolia-docsearch-suggestion--title) {
647+
color: var(--spectrum-global-color-gray-800);
648+
}
649+
}
650+
}
651+
652+
.docSearchBox {
653+
margin-inline-start: auto;
588654
}
589655

590656
/* hamburger menu should be hidden so that it doesn't receive focus before the sidenav */
@@ -667,6 +733,32 @@ h2.sectionHeader {
667733
margin-right: auto;
668734
width: auto
669735
}
736+
737+
@media (min-width: 570px) {
738+
.pageHeader {
739+
& :global(.algolia-autocomplete .ds-dropdown-menu) {
740+
margin-inline-end: var(--spectrum-global-dimension-size-600);
741+
max-width: 500px;
742+
min-width: unset;
743+
position: fixed !important;
744+
top: var(--spectrum-global-dimension-size-500) !important;
745+
}
746+
}
747+
}
748+
}
749+
750+
@media (max-width: 569px) {
751+
.pageHeader {
752+
& :global(.algolia-autocomplete .ds-dropdown-menu) {
753+
min-width: unset;
754+
position: fixed !important;
755+
top: var(--spectrum-global-dimension-size-500) !important;
756+
757+
&:before {
758+
right: var(--spectrum-global-dimension-size-1200) !important;
759+
}
760+
}
761+
}
670762
}
671763

672764
@media (max-width: 1200px) {

0 commit comments

Comments
 (0)