Apollo Algolia Autocomplete

This repo contains a custom Algolia autocomplete React component that powers the search bar in various Apollo GraphQL sites.

Installation

npm i apollo-algolia-autocomplete

Demo

https://apollo-algolia.netlify.app/

Usage

// App.js
import React from 'react';
import Autocomplete from './components/autocomplete';

function App() {
  return (
    <div>
      ...
      <Autocomplete
        appId={'YOUR_APP_ID'}
        apiKey={'YOUR_API_KEY'}
        currentSource="blog"
        docset="react"
      />
        {/* content that should show up beneath the search bar when the search modal is closed */}
    </div>
  );
}

export default App;

Props

Name	Description	type	Default value	Required
appId	Your Algolia app ID	string	--	yes
apiKey	Your Algolia API key	string	--	yes
currentSource	Algolia index name ('docs', 'blog', 'odyssey') that you want to appear first in the search results	string	'docs'	no
docset	Name of the docset by which you want to filter the documentation results	string	''	no
sources	Algolia indices to append to the default Autocomplete sources	object	defaultSources var in Autocomplete.js	no

If a currentSource prop is provided, the search result sources will be sorted to put the currentSource at the top.

Any additional props will be passed to the autocomplete function from @algolia/autocomplete-js.

**This component has the Algolia sources baked in and is therefore not customizable on that front. The only customizable aspect of the Algolia sources is which source results are displayed first (via the currentSource prop)

Custom styling

This package uses the autocomplete-theme-classic to provide some default styling. It also uses vanilla CSS to override some of those defaults to better fit the Apollo brand.

You can find the different class names and CSS variables already being used by autocomplete-theme-classic in the Algolia docs. This will enable you to override any of them with your own styles. Create a .css file with any overrides and import it wherever you're rendering your Autocomplete component.

**Some of this package's custom styles stray a bit from the default Algolia theme. Below are the additional classes that have been added:

• aa-CategoriesContainer
• aa-PreviewTitleWrapper
• aa-DocsetIcon

TO DO

• [x] create example site to demo implementation
  • simple Gatsby site at /example
  • use yarn workspaces
• [x] put this and algolia parsing logic plugin things in same repo
• [x] odyssey results: only show results for non-internal courses
• [x] add functionality to the "Can't find what you're looking for?" section
• [x] optional filtering (press Tab?) -- need to decide what words to allow for filtering
  • used Algolia's optionalFilters option
• [x] query suggestions
• [ ] odyssey results: include course and lesson name in title
• [ ] restyle scroll bar
• [ ] clean up mobile styling
• [ ] fine tune relevancy (i.e. only show v2 results if explicitly searching for v2, otherwise show v3)
• [x] padding left section titles
• [ ] preview description text should provide more information than what's on the left results. longer description, title structure/history
• [ ] pills on highlight section should link /refer to something useful
• [x] we can filter out documentation (as we're in the doc
• [x] no round corners on reuslts hover highlight
• [ ] placeholder text in search bar should be insightful and guides users on what the can search
• [x] overall height of overlay could be taller
• [x] font in search bar could be larger
• [ ] having the remaining search bar from the page visibile behind the overlay looks strange( we should probably hide it)
• [ ] click on query suggestion should fill out value in search bar
• [ ] query suggestions sometimes shows what's is already searched ("client")

Known Bugs 🐛

• [x] String excerpts for blog records include <p>
• [ ] Excerpts in results list don't highlight queried term
• [ ] Some records have no title
• [ ] Clicking on a query suggestion doesn't fill in the input bar with that term
• [x] Titles in preview sometimes squish the words together
• [ ] Duplicate results can show up for Odyssey (possibly if there are less results than hitsPerPage? Not sure if also happens for other categories)

UI Ideas

• breadcrumbs so users can see what section within the docs the search result is in
• category tags
• in search results and page previews, have different color for the parts of the text that match the search
• images for blogs/odyssey?