diff --git a/config/dependencies.yaml b/config/dependencies.yaml index 846bb11ffe3..13d8a993745 100644 --- a/config/dependencies.yaml +++ b/config/dependencies.yaml @@ -236,6 +236,7 @@ dev: 'react-dom': *react 'react-hotkeys-hook': &reactHotkeysHook '4.4.0' 'react-instantsearch-dom': &reactInstantsearchDom '6.40.0' + 'react-instantsearch-hooks-web': '6.44.0' 'react-markdown': &reactMarkdown '8.0.7' 'react-swipeable': &reactSwipeable '7.0.0' 'react-timeago': &reactTimeago '7.1.0' @@ -400,3 +401,4 @@ shared: 'web-worker': '1.2.0' dev: 'recursive-readdir': '^2.2.3' + 'html-to-text': '^9.0.5' diff --git a/sites/dev/components/layouts/docs.mjs b/sites/dev/components/layouts/docs.mjs index 2bfa0b32cdb..0a80bec6bd0 100644 --- a/sites/dev/components/layouts/docs.mjs +++ b/sites/dev/components/layouts/docs.mjs @@ -16,7 +16,7 @@ export const DocsLayout = ({ children = [], pageTitle = false }) => { {title && (
-

{pageTitle ? pageTitle : title}

+

{pageTitle ? pageTitle : title}

)}
{children}
diff --git a/sites/dev/components/search.mjs b/sites/dev/components/search.mjs index ac77b42ba96..a08401de2fb 100644 --- a/sites/dev/components/search.mjs +++ b/sites/dev/components/search.mjs @@ -1,64 +1,10 @@ -// Hooks -import { useState, useRef } from 'react' -import { useRouter } from 'next/router' -import { useHotkeys } from 'react-hotkeys-hook' -// Dependencies import algoliasearch from 'algoliasearch/lite' -import { - InstantSearch, - connectHits, - connectHighlight, - connectSearchBox, -} from 'react-instantsearch-dom' -import config from 'site/algolia.config.mjs' -// Components +import { InstantSearch, SearchBox, Hits, Highlight, Snippet } from 'react-instantsearch-hooks-web' +import { siteConfig } from 'site/site.config.mjs' import Link from 'next/link' -import { CloseIcon } from 'shared/components/icons.mjs' +import { ClearIcon } from 'shared/components/icons.mjs' -export const ns = ['search'] - -const searchClient = algoliasearch(config.algolia.app, config.algolia.key) - -const Hits = (props) => { - // When we hit enter in the text field, we want to navigate to the result - // which means we must make the result links available in the input somehow - // so let's stuff them in a data attribute - const links = props.hits.map((hit) => hit.page) - props.input.current.setAttribute('data-links', JSON.stringify(links)) - - return props.hits.map((hit, index) => ( - - )) -} - -const CustomHits = connectHits(Hits) - -const Highlight = ({ highlight, attribute, hit, snippet = false }) => { - const parsedHit = highlight({ - highlightProperty: snippet ? '_snippetResult' : '_highlightResult', - attribute, - hit, - }) - - return parsedHit.map((part, index) => - part.isHighlighted ? ( - - {part.value} - - ) : ( - {part.value} - ) - ) -} - -const CustomHighlight = connectHighlight(Highlight) +const searchClient = algoliasearch(siteConfig.algolia.app, siteConfig.algolia.key) const Hit = (props) => (
( text-base text-base-content sm:rounded lg:px-4 lg:py-2 - hover:bg-secondary hover:bg-opacity-10 hover:text-base-content - ${props.index === props.active ? 'bg-secondary bg-opacity-30' : 'bg-base-300 bg-opacity-10'} + border border-solid border-secondary + bg-secondary bg-opacity-10 + hover:bg-secondary hover:bg-opacity-30 `} > {props.hit._highlightResult?.title ? ( - + ) : ( props.hit.title )} - - {props.hit.page.split('/')[1]} - +
+ {props.hit.type} + + {props.hit.page.split('/')[1]} + +
- {props.hit._snippetResult?.body && ( + {props.hit._snippetResult?.body?.value ? ( - + - )} - {props.hit?._highlightResult?.page && ( + ) : ( - + )}
) -// We use this for trapping ctrl-c -const handleInputKeydown = (evt, setSearch, setActive, active, router) => { - if (evt.key === 'Escape') setSearch(false) - if (evt.key === 'ArrowDown') setActive((act) => act + 1) - if (evt.key === 'ArrowUp') setActive((act) => act - 1) - if (evt.key === 'Enter') { - // Trigger navigation - if (evt.target?.dataset?.links) { - router.push(JSON.parse(evt.target.dataset.links)[active]) - setSearch(false) - } - } -} - -const SearchBox = (props) => { - const input = useRef(null) - const router = useRouter() - useHotkeys('ctrl+x', () => { - input.current.value = '' - }) - if (input.current && props.active < 0) input.current.focus() - - const { currentRefinement, refine, setSearch, setActive } = props - +export const Search = () => { return ( -
-
evt.preventDefault()}> -
-
- refine(event.currentTarget.value)} - onKeyDown={(evt) => - handleInputKeydown(evt, setSearch, setActive, props.active, router) - } - className="input lg:input-lg input-bordered input-neutral w-full pr-16" - placeholder="Type to search" - /> - -
- -
-
- {input.current && input.current.value.length > 0 && ( - - )} -
-
-
-
- -
-
-
- ) -} - -const CustomSearchBox = connectSearchBox(SearchBox) - -export const Search = (props) => { - const [active, setActive] = useState(0) - useHotkeys('esc', () => props.setSearch(false)) - useHotkeys('up', () => { - if (active) setActive((act) => act - 1) - }) - useHotkeys('down', () => { - setActive((act) => act + 1) - }) - useHotkeys('down', () => { - console.log('enter', active) - }) - - const stateProps = { - setSearch: props.setSearch, - setMenu: props.setMenu, - active, - setActive, - } - - return ( - - + + } + /> + {/* Widgets */} + ) } diff --git a/sites/dev/components/wrappers/layout.mjs b/sites/dev/components/wrappers/layout.mjs index 6cc14943a5d..74192275a65 100644 --- a/sites/dev/components/wrappers/layout.mjs +++ b/sites/dev/components/wrappers/layout.mjs @@ -1,17 +1,10 @@ import Head from 'next/head' import { Header, ns as headerNs } from 'site/components/header/index.mjs' import { Footer, ns as footerNs } from 'shared/components/footer/index.mjs' -import { Search, ns as searchNs } from 'site/components/search.mjs' -export const ns = [...new Set([...headerNs, ...footerNs, ...searchNs])] +export const ns = [...new Set([...headerNs, ...footerNs])] -export const LayoutWrapper = ({ - children = [], - search, - setSearch, - noSearch = false, - header = false, -}) => { +export const LayoutWrapper = ({ children = [], header = false }) => { const ChosenHeader = header ? header : Header return ( @@ -25,24 +18,8 @@ export const LayoutWrapper = ({ - +
{children}
- {!noSearch && search && ( - <> -
- -
-
- - )}