nikon/docsearch
1
0
Fork 0
Code Activity Actions

chore: format code

Browse source
This commit is contained in:
François Chalifour 2020-04-24 15:55:17 +02:00
parent dbcebed048
commit 07e606a00c
11 changed files with 85 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
babel.config.js
View file

@ -1,6 +1,6 @@
/* eslint-disable import/no-commonjs */
module.exports = api => {
module.exports = (api) => {
const isTest = api.env('test');
const modules = isTest ? 'commonjs' : false;
const targets = {};

31
src/DocSearchModal.tsx
View file

@ -44,7 +44,7 @@ export function DocSearchModal({
placeholder = 'Search docs',
searchParameters,
onClose = noop,
transformItems = x => x,
transformItems = (x) => x,
hitComponent = Hit,
navigator,
}: DocSearchProps) {
@ -62,10 +62,7 @@ export function DocSearchModal({
const snipetLength = React.useRef<number>(10);
const initialQuery = React.useRef(
typeof window !== 'undefined'
? window
.getSelection()!
.toString()
.slice(0, MAX_QUERY_SIZE)
? window.getSelection()!.toString().slice(0, MAX_QUERY_SIZE)
: ''
).current;
@ -95,7 +92,7 @@ export function DocSearchModal({
search &&
favoriteSearches
.getAll()
.findIndex(x => x.objectID === search.objectID) === -1
.findIndex((x) => x.objectID === search.objectID) === -1
) {
recentSearches.add(search);
}
@ -195,7 +192,7 @@ export function DocSearchModal({
},
],
})
.catch(error => {
.catch((error) => {
// The Algolia `RetryError` happens when all the servers have
// failed, meaning that there's no chance the response comes
// back. This is the right time to display an error.
@ -207,7 +204,7 @@ export function DocSearchModal({
throw error;
})
.then((hits: DocSearchHit[]) => {
const sources = groupBy(hits, hit => hit.hierarchy.lvl0);
const sources = groupBy(hits, (hit) => hit.hierarchy.lvl0);
// We store the `lvl0`s to display them as search suggestions
// in the “no results“ screen.
@ -220,7 +217,7 @@ export function DocSearchModal({
});
}
return Object.values<DocSearchHit[]>(sources).map(items => {
return Object.values<DocSearchHit[]>(sources).map((items) => {
return {
onSelect({ suggestion }) {
saveRecentSearch(suggestion);
@ -231,10 +228,10 @@ export function DocSearchModal({
},
getSuggestions() {
return Object.values(
groupBy(items, item => item.hierarchy.lvl1)
groupBy(items, (item) => item.hierarchy.lvl1)
)
.map(items => {
return items.map(item => {
.map((items) => {
return items.map((item) => {
const url = new URL(item.url);
return {
@ -244,15 +241,15 @@ export function DocSearchModal({
});
})
.map(transformItems)
.map(hits =>
hits.map(item => {
.map((hits) =>
hits.map((item) => {
return {
...item,
// eslint-disable-next-line @typescript-eslint/camelcase
__docsearch_parent:
item.type !== 'lvl1' &&
hits.find(
siblingItem =>
(siblingItem) =>
siblingItem.type === 'lvl1' &&
siblingItem.hierarchy.lvl1 ===
item.hierarchy.lvl1
@ -328,7 +325,7 @@ export function DocSearchModal({
]
.filter(Boolean)
.join(' ')}
onClick={event => {
onClick={(event) => {
if (event.target === event.currentTarget) {
onClose();
}
@ -352,7 +349,7 @@ export function DocSearchModal({
hitComponent={hitComponent}
recentSearches={recentSearches}
favoriteSearches={favoriteSearches}
onItemClick={item => {
onItemClick={(item) => {
saveRecentSearch(item);
onClose();
}}

4
src/ErrorScreen.tsx
View file

@ -7,9 +7,7 @@ export function ErrorScreen() {
<div className="DocSearch-Screen-Icon">
<ErrorIcon />
</div>
<p className="DocSearch-Title">
Unable to fetch results
</p>
<p className="DocSearch-Title">Unable to fetch results</p>
<p className="DocSearch-Help">
You might want to check your network connection.
</p>

32
src/NoResultsScreen.tsx
View file

@ -10,10 +10,10 @@ import { NoResultsIcon } from './icons';
interface NoResultsScreenProps
extends AutocompleteApi<
InternalDocSearchHit,
React.FormEvent,
React.MouseEvent,
React.KeyboardEvent
InternalDocSearchHit,
React.FormEvent,
React.MouseEvent,
React.KeyboardEvent
> {
state: AutocompleteState<InternalDocSearchHit>;
inputRef: React.MutableRefObject<null | HTMLInputElement>;
@ -39,17 +39,19 @@ export function NoResultsScreen(props: NoResultsScreenProps) {
{searchSuggestions.slice(0, 3).reduce<React.ReactNode[]>(
(acc, search) => [
...acc,
<li><button
className="DocSearch-Prefill"
key={search}
onClick={() => {
props.setQuery(search.toLowerCase() + ' ');
props.refresh();
props.inputRef.current!.focus();
}}
>
{search}
</button></li>,
<li>
<button
className="DocSearch-Prefill"
key={search}
onClick={() => {
props.setQuery(search.toLowerCase() + ' ');
props.refresh();
props.inputRef.current!.focus();
}}
>
{search}
</button>
</li>,
],
[]
)}

2
src/ScreenState.tsx
View file

@ -32,7 +32,7 @@ export const ScreenState = React.memo(
}
const hasSuggestions = props.state.suggestions.some(
suggestion => suggestion.items.length > 0
(suggestion) => suggestion.items.length > 0
);
if (!props.state.query) {

6
src/StartScreen.tsx
View file

@ -57,7 +57,7 @@ export function StartScreen(props: StartScreenProps) {
<button
className="DocSearch-Hit-action-button"
title="Save this search"
onClick={event => {
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
@ -75,7 +75,7 @@ export function StartScreen(props: StartScreenProps) {
<button
className="DocSearch-Hit-action-button"
title="Remove this search from history"
onClick={event => {
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
@ -106,7 +106,7 @@ export function StartScreen(props: StartScreenProps) {
<button
className="DocSearch-Hit-action-button"
title="Remove this search from favorites"
onClick={event => {
onClick={(event) => {
event.preventDefault();
event.stopPropagation();

3
src/icons/ErrorIcon.tsx
View file

@ -10,7 +10,8 @@ export function ErrorIcon() {
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round" >
strokeLinejoin="round"
>
<path d="M19 4.8a16 16 0 00-2-1.2m-3.3-1.2A16 16 0 001.1 4.7M16.7 8a12 12 0 00-2.8-1.4M10 6a12 12 0 00-6.7 2M12.3 14.7a4 4 0 00-4.5 0M14.5 11.4A8 8 0 0010 10M3 16L18 2M10 18h0"></path>
</svg>
);

3
src/icons/NoResultsIcon.tsx
View file

@ -10,7 +10,8 @@ export function NoResultsIcon() {
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round" >
strokeLinejoin="round"
>
<path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2"></path>
</svg>
);

7
src/icons/SelectIcon.tsx
View file

@ -2,7 +2,12 @@ import React from 'react';
export function SelectIcon() {
return (
<svg className="DocSearch-Hit-Select-Icon" width="20" height="20" viewBox="0 0 20 20">
<svg
className="DocSearch-Hit-Select-Icon"
width="20"
height="20"
viewBox="0 0 20 20"
>
<g
stroke="currentColor"
fill="none"

4
src/stored-searches.ts
View file

@ -62,7 +62,7 @@ export function createStoredSearches<TItem extends StoredDocSearchHit>({
} = (item as unknown) as DocSearchHit;
const isQueryAlreadySaved = items.findIndex(
x => x.objectID === hit.objectID
(x) => x.objectID === hit.objectID
);
if (isQueryAlreadySaved > -1) {
@ -75,7 +75,7 @@ export function createStoredSearches<TItem extends StoredDocSearchHit>({
storage.setItem(items);
},
remove(item: TItem) {
items = items.filter(x => x.objectID !== item.objectID);
items = items.filter((x) => x.objectID !== item.objectID);
storage.setItem(items);
},

63
src/style.css
View file

@ -1,7 +1,6 @@
/* Variables */
:root {
/* Extract rgb from primary with JS
function extractRgb (css) {
return css.match(/[0-9.]+/gi)
@ -10,7 +9,11 @@
--docsearch-primary-color-R: 84;
--docsearch-primary-color-G: 104;
--docsearch-primary-color-B: 255;
--docsearch-primary-color: rgb(var(--docsearch-primary-color-R), var(--docsearch-primary-color-G), var(--docsearch-primary-color-B));
--docsearch-primary-color: rgb(
var(--docsearch-primary-color-R),
var(--docsearch-primary-color-G),
var(--docsearch-primary-color-B)
);
--docsearch-input-color: var(--ifm-color-emphasis-800);
@ -26,7 +29,13 @@
--docsearch-searchbox-background: var(--ifm-color-emphasis-300);
--docsearch-searchbox-focus-background: white;
--docsearch-searchbox-shadow: inset 0px 0px 0px 2px rgba(var(--docsearch-primary-color-R), var(--docsearch-primary-color-G), var(--docsearch-primary-color-B),.5);
--docsearch-searchbox-shadow: inset 0px 0px 0px 2px
rgba(
var(--docsearch-primary-color-R),
var(--docsearch-primary-color-G),
var(--docsearch-primary-color-B),
0.5
);
--docsearch-hit-color: var(--ifm-color-emphasis-800);
--docsearch-hit-active-color: white;
@ -43,13 +52,12 @@
--docsearch-footer-background: white;
--docsearch-footer-shadow: 0px -1px 0px 0px rgb(224, 227, 232),
0px -3px 6px 0px rgba(69, 98, 155, 0.12);
0px -3px 6px 0px rgba(69, 98, 155, 0.12);
--docsearch-logo-color: #5468ff;
--docsearch-muted-color: rgb(150, 159, 175);
--docsearch-modal-width: 560px;
--docsearch-modal-height: 600px;
@ -62,7 +70,6 @@
--docsearch-spacing: 12px;
--docsearch-icon-stroke-width: 1.4;
}
/* Darkmode */
@ -126,12 +133,12 @@ html[data-theme='dark'] {
.DocSearch-SearchButton:hover .DocSearch-Search-Icon,
.DocSearch-SearchButton:active .DocSearch-Search-Icon,
.DocSearch-SearchButton:focus .DocSearch-Search-Icon{
.DocSearch-SearchButton:focus .DocSearch-Search-Icon {
color: var(--docsearch-primary-color);
}
.DocSearch-SearchButton-Placeholder {
padding: 0 .5em;
padding: 0 0.5em;
font-size: 1rem;
}
@ -149,7 +156,6 @@ html[data-theme='dark'] {
color: var(--ifm-color-emphasis-600);
}
/* Body modifier */
.DocSearch--active {
@ -276,7 +282,7 @@ html[data-theme='dark'] {
cursor: pointer;
stroke-width: var(--docsearch-icon-stroke-width);
color: var(--docsearch-icon-color);
animation: fade-in .1s ease-in forwards;
animation: fade-in 0.1s ease-in forwards;
}
.DocSearch-Reset[hidden] {
@ -296,14 +302,14 @@ html[data-theme='dark'] {
}
.DocSearch-Reset:hover {
transition: background-color .1s ease-in;
transition: background-color 0.1s ease-in;
background: var(--ifm-color-emphasis-300);
}
.DocSearch-LoadingIndicator svg,
.DocSearch-MagnifierLabel svg {
width:24px;
height:24px;
width: 24px;
height: 24px;
}
.DocSearch-Cancel {
@ -412,9 +418,9 @@ html[data-theme='dark'] {
/* Hit */
.DocSearch-Hits:last-of-type{
.DocSearch-Hits:last-of-type {
margin-bottom: 24px;
}
}
.DocSearch-Hits mark {
background: none;
@ -470,7 +476,7 @@ html[data-theme='dark'] {
stroke-width: var(--docsearch-icon-stroke-width);
}
.DocSearch-Hit[aria-selected='true'] a{
.DocSearch-Hit[aria-selected='true'] a {
background-color: var(--docsearch-highlight-color);
}
@ -515,7 +521,7 @@ html[data-theme='dark'] {
align-items: center;
}
.DocSearch-Hit-action svg{
.DocSearch-Hit-action svg {
width: 18px;
height: 18px;
display: block;
@ -542,13 +548,12 @@ svg.DocSearch-Hit-Select-Icon {
display: block;
}
.DocSearch-Hit-action-button:hover {
transition: background-color .1s ease-in;
background: rgba(0,0,0,0.2);
transition: background-color 0.1s ease-in;
background: rgba(0, 0, 0, 0.2);
}
.DocSearch-Hit-action-button:hover path{
.DocSearch-Hit-action-button:hover path {
fill: white;
}
@ -585,7 +590,7 @@ svg.DocSearch-Hit-Select-Icon {
margin: 0 auto;
text-align: center;
padding: 36px 0;
font-size: .9em;
font-size: 0.9em;
}
.DocSearch-Screen-Icon {
@ -599,12 +604,12 @@ svg.DocSearch-Hit-Select-Icon {
display: inline-block;
}
.DocSearch-NoResults-Prefill-List ul{
.DocSearch-NoResults-Prefill-List ul {
padding: 8px 0 0;
display: inline-block;
}
.DocSearch-NoResults-Prefill-List li{
.DocSearch-NoResults-Prefill-List li {
list-style-type: '» ';
list-style-position: inside;
}
@ -634,7 +639,7 @@ svg.DocSearch-Hit-Select-Icon {
--docsearch-footer-height: 40px;
}
.DocSearch--active #__docusaurus{
.DocSearch--active #__docusaurus {
display: none;
}
@ -707,6 +712,10 @@ svg.DocSearch-Hit-Select-Icon {
}
@keyframes fade-in {
0% {opacity: 0}
100% { opacity: 1}
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}