From 60700df108f75c81d475ab6b07e3ecd555dba92d Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Mon, 27 Jul 2020 14:28:35 -0500 Subject: [PATCH] feat: search --- package.json | 2 +- src/common/data/clarity-ref.ts | 1 + src/common/hooks/use-active-heading.tsx | 1 + src/components/header.tsx | 22 +------ src/components/search.tsx | 83 +++++++++---------------- src/pages/_app.tsx | 2 +- src/pages/android/tutorial.md | 12 ++-- src/pages/faqs/allFAQS.md | 1 - yarn.lock | 36 ++++++----- 9 files changed, 63 insertions(+), 97 deletions(-) diff --git a/package.json b/package.json index 628a65c6..de0cc70b 100755 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "1.0.0", "dependencies": { "@blockstack/ui": "^2.12.2-beta.0", - "@docsearch/react": "^1.0.0-alpha.14", + "@docsearch/react": "^1.0.0-alpha.24", "@hashicorp/remark-plugins": "^3.0.0", "@mapbox/rehype-prism": "^0.5.0", "@mdx-js/loader": "1.6.13", diff --git a/src/common/data/clarity-ref.ts b/src/common/data/clarity-ref.ts index ce01ad15..693df47b 100644 --- a/src/common/data/clarity-ref.ts +++ b/src/common/data/clarity-ref.ts @@ -76,6 +76,7 @@ export const convertClarityRefToMdx = async () => { content: _functions, headings: getHeadings(CLARITY_REFERENCE.functions), }; + const keywords = { content: _keywords, headings: getHeadings(CLARITY_REFERENCE.keywords), diff --git a/src/common/hooks/use-active-heading.tsx b/src/common/hooks/use-active-heading.tsx index bfdb8f08..cb24478c 100644 --- a/src/common/hooks/use-active-heading.tsx +++ b/src/common/hooks/use-active-heading.tsx @@ -15,6 +15,7 @@ export const useActiveHeading = (_slug: string): ActiveHeadingReturn => { const asPath = router && router.asPath; const { activeSlug, slugInView, doChangeActiveSlug, doChangeSlugInView } = useAppState(); const urlHash = asPath?.includes('#') && asPath.split('#')[1]; + const location = typeof window !== 'undefined' && window.location.href; useEffect(() => { diff --git a/src/components/header.tsx b/src/components/header.tsx index 6bf4140b..f88589e1 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -24,6 +24,7 @@ import NextLink from 'next/link'; import MagnifyIcon from 'mdi-react/MagnifyIcon'; import { useRouter } from 'next/router'; import { ColorModeButton } from '@components/color-mode-button'; +import Search from '@components/search'; const MenuButton = ({ ...rest }: any) => { const { isOpen, handleOpen, handleClose } = useMobileMenuState(); @@ -40,6 +41,7 @@ const MenuButton = ({ ...rest }: any) => { ); }; + const BreadCrumbs: React.FC = props => { const router = useRouter(); const [route, setRoute] = React.useState(undefined); @@ -149,25 +151,7 @@ const SubBar: React.FC = props => ( }} > - - - + ); diff --git a/src/components/search.tsx b/src/components/search.tsx index f5ab66cb..6d3e0955 100644 --- a/src/components/search.tsx +++ b/src/components/search.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Box, Flex, Portal, space, Fade, themeColor, color } from '@blockstack/ui'; -import { useDocSearchKeyboardEvents } from '@docsearch/react/dist/umd'; +import { useDocSearchKeyboardEvents, DocSearchModal } from '@docsearch/react'; import { border } from '@common/utils'; import { Text } from '@components/typography'; @@ -8,44 +8,44 @@ import SearchIcon from 'mdi-react/SearchIcon'; import Router from 'next/router'; import Link from 'next/link'; -const searchOptions = { - apiKey: '40753d06eed43b94e6fd1fe4342479b9', - indexName: 'blockstack_design', +const getLocalUrl = href => { + const _url = new URL(href); + const url = href + .replace(_url.origin, '') + .replace('#__next', '') + .replace('.html', '') + .replace('storage/clidocs', 'core/cmdLineRef'); + return url; }; - function Hit({ hit, children }: any) { + const url = getLocalUrl(hit.url); return ( - + {children} ); } -let DocSearchModal: any = null; +const navigator = { + navigate: async ({ suggestionUrl }: any) => { + const url = getLocalUrl(suggestionUrl); + return Router.push(url); + }, +}; +const searchOptions = { + apiKey: '9040ba6d60f5ecb36eafc26396288875', + indexName: 'blockstack', + navigator, +}; export const SearchBox: React.FC = () => { - const [isLoaded, setIsLoaded] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false); - const importDocSearchModalIfNeeded = React.useCallback(function importDocSearchModalIfNeeded() { - if (DocSearchModal) { - setIsLoaded(true); - return Promise.resolve(); - } - - return Promise.all([import('@docsearch/react/modal')]).then(([{ DocSearchModal: Modal }]) => { - setIsLoaded(true); - DocSearchModal = Modal; - }); - }, []); - const onOpen = React.useCallback( function onOpen() { - importDocSearchModalIfNeeded().then(() => { - setIsOpen(true); - }); + setIsOpen(true); }, - [importDocSearchModalIfNeeded, setIsOpen] + [setIsOpen] ); const onClose = React.useCallback( @@ -55,49 +55,22 @@ export const SearchBox: React.FC = () => { [setIsOpen] ); - React.useEffect(() => { - if (isOpen && typeof document !== 'undefined') { - const element = document.getElementById('docsearch-input'); - if (document.activeElement !== element) { - element.focus(); - } - } - }, [isOpen]); - useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }); return ( <> - {isLoaded && ( + { {styles => ( - { - return items.map(item => { - const url = new URL(item.url); - return { - ...item, - url: item.url.replace(url.origin, '').replace('#__next', ''), - }; - }); - }} - hitComponent={Hit} - /> + )} - )} - + } +