From dc2f694c15e15b04988a5e4759d44ab662d92686 Mon Sep 17 00:00:00 2001 From: eunjae-lee Date: Thu, 5 Mar 2020 16:23:15 +0100 Subject: [PATCH 01/63] chore: put some base work --- package.json | 12 ++-- packages/docsearch-react/babel.config.js | 27 ++++++++ packages/docsearch-react/package.json | 43 ++++++++++++ packages/docsearch-react/rollup.config.js | 20 ++++++ packages/docsearch-react/src/DocSearch.tsx | 7 ++ packages/docsearch-react/src/index.ts | 1 + packages/docsearch-react/src/style.css | 18 +++++ .../docsearch-react/tsconfig.declaration.json | 8 +++ packages/docsearch-react/tsconfig.json | 3 + packages/website/package.json | 1 + packages/website/src/pages/index.js | 1 - .../src/theme/SearchBar/SearchButton.jsx | 11 +++ .../theme/SearchBar/SearchButton.module.css | 20 ++++++ packages/website/src/theme/SearchBar/index.js | 69 +++++++++++++++++++ 14 files changed, 234 insertions(+), 7 deletions(-) create mode 100644 packages/docsearch-react/babel.config.js create mode 100644 packages/docsearch-react/package.json create mode 100644 packages/docsearch-react/rollup.config.js create mode 100644 packages/docsearch-react/src/DocSearch.tsx create mode 100644 packages/docsearch-react/src/index.ts create mode 100644 packages/docsearch-react/src/style.css create mode 100644 packages/docsearch-react/tsconfig.declaration.json create mode 100644 packages/docsearch-react/tsconfig.json create mode 100644 packages/website/src/theme/SearchBar/SearchButton.jsx create mode 100644 packages/website/src/theme/SearchBar/SearchButton.module.css create mode 100644 packages/website/src/theme/SearchBar/index.js diff --git a/package.json b/package.json index 581c4c06b..b6adc47ce 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,12 @@ "lint": "eslint --ext .js,.ts,.tsx .", "storybook": "start-storybook --quiet --port 6006 --ci --static-dir .storybook/static", "storybook:build": "build-storybook --quiet --output-dir packages/website/build/stories --static-dir .storybook/static", - "build:clean": "lerna run build:clean --scope @francoischalifour/autocomplete-*", - "build:umd": "lerna run build:umd --scope @francoischalifour/autocomplete-*", - "build:esm": "lerna run build:esm --scope @francoischalifour/autocomplete-*", - "build:types": "lerna run build:types --scope @francoischalifour/autocomplete-*", - "build": "lerna run build --scope @francoischalifour/autocomplete-*", - "watch": "lerna run watch --parallel --scope @francoischalifour/autocomplete-*", + "build:clean": "lerna run build:clean --scope @francoischalifour/autocomplete-* --scope docsearch-react", + "build:umd": "lerna run build:umd --scope @francoischalifour/autocomplete-* --scope docsearch-react", + "build:esm": "lerna run build:esm --scope @francoischalifour/autocomplete-* --scope docsearch-react", + "build:types": "lerna run build:types --scope @francoischalifour/autocomplete-* --scope docsearch-react", + "build": "lerna run build --scope @francoischalifour/autocomplete-* --scope docsearch-react", + "watch": "lerna run watch --parallel --scope @francoischalifour/autocomplete-* --scope docsearch-react", "dev": "yarn build && yarn watch-and-storybook", "watch-and-storybook": "concurrently \"yarn run watch\" \"yarn run storybook\"", "type-check": "tsc --noEmit", diff --git a/packages/docsearch-react/babel.config.js b/packages/docsearch-react/babel.config.js new file mode 100644 index 000000000..7d68e20c8 --- /dev/null +++ b/packages/docsearch-react/babel.config.js @@ -0,0 +1,27 @@ +/* eslint-disable import/no-commonjs */ + +module.exports = api => { + const isTest = api.env('test'); + const modules = isTest ? 'commonjs' : false; + const targets = {}; + + if (isTest) { + targets.node = true; + } else { + targets.browsers = ['last 2 versions', 'ie >= 9']; + } + + return { + presets: [ + '@babel/preset-typescript', + [ + '@babel/preset-env', + { + modules, + targets, + }, + ], + ], + plugins: [['@babel/plugin-transform-react-jsx']], + }; +}; diff --git a/packages/docsearch-react/package.json b/packages/docsearch-react/package.json new file mode 100644 index 000000000..13622f733 --- /dev/null +++ b/packages/docsearch-react/package.json @@ -0,0 +1,43 @@ +{ + "name": "docsearch-react", + "version": "1.0.0-alpha.10", + "license": "MIT", + "source": "src/index.ts", + "types": "dist/esm/index.d.ts", + "module": "dist/esm/index.js", + "main": "dist/umd/index.js", + "umd:main": "dist/umd/index.js", + "unpkg": "dist/umd/index.js", + "jsdelivr": "dist/umd/index.js", + "scripts": { + "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:types && yarn build:css", + "": "// TODO: have a proper build:css, probably including autoprefixer?", + "build:css": "cp src/style.css dist/esm/ && cp src/style.css dist/umd/", + "build:css:watch": "chokidar src/style.css --command \"yarn build:css\"", + "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm", + "build:esm:watch": "yarn build:esm --watch", + "build:umd": "rollup --config", + "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm", + "build:types:watch": "chokidar \"**/*.ts\" \"**/*.tsx\" --command \"yarn build:types\" --ignore \"dist\"", + "build:clean": "rm -rf ./dist", + "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\" \"yarn build:css:watch\"" + }, + "homepage": "https://github.com/algolia/autocomplete.js", + "repository": "algolia/autocomplete.js", + "author": { + "name": "Algolia, Inc.", + "url": "https://www.algolia.com" + }, + "sideEffects": false, + "files": [ + "dist/" + ], + "dependencies": { + "@francoischalifour/autocomplete-core": "^1.0.0-alpha.10", + "@francoischalifour/autocomplete-preset-algolia": "^1.0.0-alpha.10" + }, + "peerDependencies": { + "react": "^16.8.0", + "react-dom": "^16.8.0" + } +} diff --git a/packages/docsearch-react/rollup.config.js b/packages/docsearch-react/rollup.config.js new file mode 100644 index 000000000..a64b3b2b4 --- /dev/null +++ b/packages/docsearch-react/rollup.config.js @@ -0,0 +1,20 @@ +import json from '@rollup/plugin-json'; + +import { name } from './package.json'; +import { sharedPlugins } from '../autocomplete-core/rollup.config'; + +export default { + input: 'src/index.ts', + external: ['react', 'react-dom'], + output: { + file: 'dist/umd/index.js', + format: 'umd', + sourcemap: true, + name, + globals: { + react: 'React', + 'react-dom': 'ReactDOM', + }, + }, + plugins: [json(), ...sharedPlugins], +}; diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx new file mode 100644 index 000000000..08b3c00a0 --- /dev/null +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export const DocSearch = () => ( +
+
+
+); diff --git a/packages/docsearch-react/src/index.ts b/packages/docsearch-react/src/index.ts new file mode 100644 index 000000000..7119c2e43 --- /dev/null +++ b/packages/docsearch-react/src/index.ts @@ -0,0 +1 @@ +export * from './DocSearch'; diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css new file mode 100644 index 000000000..330597d67 --- /dev/null +++ b/packages/docsearch-react/src/style.css @@ -0,0 +1,18 @@ +.docsearch-container { + background-color: rgba(0, 0, 0, 0.2); + position: absolute; + left: 0; + top: 0; + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: flex-start; +} + +.docsearch-popup { + margin-top: 20vh; + width: 50vw; + min-height: 20rem; + background-color: #f0f0f0; +} diff --git a/packages/docsearch-react/tsconfig.declaration.json b/packages/docsearch-react/tsconfig.declaration.json new file mode 100644 index 000000000..9bd7baf23 --- /dev/null +++ b/packages/docsearch-react/tsconfig.declaration.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "noEmit": false, + "declaration": true, + "emitDeclarationOnly": true + } +} diff --git a/packages/docsearch-react/tsconfig.json b/packages/docsearch-react/tsconfig.json new file mode 100644 index 000000000..41716a7dd --- /dev/null +++ b/packages/docsearch-react/tsconfig.json @@ -0,0 +1,3 @@ +{ + "extends": "../../tsconfig" +} diff --git a/packages/website/package.json b/packages/website/package.json index 5a16e73ad..0c90a471c 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -12,6 +12,7 @@ "@docusaurus/core": "2.0.0-alpha.43", "@docusaurus/preset-classic": "2.0.0-alpha.43", "classnames": "2.2.6", + "docsearch-react": "1.0.0-alpha.10", "react": "16.13.0", "react-dom": "16.13.0" }, diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index df93bf935..659a2624d 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -68,7 +68,6 @@ function Home() { -
{features && features.length && (
diff --git a/packages/website/src/theme/SearchBar/SearchButton.jsx b/packages/website/src/theme/SearchBar/SearchButton.jsx new file mode 100644 index 000000000..1bb13e8a5 --- /dev/null +++ b/packages/website/src/theme/SearchBar/SearchButton.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import styles from './SearchButton.module.css'; + +export default function SearchButton({ onClick }) { + return ( + + ); +} diff --git a/packages/website/src/theme/SearchBar/SearchButton.module.css b/packages/website/src/theme/SearchBar/SearchButton.module.css new file mode 100644 index 000000000..dff3ffdc9 --- /dev/null +++ b/packages/website/src/theme/SearchBar/SearchButton.module.css @@ -0,0 +1,20 @@ +.button { + margin-left: 1rem; + border-radius: 0.5rem; + background-color: rgb(247, 250, 252); + border: 1px solid rgb(215, 215, 215); + padding: 0.2rem 0.7rem; + cursor: pointer; + display: flex; + align-items: center; +} + +.text { + color: rgb(151, 151, 151); + font-size: 0.8rem; + padding-right: 0.5rem; +} + +.kbd { + color: #898ba2; +} diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js new file mode 100644 index 000000000..7088eb8b2 --- /dev/null +++ b/packages/website/src/theme/SearchBar/index.js @@ -0,0 +1,69 @@ +/* eslint-disable import/no-unresolved */ + +import React, { useState, useEffect } from 'react'; +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import SearchButton from './SearchButton'; + +let DocSearchComp = null; + +export default function SearchBar() { + const [isLoaded, setLoaded] = useState(false); + const [isShowing, setShowing] = useState(false); + const { siteConfig = {} } = useDocusaurusContext(); + + useEffect(() => { + function onKeyDown(event) { + if ( + (event.key === 'Escape' && isShowing) || + (event.key === 'k' && (event.metaKey || event.ctrlKey)) + ) { + event.preventDefault(); + if (isShowing) { + setShowing(!isShowing); + } else { + open(); + } + } + } + window.addEventListener('keydown', onKeyDown); + + return () => { + window.removeEventListener('keydown', onKeyDown); + }; + }, [isShowing]); + + const { + themeConfig: { algolia }, + } = siteConfig; + + const load = () => { + if (isLoaded) { + return; + } + Promise.all([ + import('docsearch-react'), + import('docsearch-react/dist/esm/style.css'), + ]).then(([{ DocSearch }]) => { + DocSearchComp = DocSearch; + setLoaded(true); + }); + }; + + function open() { + load(); + setShowing(true); + } + + return ( +
+ { + open(); + }} + /> + {isLoaded && isShowing && ( + setShowing(false)} /> + )} +
+ ); +} From d6a85685b2de6b9d5dcbb97dfad7adf1547e79ba Mon Sep 17 00:00:00 2001 From: eunjae-lee Date: Thu, 5 Mar 2020 16:56:25 +0100 Subject: [PATCH 02/63] chore: add basic styles --- packages/docsearch-react/src/DocSearch.tsx | 24 ++++++++++++++++++- packages/docsearch-react/src/style.css | 27 +++++++++++++++++++++- 2 files changed, 49 insertions(+), 2 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 08b3c00a0..b860f670f 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -2,6 +2,28 @@ import React from 'react'; export const DocSearch = () => (
-
+
+
+ + +
+
); diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 330597d67..bea6c83ac 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -14,5 +14,30 @@ margin-top: 20vh; width: 50vw; min-height: 20rem; - background-color: #f0f0f0; + background-color: #f8f8f8; + border-radius: 8px; + box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2); +} + +.docsearch-searchbox { + display: flex; + padding: 1rem 1rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.2); +} + +.docsearch-magnifier-icon { + margin-top: 0.5rem; +} + +.docsearch-magnifier-icon svg { + width: 1rem; +} + +.docsearch-input { + margin: 0; + padding: 0.5rem 1rem; + background-color: transparent; + width: 100%; + border: none; + font-size: 1rem; } From b85bbc431528abebefd2b56262f5f0c89d90983a Mon Sep 17 00:00:00 2001 From: eunjae-lee Date: Thu, 5 Mar 2020 16:58:49 +0100 Subject: [PATCH 03/63] chore: close on clicking bg --- packages/docsearch-react/src/DocSearch.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index b860f670f..a0876a634 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -1,7 +1,14 @@ import React from 'react'; -export const DocSearch = () => ( -
+export const DocSearch = ({ onClose }) => ( +
{ + if (event.target === event.currentTarget) { + onClose && onClose(); + } + }} + >
); })} +
  • - - - - - - - - - - - - - - - - - - - to select - + + to select
  • - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + to navigate
  • - - - - - - - - to close - + + to close
diff --git a/packages/docsearch-react/src/EscapeCommandIcon.tsx b/packages/docsearch-react/src/EscapeCommandIcon.tsx new file mode 100644 index 000000000..f23917d91 --- /dev/null +++ b/packages/docsearch-react/src/EscapeCommandIcon.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +export function EscapeCommandIcon() { + return ( + + + + + + + ); +} diff --git a/packages/docsearch-react/src/LoadingIcon.tsx b/packages/docsearch-react/src/LoadingIcon.tsx new file mode 100644 index 000000000..6963ca43d --- /dev/null +++ b/packages/docsearch-react/src/LoadingIcon.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +export function LoadingIcon() { + return ( + + + + + + + + + + + ); +} diff --git a/packages/docsearch-react/src/ResetIcon.tsx b/packages/docsearch-react/src/ResetIcon.tsx new file mode 100644 index 000000000..202c2cacb --- /dev/null +++ b/packages/docsearch-react/src/ResetIcon.tsx @@ -0,0 +1,13 @@ +import React from 'react'; + +export function ResetIcon() { + return ( + + + + ); +} diff --git a/packages/docsearch-react/src/SearchIcon.tsx b/packages/docsearch-react/src/SearchIcon.tsx new file mode 100644 index 000000000..bfc39e08e --- /dev/null +++ b/packages/docsearch-react/src/SearchIcon.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +export function SearchIcon() { + return ( + + + + ); +} diff --git a/packages/docsearch-react/src/SelectCommandIcon.tsx b/packages/docsearch-react/src/SelectCommandIcon.tsx new file mode 100644 index 000000000..a54ed82e7 --- /dev/null +++ b/packages/docsearch-react/src/SelectCommandIcon.tsx @@ -0,0 +1,34 @@ +import React from 'react'; + +export function SelectCommandIcon() { + return ( + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/docsearch-react/src/types/DocSearchHit.ts b/packages/docsearch-react/src/types/DocSearchHit.ts new file mode 100644 index 000000000..4a476912d --- /dev/null +++ b/packages/docsearch-react/src/types/DocSearchHit.ts @@ -0,0 +1,79 @@ +type ContentType = + | 'content' + | 'lvl0' + | 'lvl1' + | 'lvl2' + | 'lvl3' + | 'lvl4' + | 'lvl5' + | 'lvl6'; + +interface DocSearchHitAttributeHighlightResult { + value: string; + matchLevel: 'none' | 'partial' | 'full'; + matchedWords: string[]; + fullyHighlighted?: boolean; +} + +interface DocSearchHitHighlightResultHierarchy { + lvl0?: DocSearchHitAttributeHighlightResult; + lvl1?: DocSearchHitAttributeHighlightResult; + lvl2?: DocSearchHitAttributeHighlightResult; + lvl3?: DocSearchHitAttributeHighlightResult; + lvl4?: DocSearchHitAttributeHighlightResult; + lvl5?: DocSearchHitAttributeHighlightResult; + lvl6?: DocSearchHitAttributeHighlightResult; +} + +interface DocSearchHitHighlightResult { + content?: DocSearchHitAttributeHighlightResult; + hierarchy: DocSearchHitHighlightResultHierarchy; + hierarchy_camel: DocSearchHitHighlightResultHierarchy[]; +} + +interface DocSearchHitAttributeSnippetResult { + value: string; + matchLevel: 'none' | 'partial' | 'full'; +} + +interface DocSearchHitSnippetResult { + content: DocSearchHitAttributeSnippetResult; +} + +export interface DocSearchHit { + objectID: string; + content: string | null; + url: string; + url_without_anchor: string; + type: ContentType; + anchor: string | null; + hierarchy: { + lvl0: string | null; + lvl1: string | null; + lvl2: string | null; + lvl3: string | null; + lvl4: string | null; + lvl5: string | null; + lvl6: string | null; + }; + _highlightResult: DocSearchHitHighlightResult; + _snippetResult?: DocSearchHitSnippetResult; + _rankingInfo?: { + promoted: boolean; + nbTypos: number; + firstMatchedWord: number; + proximityDistance?: number; + geoDistance: number; + geoPrecision?: number; + nbExactWords: number; + words: number; + filters: number; + userScore: number; + matchedGeoLocation?: { + lat: number; + lng: number; + distance: number; + }; + }; + _distinctSeqID?: number; +} diff --git a/packages/docsearch-react/src/types/index.ts b/packages/docsearch-react/src/types/index.ts new file mode 100644 index 000000000..7a2b2fca0 --- /dev/null +++ b/packages/docsearch-react/src/types/index.ts @@ -0,0 +1 @@ +export * from './DocSearchHit'; diff --git a/packages/docsearch-react/src/utils/index.ts b/packages/docsearch-react/src/utils/index.ts new file mode 100644 index 000000000..24a16a88f --- /dev/null +++ b/packages/docsearch-react/src/utils/index.ts @@ -0,0 +1,12 @@ +export const noop = () => {}; + +export function groupBy(values, predicate) { + return values.reduce(function(obj, item) { + const key = predicate(item); + if (!obj.hasOwnProperty(key)) { + obj[key] = []; + } + obj[key].push(item); + return obj; + }, {}); +} From 12cacb1d7ae7ec1fdf03c371e8b2610b59075b05 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 24 Mar 2020 13:41:48 +0100 Subject: [PATCH 15/63] css WIP --- packages/docsearch-react/src/AlgoliaLogo.tsx | 20 +- .../src/ArrowDownCommandIcon.tsx | 11 +- packages/docsearch-react/src/DocSearch.tsx | 244 +++++++++++++----- packages/docsearch-react/src/style.css | 223 ++++++++-------- .../src/svg/icon_action_external.svg | 11 + .../src/svg/icon_action_goto.svg | 14 + .../src/svg/icon_source_anchor.svg | 11 + .../src/svg/icon_source_content.svg | 11 + .../src/svg/icon_source_page.svg | 11 + .../src/svg/icon_source_recent.svg | 16 ++ .../src/svg/light_footer_key_arrow-down.svg | 12 + .../src/svg/light_footer_key_arrow-up.svg | 12 + .../src/svg/light_footer_key_enter.svg | 14 + .../src/svg/light_footer_key_esc.svg | 11 + .../docsearch-react/src/svg/logo-alogia.svg | 11 + packages/website/docusaurus.config.js | 4 +- 16 files changed, 433 insertions(+), 203 deletions(-) create mode 100644 packages/docsearch-react/src/svg/icon_action_external.svg create mode 100644 packages/docsearch-react/src/svg/icon_action_goto.svg create mode 100644 packages/docsearch-react/src/svg/icon_source_anchor.svg create mode 100644 packages/docsearch-react/src/svg/icon_source_content.svg create mode 100644 packages/docsearch-react/src/svg/icon_source_page.svg create mode 100644 packages/docsearch-react/src/svg/icon_source_recent.svg create mode 100644 packages/docsearch-react/src/svg/light_footer_key_arrow-down.svg create mode 100644 packages/docsearch-react/src/svg/light_footer_key_arrow-up.svg create mode 100644 packages/docsearch-react/src/svg/light_footer_key_enter.svg create mode 100644 packages/docsearch-react/src/svg/light_footer_key_esc.svg create mode 100644 packages/docsearch-react/src/svg/logo-alogia.svg diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx index dece0cca7..7c471f79f 100644 --- a/packages/docsearch-react/src/AlgoliaLogo.tsx +++ b/packages/docsearch-react/src/AlgoliaLogo.tsx @@ -7,23 +7,9 @@ export function AlgoliaLogo() { target="_blank" rel="noopener noreferrer" > - - - - - + Search by + + ); diff --git a/packages/docsearch-react/src/ArrowDownCommandIcon.tsx b/packages/docsearch-react/src/ArrowDownCommandIcon.tsx index ce194109d..94ae10063 100644 --- a/packages/docsearch-react/src/ArrowDownCommandIcon.tsx +++ b/packages/docsearch-react/src/ArrowDownCommandIcon.tsx @@ -2,7 +2,7 @@ import React from 'react'; export function ArrowDownCommandIcon() { return ( - + - diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 82677eb38..2bdcb21da 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -10,10 +10,6 @@ import { import { DocSearchHit } from './types'; import { noop, groupBy } from './utils'; import { AlgoliaLogo } from './AlgoliaLogo'; -import { SelectCommandIcon } from './SelectCommandIcon'; -import { ArrowUpCommandIcon } from './ArrowUpCommandIcon'; -import { ArrowDownCommandIcon } from './ArrowDownCommandIcon'; -import { EscapeCommandIcon } from './EscapeCommandIcon'; import { SearchIcon } from './SearchIcon'; import { LoadingIcon } from './LoadingIcon'; import { ResetIcon } from './ResetIcon'; @@ -26,6 +22,83 @@ interface DocSearchProps { onClose(): void; } +function IconSource(props) { + switch (props.icon) { + case 'lvl1': + return ( + + + + ) + case 'content': + return ( + + + + ) + default: + return ( + + + + ) + } +} + +function IconAction(props) { + switch (props.icon) { + case 'goto-external': + return ( + + + + ) + default: + return ( + + + + + + + ) + } +} + +function IconKey(props) { + switch (props.icon) { + case 'arrow-down': + return ( + + + + + + ) + case 'arrow-up': return ( + + + + + ) + case 'enter': + return ( + + + + + + + ) + case 'escape': + return ( + + + + ) + } +} + export function DocSearch({ appId = 'BH4D9OD16A', apiKey, @@ -79,7 +152,7 @@ export function DocSearch({ params: { highlightPreTag: '', highlightPostTag: '', - hitsPerPage: 5, + hitsPerPage: 10, ...searchParameters, }, }, @@ -93,6 +166,39 @@ export function DocSearch({ [indexName, searchParameters, searchClient] ); + function groupBy(values, predicate) { + return values.reduce(function (obj, item) { + const key = predicate(item); + if (!obj.hasOwnProperty(key)) { + obj[key] = []; + } + obj[key].push(item); + return obj; + }, {}); + } + + function getLvl1(searchClient, treeLvl1) { + return searchClient + .search([ + { + indexName: 'autocomplete', + query: '', + params: { + facetFilters: ['type:lvl1'], + hitsPerPage: 1000, + attributesToRetrieve: '*', + attributesToSnippet: '*', + highlightPreTag: '', + highlightPostTag: '', + }, + }, + ]) + .then(results => { + const lvl1Hits = results.results[0].hits; + return lvl1Hits.filter(hit => !!treeLvl1.includes(hit.hierarchy.lvl1)); + }); + } + const inputRef = React.useRef(null); const { onSubmit, onReset } = getFormProps({ inputElement: inputRef.current, @@ -172,7 +278,7 @@ export function DocSearch({ {Object.entries(itemsGroupedByLevel).map( ([title, hits]) => (
-

{title}

+
{title}
    {hits.map((item, index) => { @@ -186,53 +292,55 @@ export function DocSearch({ })} > - ) )} + ); })} @@ -274,19 +379,32 @@ export function DocSearch({
    • - - to select + + + + + to select +
    • - - - + {/* */} + + + + + + + to navigate
    • - - to close + + + + + to close +
    diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 7a47207ee..34966afe8 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -1,9 +1,15 @@ :root { - --docsearch-input-color: #5d6494; - --docsearch-highlight-color: #5468ff; - --docsearch-background-light-color: #f5f5fa; + --docsearch-input-color: rgba(93,100,148,1); + --docsearch-highlight-color: var(--ifm-color-primary); + --docsearch-background-light-color:rgba(245,245,250,1); --docsearch-background-highlight-color: rgba(218, 219, 234, 0.4); --docsearch-border-color: rgba(197, 201, 224, 0.4); + --docsearch-container-color: rgba(34, 38, 51, 0.4); + --white: white; +} + +html[data-theme='dark'] { + --white: black; } .DocSearch-Container, @@ -12,7 +18,7 @@ } .DocSearch-Container { - background-color: rgba(34, 38, 51, 0.4); + background-color: var(--docsearch-container-color); height: 100vh; left: 0; position: fixed; @@ -21,12 +27,15 @@ } .DocSearch-Modal { - background-color: white; - border-radius: 8px; - box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.16); - margin: 60px auto auto auto; - max-width: 540px; width: 100%; + max-width: 590px; + margin: 60px auto auto auto; + background: var(--docsearch-background-light-color); + box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), + 0px 3px 8px 0px rgba(116, 134, 169, 0.54); + border-radius: 6px; + display: flex; + flex-direction: column; } .DocSearch-Modal a { @@ -34,13 +43,18 @@ } .DocSearch-Footer { + z-index: 9999; align-items: center; display: flex; - font-size: 0.9rem; justify-content: space-between; - padding: 8px 16px; color: rgb(150, 146, 146); border-top: solid 1px #eee; + flex-shrink: 0; + padding: 0 12px; + height: 45px; + background: rgb(255, 255, 255); + box-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); + border-radius: 0px 0px 8px 8px; } .DocSearch-Commands { @@ -54,17 +68,14 @@ margin-right: 8px; } -.DocSearch-Logo { - align-items: center; +.DocSearch-Logo a { display: flex; } - -.DocSearch-Logo a { - line-height: 0; +.DocSearch-Logo svg { + margin-left: 8px; } .DocSearch-SearchBar { - border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; flex: 1; } @@ -74,23 +85,27 @@ background-color: #fff; border-radius: 6px; display: flex; - margin: 0; - padding: 0 8px; + padding: 0 12px; position: relative; width: 100%; + height: 60px; + background: rgb(212, 217, 225); + box-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), + inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px rgb(255, 255, 255); + border-radius: 4px; + margin: 12px; } .DocSearch-Input { - -webkit-appearance: none; - -moz-appearance: none; + flex-grow: 1; + padding-left: 8px; appearance: none; - background: inherit; + background: transparent; border: none; font: inherit; height: 100%; outline: none; - padding: 1rem; - width: 100%; + font-size: 1.2em; } .DocSearch-Input::-webkit-search-cancel-button, @@ -104,8 +119,10 @@ .DocSearch-MagnifierLabel, .DocSearch-Reset { color: var(--docsearch-input-color); - height: 2rem; - width: 2rem; + height: 30px; + width: 30px; + margin: 0; + padding: 0; } .DocSearch-Container--Stalled .DocSearch-LoadingIndicator, @@ -141,7 +158,6 @@ .DocSearch-Reset:focus { background: var(--docsearch-background-light-color); - color: #5468ff; color: var(--docsearch-highlight-color); outline: none; } @@ -158,10 +174,10 @@ } .DocSearch-Dropdown { - overflow: scroll; - -ms-overflow-style: none; - padding: 0; - scrollbar-width: none; + padding: 0 12px; + flex: 1 0 auto; + height: 280px; + overflow-y: scroll; } .DocSearch-Dropdown::-webkit-scrollbar { @@ -171,7 +187,7 @@ .DocSearch-Dropdown ul { list-style: none; margin: 0; - padding: 4px 4px 0; + padding: 0; } .DocSearch-Dropdown-Container { @@ -180,62 +196,34 @@ .DocSearch-Commands { display: flex; - color: var(--docsearch-docsearch-text-color); -} -.DocSearch-Commands-border { - color: var(--docsearch-autocomplete-border-color); + color: var(--ifm-color-emphasis-600); } -.DocSearch-Commands-description { - font-size: 0.75rem; - letter-spacing: 0; - margin-left: 0.25rem; + +.DocSearch-Hint { + font-size: 0.8em; + color: var(--ifm-color-emphasis-500); } + .DocSearch-Commands li { display: flex; align-items: center; - margin-right: 1rem; -} -.DocSearch-Commands svg { - height: 1rem; - width: 1rem; -} -.DocSearch-Commands svg + svg { - margin-left: 0.125rem; -} - -:root { - --algolia-autocomplete-input-color: var(--ifm-link-color); - --algolia-autocomplete-highlight-color: var(--ifm-link-color); - --algolia-autocomplete-background-highlight-color: var( - --ifm-color-emphasis-200 - ); - --algolia-autocomplete-border-color: rgba(197, 201, 224, 0.4); - --algolia-docsearch-lvl0-color: var(--ifm-link-color); - --algolia-docsearch-logo-color-outer: #5468ff; - --algolia-docsearch-logo-color-inner: #fff; - --algolia-docsearch-text-color: var(--ifm-color-emphasis-600); - --algolia-docsearch-tree-color: rgba(197, 201, 224, 0.8); - --algolia-autocomplete-shadow-color: rgba(197, 201, 224, 0.8); - --algolia-autocomplete-shadow-color-alpha: rgba(197, 201, 224, 0.4); - --algolia-autocomplete-searchbox-background-color: var( - --ifm-color-emphasis-200 - ); } -html[data-theme='dark'] { - --algolia-autocomplete-input-color: var(--ifm-link-color); - --algolia-autocomplete-background-highlight-color: var( - --ifm-navbar-background-color - ); - --algolia-autocomplete-searchbox-background-color: var( - --ifm-background-color +.DocSearch-Commands-key { + display: flex; + align-items: center; + justify-content: center; + width: 21px; + height: 19px; + background: linear-gradient( + -225deg, + rgb(213, 219, 228) 0%, + rgb(248, 248, 248) 100% ); - --algolia-docsearch-tree-color: var(--solstice-blue); - --algolia-autocomplete-border-color: var(--solstice-blue); - --algolia-autocomplete-shadow-color: rgba(0, 0, 0, 0.8); - --algolia-autocomplete-shadow-color-alpha: rgba(0, 0, 0, 0.4); - --algolia-docsearch-logo-color-outer: var(--white); - --algolia-docsearch-logo-color-inner: var(--ifm-background-color); + box-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), + inset 0px 0px 1px 1px var(--white), 0px 1px 2px 1px rgba(29, 37, 89, 0.38); + border-radius: 3px; + margin-right: 0.4rem; } .DocSearch-Hits mark { @@ -245,39 +233,44 @@ html[data-theme='dark'] { .DocSearch-Hit { border-radius: 4px; + background: var(--white); + box-shadow: 0px 2px 6px 0px rgb(212, 217, 225); } .DocSearch-Hit[aria-selected='true'] { - background-color: var(--algolia-docsearch-logo-color-outer); + transition: all ease 0.2s; + background-color: var(--docsearch-highlight-color); } .DocSearch-Hit[aria-selected='true'] .DSV3-title, .DocSearch-Hit[aria-selected='true'] mark, -.DocSearch-Hit[aria-selected='true'] .DSV3-text { -color: white!important; +.DocSearch-Hit[aria-selected='true'] .DSV3-text, +.DocSearch-Hit[aria-selected='true'] .DSV3-path { + color: var(--white) !important; +} + +.DocSearch-Hit[aria-selected='true'] .DSV3-icon { + color: #f5f5fa; + opacity: 0.5; } .DocSearch-Hit a { - border-top: solid 1px #eee; display: block; + height: 60px; + border-radius: 4px; + margin-bottom: 4px; } .DocSearch-Hit[aria-selected='true'] mark { text-decoration: underline; } -.DSV3-content-wrapper { -} - -.DSV3-cat-separator { +.DSV3-source { width: 100%; - font-size: 0.6em; - font-weight: 500; - letter-spacing: 1px; - line-height: 1em; - text-transform: uppercase; - background: var(--ifm-color-emphasis-100); - color: var(--ifm-color-emphasis-600); - padding: 6px 8px; + font-size: 0.8em; + color: var(--docsearch-highlight-color); + margin-bottom: 8px; + font-weight: 600; + letter-spacing: 0px; } .DSV3-lvl1, @@ -285,38 +278,45 @@ color: white!important; .DSV3-lvl3, .DSV3-content { height: 60px; - padding-left: 12px; + padding: 0 12px; display: flex; flex-direction: row; align-items: center; width: 100%; - line-height: 1.2em; +} + +.DSV3-icon { + height: 20px; + width: 20px; + margin-right: 8px; + color: var(--ifm-color-emphasis-400); } .DSV3-title { display: inline-block; text-align: left; - /* overflow-y: hidden; */ white-space: nowrap; text-overflow: ellipsis; - font-size: .9em; + font-size: 0.9em; font-weight: 500; line-height: 1em; color: var(--ifm-color-emphasis-800); } -.DSV3-icon { - display: inline-block; - font-size: 1.1em; - color: var(--ifm-color-emphasis-600); - position: relative; - top: -2px; - margin-right: 8px; -} -.DSV3-text { + +.DSV3-path { display: inline-block; font-size: 0.7em; color: var(--ifm-color-emphasis-600); } + +.DSV3-action { + height: 20px; + width: 20px; + margin-left: 8px; + opacity: 50%; + color: var(--ifm-color-emphasis-400); +} + .DSV3-separator { display: inline-block; font-size: 0.7em; @@ -324,6 +324,7 @@ color: white!important; color: var(--ifm-color-emphasis-500); } -html[data-theme='dark'] .algolia-autocomplete-dropdown { - background-color: black; +.DSV3-content-wrapper { + flex: 1 0 auto; + line-height: 0.8em; } diff --git a/packages/docsearch-react/src/svg/icon_action_external.svg b/packages/docsearch-react/src/svg/icon_action_external.svg new file mode 100644 index 000000000..24adf7f84 --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_action_external.svg @@ -0,0 +1,11 @@ + + + + 1c947b1e-eb2b-4ad3-ac34-75998ca8847a@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_action_goto.svg b/packages/docsearch-react/src/svg/icon_action_goto.svg new file mode 100644 index 000000000..75d9c10af --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_action_goto.svg @@ -0,0 +1,14 @@ + + + + 0bbf3e84-a704-4009-b847-878bfff69b3a@1.00x + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_source_anchor.svg b/packages/docsearch-react/src/svg/icon_source_anchor.svg new file mode 100644 index 000000000..c6b1279cf --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_source_anchor.svg @@ -0,0 +1,11 @@ + + + + 226da284-edfd-4e5d-b476-24aa1785a55d@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_source_content.svg b/packages/docsearch-react/src/svg/icon_source_content.svg new file mode 100644 index 000000000..108d8fc44 --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_source_content.svg @@ -0,0 +1,11 @@ + + + + cb7c1d97-063b-4e35-abd4-814d969ec204@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_source_page.svg b/packages/docsearch-react/src/svg/icon_source_page.svg new file mode 100644 index 000000000..0f15d9f07 --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_source_page.svg @@ -0,0 +1,11 @@ + + + + d03b3fbd-ebdd-469d-90ae-95dad09a90c5@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_source_recent.svg b/packages/docsearch-react/src/svg/icon_source_recent.svg new file mode 100644 index 000000000..8e16b686b --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_source_recent.svg @@ -0,0 +1,16 @@ + + + + ee397e5b-5117-4da7-bdc8-0d42da41349d@1.00x + Created with sketchtool. + + + + + + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/light_footer_key_arrow-down.svg b/packages/docsearch-react/src/svg/light_footer_key_arrow-down.svg new file mode 100644 index 000000000..7463f23d9 --- /dev/null +++ b/packages/docsearch-react/src/svg/light_footer_key_arrow-down.svg @@ -0,0 +1,12 @@ + + + + ba2c8f8b-aab6-4715-b010-a3c910a1a4ea@1.00x + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/light_footer_key_arrow-up.svg b/packages/docsearch-react/src/svg/light_footer_key_arrow-up.svg new file mode 100644 index 000000000..1c9310492 --- /dev/null +++ b/packages/docsearch-react/src/svg/light_footer_key_arrow-up.svg @@ -0,0 +1,12 @@ + + + + 67191d53-11cf-4c86-9c2e-8580c0fd5d08@1.00x + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/light_footer_key_enter.svg b/packages/docsearch-react/src/svg/light_footer_key_enter.svg new file mode 100644 index 000000000..85226e532 --- /dev/null +++ b/packages/docsearch-react/src/svg/light_footer_key_enter.svg @@ -0,0 +1,14 @@ + + + + f879c873-9cca-4202-b665-1ec6b93bb126@1.00x + Created with sketchtool. + + + + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/light_footer_key_esc.svg b/packages/docsearch-react/src/svg/light_footer_key_esc.svg new file mode 100644 index 000000000..f693037c1 --- /dev/null +++ b/packages/docsearch-react/src/svg/light_footer_key_esc.svg @@ -0,0 +1,11 @@ + + + + 67ddc381-274d-431d-a5d3-cf7d76b0c2cd@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/logo-alogia.svg b/packages/docsearch-react/src/svg/logo-alogia.svg new file mode 100644 index 000000000..84502dc62 --- /dev/null +++ b/packages/docsearch-react/src/svg/logo-alogia.svg @@ -0,0 +1,11 @@ + + + + EE8C1461-B989-46C5-8B49-7EEB61DCD522@1.00x + Created with sketchtool. + + + + + + \ No newline at end of file diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js index 7930e6b4b..c2ee4d8b0 100644 --- a/packages/website/docusaurus.config.js +++ b/packages/website/docusaurus.config.js @@ -88,8 +88,8 @@ module.exports = { copyright: `Copyright © ${new Date().getFullYear()} • Designed and built by Algolia`, }, algolia: { - indexName: 'docsearch', - apiKey: '25626fae796133dc1e734c6bcaaeac3c', + indexName: 'autocomplete', + apiKey: 'a5c3ccfd361b8bcb9708e679c43ae0e5', }, }, presets: [ From 03ea7665effe0e0cdb2dbf9b8c5a9d7b5d5e24a9 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 24 Mar 2020 18:43:48 +0100 Subject: [PATCH 16/63] css --- packages/docsearch-react/src/DocSearch.tsx | 28 +-- packages/docsearch-react/src/SearchIcon.tsx | 2 +- packages/docsearch-react/src/style.css | 212 ++++++++++++-------- 3 files changed, 140 insertions(+), 102 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 2bdcb21da..c75919be6 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -278,7 +278,7 @@ export function DocSearch({ {Object.entries(itemsGroupedByLevel).map( ([title, hits]) => (
    -
    {title}
    +
    {title}
      {hits.map((item, index) => { @@ -294,7 +294,7 @@ export function DocSearch({
      -
      +
      {item.hierarchy[item.type] && item.type === 'lvl1' && ( -
      +

      {item.content && ( )}
      )} {item.hierarchy[item.type] && (item.type === 'lvl2' || item.type === 'lvl3') && ( -
      +

      )} {item.type === 'content' && ( -
      +
      - ... + ...
      )} -
      +
      diff --git a/packages/docsearch-react/src/SearchIcon.tsx b/packages/docsearch-react/src/SearchIcon.tsx index bfc39e08e..fab22ae79 100644 --- a/packages/docsearch-react/src/SearchIcon.tsx +++ b/packages/docsearch-react/src/SearchIcon.tsx @@ -6,7 +6,7 @@ export function SearchIcon() { Date: Tue, 24 Mar 2020 19:49:44 +0100 Subject: [PATCH 17/63] css --- packages/docsearch-react/src/style.css | 69 ++++++++++++++------------ 1 file changed, 38 insertions(+), 31 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index c2aa3f27c..4a087246d 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -1,11 +1,13 @@ /* Variables */ :root { + --docsearch-placeholder-color: rgb(149, 165, 190); --docsearch-highlight-color: var(--ifm-color-primary); - --docsearch-background-light-color: var(--ifm-color-emphasis-200); - --docsearch-container-color: rgb(60, 72, 96, 0.5); + --docsearch-container-background: rgb(60, 72, 96, 0.5); + --docsearch-modal-background: var(--ifm-color-emphasis-100); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 0px 3px 8px 0px rgba(116, 134, 169, 0.54); + --docsearch-searchbox-background: rgb(212, 217, 225); --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px rgb(255, 255, 255); --docsearch-hit-background: white; @@ -16,20 +18,30 @@ rgb(248, 248, 248) 100% ); --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), - inset 0px 0px 1px 1px var(--white), 0px 1px 2px 1px rgba(29, 37, 89, 0.38); + inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(29, 37, 89, 0.38); + --docsearch-footer-background: white; --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); - --white: white; } /* Darkmode */ html[data-theme='dark'] { --docsearch-highlight-color: var(--ifm-color-primary); - --docsearch-background-light-color: var(--ifm-color-emphasis-200); - --docsearch-container-color: rgba(48, 51, 84, .5); + --docsearch-container-background: rgba(9, 10, 17, .8); + --docsearch-modal-background: rgb(21, 23, 42); + --docsearch-modal-shadow: inset 1px 1px 0px 0px rgb(44, 46, 64), + 0px 3px 8px 0px rgb(0, 3, 9); + --docsearch-searchbox-background: rgb(9, 10, 17); + --docsearch-searchbox-shadow: inset 0px 0px 1px 1px rgba(84, 104, 255, 0.6); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(48, 51, 84); - --white: black; + --docsearch-footer-background:rgb(30, 33, 54); + --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.52), +0px -4px 8px 0px rgba(0, 0, 0, 0.34); +--docsearch-key-gradient: linear-gradient(-26.56505117707799deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%); + --docsearch-key-shadow:inset 0px -2px 0px 0px rgb(40, 45, 85), +inset 0px 0px 1px 1px rgb(81, 87, 125), +0px 2px 2px 0px rgb(3, 4, 9); } @@ -48,7 +60,7 @@ html[data-theme='dark'] { position: fixed; left: 0; top: 0; - background-color: var(--docsearch-container-color); + background-color: var(--docsearch-container-background); } /* Modal */ @@ -60,7 +72,7 @@ html[data-theme='dark'] { max-width: 590px; margin: 60px auto auto auto; border-radius: 6px; - background: var(--docsearch-background-light-color); + background: var(--docsearch-modal-background); box-shadow: var(--docsearch-modal-shadow) } @@ -84,7 +96,7 @@ html[data-theme='dark'] { margin: 12px; align-items: center; border-radius: 4px; - background: var(--ifm-color-emphasis-300); + background: var(--docsearch-searchbox-background); box-shadow: var(--docsearch-searchbox-shadow); } @@ -101,7 +113,7 @@ html[data-theme='dark'] { } .DocSearch-Input::placeholder { - color: var(--ifm-color-emphasis-600); + color: var(--docsearch-placeholder-color); } .DocSearch-Input::-webkit-search-cancel-button, @@ -153,7 +165,6 @@ html[data-theme='dark'] { } .DocSearch-Reset:focus { - background: var(--docsearch-background-light-color); color: var(--docsearch-highlight-color); outline: none; } @@ -176,9 +187,9 @@ html[data-theme='dark'] { /* Dropdown */ .DocSearch-Dropdown { - padding: 0 12px; + padding: 0 12px 20px; flex: 1 0 auto; - height: 280px; + height: 380px; overflow-y: scroll; } @@ -206,9 +217,9 @@ html[data-theme='dark'] { flex-shrink: 0; justify-content: space-between; align-items: center; - background: var(--ifm-navbar-background-color); + background: var(--docsearch-footer-background); box-shadow: var(--docsearch-footer-shadow); - border-radius: 0px 0px 8px 8px; + border-radius: 0 0 8px 8px; } .DocSearch-Commands { @@ -277,12 +288,12 @@ html[data-theme='dark'] { .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title, .DocSearch-Hit[aria-selected='true'] mark, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path { +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { color: var(--ifm-alert-color) !important; } .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { - color: var(--ifm-alert-color); opacity: 0.5; } @@ -310,12 +321,12 @@ html[data-theme='dark'] { .DocSearch-Hit-lvl2, .DocSearch-Hit-lvl3, .DocSearch-Hit-content { + display: flex; + width: 100%; height: 60px; padding: 0 12px; - display: flex; flex-direction: row; align-items: center; - width: 100%; } .DocSearch-Hit-icon { @@ -325,19 +336,18 @@ html[data-theme='dark'] { color: var(--ifm-color-emphasis-400); } +.DocSearch-Hit-content-wrapper { + flex: 1 0 auto; + line-height: 0.9em; +} + .DocSearch-Hit-title { - display: inline-block; - text-align: left; - white-space: nowrap; - text-overflow: ellipsis; font-size: 0.9em; font-weight: 500; - line-height: 1em; color: var(--ifm-color-emphasis-800); } .DocSearch-Hit-path { - display: inline-block; font-size: 0.7em; color: var(--ifm-color-emphasis-600); } @@ -351,18 +361,15 @@ html[data-theme='dark'] { } .DocSearch-Hit-separator { - display: inline-block; font-size: 0.7em; margin: 0 0.2rem; color: var(--ifm-color-emphasis-500); } -.DocSearch-Hit-content-wrapper { - flex: 1 0 auto; - line-height: 0.8em; -} + /* Icons */ +/* Responsive */ From e9ade13e1cb6648a21e380464e2ea625a24be6b8 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 24 Mar 2020 21:23:24 +0100 Subject: [PATCH 18/63] css --- packages/docsearch-react/src/AlgoliaLogo.tsx | 2 +- packages/docsearch-react/src/DocSearch.tsx | 6 +- packages/docsearch-react/src/style.css | 133 +++++++++---------- 3 files changed, 67 insertions(+), 74 deletions(-) diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx index 7c471f79f..5a60882ce 100644 --- a/packages/docsearch-react/src/AlgoliaLogo.tsx +++ b/packages/docsearch-react/src/AlgoliaLogo.tsx @@ -7,7 +7,7 @@ export function AlgoliaLogo() { target="_blank" rel="noopener noreferrer" > - Search by + Search by diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index c75919be6..5f6ae11d3 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -382,7 +382,7 @@ export function DocSearch({ - + to select @@ -394,7 +394,7 @@ export function DocSearch({ - + to navigate @@ -402,7 +402,7 @@ export function DocSearch({ - + to close diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 4a087246d..8ccfb41bc 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -1,26 +1,31 @@ /* Variables */ :root { - --docsearch-placeholder-color: rgb(149, 165, 190); + --docsearch-input-color: var(--ifm-color-emphasis-800); --docsearch-highlight-color: var(--ifm-color-primary); + --docsearch-placeholder-color: rgb(149, 165, 190); --docsearch-container-background: rgb(60, 72, 96, 0.5); --docsearch-modal-background: var(--ifm-color-emphasis-100); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 0px 3px 8px 0px rgba(116, 134, 169, 0.54); --docsearch-searchbox-background: rgb(212, 217, 225); --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), - inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px rgb(255, 255, 255); + inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px rgb(255, 255, 255); + --docsearch-hit-color: var(--ifm-color-emphasis-800); + --docsearch-hit-active-color: white; + --docsearch-hit-icon-color: var(--ifm-color-emphasis-500); --docsearch-hit-background: white; --docsearch-hit-shadow: 0px 2px 6px 0px rgb(212, 217, 225); --docsearch-key-gradient: linear-gradient( -225deg, rgb(213, 219, 228) 0%, rgb(248, 248, 248) 100% - ); - --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), + ); + --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(29, 37, 89, 0.38); - --docsearch-footer-background: white; - --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); + --docsearch-footer-background: white; + --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); + --docsearch-label-color: var(--ifm-color-emphasis-500); } /* Darkmode */ @@ -33,21 +38,23 @@ html[data-theme='dark'] { 0px 3px 8px 0px rgb(0, 3, 9); --docsearch-searchbox-background: rgb(9, 10, 17); --docsearch-searchbox-shadow: inset 0px 0px 1px 1px rgba(84, 104, 255, 0.6); + --docsearch-hit-color: var(--ifm-color-emphasis-500); + --docsearch-hit-icon-color: var(--ifm-color-emphasis-300); --docsearch-hit-shadow: none; - --docsearch-hit-background: rgb(48, 51, 84); + --docsearch-hit-background: rgb(9, 10, 17); + --docsearch-key-gradient: linear-gradient(-26.56505117707799deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%); + --docsearch-key-shadow:inset 0px -2px 0px 0px rgb(40, 45, 85), + inset 0px 0px 1px 1px rgb(81, 87, 125), + 0px 2px 2px 0px rgb(3, 4, 9); --docsearch-footer-background:rgb(30, 33, 54); --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.52), -0px -4px 8px 0px rgba(0, 0, 0, 0.34); ---docsearch-key-gradient: linear-gradient(-26.56505117707799deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%); - --docsearch-key-shadow:inset 0px -2px 0px 0px rgb(40, 45, 85), -inset 0px 0px 1px 1px rgb(81, 87, 125), -0px 2px 2px 0px rgb(3, 4, 9); + 0px -4px 8px 0px rgba(0, 0, 0, 0.34); + --docsearch-label-color: rgb(109, 113, 163); } - /* Search Button */ -/* Container */ +/* Container & Modal */ .DocSearch-Container, .DocSearch-Container * { @@ -63,7 +70,9 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), background-color: var(--docsearch-container-background); } -/* Modal */ +.DocSearch-Container a { + text-decoration: none; +} .DocSearch-Modal { display: flex; @@ -76,11 +85,7 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), box-shadow: var(--docsearch-modal-shadow) } -.DocSearch-Modal a { - text-decoration: none; -} - -/* Searchbox */ +/* Modal Searchbox */ .DocSearch-SearchBar { display: flex; @@ -110,6 +115,7 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), border: none; outline: none; background: transparent; + color: var(--docsearch-input-color); } .DocSearch-Input::placeholder { @@ -126,7 +132,6 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), .DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset { - color: var(--docsearch-input-color); height: 30px; width: 30px; margin: 0; @@ -153,11 +158,11 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), -webkit-appearance: none; -moz-appearance: none; appearance: none; - background: none; + right: 0; border: none; border-radius: 50%; + background: none; cursor: pointer; - right: 0; } .DocSearch-Reset[hidden] { @@ -184,42 +189,39 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), color: var(--docsearch-highlight-color); } -/* Dropdown */ +/* Modal Dropdown */ .DocSearch-Dropdown { + height: 380px; padding: 0 12px 20px; flex: 1 0 auto; - height: 380px; overflow-y: scroll; -} - -.DocSearch-Dropdown::-webkit-scrollbar { - display: none; + letter-spacing: .02em; } .DocSearch-Dropdown ul { - list-style: none; margin: 0; padding: 0; + list-style: none; } .DocSearch-Dropdown-Container { position: relative; } -/* Footer */ +/* Modal Footer */ .DocSearch-Footer { display: flex; - height: 45px; - padding: 0 12px; + height: 40px; z-index: 9999; + padding: 0 12px; flex-shrink: 0; justify-content: space-between; align-items: center; + border-radius: 0 0 8px 8px; background: var(--docsearch-footer-background); box-shadow: var(--docsearch-footer-shadow); - border-radius: 0 0 8px 8px; } .DocSearch-Commands { @@ -230,14 +232,7 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), } .DocSearch-Commands li:not(:last-of-type) { - margin-right: 8px; -} - -.DocSearch-Logo a { - display: flex; -} -.DocSearch-Logo svg { - margin-left: 8px; + margin-right: 12px; } .DocSearch-Commands { @@ -245,11 +240,6 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), color: var(--ifm-color-emphasis-600); } -.DocSearch-Hint { - font-size: 0.8em; - color: var(--ifm-color-emphasis-500); -} - .DocSearch-Commands li { display: flex; align-items: center; @@ -262,11 +252,24 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), width: 21px; height: 19px; border-radius: 2px; - margin-right: 4px; + margin-right: 6px; background: var(--docsearch-key-gradient); box-shadow: var(--docsearch-key-shadow); } +.DocSearch-Logo a { + display: flex; +} + +.DocSearch-Logo svg { + margin-left: 8px; +} + +.DocSearch-Label { + font-size: 0.75em; + color: var(--docsearch-label-color); +} + /* Hit */ .DocSearch-Hits mark { @@ -289,12 +292,14 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), .DocSearch-Hit[aria-selected='true'] mark, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-text, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { - color: var(--ifm-alert-color) !important; +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon, +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action { + color: var(--docsearch-hit-active-color) !important; } +.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { - opacity: 0.5; + opacity: .5; } .DocSearch-Hit a { @@ -309,12 +314,10 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), } .DocSearch-Hit-source { - width: 100%; - font-size: 0.8em; - color: var(--docsearch-highlight-color); margin-bottom: 8px; + font-size: 0.9em; font-weight: 600; - letter-spacing: 0px; + color: var(--docsearch-highlight-color); } .DocSearch-Hit-lvl1, @@ -322,18 +325,18 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), .DocSearch-Hit-lvl3, .DocSearch-Hit-content { display: flex; - width: 100%; height: 60px; padding: 0 12px; flex-direction: row; align-items: center; + color: var(--docsearch-hit-color); } .DocSearch-Hit-icon { height: 20px; width: 20px; margin-right: 8px; - color: var(--ifm-color-emphasis-400); + color: var(--docsearch-hit-icon-color); } .DocSearch-Hit-content-wrapper { @@ -344,32 +347,22 @@ inset 0px 0px 1px 1px rgb(81, 87, 125), .DocSearch-Hit-title { font-size: 0.9em; font-weight: 500; - color: var(--ifm-color-emphasis-800); } .DocSearch-Hit-path { font-size: 0.7em; - color: var(--ifm-color-emphasis-600); + opacity: .5; } .DocSearch-Hit-action { height: 20px; width: 20px; margin-left: 8px; - opacity: 50%; - color: var(--ifm-color-emphasis-400); -} - -.DocSearch-Hit-separator { - font-size: 0.7em; - margin: 0 0.2rem; - color: var(--ifm-color-emphasis-500); + opacity: .5; + color: var(--docsearch-hit-icon-color); } - - /* Icons */ - /* Responsive */ From 425a0af2668281a217701114dc93e284ad6c9c39 Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 24 Mar 2020 21:48:02 +0100 Subject: [PATCH 19/63] css --- packages/docsearch-react/src/AlgoliaLogo.tsx | 2 +- packages/docsearch-react/src/DocSearch.tsx | 10 ++-------- packages/docsearch-react/src/style.css | 7 +++++-- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx index 5a60882ce..5e7a613ea 100644 --- a/packages/docsearch-react/src/AlgoliaLogo.tsx +++ b/packages/docsearch-react/src/AlgoliaLogo.tsx @@ -9,7 +9,7 @@ export function AlgoliaLogo() { > Search by - + ); diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 5f6ae11d3..22cf2c37b 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -313,7 +313,7 @@ export function DocSearch({ attribute="hierarchy.lvl1" className="DocSearch-Hit-title" /> -
      + {item.content && ( -
      - -
      )} {item.type === 'content' && ( @@ -348,15 +345,12 @@ export function DocSearch({ attribute="content" className="DocSearch-Hit-title" /> - ... -
      - + {/* ... */} -
      )}
      diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 8ccfb41bc..02907fc71 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -340,12 +340,15 @@ html[data-theme='dark'] { } .DocSearch-Hit-content-wrapper { + display: flex; flex: 1 0 auto; - line-height: 0.9em; + justify-content: center; + flex-direction: column; + line-height: 1.1em; } .DocSearch-Hit-title { - font-size: 0.9em; + font-size: .9em; font-weight: 500; } From bcb81a395760557d02236a40d097f2d29cd7cefb Mon Sep 17 00:00:00 2001 From: Shipow Date: Tue, 24 Mar 2020 23:31:14 +0100 Subject: [PATCH 20/63] css + icons --- packages/docsearch-react/src/DocSearch.tsx | 253 +++++++++++---------- packages/docsearch-react/src/style.css | 14 +- 2 files changed, 133 insertions(+), 134 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 22cf2c37b..9f0d4ea8b 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -27,21 +27,43 @@ function IconSource(props) { case 'lvl1': return ( - + - ) + ); case 'content': return ( - + - ) + ); default: return ( - + - ) + ); } } @@ -50,53 +72,62 @@ function IconAction(props) { case 'goto-external': return ( - + - ) + ); default: return ( - + - ) + ); } } function IconKey(props) { - switch (props.icon) { - case 'arrow-down': - return ( - - - - - - ) - case 'arrow-up': return ( - - - - - ) - case 'enter': - return ( - - - - - - - ) - case 'escape': - return ( - - - - ) - } + const icon = () => { + switch (props.icon) { + case 'arrow-down': + return ; + case 'arrow-up': + return ; + case 'enter': + return ; + case 'escape': + return ( + + ); + default: + return null; + } + }; + return ( + + + {icon()} + + + ); } export function DocSearch({ @@ -166,38 +197,27 @@ export function DocSearch({ [indexName, searchParameters, searchClient] ); - function groupBy(values, predicate) { - return values.reduce(function (obj, item) { - const key = predicate(item); - if (!obj.hasOwnProperty(key)) { - obj[key] = []; - } - obj[key].push(item); - return obj; - }, {}); - } - - function getLvl1(searchClient, treeLvl1) { - return searchClient - .search([ - { - indexName: 'autocomplete', - query: '', - params: { - facetFilters: ['type:lvl1'], - hitsPerPage: 1000, - attributesToRetrieve: '*', - attributesToSnippet: '*', - highlightPreTag: '', - highlightPostTag: '', - }, - }, - ]) - .then(results => { - const lvl1Hits = results.results[0].hits; - return lvl1Hits.filter(hit => !!treeLvl1.includes(hit.hierarchy.lvl1)); - }); - } + // function getLvl1(searchClient, treeLvl1) { + // return searchClient + // .search([ + // { + // indexName: 'autocomplete', + // query: '', + // params: { + // facetFilters: ['type:lvl1'], + // hitsPerPage: 1000, + // attributesToRetrieve: '*', + // attributesToSnippet: '*', + // highlightPreTag: '', + // highlightPostTag: '', + // }, + // }, + // ]) + // .then(results => { + // const lvl1Hits = results.results[0].hits; + // return lvl1Hits.filter(hit => !!treeLvl1.includes(hit.hierarchy.lvl1)); + // }); + // } const inputRef = React.useRef(null); const { onSubmit, onReset } = getFormProps({ @@ -238,8 +258,6 @@ export function DocSearch({
      - {/* - // @ts-ignore */} -
      +
      - {item.hierarchy[item.type] && item.type === 'lvl1' && ( -
      - - - {item.content && ( - - )} -
      - )} - {item.hierarchy[item.type] && (item.type === 'lvl2' || - item.type === 'lvl3') && ( + {item.hierarchy[item.type] && + item.type === 'lvl1' && (
      - + )} +
      + )} + {item.hierarchy[item.type] && + (item.type === 'lvl2' || + item.type === 'lvl3') && ( +
      + +
      )} {item.type === 'content' && ( @@ -346,14 +355,16 @@ export function DocSearch({ className="DocSearch-Hit-title" /> {/* ... */} - +
      )} -
      +
      + +
      @@ -363,7 +374,6 @@ export function DocSearch({
      ) )} - ); })} @@ -376,29 +386,22 @@ export function DocSearch({ - - to select - + to select
    • - {/* */} - - to navigate - + to navigate
    • - - to close - + to close
    diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 02907fc71..7e7acdec6 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -141,11 +141,8 @@ html[data-theme='dark'] { .DocSearch-Container--Stalled .DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset { - align-items: center; - -webkit-box-align: center; - -webkit-box-pack: center; - display: -webkit-box; display: flex; + align-items: center; justify-content: center; } @@ -155,8 +152,6 @@ html[data-theme='dark'] { } .DocSearch-Reset { - -webkit-appearance: none; - -moz-appearance: none; appearance: none; right: 0; border: none; @@ -213,7 +208,7 @@ html[data-theme='dark'] { .DocSearch-Footer { display: flex; - height: 40px; + height: 48px; z-index: 9999; padding: 0 12px; flex-shrink: 0; @@ -284,7 +279,7 @@ html[data-theme='dark'] { } .DocSearch-Hit[aria-selected='true'] { - transition: all ease 0.2s; + transition: background-color ease 0.1s; background-color: var(--docsearch-highlight-color); } @@ -315,9 +310,10 @@ html[data-theme='dark'] { .DocSearch-Hit-source { margin-bottom: 8px; - font-size: 0.9em; + font-size: 0.85em; font-weight: 600; color: var(--docsearch-highlight-color); + letter-spacing: 0; } .DocSearch-Hit-lvl1, From 3cc8a3d149d059440493529c3b1bcfecc1937f32 Mon Sep 17 00:00:00 2001 From: Shipow Date: Wed, 25 Mar 2020 08:22:47 +0100 Subject: [PATCH 21/63] search button --- packages/docsearch-react/src/DocSearch.tsx | 13 +++++++++ packages/docsearch-react/src/style.css | 27 ++++++++++++++++++- .../src/svg/icon_action_goto.svg | 8 +++--- .../src/svg/icon_source_anchor.svg | 9 ++++--- .../src/svg/icon_source_content.svg | 8 +++--- .../src/svg/icon_source_page.svg | 4 +-- .../src/svg/icon_tree_child.svg | 12 +++++++++ .../src/svg/icon_tree_last-child.svg | 12 +++++++++ .../src/theme/SearchBar/SearchButton.jsx | 6 +++-- 9 files changed, 84 insertions(+), 15 deletions(-) create mode 100644 packages/docsearch-react/src/svg/icon_tree_child.svg create mode 100644 packages/docsearch-react/src/svg/icon_tree_last-child.svg diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 9f0d4ea8b..f19fade2f 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -98,6 +98,19 @@ function IconAction(props) { } } +function IconTree(props) { + switch (props.icon) { + case 'goto-external': + return ( +"" + ); + default: + return ( +"" + ); + } +} + function IconKey(props) { const icon = () => { switch (props.icon) { diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 7e7acdec6..ddfbf1fb2 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -10,7 +10,7 @@ 0px 3px 8px 0px rgba(116, 134, 169, 0.54); --docsearch-searchbox-background: rgb(212, 217, 225); --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), - inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px rgb(255, 255, 255); + inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px white; --docsearch-hit-color: var(--ifm-color-emphasis-800); --docsearch-hit-active-color: white; --docsearch-hit-icon-color: var(--ifm-color-emphasis-500); @@ -54,6 +54,31 @@ html[data-theme='dark'] { /* Search Button */ +.button_src-theme-SearchBar-{ + height: 44px; + margin: 0 0 0 20px; + padding: 0 16px 0 10px; + border-radius: 22px; + background: var(--docsearch-searchbox-background); + box-shadow: var(--docsearch-searchbox-shadow); +} + +.DocSearch-SearchButton-KeySeparator{ + margin: 0 2px; + color: var(--docsearch-label-color); +} + +.DocSearch-SearchButton-Key{ + display: flex; + align-items: center; + justify-content: center; + width: 21px; + height: 19px; + border-radius: 3px; + background: var(--docsearch-key-gradient); + box-shadow: var(--docsearch-key-shadow); +} + /* Container & Modal */ .DocSearch-Container, diff --git a/packages/docsearch-react/src/svg/icon_action_goto.svg b/packages/docsearch-react/src/svg/icon_action_goto.svg index 75d9c10af..5bcb44e5a 100644 --- a/packages/docsearch-react/src/svg/icon_action_goto.svg +++ b/packages/docsearch-react/src/svg/icon_action_goto.svg @@ -1,13 +1,13 @@ - 0bbf3e84-a704-4009-b847-878bfff69b3a@1.00x + 1c20c2f5-d737-495d-a54b-64fd79363595@1.00x Created with sketchtool. - - - + + + diff --git a/packages/docsearch-react/src/svg/icon_source_anchor.svg b/packages/docsearch-react/src/svg/icon_source_anchor.svg index c6b1279cf..cf0ba8622 100644 --- a/packages/docsearch-react/src/svg/icon_source_anchor.svg +++ b/packages/docsearch-react/src/svg/icon_source_anchor.svg @@ -1,11 +1,14 @@ - 226da284-edfd-4e5d-b476-24aa1785a55d@1.00x + 78adcbdb-966a-4cd6-9309-109b3e7780e1@1.00x Created with sketchtool. - + - + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_source_content.svg b/packages/docsearch-react/src/svg/icon_source_content.svg index 108d8fc44..427474590 100644 --- a/packages/docsearch-react/src/svg/icon_source_content.svg +++ b/packages/docsearch-react/src/svg/icon_source_content.svg @@ -1,11 +1,13 @@ - cb7c1d97-063b-4e35-abd4-814d969ec204@1.00x + 90955cc9-f7b3-4479-898c-19510cc4b6d4@1.00x Created with sketchtool. - + - + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_source_page.svg b/packages/docsearch-react/src/svg/icon_source_page.svg index 0f15d9f07..dbec55d00 100644 --- a/packages/docsearch-react/src/svg/icon_source_page.svg +++ b/packages/docsearch-react/src/svg/icon_source_page.svg @@ -1,11 +1,11 @@ - d03b3fbd-ebdd-469d-90ae-95dad09a90c5@1.00x + 1f96940f-ca50-4e02-84bd-79bc02579d53@1.00x Created with sketchtool. - + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_tree_child.svg b/packages/docsearch-react/src/svg/icon_tree_child.svg new file mode 100644 index 000000000..c6951fca9 --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_tree_child.svg @@ -0,0 +1,12 @@ + + + + 8d4bc779-eae6-4075-8edb-f964556f9cd5@1.00x + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/packages/docsearch-react/src/svg/icon_tree_last-child.svg b/packages/docsearch-react/src/svg/icon_tree_last-child.svg new file mode 100644 index 000000000..6f9a4b2f1 --- /dev/null +++ b/packages/docsearch-react/src/svg/icon_tree_last-child.svg @@ -0,0 +1,12 @@ + + + + 658830a4-2f41-4e2b-b15f-517e3365664b@1.00x + Created with sketchtool. + + + + + + + \ No newline at end of file diff --git a/packages/website/src/theme/SearchBar/SearchButton.jsx b/packages/website/src/theme/SearchBar/SearchButton.jsx index 5d1b7437e..bafa091ef 100644 --- a/packages/website/src/theme/SearchBar/SearchButton.jsx +++ b/packages/website/src/theme/SearchBar/SearchButton.jsx @@ -15,8 +15,10 @@ export default function SearchButton({ onClick }) { strokeLinejoin="round" > - Search docs... - ⌘+K + Search... + ⌘ + + + K ); } From 3d122fa603301af201b19424774e14ab1bed9efb Mon Sep 17 00:00:00 2001 From: Shipow Date: Wed, 25 Mar 2020 11:31:15 +0100 Subject: [PATCH 22/63] skin search button --- packages/docsearch-react/src/style.css | 21 +++++++++- .../src/theme/SearchBar/SearchButton.jsx | 13 +++---- .../theme/SearchBar/SearchButton.module.css | 39 ------------------- 3 files changed, 25 insertions(+), 48 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index ddfbf1fb2..49e7a11a3 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -54,13 +54,30 @@ html[data-theme='dark'] { /* Search Button */ -.button_src-theme-SearchBar-{ +.DocSearch-SearchButton { height: 44px; margin: 0 0 0 20px; padding: 0 16px 0 10px; border-radius: 22px; background: var(--docsearch-searchbox-background); box-shadow: var(--docsearch-searchbox-shadow); + margin-left: 1rem; + border: none; + cursor: pointer; + display: flex; + align-items: center; + +} + +.DocSearch-SearchButton-Icon { + color: var(--docsearch-highlight-color); +} + +.DocSearch-SearchButton-Placeholder { + margin: 0 8px; + font-size: 1rem; + font-weight: 400; + color: var(--docsearch-placeholder-color); } .DocSearch-SearchButton-KeySeparator{ @@ -77,6 +94,7 @@ html[data-theme='dark'] { border-radius: 3px; background: var(--docsearch-key-gradient); box-shadow: var(--docsearch-key-shadow); + color: var(--ifm-color-emphasis-600); } /* Container & Modal */ @@ -190,7 +208,6 @@ html[data-theme='dark'] { } .DocSearch-Reset:focus { - color: var(--docsearch-highlight-color); outline: none; } diff --git a/packages/website/src/theme/SearchBar/SearchButton.jsx b/packages/website/src/theme/SearchBar/SearchButton.jsx index bafa091ef..970cc78e2 100644 --- a/packages/website/src/theme/SearchBar/SearchButton.jsx +++ b/packages/website/src/theme/SearchBar/SearchButton.jsx @@ -1,10 +1,9 @@ import React from 'react'; -import styles from './SearchButton.module.css'; export default function SearchButton({ onClick }) { return ( - ); } diff --git a/packages/website/src/theme/SearchBar/SearchButton.module.css b/packages/website/src/theme/SearchBar/SearchButton.module.css index 27f56ade0..e69de29bb 100644 --- a/packages/website/src/theme/SearchBar/SearchButton.module.css +++ b/packages/website/src/theme/SearchBar/SearchButton.module.css @@ -1,39 +0,0 @@ -.button { - margin-left: 1rem; - padding: .6em .8em; - background: rgb(235, 237, 240); - border: none; - cursor: pointer; - display: flex; - align-items: center; - border-radius: 6px; -} -.button:hover { - background: rgb(223, 225, 225); -} - -.button:hover .text{ - color: rgb(68, 73, 80); -} - -.icon { - margin: 0 0.8em 0 0.4em; - color: var(--ifm-color-primary); -} - -.text { - color: rgb(126, 123, 123); - font-size: 0.9rem; - padding: 0 1rem 0 0; -} - -.kbd { - color: rgb(146, 143, 143); - border: none; - background-color: rgb(223, 225, 225); - line-height: 2.4em; - padding: 0 .8em; - box-shadow: none; - border-radius: 3px; -} - From 9d3a4bd43aebf7b400a54fe17e40c35b171da1fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 17:22:02 +0100 Subject: [PATCH 23/63] feat: introduce tree design --- packages/docsearch-react/src/DocSearch.tsx | 230 ++++++++++++--------- packages/docsearch-react/src/style.css | 67 +++--- 2 files changed, 177 insertions(+), 120 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index f19fade2f..70dcb0fa1 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -101,13 +101,9 @@ function IconAction(props) { function IconTree(props) { switch (props.icon) { case 'goto-external': - return ( -"" - ); + return ''; default: - return ( -"" - ); + return ''; } } @@ -183,6 +179,9 @@ export function DocSearch({ getSources() { return [ { + onSelect() { + onClose(); + }, getSuggestionUrl({ suggestion }) { return suggestion.url; }, @@ -201,37 +200,27 @@ export function DocSearch({ }, }, ], + }).then((hits: DocSearchHit[]) => { + return hits.map(hit => { + const url = new URL(hit.url); + + return { + ...hit, + // @TODO: Temporarily sanitize data for development + url: hit.url + .replace(url.origin, '') + .replace('#__docusaurus', ''), + }; + }); }); }, }, ]; }, }), - [indexName, searchParameters, searchClient] + [indexName, searchParameters, searchClient, onClose] ); - // function getLvl1(searchClient, treeLvl1) { - // return searchClient - // .search([ - // { - // indexName: 'autocomplete', - // query: '', - // params: { - // facetFilters: ['type:lvl1'], - // hitsPerPage: 1000, - // attributesToRetrieve: '*', - // attributesToSnippet: '*', - // highlightPreTag: '', - // highlightPostTag: '', - // }, - // }, - // ]) - // .then(results => { - // const lvl1Hits = results.results[0].hits; - // return lvl1Hits.filter(hit => !!treeLvl1.includes(hit.hierarchy.lvl1)); - // }); - // } - const inputRef = React.useRef(null); const { onSubmit, onReset } = getFormProps({ inputElement: inputRef.current, @@ -299,75 +288,114 @@ export function DocSearch({ {state.suggestions.map((suggestion, index) => { const { source, items } = suggestion; - const itemsGroupedByLevel = groupBy( + const itemsGroupedByLevel0 = groupBy( items, item => item.hierarchy.lvl0 ); + const groupedItems = Object.entries( + itemsGroupedByLevel0 + ).map(([title, hits]) => { + return { + title, + items: Object.entries( + groupBy(hits, hit => hit.hierarchy.lvl1) + ) + .map(([_title, hits]) => { + return hits.map(item => { + return { + ...item, + // eslint-disable-next-line @typescript-eslint/camelcase + __docsearch_parent: + item.type !== 'lvl1' && + hits.find( + parentItem => + parentItem.type === 'lvl1' && + parentItem.hierarchy.lvl1 === + item.hierarchy.lvl1 + ), + }; + }); + }) + .flat(), + }; + }); + return (
    - {Object.entries(itemsGroupedByLevel).map( - ([title, hits]) => ( -
    -
    {title}
    + {groupedItems.map(record => ( +
    +
    {record.title}
    - -
    - ) - )} +
    + + + ); + })} +
+
+ ))} ); })} diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 49e7a11a3..394fbdacf 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -7,10 +7,10 @@ --docsearch-container-background: rgb(60, 72, 96, 0.5); --docsearch-modal-background: var(--ifm-color-emphasis-100); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), - 0px 3px 8px 0px rgba(116, 134, 169, 0.54); + 0px 3px 8px 0px rgba(116, 134, 169, 0.54); --docsearch-searchbox-background: rgb(212, 217, 225); --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), - inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px white; + inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px white; --docsearch-hit-color: var(--ifm-color-emphasis-800); --docsearch-hit-active-color: white; --docsearch-hit-icon-color: var(--ifm-color-emphasis-500); @@ -20,35 +20,38 @@ -225deg, rgb(213, 219, 228) 0%, rgb(248, 248, 248) 100% - ); - --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), + ); + --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(29, 37, 89, 0.38); - --docsearch-footer-background: white; - --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); - --docsearch-label-color: var(--ifm-color-emphasis-500); + --docsearch-footer-background: white; + --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); + --docsearch-label-color: var(--ifm-color-emphasis-500); } /* Darkmode */ html[data-theme='dark'] { --docsearch-highlight-color: var(--ifm-color-primary); - --docsearch-container-background: rgba(9, 10, 17, .8); + --docsearch-container-background: rgba(9, 10, 17, 0.8); --docsearch-modal-background: rgb(21, 23, 42); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgb(44, 46, 64), - 0px 3px 8px 0px rgb(0, 3, 9); + 0px 3px 8px 0px rgb(0, 3, 9); --docsearch-searchbox-background: rgb(9, 10, 17); --docsearch-searchbox-shadow: inset 0px 0px 1px 1px rgba(84, 104, 255, 0.6); --docsearch-hit-color: var(--ifm-color-emphasis-500); --docsearch-hit-icon-color: var(--ifm-color-emphasis-300); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(9, 10, 17); - --docsearch-key-gradient: linear-gradient(-26.56505117707799deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%); - --docsearch-key-shadow:inset 0px -2px 0px 0px rgb(40, 45, 85), - inset 0px 0px 1px 1px rgb(81, 87, 125), - 0px 2px 2px 0px rgb(3, 4, 9); - --docsearch-footer-background:rgb(30, 33, 54); + --docsearch-key-gradient: linear-gradient( + -26.56505117707799deg, + rgb(86, 88, 114) 0%, + rgb(49, 53, 91) 100% + ); + --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(40, 45, 85), + inset 0px 0px 1px 1px rgb(81, 87, 125), 0px 2px 2px 0px rgb(3, 4, 9); + --docsearch-footer-background: rgb(30, 33, 54); --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.52), - 0px -4px 8px 0px rgba(0, 0, 0, 0.34); + 0px -4px 8px 0px rgba(0, 0, 0, 0.34); --docsearch-label-color: rgb(109, 113, 163); } @@ -66,7 +69,6 @@ html[data-theme='dark'] { cursor: pointer; display: flex; align-items: center; - } .DocSearch-SearchButton-Icon { @@ -80,12 +82,12 @@ html[data-theme='dark'] { color: var(--docsearch-placeholder-color); } -.DocSearch-SearchButton-KeySeparator{ +.DocSearch-SearchButton-KeySeparator { margin: 0 2px; color: var(--docsearch-label-color); } -.DocSearch-SearchButton-Key{ +.DocSearch-SearchButton-Key { display: flex; align-items: center; justify-content: center; @@ -125,7 +127,7 @@ html[data-theme='dark'] { margin: 60px auto auto auto; border-radius: 6px; background: var(--docsearch-modal-background); - box-shadow: var(--docsearch-modal-shadow) + box-shadow: var(--docsearch-modal-shadow); } /* Modal Searchbox */ @@ -222,7 +224,7 @@ html[data-theme='dark'] { width: 26px; } -.DocSearch-MagnifierLabel{ +.DocSearch-MagnifierLabel { color: var(--docsearch-highlight-color); } @@ -233,7 +235,7 @@ html[data-theme='dark'] { padding: 0 12px 20px; flex: 1 0 auto; overflow-y: scroll; - letter-spacing: .02em; + letter-spacing: 0.02em; } .DocSearch-Dropdown ul { @@ -315,11 +317,25 @@ html[data-theme='dark'] { } .DocSearch-Hit { + position: relative; border-radius: 4px; background: var(--docsearch-hit-background); box-shadow: var(--docsearch-hit-shadow); } +.DocSearch-Hit--Child { + padding-left: 26px; +} + +.DocSearch-Hit-Tree { + position: absolute; + left: 0; + padding-left: 12px; + width: 30px; + height: 60px; + color: #d4d9e1; +} + .DocSearch-Hit[aria-selected='true'] { transition: background-color ease 0.1s; background-color: var(--docsearch-highlight-color); @@ -336,7 +352,7 @@ html[data-theme='dark'] { .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { - opacity: .5; + opacity: 0.5; } .DocSearch-Hit a { @@ -386,24 +402,23 @@ html[data-theme='dark'] { } .DocSearch-Hit-title { - font-size: .9em; + font-size: 0.9em; font-weight: 500; } .DocSearch-Hit-path { font-size: 0.7em; - opacity: .5; + opacity: 0.5; } .DocSearch-Hit-action { height: 20px; width: 20px; margin-left: 8px; - opacity: .5; + opacity: 0.5; color: var(--docsearch-hit-icon-color); } /* Icons */ - /* Responsive */ From 0dbff3f6e2ee31df969ae582944b2a89196cad5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 18:37:12 +0100 Subject: [PATCH 24/63] feat: create source for each lvl0 --- packages/docsearch-react/src/DocSearch.tsx | 327 ++++++++++----------- 1 file changed, 156 insertions(+), 171 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 70dcb0fa1..4b9e9c4c9 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -22,6 +22,10 @@ interface DocSearchProps { onClose(): void; } +type InternalDocSearchHit = DocSearchHit & { + __docsearch_parent: null | DocSearchHit; +}; + function IconSource(props) { switch (props.icon) { case 'lvl1': @@ -176,46 +180,66 @@ export function DocSearch({ onStateChange({ state }) { setState(state as any); }, - getSources() { - return [ - { - onSelect() { - onClose(); - }, - getSuggestionUrl({ suggestion }) { - return suggestion.url; + getSources({ query }) { + return getAlgoliaHits({ + searchClient, + queries: [ + { + indexName, + query, + params: { + highlightPreTag: '', + highlightPostTag: '', + hitsPerPage: 10, + ...searchParameters, + }, }, - getSuggestions({ query }) { - return getAlgoliaHits({ - searchClient, - queries: [ - { - indexName, - query, - params: { - highlightPreTag: '', - highlightPostTag: '', - hitsPerPage: 10, - ...searchParameters, - }, - }, - ], - }).then((hits: DocSearchHit[]) => { - return hits.map(hit => { - const url = new URL(hit.url); + ], + }).then((hits: DocSearchHit[]) => { + const formattedHits = hits.map(hit => { + const url = new URL(hit.url); + return { + ...hit, + url: hit.url + .replace(url.origin, '') + .replace('#__docusaurus', ''), + }; + }); + const sources = groupBy(formattedHits, hit => hit.hierarchy.lvl0); - return { - ...hit, - // @TODO: Temporarily sanitize data for development - url: hit.url - .replace(url.origin, '') - .replace('#__docusaurus', ''), - }; - }); - }); - }, - }, - ]; + return Object.values(sources).map(items => { + return { + onSelect() { + onClose(); + }, + getSuggestionUrl({ suggestion }) { + return suggestion.url; + }, + getSuggestions() { + return Object.values( + groupBy(items, item => item.hierarchy.lvl1) + ) + .map(hits => + hits.map(item => { + return { + ...item, + // eslint-disable-next-line @typescript-eslint/camelcase + __docsearch_parent: + item.type !== 'lvl1' && + hits.find( + siblingItem => + siblingItem.type === 'lvl1' && + siblingItem.hierarchy.lvl1 === + item.hierarchy.lvl1 + ), + }; + }) + ) + .flat(); + }, + }; + }); + }); }, }), [indexName, searchParameters, searchClient, onClose] @@ -285,150 +309,111 @@ export function DocSearch({
- {state.suggestions.map((suggestion, index) => { - const { source, items } = suggestion; - - const itemsGroupedByLevel0 = groupBy( - items, - item => item.hierarchy.lvl0 - ); - - const groupedItems = Object.entries( - itemsGroupedByLevel0 - ).map(([title, hits]) => { - return { - title, - items: Object.entries( - groupBy(hits, hit => hit.hierarchy.lvl1) - ) - .map(([_title, hits]) => { - return hits.map(item => { - return { - ...item, - // eslint-disable-next-line @typescript-eslint/camelcase - __docsearch_parent: - item.type !== 'lvl1' && - hits.find( - parentItem => - parentItem.type === 'lvl1' && - parentItem.hierarchy.lvl1 === - item.hierarchy.lvl1 - ), - }; - }); - }) - .flat(), - }; - }); + {state.suggestions.map(({ source, items }) => { + const title = items[0].hierarchy.lvl0; return ( -
- {groupedItems.map(record => ( -
-
{record.title}
+
+
{title}
-
- ))} + )} +
+ +
+
+ + + ); + })} + ); })} From c3d5ea907b190639c36679886131634b94a766d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 21:48:32 +0100 Subject: [PATCH 25/63] refactor: create component architecture --- packages/docsearch-react/src/AlgoliaLogo.tsx | 16 - .../src/ArrowDownCommandIcon.tsx | 25 -- .../src/ArrowUpCommandIcon.tsx | 34 -- packages/docsearch-react/src/DocSearch.tsx | 361 ++---------------- .../docsearch-react/src/EscapeCommandIcon.tsx | 24 -- .../src/Footer/AlgoliaLogo.tsx | 20 + .../docsearch-react/src/Footer/Footer.tsx | 64 ++++ packages/docsearch-react/src/Footer/index.ts | 1 + packages/docsearch-react/src/Footer/index.tsx | 1 + .../src/Results/ActionIcon.tsx | 31 ++ .../docsearch-react/src/Results/Results.tsx | 134 +++++++ .../src/Results/SourceIcon.tsx | 58 +++ packages/docsearch-react/src/Results/index.ts | 1 + .../src/{ => SearchBox}/LoadingIcon.tsx | 0 .../src/{ => SearchBox}/ResetIcon.tsx | 0 .../src/SearchBox/SearchBox.tsx | 68 ++++ .../src/{ => SearchBox}/SearchIcon.tsx | 0 .../docsearch-react/src/SearchBox/index.tsx | 1 + .../docsearch-react/src/SelectCommandIcon.tsx | 34 -- packages/docsearch-react/src/style.css | 7 +- .../docsearch-react/src/types/DocSearchHit.ts | 4 +- .../src/types/InternalDocSearchHit.tsx | 5 + packages/docsearch-react/src/types/index.ts | 1 + packages/docsearch-react/src/utils/groupBy.ts | 16 + packages/docsearch-react/src/utils/index.ts | 14 +- packages/docsearch-react/src/utils/noop.ts | 1 + 26 files changed, 452 insertions(+), 469 deletions(-) delete mode 100644 packages/docsearch-react/src/AlgoliaLogo.tsx delete mode 100644 packages/docsearch-react/src/ArrowDownCommandIcon.tsx delete mode 100644 packages/docsearch-react/src/ArrowUpCommandIcon.tsx delete mode 100644 packages/docsearch-react/src/EscapeCommandIcon.tsx create mode 100644 packages/docsearch-react/src/Footer/AlgoliaLogo.tsx create mode 100644 packages/docsearch-react/src/Footer/Footer.tsx create mode 100644 packages/docsearch-react/src/Footer/index.ts create mode 100644 packages/docsearch-react/src/Footer/index.tsx create mode 100644 packages/docsearch-react/src/Results/ActionIcon.tsx create mode 100644 packages/docsearch-react/src/Results/Results.tsx create mode 100644 packages/docsearch-react/src/Results/SourceIcon.tsx create mode 100644 packages/docsearch-react/src/Results/index.ts rename packages/docsearch-react/src/{ => SearchBox}/LoadingIcon.tsx (100%) rename packages/docsearch-react/src/{ => SearchBox}/ResetIcon.tsx (100%) create mode 100644 packages/docsearch-react/src/SearchBox/SearchBox.tsx rename packages/docsearch-react/src/{ => SearchBox}/SearchIcon.tsx (100%) create mode 100644 packages/docsearch-react/src/SearchBox/index.tsx delete mode 100644 packages/docsearch-react/src/SelectCommandIcon.tsx create mode 100644 packages/docsearch-react/src/types/InternalDocSearchHit.tsx create mode 100644 packages/docsearch-react/src/utils/groupBy.ts create mode 100644 packages/docsearch-react/src/utils/noop.ts diff --git a/packages/docsearch-react/src/AlgoliaLogo.tsx b/packages/docsearch-react/src/AlgoliaLogo.tsx deleted file mode 100644 index 5e7a613ea..000000000 --- a/packages/docsearch-react/src/AlgoliaLogo.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export function AlgoliaLogo() { - return ( - - Search by - - - - - ); -} diff --git a/packages/docsearch-react/src/ArrowDownCommandIcon.tsx b/packages/docsearch-react/src/ArrowDownCommandIcon.tsx deleted file mode 100644 index 94ae10063..000000000 --- a/packages/docsearch-react/src/ArrowDownCommandIcon.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; - -export function ArrowDownCommandIcon() { - return ( - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/docsearch-react/src/ArrowUpCommandIcon.tsx b/packages/docsearch-react/src/ArrowUpCommandIcon.tsx deleted file mode 100644 index 8dbd5f7fe..000000000 --- a/packages/docsearch-react/src/ArrowUpCommandIcon.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -export function ArrowUpCommandIcon() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 4b9e9c4c9..74968b577 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -1,18 +1,16 @@ import React from 'react'; import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser'; -import { createAutocomplete } from '@francoischalifour/autocomplete-core'; import { - Highlight, - Snippet, - getAlgoliaHits, -} from '@francoischalifour/autocomplete-react'; + createAutocomplete, + AutocompleteState, +} from '@francoischalifour/autocomplete-core'; +import { getAlgoliaHits } from '@francoischalifour/autocomplete-react'; -import { DocSearchHit } from './types'; import { noop, groupBy } from './utils'; -import { AlgoliaLogo } from './AlgoliaLogo'; -import { SearchIcon } from './SearchIcon'; -import { LoadingIcon } from './LoadingIcon'; -import { ResetIcon } from './ResetIcon'; +import { SearchBox } from './SearchBox'; +import { Results } from './Results'; +import { Footer } from './Footer'; +import { DocSearchHit, InternalDocSearchHit } from './types'; interface DocSearchProps { appId?: string; @@ -22,127 +20,6 @@ interface DocSearchProps { onClose(): void; } -type InternalDocSearchHit = DocSearchHit & { - __docsearch_parent: null | DocSearchHit; -}; - -function IconSource(props) { - switch (props.icon) { - case 'lvl1': - return ( - - - - ); - case 'content': - return ( - - - - ); - default: - return ( - - - - ); - } -} - -function IconAction(props) { - switch (props.icon) { - case 'goto-external': - return ( - - - - ); - default: - return ( - - - - - - - ); - } -} - -function IconTree(props) { - switch (props.icon) { - case 'goto-external': - return ''; - default: - return ''; - } -} - -function IconKey(props) { - const icon = () => { - switch (props.icon) { - case 'arrow-down': - return ; - case 'arrow-up': - return ; - case 'enter': - return ; - case 'escape': - return ( - - ); - default: - return null; - } - }; - return ( - - - {icon()} - - - ); -} - export function DocSearch({ appId = 'BH4D9OD16A', apiKey, @@ -150,7 +27,12 @@ export function DocSearch({ searchParameters, onClose = noop, }: DocSearchProps) { - const [state, setState] = React.useState({ query: '', suggestions: [] }); + const [state, setState] = React.useState< + AutocompleteState + >({ + query: '', + suggestions: [], + } as any); const searchClient = React.useMemo(() => algoliasearch(appId, apiKey), [ appId, @@ -168,7 +50,7 @@ export function DocSearch({ } = React.useMemo( () => createAutocomplete< - any, + InternalDocSearchHit, React.FormEvent, React.MouseEvent, React.KeyboardEvent @@ -191,6 +73,7 @@ export function DocSearch({ highlightPreTag: '', highlightPostTag: '', hitsPerPage: 10, + distinct: 3, ...searchParameters, }, }, @@ -201,13 +84,14 @@ export function DocSearch({ return { ...hit, url: hit.url + // @TODO: temporary convenience for development. .replace(url.origin, '') .replace('#__docusaurus', ''), }; }); const sources = groupBy(formattedHits, hit => hit.hierarchy.lvl0); - return Object.values(sources).map(items => { + return Object.values(sources).map(items => { return { onSelect() { onClose(); @@ -216,7 +100,7 @@ export function DocSearch({ return suggestion.url; }, getSuggestions() { - return Object.values( + return Object.values( groupBy(items, item => item.hierarchy.lvl1) ) .map(hits => @@ -245,11 +129,6 @@ export function DocSearch({ [indexName, searchParameters, searchClient, onClose] ); - const inputRef = React.useRef(null); - const { onSubmit, onReset } = getFormProps({ - inputElement: inputRef.current, - }); - return (
{ - if (event.target === event.currentTarget) { - onClose(); - } - }} - {...getRootProps()} + {...getRootProps({ + onClick(event: React.MouseEvent) { + if (event.target === event.currentTarget) { + onClose(); + } + }, + })} >
-
- - -
- -
- - - - -
+
-
- {state.suggestions.map(({ source, items }) => { - const title = items[0].hierarchy.lvl0; - - return ( -
-
{title}
- - -
- ); - })} -
+
-
-
    -
  • - - - - to select -
    • -
  • - - - - - - - to navigate -
    • -
  • - - - - to close -
    • -
-
- -
-
+
+
+
); diff --git a/packages/docsearch-react/src/EscapeCommandIcon.tsx b/packages/docsearch-react/src/EscapeCommandIcon.tsx deleted file mode 100644 index f23917d91..000000000 --- a/packages/docsearch-react/src/EscapeCommandIcon.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; - -export function EscapeCommandIcon() { - return ( - - - - - - - ); -} diff --git a/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx b/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx new file mode 100644 index 000000000..634a900f4 --- /dev/null +++ b/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +export function AlgoliaLogo() { + return ( + + Search by + + + + + ); +} diff --git a/packages/docsearch-react/src/Footer/Footer.tsx b/packages/docsearch-react/src/Footer/Footer.tsx new file mode 100644 index 000000000..a58431669 --- /dev/null +++ b/packages/docsearch-react/src/Footer/Footer.tsx @@ -0,0 +1,64 @@ +import React from 'react'; + +import { AlgoliaLogo } from './AlgoliaLogo'; + +export function Footer() { + return ( + <> +
    +
  • + + + + + + to select +
    • +
  • + + + + + + + + + + + to navigate +
    • +
  • + + + + + + to close +
    • +
+
+ +
+ + ); +} + +interface CommandIconProps { + children: React.ReactNode; +} + +function CommandIcon(props: CommandIconProps) { + return ( + + + {props.children} + + + ); +} diff --git a/packages/docsearch-react/src/Footer/index.ts b/packages/docsearch-react/src/Footer/index.ts new file mode 100644 index 000000000..ddcc5a9cd --- /dev/null +++ b/packages/docsearch-react/src/Footer/index.ts @@ -0,0 +1 @@ +export * from './Footer'; diff --git a/packages/docsearch-react/src/Footer/index.tsx b/packages/docsearch-react/src/Footer/index.tsx new file mode 100644 index 000000000..ddcc5a9cd --- /dev/null +++ b/packages/docsearch-react/src/Footer/index.tsx @@ -0,0 +1 @@ +export * from './Footer'; diff --git a/packages/docsearch-react/src/Results/ActionIcon.tsx b/packages/docsearch-react/src/Results/ActionIcon.tsx new file mode 100644 index 000000000..15e955e05 --- /dev/null +++ b/packages/docsearch-react/src/Results/ActionIcon.tsx @@ -0,0 +1,31 @@ +import React from 'react'; + +export function SelectIcon() { + return ( + + + + + + + ); +} + +export function GoToExternal() { + return ( + + + + ); +} diff --git a/packages/docsearch-react/src/Results/Results.tsx b/packages/docsearch-react/src/Results/Results.tsx new file mode 100644 index 000000000..08089a961 --- /dev/null +++ b/packages/docsearch-react/src/Results/Results.tsx @@ -0,0 +1,134 @@ +import React from 'react'; +import { Highlight, Snippet } from '@francoischalifour/autocomplete-react'; +import { + GetMenuProps, + GetItemProps, + AutocompleteSuggestion, +} from '@francoischalifour/autocomplete-core'; + +import { SourceIcon } from './SourceIcon'; +import { SelectIcon } from './ActionIcon'; +import { InternalDocSearchHit } from '../types'; + +interface ResultsProps { + suggestions: Array>; + getMenuProps: GetMenuProps; + getItemProps: GetItemProps; +} + +export function Results(props: ResultsProps) { + return ( +
+ {props.suggestions.map(({ source, items }) => { + const title = items[0].hierarchy.lvl0; + + return ( +
+
{title}
+ + +
+ ); + })} +
+ ); +} diff --git a/packages/docsearch-react/src/Results/SourceIcon.tsx b/packages/docsearch-react/src/Results/SourceIcon.tsx new file mode 100644 index 000000000..13ee2c2b1 --- /dev/null +++ b/packages/docsearch-react/src/Results/SourceIcon.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +export function SourceIcon(props: { type: string }) { + switch (props.type) { + case 'lvl1': + return ; + case 'content': + return ; + default: + return ; + } +} + +function LvlIcon() { + return ( + + + + ); +} + +function AnchorIcon() { + return ( + + + + ); +} + +function ContentIcon() { + return ( + + + + ); +} diff --git a/packages/docsearch-react/src/Results/index.ts b/packages/docsearch-react/src/Results/index.ts new file mode 100644 index 000000000..9646dd49e --- /dev/null +++ b/packages/docsearch-react/src/Results/index.ts @@ -0,0 +1 @@ +export * from './Results'; diff --git a/packages/docsearch-react/src/LoadingIcon.tsx b/packages/docsearch-react/src/SearchBox/LoadingIcon.tsx similarity index 100% rename from packages/docsearch-react/src/LoadingIcon.tsx rename to packages/docsearch-react/src/SearchBox/LoadingIcon.tsx diff --git a/packages/docsearch-react/src/ResetIcon.tsx b/packages/docsearch-react/src/SearchBox/ResetIcon.tsx similarity index 100% rename from packages/docsearch-react/src/ResetIcon.tsx rename to packages/docsearch-react/src/SearchBox/ResetIcon.tsx diff --git a/packages/docsearch-react/src/SearchBox/SearchBox.tsx b/packages/docsearch-react/src/SearchBox/SearchBox.tsx new file mode 100644 index 000000000..68feb9dc8 --- /dev/null +++ b/packages/docsearch-react/src/SearchBox/SearchBox.tsx @@ -0,0 +1,68 @@ +import React, { useRef } from 'react'; +import { + GetFormProps, + GetLabelProps, + GetInputProps, +} from '@francoischalifour/autocomplete-core'; + +import { SearchIcon } from './SearchIcon'; +import { ResetIcon } from './ResetIcon'; +import { LoadingIcon } from './LoadingIcon'; + +interface SearchBoxProps { + query: string; + getFormProps: GetFormProps; + getLabelProps: GetLabelProps; + getInputProps: GetInputProps< + React.ChangeEvent, + React.MouseEvent, + React.KeyboardEvent + >; +} + +export function SearchBox(props: SearchBoxProps) { + const inputRef = useRef(null); + + const { onSubmit, onReset } = props.getFormProps({ + inputElement: inputRef.current, + }); + + return ( +
+ + +
+ +
+ + + + +
+ ); +} diff --git a/packages/docsearch-react/src/SearchIcon.tsx b/packages/docsearch-react/src/SearchBox/SearchIcon.tsx similarity index 100% rename from packages/docsearch-react/src/SearchIcon.tsx rename to packages/docsearch-react/src/SearchBox/SearchIcon.tsx diff --git a/packages/docsearch-react/src/SearchBox/index.tsx b/packages/docsearch-react/src/SearchBox/index.tsx new file mode 100644 index 000000000..ffc46c999 --- /dev/null +++ b/packages/docsearch-react/src/SearchBox/index.tsx @@ -0,0 +1 @@ +export * from './SearchBox'; diff --git a/packages/docsearch-react/src/SelectCommandIcon.tsx b/packages/docsearch-react/src/SelectCommandIcon.tsx deleted file mode 100644 index a54ed82e7..000000000 --- a/packages/docsearch-react/src/SelectCommandIcon.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; - -export function SelectCommandIcon() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 394fbdacf..4c860f3b3 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -284,7 +284,7 @@ html[data-theme='dark'] { align-items: center; } -.DocSearch-Commands-key { +.DocSearch-Commands-Key { display: flex; align-items: center; justify-content: center; @@ -296,6 +296,11 @@ html[data-theme='dark'] { box-shadow: var(--docsearch-key-shadow); } +.DocSearch-Commands-Key svg { + width: 15px; + height: 15px; +} + .DocSearch-Logo a { display: flex; } diff --git a/packages/docsearch-react/src/types/DocSearchHit.ts b/packages/docsearch-react/src/types/DocSearchHit.ts index 4a476912d..2cc65a204 100644 --- a/packages/docsearch-react/src/types/DocSearchHit.ts +++ b/packages/docsearch-react/src/types/DocSearchHit.ts @@ -48,8 +48,8 @@ export interface DocSearchHit { type: ContentType; anchor: string | null; hierarchy: { - lvl0: string | null; - lvl1: string | null; + lvl0: string; + lvl1: string; lvl2: string | null; lvl3: string | null; lvl4: string | null; diff --git a/packages/docsearch-react/src/types/InternalDocSearchHit.tsx b/packages/docsearch-react/src/types/InternalDocSearchHit.tsx new file mode 100644 index 000000000..bf518ce91 --- /dev/null +++ b/packages/docsearch-react/src/types/InternalDocSearchHit.tsx @@ -0,0 +1,5 @@ +import { DocSearchHit } from './DocSearchHit'; + +export type InternalDocSearchHit = DocSearchHit & { + __docsearch_parent: null | DocSearchHit; +}; diff --git a/packages/docsearch-react/src/types/index.ts b/packages/docsearch-react/src/types/index.ts index 7a2b2fca0..7ccf20336 100644 --- a/packages/docsearch-react/src/types/index.ts +++ b/packages/docsearch-react/src/types/index.ts @@ -1 +1,2 @@ export * from './DocSearchHit'; +export * from './InternalDocSearchHit'; diff --git a/packages/docsearch-react/src/utils/groupBy.ts b/packages/docsearch-react/src/utils/groupBy.ts new file mode 100644 index 000000000..5ea2731ef --- /dev/null +++ b/packages/docsearch-react/src/utils/groupBy.ts @@ -0,0 +1,16 @@ +export function groupBy( + values: TValue[], + predicate: (value: TValue) => string +): Record { + return values.reduce>((acc, item) => { + const key = predicate(item); + + if (!acc.hasOwnProperty(key)) { + acc[key] = []; + } + + acc[key].push(item); + + return acc; + }, {}); +} diff --git a/packages/docsearch-react/src/utils/index.ts b/packages/docsearch-react/src/utils/index.ts index 24a16a88f..a684cfedb 100644 --- a/packages/docsearch-react/src/utils/index.ts +++ b/packages/docsearch-react/src/utils/index.ts @@ -1,12 +1,2 @@ -export const noop = () => {}; - -export function groupBy(values, predicate) { - return values.reduce(function(obj, item) { - const key = predicate(item); - if (!obj.hasOwnProperty(key)) { - obj[key] = []; - } - obj[key].push(item); - return obj; - }, {}); -} +export * from './groupBy'; +export * from './noop'; diff --git a/packages/docsearch-react/src/utils/noop.ts b/packages/docsearch-react/src/utils/noop.ts new file mode 100644 index 000000000..cadb2cd0f --- /dev/null +++ b/packages/docsearch-react/src/utils/noop.ts @@ -0,0 +1 @@ +export function noop(..._args: any[]): void {} From 245874461714417c45ddbce9df6c4a5af744d2dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 22:19:38 +0100 Subject: [PATCH 26/63] feat: support touch events --- packages/docsearch-react/src/DocSearch.tsx | 33 ++++++++++++++++--- .../src/SearchBox/SearchBox.tsx | 11 +++---- 2 files changed, 34 insertions(+), 10 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 74968b577..b831c2337 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef, useEffect } from 'react'; import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser'; import { createAutocomplete, @@ -34,13 +34,17 @@ export function DocSearch({ suggestions: [], } as any); + const searchBoxRef = useRef(null); + const dropdownRef = useRef(null); + const inputRef = useRef(null); + const searchClient = React.useMemo(() => algoliasearch(appId, apiKey), [ appId, apiKey, ]); const { - // getEnvironmentProps, + getEnvironmentProps, getRootProps, getFormProps, getLabelProps, @@ -129,6 +133,26 @@ export function DocSearch({ [indexName, searchParameters, searchClient, onClose] ); + useEffect(() => { + if (!(searchBoxRef.current && dropdownRef.current && inputRef.current)) { + return undefined; + } + + const { onTouchStart, onTouchMove } = getEnvironmentProps({ + searchBoxElement: searchBoxRef.current, + dropdownElement: dropdownRef.current, + inputElement: inputRef.current, + }); + + window.addEventListener('touchstart', onTouchStart); + window.addEventListener('touchmove', onTouchMove); + + return () => { + window.removeEventListener('touchstart', onTouchStart); + window.removeEventListener('touchmove', onTouchMove); + }; + }, [getEnvironmentProps, searchBoxRef, dropdownRef, inputRef]); + return (
-
+
-
+
; + inputRef: MutableRefObject; } export function SearchBox(props: SearchBoxProps) { - const inputRef = useRef(null); - const { onSubmit, onReset } = props.getFormProps({ - inputElement: inputRef.current, + inputElement: props.inputRef.current, }); return ( @@ -46,9 +45,9 @@ export function SearchBox(props: SearchBoxProps) { Date: Wed, 25 Mar 2020 22:28:34 +0100 Subject: [PATCH 27/63] feat: use snippeted attributes --- packages/docsearch-react/src/DocSearch.tsx | 7 +++++++ packages/docsearch-react/src/Results/Results.tsx | 10 +++++----- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index b831c2337..895b08a26 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -74,6 +74,13 @@ export function DocSearch({ indexName, query, params: { + attributesToSnippet: [ + 'hierarchy.lvl1', + 'hierarchy.lvl2', + 'hierarchy.lvl3', + 'content', + ], + snippetEllipsisText: '…', highlightPreTag: '', highlightPostTag: '', hitsPerPage: 10, diff --git a/packages/docsearch-react/src/Results/Results.tsx b/packages/docsearch-react/src/Results/Results.tsx index 08089a961..92e77dd9e 100644 --- a/packages/docsearch-react/src/Results/Results.tsx +++ b/packages/docsearch-react/src/Results/Results.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Highlight, Snippet } from '@francoischalifour/autocomplete-react'; +import { Snippet } from '@francoischalifour/autocomplete-react'; import { GetMenuProps, GetItemProps, @@ -70,7 +70,7 @@ export function Results(props: ResultsProps) { {item.hierarchy[item.type] && item.type === 'lvl1' && (
- - - {/* ... */} - Date: Wed, 25 Mar 2020 22:32:20 +0100 Subject: [PATCH 28/63] fix: align content source icon --- packages/docsearch-react/src/Results/SourceIcon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docsearch-react/src/Results/SourceIcon.tsx b/packages/docsearch-react/src/Results/SourceIcon.tsx index 13ee2c2b1..864826d38 100644 --- a/packages/docsearch-react/src/Results/SourceIcon.tsx +++ b/packages/docsearch-react/src/Results/SourceIcon.tsx @@ -46,7 +46,7 @@ function ContentIcon() { return ( Date: Wed, 25 Mar 2020 22:39:11 +0100 Subject: [PATCH 29/63] feat: change logo color in dark mode --- packages/docsearch-react/src/Footer/AlgoliaLogo.tsx | 2 +- packages/docsearch-react/src/style.css | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx b/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx index 634a900f4..7690b5f71 100644 --- a/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx +++ b/packages/docsearch-react/src/Footer/AlgoliaLogo.tsx @@ -11,7 +11,7 @@ export function AlgoliaLogo() { diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 4c860f3b3..e83db9dc4 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -25,6 +25,7 @@ inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(29, 37, 89, 0.38); --docsearch-footer-background: white; --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); + --docsearch-logo-color: #5468ff; --docsearch-label-color: var(--ifm-color-emphasis-500); } @@ -52,6 +53,7 @@ html[data-theme='dark'] { --docsearch-footer-background: rgb(30, 33, 54); --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.52), 0px -4px 8px 0px rgba(0, 0, 0, 0.34); + --docsearch-logo-color: #fff; --docsearch-label-color: rgb(109, 113, 163); } @@ -307,6 +309,7 @@ html[data-theme='dark'] { .DocSearch-Logo svg { margin-left: 8px; + color: var(--docsearch-logo-color); } .DocSearch-Label { From ea70dae18b7af5e527f81a198a5eb74c5f37793f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 23:05:44 +0100 Subject: [PATCH 30/63] feat: prepare screens for error and no results --- packages/docsearch-react/src/DocSearch.tsx | 8 ++-- .../docsearch-react/src/Dropdown/Dropdown.tsx | 38 +++++++++++++++++++ .../docsearch-react/src/Dropdown/index.ts | 1 + packages/docsearch-react/src/Error/Error.tsx | 10 +++++ packages/docsearch-react/src/Error/index.ts | 1 + .../src/NoResults/NoResults.tsx | 9 +++++ .../docsearch-react/src/NoResults/index.ts | 1 + 7 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 packages/docsearch-react/src/Dropdown/Dropdown.tsx create mode 100644 packages/docsearch-react/src/Dropdown/index.ts create mode 100644 packages/docsearch-react/src/Error/Error.tsx create mode 100644 packages/docsearch-react/src/Error/index.ts create mode 100644 packages/docsearch-react/src/NoResults/NoResults.tsx create mode 100644 packages/docsearch-react/src/NoResults/index.ts diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 895b08a26..9b604798b 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -6,11 +6,11 @@ import { } from '@francoischalifour/autocomplete-core'; import { getAlgoliaHits } from '@francoischalifour/autocomplete-react'; +import { DocSearchHit, InternalDocSearchHit } from './types'; import { noop, groupBy } from './utils'; import { SearchBox } from './SearchBox'; -import { Results } from './Results'; +import { Dropdown } from './Dropdown'; import { Footer } from './Footer'; -import { DocSearchHit, InternalDocSearchHit } from './types'; interface DocSearchProps { appId?: string; @@ -189,8 +189,8 @@ export function DocSearch({
- diff --git a/packages/docsearch-react/src/Dropdown/Dropdown.tsx b/packages/docsearch-react/src/Dropdown/Dropdown.tsx new file mode 100644 index 000000000..9aefaa8a7 --- /dev/null +++ b/packages/docsearch-react/src/Dropdown/Dropdown.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { + AutocompleteState, + GetMenuProps, + GetItemProps, +} from '@francoischalifour/autocomplete-core'; + +import { InternalDocSearchHit } from '../types'; +import { Error } from '../Error'; +import { NoResults } from '../NoResults'; +import { Results } from '../Results'; + +interface DropdownProps { + state: AutocompleteState; + getMenuProps: GetMenuProps; + getItemProps: GetItemProps; +} + +export function Dropdown(props: DropdownProps) { + if (props.state.status === 'error') { + return ; + } + + if ( + props.state.status === 'idle' && + props.state.suggestions.every(source => source.items.length === 0) + ) { + return ; + } + + return ( + + ); +} diff --git a/packages/docsearch-react/src/Dropdown/index.ts b/packages/docsearch-react/src/Dropdown/index.ts new file mode 100644 index 000000000..2f29bad4e --- /dev/null +++ b/packages/docsearch-react/src/Dropdown/index.ts @@ -0,0 +1 @@ +export * from './Dropdown'; diff --git a/packages/docsearch-react/src/Error/Error.tsx b/packages/docsearch-react/src/Error/Error.tsx new file mode 100644 index 000000000..12d983b23 --- /dev/null +++ b/packages/docsearch-react/src/Error/Error.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export function Error() { + return ( +

+ We‘re unable to fetch results. You might want to check your network + connection. +

+ ); +} diff --git a/packages/docsearch-react/src/Error/index.ts b/packages/docsearch-react/src/Error/index.ts new file mode 100644 index 000000000..ae6e95d01 --- /dev/null +++ b/packages/docsearch-react/src/Error/index.ts @@ -0,0 +1 @@ +export * from './Error'; diff --git a/packages/docsearch-react/src/NoResults/NoResults.tsx b/packages/docsearch-react/src/NoResults/NoResults.tsx new file mode 100644 index 000000000..d07fb10c9 --- /dev/null +++ b/packages/docsearch-react/src/NoResults/NoResults.tsx @@ -0,0 +1,9 @@ +import React from 'react'; + +interface NoResultsProps { + query: string; +} + +export function NoResults(props: NoResultsProps) { + return

No results for “{props.query}“.

; +} diff --git a/packages/docsearch-react/src/NoResults/index.ts b/packages/docsearch-react/src/NoResults/index.ts new file mode 100644 index 000000000..20eae4db4 --- /dev/null +++ b/packages/docsearch-react/src/NoResults/index.ts @@ -0,0 +1 @@ +export * from './NoResults'; From b89658fa5774c3803bf8f03dccd05fdb86600546 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 23:30:55 +0100 Subject: [PATCH 31/63] fix: don't highlight if no items --- .eslintrc.js | 1 + packages/autocomplete-core/src/onKeyDown.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 03a278837..67805eb54 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,6 +28,7 @@ module.exports = { '@typescript-eslint/camelcase': ['error', { allow: ['__autocomplete_id'] }], // Useful to call functions like `nodeItem?.scrollIntoView()`. 'no-unused-expressions': 0, + complexity: 0, }, overrides: [ { diff --git a/packages/autocomplete-core/src/onKeyDown.ts b/packages/autocomplete-core/src/onKeyDown.ts index eff81bcfb..3141a4845 100644 --- a/packages/autocomplete-core/src/onKeyDown.ts +++ b/packages/autocomplete-core/src/onKeyDown.ts @@ -37,7 +37,10 @@ export function onKeyDown({ ); nodeItem?.scrollIntoView(false); - if (store.getState().highlightedIndex !== null) { + if ( + store.getState().highlightedIndex !== null && + store.getState().suggestions.some(suggestion => suggestion.length > 0) + ) { const { item, itemValue, itemUrl, source } = getHighlightedItem({ state: store.getState(), }); @@ -94,7 +97,10 @@ export function onKeyDown({ } else if (event.key === 'Enter') { // No item is selected, so we let the browser handle the native `onSubmit` // form event. - if (store.getState().highlightedIndex === null) { + if ( + store.getState().highlightedIndex === null || + store.getState().suggestions.every(suggestion => suggestion.length === 0) + ) { return; } From fc0f34eb8090b5df7c26df057b1eb33f30ca8480 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Wed, 25 Mar 2020 23:31:14 +0100 Subject: [PATCH 32/63] fix(mobile): don't blur if target is input --- packages/autocomplete-core/src/propGetters.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/autocomplete-core/src/propGetters.ts b/packages/autocomplete-core/src/propGetters.ts index eebc534bc..5f3097239 100644 --- a/packages/autocomplete-core/src/propGetters.ts +++ b/packages/autocomplete-core/src/propGetters.ts @@ -39,7 +39,10 @@ export function getPropGetters({ // This ensures a working experience on mobile because we blur the input // on touch devices when the user starts scrolling (`touchmove`). onTouchStart(event) { - if (store.getState().isOpen === false) { + if ( + store.getState().isOpen === false || + event.target === getterProps.inputElement + ) { return; } @@ -65,10 +68,12 @@ export function getPropGetters({ // mimic the native platform behavior where the input is blurred to // hide the virtual keyboard. This gives more vertical space to // discover all the suggestions showing up in the dropdown. - onTouchMove() { + onTouchMove(event: TouchEvent) { if ( store.getState().isOpen === false || - getterProps.inputElement !== props.environment.document.activeElement + getterProps.inputElement !== + props.environment.document.activeElement || + event.target === getterProps.inputElement ) { return; } From cf0efd7da7970d18381a1304801e4bcde7f4b1d1 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 07:30:50 +0100 Subject: [PATCH 33/63] fix: hit source spacing + tree icon positioning --- packages/docsearch-react/src/style.css | 37 ++++++++++++++------------ 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index e83db9dc4..0e827a5ac 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -319,29 +319,41 @@ html[data-theme='dark'] { /* Hit */ +.DocSearch-Hits{ + margin-bottom: 12px; +} + .DocSearch-Hits mark { background: none; color: var(--docsearch-highlight-color); } .DocSearch-Hit { + display: flex; position: relative; border-radius: 4px; background: var(--docsearch-hit-background); box-shadow: var(--docsearch-hit-shadow); + padding-left: 12px; + margin-bottom: 4px; } -.DocSearch-Hit--Child { - padding-left: 26px; +.DocSearch-Hit-source { + line-height: 30px; + font-size: 0.85em; + font-weight: 600; + color: var(--docsearch-highlight-color); + letter-spacing: 0; } +/* .DocSearch-Hit--Child { +} */ + .DocSearch-Hit-Tree { - position: absolute; - left: 0; - padding-left: 12px; width: 30px; height: 60px; color: #d4d9e1; + margin-right: 4px; } .DocSearch-Hit[aria-selected='true'] { @@ -367,28 +379,20 @@ html[data-theme='dark'] { display: block; height: 60px; border-radius: 4px; - margin-bottom: 4px; + width: 100%; } .DocSearch-Hit[aria-selected='true'] mark { text-decoration: underline; } -.DocSearch-Hit-source { - margin-bottom: 8px; - font-size: 0.85em; - font-weight: 600; - color: var(--docsearch-highlight-color); - letter-spacing: 0; -} - .DocSearch-Hit-lvl1, .DocSearch-Hit-lvl2, .DocSearch-Hit-lvl3, .DocSearch-Hit-content { display: flex; height: 60px; - padding: 0 12px; + padding: 0 12px 0 0; flex-direction: row; align-items: center; color: var(--docsearch-hit-color); @@ -416,14 +420,13 @@ html[data-theme='dark'] { .DocSearch-Hit-path { font-size: 0.7em; - opacity: 0.5; + color: var(--docsearch-label-color); } .DocSearch-Hit-action { height: 20px; width: 20px; margin-left: 8px; - opacity: 0.5; color: var(--docsearch-hit-icon-color); } From 102cd65363556e479991e8ac99e5da8e8cc8c8d9 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 09:23:09 +0100 Subject: [PATCH 34/63] feat: responsive WIP --- .../docsearch-react/src/Footer/Footer.tsx | 6 +- packages/docsearch-react/src/style.css | 56 ++++++++++++++++--- 2 files changed, 51 insertions(+), 11 deletions(-) diff --git a/packages/docsearch-react/src/Footer/Footer.tsx b/packages/docsearch-react/src/Footer/Footer.tsx index a58431669..88c40652f 100644 --- a/packages/docsearch-react/src/Footer/Footer.tsx +++ b/packages/docsearch-react/src/Footer/Footer.tsx @@ -5,6 +5,9 @@ import { AlgoliaLogo } from './AlgoliaLogo'; export function Footer() { return ( <> +
+ +
  • @@ -36,9 +39,6 @@ export function Footer() { to close
-
- -
); } diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 0e827a5ac..af5c7ad4b 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -1,5 +1,15 @@ /* Variables */ +/* primary +secondary +bg +bg light +bg dark +text default +text muted +spacing +font size */ + :root { --docsearch-input-color: var(--ifm-color-emphasis-800); --docsearch-highlight-color: var(--ifm-color-primary); @@ -27,6 +37,12 @@ --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); --docsearch-logo-color: #5468ff; --docsearch-label-color: var(--ifm-color-emphasis-500); + + --docsearch-modal-width: 590px; + --docsearch-modal-height: 500px; + --docsearch-searchbox-height: 60px; + --docsearch-footer-height: 48px; + --docsearch-spacing: 12px; } /* Darkmode */ @@ -60,17 +76,17 @@ html[data-theme='dark'] { /* Search Button */ .DocSearch-SearchButton { + display: flex; height: 44px; margin: 0 0 0 20px; padding: 0 16px 0 10px; - border-radius: 22px; - background: var(--docsearch-searchbox-background); - box-shadow: var(--docsearch-searchbox-shadow); margin-left: 1rem; border: none; + border-radius: 22px; cursor: pointer; - display: flex; align-items: center; + box-shadow: var(--docsearch-searchbox-shadow); + background: var(--docsearch-searchbox-background); } .DocSearch-SearchButton-Icon { @@ -125,7 +141,8 @@ html[data-theme='dark'] { display: flex; flex-direction: column; width: 100%; - max-width: 590px; + max-width: var(--docsearch-modal-width); + height: var(--docsearch-modal-height); margin: 60px auto auto auto; border-radius: 6px; background: var(--docsearch-modal-background); @@ -143,7 +160,7 @@ html[data-theme='dark'] { display: flex; position: relative; width: 100%; - height: 60px; + height: var(--docsearch-searchbox-height); padding: 0 12px; margin: 12px; align-items: center; @@ -233,7 +250,7 @@ html[data-theme='dark'] { /* Modal Dropdown */ .DocSearch-Dropdown { - height: 380px; + height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2 - var(--docsearch-footer-height)); padding: 0 12px 20px; flex: 1 0 auto; overflow-y: scroll; @@ -254,9 +271,10 @@ html[data-theme='dark'] { .DocSearch-Footer { display: flex; - height: 48px; + height: var(--docsearch-footer-height); z-index: 9999; padding: 0 12px; + flex-direction: row-reverse; flex-shrink: 0; justify-content: space-between; align-items: center; @@ -433,3 +451,25 @@ html[data-theme='dark'] { /* Icons */ /* Responsive */ + + +/* @media only screen and (max-device-width: 1024px) { */ + @media (max-width: 996px){ + :root { + --docsearch-modal-height: 60vh; + } + .DocSearch-Modal { + margin: 0 auto; + } + .DocSearch-Commands { + display: none + } + .DocSearch-Hit { + letter-spacing: 0; + } + } + +/* todo: hide keyboard shortcut on smartphones, touchscreens device - cross browser limitation with media q, maybe js is better https://codepen.io/Ferie/pen/vQOMmO?editors=1010 */ +@media (hover: none) and (pointer: coarse) { + /* ... */ +} From e443a9e4edaf16089af0597c6f0ed6fbfdba764f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 09:05:19 +0100 Subject: [PATCH 35/63] fix: retrieve necessary attributes --- packages/docsearch-react/src/DocSearch.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 9b604798b..34f27fde0 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -74,6 +74,15 @@ export function DocSearch({ indexName, query, params: { + attributesToRetrieve: [ + 'hierarchy.lvl0', + 'hierarchy.lvl1', + 'hierarchy.lvl2', + 'hierarchy.lvl3', + 'content', + 'type', + 'url', + ], attributesToSnippet: [ 'hierarchy.lvl1', 'hierarchy.lvl2', From d20a2abf7e5ed6b26e04389ca9d07e80562efc29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 09:49:08 +0100 Subject: [PATCH 36/63] feat(docsearch): display Command key on Mac-like machines only --- .../src/theme/SearchBar/SearchButton.jsx | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/packages/website/src/theme/SearchBar/SearchButton.jsx b/packages/website/src/theme/SearchBar/SearchButton.jsx index 970cc78e2..d66666906 100644 --- a/packages/website/src/theme/SearchBar/SearchButton.jsx +++ b/packages/website/src/theme/SearchBar/SearchButton.jsx @@ -1,9 +1,21 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; export default function SearchButton({ onClick }) { + const [key, setKey] = useState('Ctrl'); + + useEffect(() => { + if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { + setKey('⌘'); + } + }, []); + return ( From 51b41bc4f0afca12e749161bdf7c7150965c99f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 09:49:20 +0100 Subject: [PATCH 37/63] fix: typescript error --- packages/autocomplete-core/src/onKeyDown.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/autocomplete-core/src/onKeyDown.ts b/packages/autocomplete-core/src/onKeyDown.ts index 3141a4845..b45ba4145 100644 --- a/packages/autocomplete-core/src/onKeyDown.ts +++ b/packages/autocomplete-core/src/onKeyDown.ts @@ -39,7 +39,9 @@ export function onKeyDown({ if ( store.getState().highlightedIndex !== null && - store.getState().suggestions.some(suggestion => suggestion.length > 0) + store + .getState() + .suggestions.some(suggestion => suggestion.items.length > 0) ) { const { item, itemValue, itemUrl, source } = getHighlightedItem({ state: store.getState(), @@ -99,7 +101,9 @@ export function onKeyDown({ // form event. if ( store.getState().highlightedIndex === null || - store.getState().suggestions.every(suggestion => suggestion.length === 0) + store + .getState() + .suggestions.every(suggestion => suggestion.items.length === 0) ) { return; } From b5f221e55026927da1c77b8bd8853d318cad3ba0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 10:46:46 +0100 Subject: [PATCH 38/63] feat(docsearch): prevent body scroll when opened --- packages/docsearch-react/src/style.css | 10 +++++++ packages/website/src/theme/SearchBar/index.js | 27 +++++++++++-------- 2 files changed, 26 insertions(+), 11 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index af5c7ad4b..df051177d 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -117,6 +117,16 @@ html[data-theme='dark'] { color: var(--ifm-color-emphasis-600); } +/* Body modifier */ + +.DocSearch--active { + /* + * We need to mark it as important because some websites override the + * `style` attribute (e.g. Docusaurus). + */ + overflow: hidden !important; +} + /* Container & Modal */ .DocSearch-Container, diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js index 6e10e357c..b75b97649 100644 --- a/packages/website/src/theme/SearchBar/index.js +++ b/packages/website/src/theme/SearchBar/index.js @@ -35,14 +35,23 @@ export default function SearchBar() { [isLoaded, setIsLoaded] ); - const open = React.useCallback( - function open() { + const onOpen = React.useCallback( + function onOpen() { load(); setIsShowing(true); + document.body.classList.add('DocSearch--active'); }, [load, setIsShowing] ); + const onClose = React.useCallback( + function onClose() { + setIsShowing(false); + document.body.classList.remove('DocSearch--active'); + }, + [setIsShowing] + ); + useEffect(() => { function onKeyDown(event) { if ( @@ -52,9 +61,9 @@ export default function SearchBar() { event.preventDefault(); if (isShowing) { - setIsShowing(!isShowing); + onClose(); } else { - open(); + onOpen(); } } } @@ -64,15 +73,11 @@ export default function SearchBar() { return () => { window.removeEventListener('keydown', onKeyDown); }; - }, [isShowing, open]); + }, [isShowing, onOpen, onClose]); return (
- { - open(); - }} - /> + {isLoaded && isShowing && ( setIsShowing(false)} + onClose={onClose} /> )}
From 500465f572de2ce97537788ec1efdd616dccf4be Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 11:08:14 +0100 Subject: [PATCH 39/63] fix: css mobile + tree icon color --- packages/docsearch-react/src/style.css | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index df051177d..ff7ce6c8f 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -24,6 +24,7 @@ font size */ --docsearch-hit-color: var(--ifm-color-emphasis-800); --docsearch-hit-active-color: white; --docsearch-hit-icon-color: var(--ifm-color-emphasis-500); + --docsearch-hit-tree-color: var(--ifm-color-emphasis-200); --docsearch-hit-background: white; --docsearch-hit-shadow: 0px 2px 6px 0px rgb(212, 217, 225); --docsearch-key-gradient: linear-gradient( @@ -57,6 +58,7 @@ html[data-theme='dark'] { --docsearch-searchbox-shadow: inset 0px 0px 1px 1px rgba(84, 104, 255, 0.6); --docsearch-hit-color: var(--ifm-color-emphasis-500); --docsearch-hit-icon-color: var(--ifm-color-emphasis-300); + --docsearch-hit-tree-color: rgba(109, 113, 163, 0.4); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(9, 10, 17); --docsearch-key-gradient: linear-gradient( @@ -163,7 +165,6 @@ html[data-theme='dark'] { .DocSearch-SearchBar { display: flex; - flex: 1; } .DocSearch-Form { @@ -282,7 +283,7 @@ html[data-theme='dark'] { .DocSearch-Footer { display: flex; height: var(--docsearch-footer-height); - z-index: 9999; + z-index: var(--ifm-z-index-fixed); padding: 0 12px; flex-direction: row-reverse; flex-shrink: 0; @@ -380,8 +381,8 @@ html[data-theme='dark'] { .DocSearch-Hit-Tree { width: 30px; height: 60px; - color: #d4d9e1; margin-right: 4px; + color: var(--docsearch-hit-tree-color); } .DocSearch-Hit[aria-selected='true'] { @@ -466,9 +467,11 @@ html[data-theme='dark'] { /* @media only screen and (max-device-width: 1024px) { */ @media (max-width: 996px){ :root { - --docsearch-modal-height: 60vh; + --docsearch-modal-height: 100vh; } .DocSearch-Modal { + border-radius: 0; + box-shadow: none; margin: 0 auto; } .DocSearch-Commands { From d3445a7473a02f24b73301be0238d8053d3dea9d Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 12:05:58 +0100 Subject: [PATCH 40/63] fix: responsive --- packages/docsearch-react/src/style.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index ff7ce6c8f..7e7addbc6 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -150,11 +150,12 @@ html[data-theme='dark'] { } .DocSearch-Modal { + position: relative; display: flex; flex-direction: column; width: 100%; max-width: var(--docsearch-modal-width); - height: var(--docsearch-modal-height); + /* height: var(--docsearch-modal-height); */ margin: 60px auto auto auto; border-radius: 6px; background: var(--docsearch-modal-background); @@ -261,8 +262,8 @@ html[data-theme='dark'] { /* Modal Dropdown */ .DocSearch-Dropdown { - height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2 - var(--docsearch-footer-height)); - padding: 0 12px 20px; + height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2); + padding: 0 12px 60px; flex: 1 0 auto; overflow-y: scroll; letter-spacing: 0.02em; @@ -282,8 +283,10 @@ html[data-theme='dark'] { .DocSearch-Footer { display: flex; + position: absolute; + bottom: 0; + width: 100%; height: var(--docsearch-footer-height); - z-index: var(--ifm-z-index-fixed); padding: 0 12px; flex-direction: row-reverse; flex-shrink: 0; @@ -465,10 +468,14 @@ html[data-theme='dark'] { /* @media only screen and (max-device-width: 1024px) { */ - @media (max-width: 996px){ + @media (max-width: 750px){ :root { --docsearch-modal-height: 100vh; } + .DocSearch-SearchButton-KeySeparator, + .DocSearch-SearchButton-Key { + display: none; + } .DocSearch-Modal { border-radius: 0; box-shadow: none; From b59995795a3063b113941b47ad5f1a490a19bb98 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 12:28:55 +0100 Subject: [PATCH 41/63] fix: try hotfix vh browser ios --- packages/docsearch-react/src/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 7e7addbc6..1b9813e30 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -470,7 +470,7 @@ html[data-theme='dark'] { /* @media only screen and (max-device-width: 1024px) { */ @media (max-width: 750px){ :root { - --docsearch-modal-height: 100vh; + --docsearch-modal-height: calc(100vh - 120px); } .DocSearch-SearchButton-KeySeparator, .DocSearch-SearchButton-Key { From a3020c0ff68a8a169ea6ac28ec2807c8711e9f81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 13:37:33 +0100 Subject: [PATCH 42/63] fix(docsearch): add Docusaurus hamburger menu --- packages/docsearch-react/src/style.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 1b9813e30..83c9c000f 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -129,6 +129,11 @@ html[data-theme='dark'] { overflow: hidden !important; } +/* Hide Docusaurus hamburger button when modal is opened */ +.DocSearch--active .menu__button { + display: none !important; +} + /* Container & Modal */ .DocSearch-Container, From 448bc5323fcff4a547d107feb5ea7b45fd8629ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 14:10:06 +0100 Subject: [PATCH 43/63] feat(docsearch): add Cancel button on mobile --- packages/docsearch-react/src/DocSearch.tsx | 1 + .../src/SearchBox/SearchBox.tsx | 73 ++++++++++--------- packages/docsearch-react/src/style.css | 20 ++++- 3 files changed, 60 insertions(+), 34 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 34f27fde0..c727d0619 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -194,6 +194,7 @@ export function DocSearch({ getFormProps={getFormProps} getLabelProps={getLabelProps} getInputProps={getInputProps} + onClose={onClose} /> diff --git a/packages/docsearch-react/src/SearchBox/SearchBox.tsx b/packages/docsearch-react/src/SearchBox/SearchBox.tsx index 5c4e80257..8952d4ab4 100644 --- a/packages/docsearch-react/src/SearchBox/SearchBox.tsx +++ b/packages/docsearch-react/src/SearchBox/SearchBox.tsx @@ -10,6 +10,7 @@ import { ResetIcon } from './ResetIcon'; import { LoadingIcon } from './LoadingIcon'; interface SearchBoxProps { + inputRef: MutableRefObject; query: string; getFormProps: GetFormProps; getLabelProps: GetLabelProps; @@ -18,7 +19,7 @@ interface SearchBoxProps { React.MouseEvent, React.KeyboardEvent >; - inputRef: MutableRefObject; + onClose(): void; } export function SearchBox(props: SearchBoxProps) { @@ -27,41 +28,47 @@ export function SearchBox(props: SearchBoxProps) { }); return ( -
- + <> + + -
- -
+
+ +
- + - +
+ + - + ); } diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 83c9c000f..5c5f7b270 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -171,6 +171,7 @@ html[data-theme='dark'] { .DocSearch-SearchBar { display: flex; + margin: 12px; } .DocSearch-Form { @@ -179,7 +180,6 @@ html[data-theme='dark'] { width: 100%; height: var(--docsearch-searchbox-height); padding: 0 12px; - margin: 12px; align-items: center; border-radius: 4px; background: var(--docsearch-searchbox-background); @@ -264,6 +264,10 @@ html[data-theme='dark'] { color: var(--docsearch-highlight-color); } +.DocSearch-Cancel { + display: none; +} + /* Modal Dropdown */ .DocSearch-Dropdown { @@ -486,6 +490,20 @@ html[data-theme='dark'] { box-shadow: none; margin: 0 auto; } + .DocSearch-Cancel { + display: block; + appearance: none; + background: none; + border: 0; + font: inherit; + cursor: pointer; + color: var(--docsearch-highlight-color); + margin-left: var(--docsearch-spacing); + padding: 0; + font-size: 1.125em; + font-weight: 500; + letter-spacing: 0.02em; + } .DocSearch-Commands { display: none } From ca77e4808b862a8f4e78c81c07bf1ff015e10549 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 14:39:43 +0100 Subject: [PATCH 44/63] fix: css --- .../docsearch-react/src/Footer/Footer.tsx | 2 +- packages/docsearch-react/src/style.css | 35 ++++++++++++++----- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/packages/docsearch-react/src/Footer/Footer.tsx b/packages/docsearch-react/src/Footer/Footer.tsx index 88c40652f..7e098632f 100644 --- a/packages/docsearch-react/src/Footer/Footer.tsx +++ b/packages/docsearch-react/src/Footer/Footer.tsx @@ -49,7 +49,7 @@ interface CommandIconProps { function CommandIcon(props: CommandIconProps) { return ( - + Date: Thu, 26 Mar 2020 14:45:04 +0100 Subject: [PATCH 45/63] feat(docsearch): include SearchButton in library --- .../src/SearchButton/SearchButton.tsx} | 33 +++++++++++++++---- .../docsearch-react/src/SearchButton/index.ts | 1 + packages/docsearch-react/src/index.ts | 1 + .../theme/SearchBar/SearchButton.module.css | 0 packages/website/src/theme/SearchBar/index.js | 18 +++++----- 5 files changed, 38 insertions(+), 15 deletions(-) rename packages/{website/src/theme/SearchBar/SearchButton.jsx => docsearch-react/src/SearchButton/SearchButton.tsx} (55%) create mode 100644 packages/docsearch-react/src/SearchButton/index.ts delete mode 100644 packages/website/src/theme/SearchBar/SearchButton.module.css diff --git a/packages/website/src/theme/SearchBar/SearchButton.jsx b/packages/docsearch-react/src/SearchButton/SearchButton.tsx similarity index 55% rename from packages/website/src/theme/SearchBar/SearchButton.jsx rename to packages/docsearch-react/src/SearchButton/SearchButton.tsx index d66666906..525ed379e 100644 --- a/packages/website/src/theme/SearchBar/SearchButton.jsx +++ b/packages/docsearch-react/src/SearchButton/SearchButton.tsx @@ -1,19 +1,40 @@ import React, { useState, useEffect } from 'react'; -export default function SearchButton({ onClick }) { - const [key, setKey] = useState('Ctrl'); +interface SearchButtonProps { + onClick(): void; +} + +const ACTION_KEY_DEFAULT = 'CTRL'; +const ACTION_KEY_APPLE = '⌘'; + +function isAppleDevice() { + if (typeof navigator === 'undefined') { + return ACTION_KEY_DEFAULT; + } + + return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform); +} + +export function SearchButton(props: SearchButtonProps) { + const [key, setKey] = useState(() => + isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT + ); useEffect(() => { - if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) { - setKey('⌘'); + if (isAppleDevice()) { + setKey(ACTION_KEY_APPLE); } }, []); return ( -
+ ); } From c945b56f55d91b096d84bc17eabb9ea97cda8b19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 14:53:38 +0100 Subject: [PATCH 46/63] fix(docsearch): title case Ctrl key --- packages/docsearch-react/src/SearchButton/SearchButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docsearch-react/src/SearchButton/SearchButton.tsx b/packages/docsearch-react/src/SearchButton/SearchButton.tsx index 525ed379e..e4638e758 100644 --- a/packages/docsearch-react/src/SearchButton/SearchButton.tsx +++ b/packages/docsearch-react/src/SearchButton/SearchButton.tsx @@ -4,7 +4,7 @@ interface SearchButtonProps { onClick(): void; } -const ACTION_KEY_DEFAULT = 'CTRL'; +const ACTION_KEY_DEFAULT = 'Ctrl'; const ACTION_KEY_APPLE = '⌘'; function isAppleDevice() { From 7d3f86431bc3d00e044fa858181b098906be6340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 15:05:35 +0100 Subject: [PATCH 47/63] feat(docsearch): decrease snippet length on mobile --- packages/docsearch-react/src/DocSearch.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index c727d0619..287a963c8 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -37,6 +37,7 @@ export function DocSearch({ const searchBoxRef = useRef(null); const dropdownRef = useRef(null); const inputRef = useRef(null); + const snipetLength = useRef(10); const searchClient = React.useMemo(() => algoliasearch(appId, apiKey), [ appId, @@ -84,10 +85,10 @@ export function DocSearch({ 'url', ], attributesToSnippet: [ - 'hierarchy.lvl1', - 'hierarchy.lvl2', - 'hierarchy.lvl3', - 'content', + `hierarchy.lvl1:${snipetLength.current}`, + `hierarchy.lvl2:${snipetLength.current}`, + `hierarchy.lvl3:${snipetLength.current}`, + `content:${snipetLength.current}`, ], snippetEllipsisText: '…', highlightPreTag: '', @@ -149,6 +150,14 @@ export function DocSearch({ [indexName, searchParameters, searchClient, onClose] ); + useEffect(() => { + const isMobileMediaQuery = window.matchMedia('(max-width: 750px)'); + + if (isMobileMediaQuery.matches) { + snipetLength.current = 5; + } + }, []); + useEffect(() => { if (!(searchBoxRef.current && dropdownRef.current && inputRef.current)) { return undefined; From 1acb585ab1af9697ec36083958e9f9bfd5a9ea96 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 15:26:59 +0100 Subject: [PATCH 48/63] fic: css --- packages/docsearch-react/src/DocSearch.tsx | 2 +- packages/docsearch-react/src/style.css | 28 +++------------------- 2 files changed, 4 insertions(+), 26 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 287a963c8..cca8d6e3c 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -93,7 +93,7 @@ export function DocSearch({ snippetEllipsisText: '…', highlightPreTag: '', highlightPostTag: '', - hitsPerPage: 10, + hitsPerPage: 15, distinct: 3, ...searchParameters, }, diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 71753e8e0..f782771b3 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -273,7 +273,8 @@ html[data-theme='dark'] { .DocSearch-Dropdown { height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2); - padding: 0 12px 60px; + padding: 0 12px 20px; + margin-bottom: var(--docsearch-footer-height); flex: 1 0 auto; overflow-y: scroll; letter-spacing: 0.02em; @@ -386,9 +387,6 @@ html[data-theme='dark'] { letter-spacing: 0; } -/* .DocSearch-Hit--Child { -} */ - .DocSearch-Hit-Tree { width: 30px; height: 60px; @@ -410,16 +408,6 @@ html[data-theme='dark'] { color: var(--docsearch-hit-active-color) !important; } -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path, -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon { - -} - -.DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-content-wrapper::after { - background: linear-gradient(90deg,transparent,var(--docsearch-highlight-color)); -} - - .DocSearch-Hit a { display: block; height: 60px; @@ -462,16 +450,6 @@ html[data-theme='dark'] { position: relative; } -.DocSearch-Hit-content-wrapper::after { -content:""; -display: block; -width: 40px; -height: 40px; -background-image: linear-gradient(90deg,rgba(255,255,255,0), white); -right:0; -position: absolute; -} - .DocSearch-Hit-title { font-size: 0.9em; font-weight: 500; @@ -498,7 +476,7 @@ position: absolute; @media (max-width: 750px){ :root { /* quickfix https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser */ - --docsearch-modal-height: calc(100vh - 120px); + --docsearch-modal-height: calc(100vh - 110px); } .DocSearch-SearchButton-KeySeparator, .DocSearch-SearchButton-Key { From f8afe9273cd5f927c8a47fa2996837c47d4c7fc5 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 15:58:38 +0100 Subject: [PATCH 49/63] fix: mobile searchbar cancel --- packages/docsearch-react/src/style.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index f782771b3..33fc7e7f2 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -177,8 +177,8 @@ html[data-theme='dark'] { .DocSearch-Form { display: flex; + flex: 1; position: relative; - width: 100%; height: var(--docsearch-searchbox-height); padding: 0 12px; align-items: center; @@ -488,7 +488,7 @@ html[data-theme='dark'] { margin: 0 auto; } .DocSearch-Cancel { - display: block; + display: inline-block; appearance: none; background: none; border: 0; @@ -497,7 +497,7 @@ html[data-theme='dark'] { color: var(--docsearch-highlight-color); margin-left: var(--docsearch-spacing); padding: 0; - font-size: 1.125em; + font-size: 1em; font-weight: 500; letter-spacing: 0.02em; } From 7526967a861bb19ba110554b6872bd7db4299208 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 16:09:26 +0100 Subject: [PATCH 50/63] fix: wrong calc for dropdown height --- packages/docsearch-react/src/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 33fc7e7f2..c5fc5362a 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -272,7 +272,7 @@ html[data-theme='dark'] { /* Modal Dropdown */ .DocSearch-Dropdown { - height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2); + height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2 - var(--docsearch-footer-height)); padding: 0 12px 20px; margin-bottom: var(--docsearch-footer-height); flex: 1 0 auto; From 2b81258df89bfc77ddeeb5735abcf58b988bf2fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 15:22:33 +0100 Subject: [PATCH 51/63] feat(docsearch): scroll to top of modal on query change --- packages/docsearch-react/src/DocSearch.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index cca8d6e3c..7d1407441 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -158,6 +158,12 @@ export function DocSearch({ } }, []); + useEffect(() => { + if (dropdownRef.current) { + dropdownRef.current.scrollTop = 0; + } + }, [state.query]); + useEffect(() => { if (!(searchBoxRef.current && dropdownRef.current && inputRef.current)) { return undefined; From 86120b61fcf555205ffb9734fec1cd8b83938f66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 15:49:42 +0100 Subject: [PATCH 52/63] fix(docsearch): fix display for all levels --- packages/docsearch-react/src/DocSearch.tsx | 6 ++++++ packages/docsearch-react/src/Results/Results.tsx | 9 ++++++--- packages/docsearch-react/src/style.css | 5 +---- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 7d1407441..d1b1810ae 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -80,6 +80,9 @@ export function DocSearch({ 'hierarchy.lvl1', 'hierarchy.lvl2', 'hierarchy.lvl3', + 'hierarchy.lvl4', + 'hierarchy.lvl5', + 'hierarchy.lvl6', 'content', 'type', 'url', @@ -88,6 +91,9 @@ export function DocSearch({ `hierarchy.lvl1:${snipetLength.current}`, `hierarchy.lvl2:${snipetLength.current}`, `hierarchy.lvl3:${snipetLength.current}`, + `hierarchy.lvl4:${snipetLength.current}`, + `hierarchy.lvl5:${snipetLength.current}`, + `hierarchy.lvl6:${snipetLength.current}`, `content:${snipetLength.current}`, ], snippetEllipsisText: '…', diff --git a/packages/docsearch-react/src/Results/Results.tsx b/packages/docsearch-react/src/Results/Results.tsx index 92e77dd9e..06d53eaa7 100644 --- a/packages/docsearch-react/src/Results/Results.tsx +++ b/packages/docsearch-react/src/Results/Results.tsx @@ -63,7 +63,7 @@ export function Results(props: ResultsProps) { )} -
+
@@ -86,7 +86,11 @@ export function Results(props: ResultsProps) { )} {item.hierarchy[item.type] && - (item.type === 'lvl2' || item.type === 'lvl3') && ( + (item.type === 'lvl2' || + item.type === 'lvl3' || + item.type === 'lvl4' || + item.type === 'lvl5' || + item.type === 'lvl6') && (
- {/* ... */} Date: Thu, 26 Mar 2020 16:08:56 +0100 Subject: [PATCH 53/63] fix(docsearch): don't escape snippeted hits --- .../docsearch-react/src/Results/Results.tsx | 48 +++++++++++-------- .../docsearch-react/src/types/DocSearchHit.ts | 20 ++++---- 2 files changed, 40 insertions(+), 28 deletions(-) diff --git a/packages/docsearch-react/src/Results/Results.tsx b/packages/docsearch-react/src/Results/Results.tsx index 06d53eaa7..def174b41 100644 --- a/packages/docsearch-react/src/Results/Results.tsx +++ b/packages/docsearch-react/src/Results/Results.tsx @@ -1,5 +1,4 @@ import React from 'react'; -import { Snippet } from '@francoischalifour/autocomplete-react'; import { GetMenuProps, GetItemProps, @@ -70,16 +69,19 @@ export function Results(props: ResultsProps) { {item.hierarchy[item.type] && item.type === 'lvl1' && (
- {item.content && ( - )}
@@ -92,30 +94,38 @@ export function Results(props: ResultsProps) { item.type === 'lvl5' || item.type === 'lvl6') && (
- -
)} {item.type === 'content' && (
- -
)} diff --git a/packages/docsearch-react/src/types/DocSearchHit.ts b/packages/docsearch-react/src/types/DocSearchHit.ts index 2cc65a204..71be3c930 100644 --- a/packages/docsearch-react/src/types/DocSearchHit.ts +++ b/packages/docsearch-react/src/types/DocSearchHit.ts @@ -16,17 +16,17 @@ interface DocSearchHitAttributeHighlightResult { } interface DocSearchHitHighlightResultHierarchy { - lvl0?: DocSearchHitAttributeHighlightResult; - lvl1?: DocSearchHitAttributeHighlightResult; - lvl2?: DocSearchHitAttributeHighlightResult; - lvl3?: DocSearchHitAttributeHighlightResult; - lvl4?: DocSearchHitAttributeHighlightResult; - lvl5?: DocSearchHitAttributeHighlightResult; - lvl6?: DocSearchHitAttributeHighlightResult; + lvl0: DocSearchHitAttributeHighlightResult; + lvl1: DocSearchHitAttributeHighlightResult; + lvl2: DocSearchHitAttributeHighlightResult; + lvl3: DocSearchHitAttributeHighlightResult; + lvl4: DocSearchHitAttributeHighlightResult; + lvl5: DocSearchHitAttributeHighlightResult; + lvl6: DocSearchHitAttributeHighlightResult; } interface DocSearchHitHighlightResult { - content?: DocSearchHitAttributeHighlightResult; + content: DocSearchHitAttributeHighlightResult; hierarchy: DocSearchHitHighlightResultHierarchy; hierarchy_camel: DocSearchHitHighlightResultHierarchy[]; } @@ -38,6 +38,8 @@ interface DocSearchHitAttributeSnippetResult { interface DocSearchHitSnippetResult { content: DocSearchHitAttributeSnippetResult; + hierarchy: DocSearchHitHighlightResultHierarchy; + hierarchy_camel: DocSearchHitHighlightResultHierarchy[]; } export interface DocSearchHit { @@ -57,7 +59,7 @@ export interface DocSearchHit { lvl6: string | null; }; _highlightResult: DocSearchHitHighlightResult; - _snippetResult?: DocSearchHitSnippetResult; + _snippetResult: DocSearchHitSnippetResult; _rankingInfo?: { promoted: boolean; nbTypos: number; From 9fb131f42cb051f82fec0492ffed7796bd99f216 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 26 Mar 2020 16:20:24 +0100 Subject: [PATCH 54/63] feat(docsearch): attach Algolia user agents to search client --- packages/docsearch-react/package.json | 2 +- packages/docsearch-react/src/DocSearch.tsx | 7 +++---- .../docsearch-react/src/utils/createSearchClient.ts | 13 +++++++++++++ packages/docsearch-react/src/utils/index.ts | 1 + packages/docsearch-react/src/version.ts | 1 + 5 files changed, 19 insertions(+), 5 deletions(-) create mode 100644 packages/docsearch-react/src/utils/createSearchClient.ts create mode 100644 packages/docsearch-react/src/version.ts diff --git a/packages/docsearch-react/package.json b/packages/docsearch-react/package.json index 8d1e1a655..d9e6bdc6b 100644 --- a/packages/docsearch-react/package.json +++ b/packages/docsearch-react/package.json @@ -34,7 +34,7 @@ }, "dependencies": { "@francoischalifour/autocomplete-core": "^1.0.0-alpha.10", - "@francoischalifour/autocomplete-react": "^1.0.0-alpha.10", + "@francoischalifour/autocomplete-preset-algolia": "^1.0.0-alpha.10", "algoliasearch": "^4.0.0" }, "peerDependencies": { diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index d1b1810ae..15e21f2a5 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -1,13 +1,12 @@ import React, { useRef, useEffect } from 'react'; -import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser'; import { createAutocomplete, AutocompleteState, } from '@francoischalifour/autocomplete-core'; -import { getAlgoliaHits } from '@francoischalifour/autocomplete-react'; +import { getAlgoliaHits } from '@francoischalifour/autocomplete-preset-algolia'; import { DocSearchHit, InternalDocSearchHit } from './types'; -import { noop, groupBy } from './utils'; +import { createSearchClient, groupBy, noop } from './utils'; import { SearchBox } from './SearchBox'; import { Dropdown } from './Dropdown'; import { Footer } from './Footer'; @@ -39,7 +38,7 @@ export function DocSearch({ const inputRef = useRef(null); const snipetLength = useRef(10); - const searchClient = React.useMemo(() => algoliasearch(appId, apiKey), [ + const searchClient = React.useMemo(() => createSearchClient(appId, apiKey), [ appId, apiKey, ]); diff --git a/packages/docsearch-react/src/utils/createSearchClient.ts b/packages/docsearch-react/src/utils/createSearchClient.ts new file mode 100644 index 000000000..439f66b6b --- /dev/null +++ b/packages/docsearch-react/src/utils/createSearchClient.ts @@ -0,0 +1,13 @@ +import algoliasearch from 'algoliasearch/dist/algoliasearch-lite.esm.browser'; + +import { version } from '../version'; + +export function createSearchClient(appId: string, apiKey: string) { + const searchClient = algoliasearch(appId, apiKey); + + if (typeof searchClient.addAlgoliaAgent === 'function') { + searchClient.addAlgoliaAgent(`docsearch-react (${version})`); + } + + return searchClient; +} diff --git a/packages/docsearch-react/src/utils/index.ts b/packages/docsearch-react/src/utils/index.ts index a684cfedb..58e751eff 100644 --- a/packages/docsearch-react/src/utils/index.ts +++ b/packages/docsearch-react/src/utils/index.ts @@ -1,2 +1,3 @@ +export * from './createSearchClient'; export * from './groupBy'; export * from './noop'; diff --git a/packages/docsearch-react/src/version.ts b/packages/docsearch-react/src/version.ts new file mode 100644 index 000000000..03d930471 --- /dev/null +++ b/packages/docsearch-react/src/version.ts @@ -0,0 +1 @@ +export const version = '1.0.0-alpha.10'; From c4af4cb8688228a95fc7918bf5ad9af26827190e Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 18:40:31 +0100 Subject: [PATCH 55/63] feat: apparently there is a new position in CSS3 ?!! --- packages/docsearch-react/src/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 2241a17c0..a17d420ab 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -385,6 +385,12 @@ html[data-theme='dark'] { font-weight: 600; color: var(--docsearch-highlight-color); letter-spacing: 0; + position: sticky; + top: 0; + z-index: var(--ifm-z-index-fixed); + background: var(--docsearch-modal-background); + /* hide hit shadow */ + box-shadow: 0 -4px 0 4px var(--docsearch-modal-background); } .DocSearch-Hit-Tree { From 45cd692a63bfa78cfe9ae1a043d011361152adb4 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 19:22:46 +0100 Subject: [PATCH 56/63] fix: cancel button mobile flex --- packages/docsearch-react/src/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index a17d420ab..9dde0ada9 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -177,7 +177,7 @@ html[data-theme='dark'] { .DocSearch-Form { display: flex; - flex: 1; + flex: 0 2 100%; position: relative; height: var(--docsearch-searchbox-height); padding: 0 12px; @@ -189,7 +189,7 @@ html[data-theme='dark'] { .DocSearch-Input { height: 100%; - flex-grow: 1; + flex: 0 2 100%; padding-left: 8px; font: inherit; font-size: 1.2em; @@ -492,6 +492,7 @@ html[data-theme='dark'] { } .DocSearch-Cancel { display: inline-block; + flex-basis: 0; appearance: none; background: none; border: 0; From 8c3c8f7b40b9a43db84b43a9ed18946f199fd5c2 Mon Sep 17 00:00:00 2001 From: Shipow Date: Thu, 26 Mar 2020 19:44:01 +0100 Subject: [PATCH 57/63] fix: cancel button mobile flex bis --- packages/docsearch-react/src/style.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 9dde0ada9..cb641dac0 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -157,7 +157,6 @@ html[data-theme='dark'] { .DocSearch-Modal { position: relative; - display: flex; flex-direction: column; width: 100%; max-width: var(--docsearch-modal-width); @@ -172,12 +171,12 @@ html[data-theme='dark'] { .DocSearch-SearchBar { display: flex; - margin: 12px; + padding: 12px; } .DocSearch-Form { display: flex; - flex: 0 2 100%; + width: 100%; position: relative; height: var(--docsearch-searchbox-height); padding: 0 12px; @@ -189,7 +188,7 @@ html[data-theme='dark'] { .DocSearch-Input { height: 100%; - flex: 0 2 100%; + flex: auto; padding-left: 8px; font: inherit; font-size: 1.2em; @@ -492,7 +491,7 @@ html[data-theme='dark'] { } .DocSearch-Cancel { display: inline-block; - flex-basis: 0; + flex: none; appearance: none; background: none; border: 0; From b31f34bd804ece9af280ffb0157d29aacade1421 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 27 Mar 2020 11:47:18 +0100 Subject: [PATCH 58/63] fix: design mobile cancel button + modal footer --- packages/docsearch-react/src/DocSearch.tsx | 2 +- packages/docsearch-react/src/style.css | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index 15e21f2a5..d0082f900 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -99,7 +99,7 @@ export function DocSearch({ highlightPreTag: '', highlightPostTag: '', hitsPerPage: 15, - distinct: 3, + distinct: 5, ...searchParameters, }, }, diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index cb641dac0..915e7cb81 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -158,7 +158,6 @@ html[data-theme='dark'] { .DocSearch-Modal { position: relative; flex-direction: column; - width: 100%; max-width: var(--docsearch-modal-width); /* height: var(--docsearch-modal-height); */ margin: 60px auto auto auto; @@ -188,7 +187,8 @@ html[data-theme='dark'] { .DocSearch-Input { height: 100%; - flex: auto; + flex: 1; + width: 80%; padding-left: 8px; font: inherit; font-size: 1.2em; @@ -272,7 +272,7 @@ html[data-theme='dark'] { .DocSearch-Dropdown { height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2 - var(--docsearch-footer-height)); - padding: 0 12px 20px; + padding: 0 12px 60px; margin-bottom: var(--docsearch-footer-height); flex: 1 0 auto; overflow-y: scroll; @@ -305,6 +305,7 @@ html[data-theme='dark'] { border-radius: 0 0 8px 8px; background: var(--docsearch-footer-background); box-shadow: var(--docsearch-footer-shadow); + z-index: var(--ifm-z-index-fixed); } .DocSearch-Commands { From f6254e885642f439059543dd0a7f06b480713663 Mon Sep 17 00:00:00 2001 From: Shipow Date: Fri, 27 Mar 2020 22:29:53 +0100 Subject: [PATCH 59/63] css tweaks --- packages/docsearch-react/src/style.css | 171 ++++++++++++------------- 1 file changed, 79 insertions(+), 92 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 915e7cb81..6abfb77d3 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -39,10 +39,11 @@ font size */ --docsearch-logo-color: #5468ff; --docsearch-label-color: var(--ifm-color-emphasis-500); - --docsearch-modal-width: 590px; - --docsearch-modal-height: 500px; - --docsearch-searchbox-height: 60px; - --docsearch-footer-height: 48px; + --docsearch-modal-width: 540px; + --docsearch-modal-height: 540px; + --docsearch-searchbox-height: 54px; + --docsearch-hit-height: 54px; + --docsearch-footer-height: 40px; --docsearch-spacing: 12px; } @@ -81,10 +82,10 @@ html[data-theme='dark'] { display: flex; height: 40px; margin: 0 0 0 20px; - padding: 0 14px 0 12px; + padding: 0 12px; margin-left: 1rem; border: none; - border-radius: 22px; + border-radius: 20px; cursor: pointer; align-items: center; box-shadow: var(--docsearch-searchbox-shadow); @@ -98,8 +99,6 @@ html[data-theme='dark'] { .DocSearch-SearchButton-Placeholder { margin: 0 8px; font-size: 1rem; - font-weight: 400; - color: var(--docsearch-placeholder-color); } .DocSearch-SearchButton-KeySeparator { @@ -111,8 +110,8 @@ html[data-theme='dark'] { display: flex; align-items: center; justify-content: center; - width: 21px; - height: 19px; + width: 20px; + height: 18px; padding-bottom: 2px; border-radius: 3px; background: var(--docsearch-key-gradient); @@ -170,7 +169,7 @@ html[data-theme='dark'] { .DocSearch-SearchBar { display: flex; - padding: 12px; + padding: var(--docsearch-spacing); } .DocSearch-Form { @@ -178,7 +177,7 @@ html[data-theme='dark'] { width: 100%; position: relative; height: var(--docsearch-searchbox-height); - padding: 0 12px; + padding: 0 var(--docsearch-spacing); align-items: center; border-radius: 4px; background: var(--docsearch-searchbox-background); @@ -213,8 +212,8 @@ html[data-theme='dark'] { .DocSearch-LoadingIndicator, .DocSearch-MagnifierLabel, .DocSearch-Reset { - height: 30px; - width: 30px; + height: 20px; + width: 20px; margin: 0; padding: 0; } @@ -256,8 +255,8 @@ html[data-theme='dark'] { .DocSearch-LoadingIndicator svg, .DocSearch-MagnifierLabel svg { - height: 26px; - width: 26px; + height: 24px; + width: 24px; } .DocSearch-MagnifierLabel { @@ -271,10 +270,12 @@ html[data-theme='dark'] { /* Modal Dropdown */ .DocSearch-Dropdown { - height: calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing)*2 - var(--docsearch-footer-height)); - padding: 0 12px 60px; + height: calc( + var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - + var(--docsearch-spacing) * 2 - var(--docsearch-footer-height) + ); + padding: 0 var(--docsearch-spacing) var(--docsearch-hit-height); margin-bottom: var(--docsearch-footer-height); - flex: 1 0 auto; overflow-y: scroll; letter-spacing: 0.02em; } @@ -297,7 +298,7 @@ html[data-theme='dark'] { bottom: 0; width: 100%; height: var(--docsearch-footer-height); - padding: 0 12px; + padding: 0 var(--docsearch-spacing); flex-direction: row-reverse; flex-shrink: 0; justify-content: space-between; @@ -316,7 +317,7 @@ html[data-theme='dark'] { } .DocSearch-Commands li:not(:last-of-type) { - margin-right: 12px; + margin-right: var(--docsearch-spacing); } .DocSearch-Commands { @@ -331,18 +332,17 @@ html[data-theme='dark'] { .DocSearch-Commands-Key { display: flex; + width: 20px; + height: 18px; + margin-right: 8px; + padding-bottom: 2px; align-items: center; justify-content: center; - width: 21px; - height: 19px; - padding-bottom: 2px; border-radius: 2px; - margin-right: 6px; background: var(--docsearch-key-gradient); box-shadow: var(--docsearch-key-shadow); } - .DocSearch-Logo a { display: flex; } @@ -360,10 +360,6 @@ html[data-theme='dark'] { /* Hit */ -.DocSearch-Hits{ - margin-bottom: 12px; -} - .DocSearch-Hits mark { background: none; color: var(--docsearch-highlight-color); @@ -375,12 +371,12 @@ html[data-theme='dark'] { border-radius: 4px; background: var(--docsearch-hit-background); box-shadow: var(--docsearch-hit-shadow); - padding-left: 12px; + padding-left: var(--docsearch-spacing); margin-bottom: 4px; } .DocSearch-Hit-source { - line-height: 30px; + line-height: 32px; font-size: 0.85em; font-weight: 600; color: var(--docsearch-highlight-color); @@ -389,13 +385,11 @@ html[data-theme='dark'] { top: 0; z-index: var(--ifm-z-index-fixed); background: var(--docsearch-modal-background); - /* hide hit shadow */ - box-shadow: 0 -4px 0 4px var(--docsearch-modal-background); } .DocSearch-Hit-Tree { - width: 30px; - height: 60px; + width: 24px; + height: var(--docsearch-hit-height); margin-right: 4px; color: var(--docsearch-hit-tree-color); } @@ -416,7 +410,6 @@ html[data-theme='dark'] { .DocSearch-Hit a { display: block; - height: 60px; border-radius: 4px; width: 100%; } @@ -427,35 +420,40 @@ html[data-theme='dark'] { .DocSearch-Hit-Container { display: flex; - height: 60px; - padding: 0 12px 0 0; + height: var(--docsearch-hit-height); + padding: 0 var(--docsearch-spacing) 0 0; flex-direction: row; align-items: center; color: var(--docsearch-hit-color); } -.DocSearch-Hit-icon { +.DocSearch-Hit-icon, +.DocSearch-Hit-action { height: 20px; width: 20px; - margin-right: 8px; color: var(--docsearch-hit-icon-color); } +.DocSearch-Hit-icon { + margin-right: 8px; +} + .DocSearch-Hit-content-wrapper { + position: relative; display: flex; + width: 80%; + line-height: 1.1em; flex: 1 0 auto; - white-space: nowrap; + font-weight: 500; overflow: hidden; - width: 80%; + white-space: nowrap; justify-content: center; flex-direction: column; - line-height: 1.1em; - position: relative; } .DocSearch-Hit-title { font-size: 0.9em; - font-weight: 500; + } .DocSearch-Hit-path { @@ -463,55 +461,44 @@ html[data-theme='dark'] { color: var(--docsearch-label-color); } -.DocSearch-Hit-action { - height: 20px; - width: 20px; - margin-left: 8px; - color: var(--docsearch-hit-icon-color); -} - -/* Icons */ - /* Responsive */ - -/* @media only screen and (max-device-width: 1024px) { */ - @media (max-width: 750px){ - :root { - /* quickfix https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser */ - --docsearch-modal-height: calc(100vh - 110px); - } - .DocSearch-SearchButton-KeySeparator, - .DocSearch-SearchButton-Key { - display: none; - } - .DocSearch-Modal { - border-radius: 0; - box-shadow: none; - margin: 0 auto; - } - .DocSearch-Cancel { - display: inline-block; - flex: none; - appearance: none; - background: none; - border: 0; - font: inherit; - cursor: pointer; - color: var(--docsearch-highlight-color); - margin-left: var(--docsearch-spacing); - padding: 0; - font-size: 1em; - font-weight: 500; - letter-spacing: 0.02em; - } - .DocSearch-Commands { - display: none - } - .DocSearch-Hit { - letter-spacing: 0; - } +@media (max-width: 750px) { + :root { + /* quickfix https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser */ + --docsearch-modal-height: calc(100vh - 110px); } + .DocSearch-SearchButton-KeySeparator, + .DocSearch-SearchButton-Key { + display: none; + } + .DocSearch-Modal { + border-radius: 0; + box-shadow: none; + margin: 0 auto; + } + .DocSearch-Cancel { + display: inline-block; + margin-left: var(--docsearch-spacing); + padding: 0; + appearance: none; + border: 0; + cursor: pointer; + background: none; + flex: none; + font: inherit; + font-size: 1em; + font-weight: 500; + letter-spacing: 0.02em; + color: var(--docsearch-highlight-color); + } + .DocSearch-Commands { + display: none; + } + .DocSearch-Hit { + letter-spacing: 0; + } +} /* todo: hide keyboard shortcut on smartphones, touchscreens device - cross browser limitation with media q, maybe js is better https://codepen.io/Ferie/pen/vQOMmO?editors=1010 */ @media (hover: none) and (pointer: coarse) { From 6863ca24f090cffe5d0aa6e2b86a6c74fa0d70f1 Mon Sep 17 00:00:00 2001 From: Shipow Date: Sat, 28 Mar 2020 11:11:50 +0100 Subject: [PATCH 60/63] feat: animations --- packages/docsearch-react/src/DocSearch.tsx | 4 +- .../src/NoResults/NoResults.tsx | 5 +- packages/docsearch-react/src/style.css | 111 +++++++++++++++--- 3 files changed, 99 insertions(+), 21 deletions(-) diff --git a/packages/docsearch-react/src/DocSearch.tsx b/packages/docsearch-react/src/DocSearch.tsx index d0082f900..c98831227 100644 --- a/packages/docsearch-react/src/DocSearch.tsx +++ b/packages/docsearch-react/src/DocSearch.tsx @@ -98,8 +98,8 @@ export function DocSearch({ snippetEllipsisText: '…', highlightPreTag: '', highlightPostTag: '', - hitsPerPage: 15, - distinct: 5, + hitsPerPage: 20, + distinct: 4, ...searchParameters, }, }, diff --git a/packages/docsearch-react/src/NoResults/NoResults.tsx b/packages/docsearch-react/src/NoResults/NoResults.tsx index d07fb10c9..3c2793e36 100644 --- a/packages/docsearch-react/src/NoResults/NoResults.tsx +++ b/packages/docsearch-react/src/NoResults/NoResults.tsx @@ -5,5 +5,8 @@ interface NoResultsProps { } export function NoResults(props: NoResultsProps) { - return

No results for “{props.query}“.

; + return ; } diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 6abfb77d3..8fba80a47 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -18,12 +18,13 @@ font size */ --docsearch-modal-background: var(--ifm-color-emphasis-100); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), 0px 3px 8px 0px rgba(116, 134, 169, 0.54); - --docsearch-searchbox-background: rgb(212, 217, 225); + --docsearch-searchbox-background: rgb(210, 215, 225); + --docsearch-searchbox-active-background: rgb(195, 200, 210); --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px white; --docsearch-hit-color: var(--ifm-color-emphasis-800); --docsearch-hit-active-color: white; - --docsearch-hit-icon-color: var(--ifm-color-emphasis-500); + --docsearch-hit-icon-color: var(--ifm-color-emphasis-400); --docsearch-hit-tree-color: var(--ifm-color-emphasis-200); --docsearch-hit-background: white; --docsearch-hit-shadow: 0px 2px 6px 0px rgb(212, 217, 225); @@ -39,11 +40,11 @@ font size */ --docsearch-logo-color: #5468ff; --docsearch-label-color: var(--ifm-color-emphasis-500); - --docsearch-modal-width: 540px; - --docsearch-modal-height: 540px; - --docsearch-searchbox-height: 54px; - --docsearch-hit-height: 54px; - --docsearch-footer-height: 40px; + --docsearch-modal-width: 560px; + --docsearch-modal-height: 600px; + --docsearch-searchbox-height: 56px; + --docsearch-hit-height: 56px; + --docsearch-footer-height: 44px; --docsearch-spacing: 12px; } @@ -76,6 +77,10 @@ html[data-theme='dark'] { --docsearch-label-color: rgb(109, 113, 163); } +.DocSearch--active .main-wrapper { + filter: blur(2px); +} + /* Search Button */ .DocSearch-SearchButton { @@ -83,7 +88,7 @@ html[data-theme='dark'] { height: 40px; margin: 0 0 0 20px; padding: 0 12px; - margin-left: 1rem; + margin-left: 2em; border: none; border-radius: 20px; cursor: pointer; @@ -92,6 +97,12 @@ html[data-theme='dark'] { background: var(--docsearch-searchbox-background); } +.DocSearch-SearchButton:hover, +.DocSearch-SearchButton:active, +.DocSearch-SearchButton:focus { + background: var(--docsearch-searchbox-active-background); +} + .DocSearch-SearchButton-Icon { color: var(--docsearch-highlight-color); } @@ -148,6 +159,16 @@ html[data-theme='dark'] { left: 0; top: 0; background-color: var(--docsearch-container-background); + animation: container 0.1s ease-in forwards; +} + +@keyframes container { + 0% { + opacity: 0.5; + } + 100% { + opacity: 1; + } } .DocSearch-Container a { @@ -158,7 +179,6 @@ html[data-theme='dark'] { position: relative; flex-direction: column; max-width: var(--docsearch-modal-width); - /* height: var(--docsearch-modal-height); */ margin: 60px auto auto auto; border-radius: 6px; background: var(--docsearch-modal-background); @@ -169,7 +189,7 @@ html[data-theme='dark'] { .DocSearch-SearchBar { display: flex; - padding: var(--docsearch-spacing); + padding: var(--docsearch-spacing) var(--docsearch-spacing) 0; } .DocSearch-Form { @@ -293,9 +313,9 @@ html[data-theme='dark'] { /* Modal Footer */ .DocSearch-Footer { - display: flex; position: absolute; bottom: 0; + display: flex; width: 100%; height: var(--docsearch-footer-height); padding: 0 var(--docsearch-spacing); @@ -317,7 +337,7 @@ html[data-theme='dark'] { } .DocSearch-Commands li:not(:last-of-type) { - margin-right: var(--docsearch-spacing); + margin-right: 0.8em; } .DocSearch-Commands { @@ -334,7 +354,7 @@ html[data-theme='dark'] { display: flex; width: 20px; height: 18px; - margin-right: 8px; + margin-right: 0.4em; padding-bottom: 2px; align-items: center; justify-content: center; @@ -376,6 +396,8 @@ html[data-theme='dark'] { } .DocSearch-Hit-source { + margin: 0 calc(var(--docsearch-spacing) * -1); + padding: 8px var(--docsearch-spacing) 0; line-height: 32px; font-size: 0.85em; font-weight: 600; @@ -408,6 +430,39 @@ html[data-theme='dark'] { color: var(--docsearch-hit-active-color) !important; } +.DocSearch-Hit { + animation-iteration-count: 1; + animation: hit 0.02s cubic-bezier(0.64, 0.57, 0.67, 1.53) forwards; + transform-origin: center top; + transform: scale(0); +} + +.DocSearch-Hit:nth-child(1) { + animation-delay: 0; + animation-duration: 0.001s; +} +.DocSearch-Hit:nth-child(2) { + animation-delay: 0.06s; +} +.DocSearch-Hit:nth-child(3) { + animation-delay: 0.12s; +} +.DocSearch-Hit:nth-child(4) { + animation-delay: 0.18s; +} +.DocSearch-Hit:nth-child(5) { + animation-delay: 0.24s; +} + +@keyframes hit { + 0% { + transform: scale(0.95); + } + 100% { + transform: scale(1); + } +} + .DocSearch-Hit a { display: block; border-radius: 4px; @@ -434,26 +489,23 @@ html[data-theme='dark'] { color: var(--docsearch-hit-icon-color); } -.DocSearch-Hit-icon { - margin-right: 8px; -} - .DocSearch-Hit-content-wrapper { position: relative; display: flex; width: 80%; + margin: 0 8px; line-height: 1.1em; flex: 1 0 auto; font-weight: 500; overflow: hidden; white-space: nowrap; + text-overflow: ellipsis; justify-content: center; flex-direction: column; } .DocSearch-Hit-title { font-size: 0.9em; - } .DocSearch-Hit-path { @@ -461,12 +513,24 @@ html[data-theme='dark'] { color: var(--docsearch-label-color); } +/* No Results */ + +.DocSearch-NoResults { + width: 80%; + margin: 0 auto; + text-align: center; + padding: var(--docsearch-spacing) 0; + margin-top: var(--docsearch-spacing); +} + /* Responsive */ @media (max-width: 750px) { :root { /* quickfix https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser */ --docsearch-modal-height: calc(100vh - 110px); + --docsearch-spacing: 10px; + --docsearch-footer-height: 40px; } .DocSearch-SearchButton-KeySeparator, .DocSearch-SearchButton-Key { @@ -479,6 +543,9 @@ html[data-theme='dark'] { } .DocSearch-Cancel { display: inline-block; + width: 0; + white-space: nowrap; + overflow: hidden; margin-left: var(--docsearch-spacing); padding: 0; appearance: none; @@ -491,7 +558,15 @@ html[data-theme='dark'] { font-weight: 500; letter-spacing: 0.02em; color: var(--docsearch-highlight-color); + animation: cancel-button ease-out 0.2s forwards; + } + + @keyframes cancel-button { + 100% { + width: 4em; + } } + .DocSearch-Commands { display: none; } From 277bae9d20ba0cb35c5b56340574b4531721874f Mon Sep 17 00:00:00 2001 From: Shipow Date: Sat, 28 Mar 2020 13:02:33 +0100 Subject: [PATCH 61/63] feat: cosmetics --- packages/docsearch-react/src/SearchButton/SearchButton.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/docsearch-react/src/SearchButton/SearchButton.tsx b/packages/docsearch-react/src/SearchButton/SearchButton.tsx index e4638e758..ddc8adf88 100644 --- a/packages/docsearch-react/src/SearchButton/SearchButton.tsx +++ b/packages/docsearch-react/src/SearchButton/SearchButton.tsx @@ -48,10 +48,9 @@ export function SearchButton(props: SearchButtonProps) { > - Search... + Search {key} - + K ); From 9a6400eeab9ff1066bd03623e4fc6dcdd1009ba7 Mon Sep 17 00:00:00 2001 From: Shipow Date: Sat, 28 Mar 2020 13:03:13 +0100 Subject: [PATCH 62/63] fix: design css colors --- packages/docsearch-react/src/style.css | 47 ++++++++++++-------------- 1 file changed, 21 insertions(+), 26 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 8fba80a47..9c28f89ef 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -13,19 +13,17 @@ font size */ :root { --docsearch-input-color: var(--ifm-color-emphasis-800); --docsearch-highlight-color: var(--ifm-color-primary); - --docsearch-placeholder-color: rgb(149, 165, 190); - --docsearch-container-background: rgb(60, 72, 96, 0.5); + --docsearch-placeholder-color: rgb(150, 155, 175); + --docsearch-container-background: rgb(60, 65, 85, 0.8); --docsearch-modal-background: var(--ifm-color-emphasis-100); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5), - 0px 3px 8px 0px rgba(116, 134, 169, 0.54); + 0px 3px 8px 0px rgba(85, 90, 100, 1); --docsearch-searchbox-background: rgb(210, 215, 225); - --docsearch-searchbox-active-background: rgb(195, 200, 210); - --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(192, 196, 230), + --docsearch-searchbox-active-background: rgb(195, 200, 220); + --docsearch-searchbox-shadow: inset 1px 2px 6px 0px rgb(190, 195, 215), inset 0px 1px 1px 0px rgb(134, 146, 221), 1px 1px 0px 0px white; --docsearch-hit-color: var(--ifm-color-emphasis-800); --docsearch-hit-active-color: white; - --docsearch-hit-icon-color: var(--ifm-color-emphasis-400); - --docsearch-hit-tree-color: var(--ifm-color-emphasis-200); --docsearch-hit-background: white; --docsearch-hit-shadow: 0px 2px 6px 0px rgb(212, 217, 225); --docsearch-key-gradient: linear-gradient( @@ -33,13 +31,12 @@ font size */ rgb(213, 219, 228) 0%, rgb(248, 248, 248) 100% ); - --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 208, 231), - inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(29, 37, 89, 0.38); + --docsearch-key-shadow: inset 0px -2px 0px 0px rgb(205, 205, 230), + inset 0px 0px 1px 1px white, 0px 1px 2px 1px rgba(30, 35, 90, 0.4); --docsearch-footer-background: white; --docsearch-footer-shadow: 0px -5px 7px 0px rgba(69, 98, 155, 0.12); --docsearch-logo-color: #5468ff; - --docsearch-label-color: var(--ifm-color-emphasis-500); - + --docsearch-muted-color: rgb(190, 195, 215); --docsearch-modal-width: 560px; --docsearch-modal-height: 600px; --docsearch-searchbox-height: 56px; @@ -51,16 +48,14 @@ font size */ /* Darkmode */ html[data-theme='dark'] { - --docsearch-highlight-color: var(--ifm-color-primary); --docsearch-container-background: rgba(9, 10, 17, 0.8); --docsearch-modal-background: rgb(21, 23, 42); --docsearch-modal-shadow: inset 1px 1px 0px 0px rgb(44, 46, 64), 0px 3px 8px 0px rgb(0, 3, 9); --docsearch-searchbox-background: rgb(9, 10, 17); - --docsearch-searchbox-shadow: inset 0px 0px 1px 1px rgba(84, 104, 255, 0.6); + --docsearch-searchbox-shadow: inset 0px 0px 0 2px var(--ifm-color-primary); + --docsearch-searchbox-active-background: rgb(9, 10, 17); --docsearch-hit-color: var(--ifm-color-emphasis-500); - --docsearch-hit-icon-color: var(--ifm-color-emphasis-300); - --docsearch-hit-tree-color: rgba(109, 113, 163, 0.4); --docsearch-hit-shadow: none; --docsearch-hit-background: rgb(9, 10, 17); --docsearch-key-gradient: linear-gradient( @@ -74,7 +69,7 @@ html[data-theme='dark'] { --docsearch-footer-shadow: inset 0px 1px 0px 0px rgba(73, 76, 106, 0.52), 0px -4px 8px 0px rgba(0, 0, 0, 0.34); --docsearch-logo-color: #fff; - --docsearch-label-color: rgb(109, 113, 163); + --docsearch-muted-color: rgb(100, 105, 125); } .DocSearch--active .main-wrapper { @@ -93,13 +88,16 @@ html[data-theme='dark'] { border-radius: 20px; cursor: pointer; align-items: center; - box-shadow: var(--docsearch-searchbox-shadow); background: var(--docsearch-searchbox-background); + color: var(--ifm-color-emphasis-900); + transition: background-color 0.4s ease-out, box-shadow 0.4s ease-out; } .DocSearch-SearchButton:hover, .DocSearch-SearchButton:active, .DocSearch-SearchButton:focus { + outline: none; + box-shadow: var(--docsearch-searchbox-shadow); background: var(--docsearch-searchbox-active-background); } @@ -112,17 +110,13 @@ html[data-theme='dark'] { font-size: 1rem; } -.DocSearch-SearchButton-KeySeparator { - margin: 0 2px; - color: var(--docsearch-label-color); -} - .DocSearch-SearchButton-Key { display: flex; align-items: center; justify-content: center; width: 20px; height: 18px; + margin-right: 0.4em; padding-bottom: 2px; border-radius: 3px; background: var(--docsearch-key-gradient); @@ -375,7 +369,7 @@ html[data-theme='dark'] { .DocSearch-Label { font-size: 0.75em; line-height: 1.8em; - color: var(--docsearch-label-color); + color: var(--docsearch-muted-color); } /* Hit */ @@ -413,7 +407,8 @@ html[data-theme='dark'] { width: 24px; height: var(--docsearch-hit-height); margin-right: 4px; - color: var(--docsearch-hit-tree-color); + color: var(--docsearch-muted-color); + opacity: 0.5; } .DocSearch-Hit[aria-selected='true'] { @@ -486,7 +481,7 @@ html[data-theme='dark'] { .DocSearch-Hit-action { height: 20px; width: 20px; - color: var(--docsearch-hit-icon-color); + color: var(--docsearch-muted-color); } .DocSearch-Hit-content-wrapper { @@ -510,7 +505,7 @@ html[data-theme='dark'] { .DocSearch-Hit-path { font-size: 0.7em; - color: var(--docsearch-label-color); + color: var(--docsearch-muted-color); } /* No Results */ From fd11b1c162a24e42c3ad3fa740b46d88a916be49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Tue, 31 Mar 2020 17:04:18 +0200 Subject: [PATCH 63/63] fix(docsearch): disable animations on hits --- packages/docsearch-react/src/style.css | 33 -------------------------- 1 file changed, 33 deletions(-) diff --git a/packages/docsearch-react/src/style.css b/packages/docsearch-react/src/style.css index 9c28f89ef..8ae3e3e89 100644 --- a/packages/docsearch-react/src/style.css +++ b/packages/docsearch-react/src/style.css @@ -425,39 +425,6 @@ html[data-theme='dark'] { color: var(--docsearch-hit-active-color) !important; } -.DocSearch-Hit { - animation-iteration-count: 1; - animation: hit 0.02s cubic-bezier(0.64, 0.57, 0.67, 1.53) forwards; - transform-origin: center top; - transform: scale(0); -} - -.DocSearch-Hit:nth-child(1) { - animation-delay: 0; - animation-duration: 0.001s; -} -.DocSearch-Hit:nth-child(2) { - animation-delay: 0.06s; -} -.DocSearch-Hit:nth-child(3) { - animation-delay: 0.12s; -} -.DocSearch-Hit:nth-child(4) { - animation-delay: 0.18s; -} -.DocSearch-Hit:nth-child(5) { - animation-delay: 0.24s; -} - -@keyframes hit { - 0% { - transform: scale(0.95); - } - 100% { - transform: scale(1); - } -} - .DocSearch-Hit a { display: block; border-radius: 4px;