Make search result items links

Author: lukekarrys

src/components/link.js

@@ -38,4 +38,19 @@ const Link = React.forwardRef(function Link({to, href, ...props}, ref) {
   return <PrimerLink ref={ref} href={href} {...props} />
 })
 
+export const LinkNoUnderline = React.forwardRef(function LinkNoUnderline({sx, ...props}, ref) {
+  return (
+    <Link
+      ref={ref}
+      sx={{
+        ...sx,
+        '&:hover, &:focus': {
+          textDecoration: 'none',
+        },
+      }}
+      {...props}
+    />
+  )
+})
+
 export default Link

src/components/search-results.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import {Box, Text} from '@primer/react'
+import {LinkNoUnderline} from './link'
 import useSiteMetadata from '../hooks/use-site-metadata'
 import * as getNav from '../util/get-nav'
 
@@ -31,6 +32,8 @@ function SearchResults({results, getItemProps, highlightedIndex}) {
 
   return results.map((item, index) => (
     <Box
+      as={LinkNoUnderline}
+      to={item.path}
       key={item.path}
       style={{cursor: 'pointer'}}
       sx={{

src/components/table-of-contents.js

@@ -37,7 +37,7 @@ export const Mobile = withTableOfContents(({items}) => {
   return (
     <Box sx={{display: ['block', null, 'none'], mb: 3}}>
       <Details {...getDetailsProps()}>
-        <Button variant="invisible" as="summary" leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}>
+        <Button as="summary" sx={{display: 'inline-flex'}} leadingIcon={open ? ChevronDownIcon : ChevronRightIcon}>
           Table of contents
         </Button>
         <TableOfContents items={items} />

src/components/variant-select.js

@@ -2,18 +2,10 @@ import React from 'react'
 import {ActionList, ActionMenu, Box} from '@primer/react'
 import * as getNav from '../util/get-nav'
 import usePage from '../hooks/use-page'
-import Link from './link'
+import {LinkNoUnderline} from './link'
 
 const VariantItem = ({title, shortName, url, active}) => (
-  <ActionList.Item
-    as={Link}
-    to={url}
-    id={shortName}
-    active={active}
-    sx={{
-      ':hover': {textDecoration: 'none'},
-    }}
-  >
+  <ActionList.Item as={LinkNoUnderline} to={url} id={shortName} active={active}>
     {title}
   </ActionList.Item>
 )

src/constants.js

@@ -5,3 +5,5 @@ export const HEADER_BAR = 10
 export const FULL_HEADER_HEIGHT = HEADER_HEIGHT + HEADER_BAR
 
 export const SCROLL_MARGIN_TOP = FULL_HEADER_HEIGHT + 24
+
+export const CLI_PATH = '/cli'

src/hooks/use-search.js

@@ -4,10 +4,7 @@ import {navigate, graphql, useStaticQuery} from 'gatsby'
 import {useIsMobile} from './use-breakpoint'
 import usePage from './use-page'
 import * as getNav from '../util/get-nav'
-
-// This worker can live for the entire duraction of the site
-const WORKER = new Worker(new URL('../util/search.worker.js', import.meta.url))
-const CLI_ROOT = '/cli'
+import {CLI_PATH} from '../constants'
 
 const useSearchData = () => {
   const data = useStaticQuery(graphql`
@@ -51,50 +48,13 @@ const useSearchData = () => {
 
 const useCliVersion = () => {
   return getNav.getCurrentOrDefaultVariant(
-    getNav.getItem(getNav.getVariantRoot(`${CLI_ROOT}/`, {stripTrailing: false})),
+    getNav.getItem(getNav.getVariantRoot(`${CLI_PATH}/`, {stripTrailing: false})),
     usePage().location.pathname,
   )
 }
 
-function useSearch() {
-  const [query, setQuery] = React.useState()
-  const [results, setResults] = React.useState(null)
-  const queryRef = React.useRef()
-  const items = useSearchData()
+const useSearchCombobox = (results, setQuery) => {
   const isMobile = useIsMobile()
-  const {url: cliUrl} = useCliVersion()
-
-  const handleSearchResults = React.useCallback(({data}) => {
-    if (data.debug) {
-      console.log(data.debug)
-    }
-    if (data.query && data.results && data.query === queryRef.current) {
-      setResults(data.results)
-    }
-  }, [])
-
-  React.useEffect(() => {
-    WORKER.addEventListener('message', handleSearchResults)
-  }, [handleSearchResults])
-
-  React.useEffect(() => {
-    WORKER.postMessage({items})
-  }, [items])
-
-  React.useEffect(() => {
-    WORKER.postMessage({cli: {root: CLI_ROOT, current: cliUrl}})
-  }, [cliUrl])
-
-  React.useEffect(() => {
-    queryRef.current = query
-
-    if (query) {
-      WORKER.postMessage({query})
-    } else {
-      setResults(null)
-    }
-  }, [query])
-
   const combobox = useCombobox({
     id: 'search-box',
     items: results || [],
@@ -130,6 +90,50 @@ function useSearch() {
       return changes
     },
   })
+  return combobox
+}
+
+function useSearch() {
+  const [query, setQuery] = React.useState()
+  const [results, setResults] = React.useState(null)
+  const queryRef = React.useRef()
+  const items = useSearchData()
+  const {url: cliUrl} = useCliVersion()
+  const worker = React.useRef()
+
+  const handleSearchResults = React.useCallback(({data}) => {
+    if (data.query && data.results && data.query === queryRef.current) {
+      setResults(data.results)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    worker.current = new Worker(new URL('../util/search.worker.js', import.meta.url))
+  }, [])
+
+  React.useEffect(() => {
+    worker.current.addEventListener('message', handleSearchResults)
+  }, [worker, handleSearchResults])
+
+  React.useEffect(() => {
+    worker.current.postMessage({items})
+  }, [worker, items])
+
+  React.useEffect(() => {
+    worker.current.postMessage({cli: {root: CLI_PATH, current: cliUrl}})
+  }, [worker, cliUrl])
+
+  React.useEffect(() => {
+    queryRef.current = query
+
+    if (query) {
+      worker.current.postMessage({query})
+    } else {
+      setResults(null)
+    }
+  }, [worker, query])
+
+  const combobox = useSearchCombobox(results, setQuery)
 
   return {
     ...combobox,

src/mdx/index.js

@@ -6,7 +6,7 @@ import {LinkIcon} from '@primer/octicons-react'
 import textContent from 'react-addons-text-content'
 import {SCROLL_MARGIN_TOP} from '../constants'
 import usePage from '../hooks/use-page'
-import SiteLink from '../components/link'
+import SiteLink, {LinkNoUnderline} from '../components/link'
 
 export {default as Code} from './code'
 export {default as Index} from './nav-hierarchy'
@@ -40,15 +40,7 @@ const StyledHeading = styled(Heading)`
 
 const HeaderLink = ({autolink, children, ...props}) =>
   autolink ? (
-    <SiteLink
-      {...props}
-      sx={{
-        color: 'inherit',
-        '&:hover, &:focus': {
-          textDecoration: 'none',
-        },
-      }}
-    >
+    <LinkNoUnderline {...props} sx={{color: 'inherit'}}>
       {children}
       <Octicon
         icon={LinkIcon}
@@ -60,7 +52,7 @@ const HeaderLink = ({autolink, children, ...props}) =>
           verticalAlign: 'middle !important',
         }}
       />
-    </SiteLink>
+    </LinkNoUnderline>
   ) : (
     children
   )