Search

[timlrx]

#26

Search Component

• Supports Algolia and Kbar (local)
• Search component is implemented using react context and is meant to wrap the entire application at the root level
• Modal based search which can be open with control k
• Users can also toggle open or close the component by using the query.toggle() method from useContext
• Algolia search is modified from the docusaurus integration and lazy loads the modal
• Kbar is modified from contentlayer docs implementation but instead of using the default table display which has compatibility issues with Preact (List items not being rendered while keyboard navigation in production (with preact)  timc1/kbar#208), we use a simple list to display the results.
• Instead of using loading all the content to search together with the component, we create the search index at build time using a post build script and load the content to be search after the main page loads to avoid delaying FCP.
• Sample config for kbar

    provider: 'kbar',
    kbarConfig: {
       searchDocumentsPath: 'search.json', // path to load documents to search
    },

• Config for algolia

provider: 'algolia',
algoliaConfig: {
      // The application ID provided by Algolia
      appId: 'R2IYF7ETH7',
      // Public API key: it is safe to commit it
      apiKey: '599cec31baffa4868cae4e79f180729b',
      indexName: 'docsearch',
    },

[changeset-bot]

🦋 Changeset detected

Latest commit: adb3986

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
pliny	Patch
@pliny/cli	Patch
@pliny/installer	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[timlrx]

Helper code to integrate a button which launches the search modal e.g for a documentation template:

import { useContext } from 'react'
import { SearchContext } from 'pliny/search'
import siteMetadata from '@/data/siteMetadata'

const ButtonChildren = () => {
  return (
    <>
      <span className="mr-2 block w-3">
        <svg
          className="text-gray-400 dark:text-gray-300"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
      </span>
      <span className="mr-8 text-slate-400 dark:text-slate-500">Search...</span>
      <span
        className={`inline-block whitespace-nowrap rounded px-1.5 align-middle font-medium leading-4 tracking-wide [font-size:10px] ${'border border-slate-400/70 text-slate-500 dark:border-slate-600 dark:text-slate-400'}`}
      >
        ⌘K
      </span>
    </>
  )
}


const Page = () => {
  const { query } = useContext(SearchContext(siteMetadata.search.provider))
  return (
    <SectionContainer>
      <button
        onClick={() => {
          query.toggle()
        }}
        className="flex h-8 cursor-text items-center rounded-md border border-gray-200 bg-gray-50 px-2 text-sm hover:border-gray-300 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:hover:bg-gray-800"
      >
        <ButtonChildren />
      </button>
   </SectionContainer>
)}