docs: update AutocompleteExample

Author: francoischalifour

packages/website/docs/getting-started.md

@@ -217,6 +217,7 @@ Check out how the template displays items by searching in the input below:
   getSources={({ query }) => {
     return [
       {
+        sourceId: 'docsearch',
         getItems() {
           return getAlgoliaHits({
             searchClient,
@@ -292,6 +293,7 @@ Now give it a try: navigate to one of the items using your keyboard and hitting
   getSources={({ query }) => {
     return [
       {
+        sourceId: 'docsearch',
         getItems() {
           return getAlgoliaHits({
             searchClient,

packages/website/docs/introduction.md

@@ -21,6 +21,7 @@ For example, try typing the letter "s" in the search box below.
   getSources={({ query }) => {
     return [
       {
+        sourceId: 'docsearch',
         getItems() {
           return getAlgoliaHits({
             searchClient,
@@ -29,10 +30,21 @@ For example, try typing the letter "s" in the search box below.
                 indexName: 'autocomplete',
                 query,
                 params: {
-                  hitsPerPage: 5
-                }
-              }
-            ]
+                  hitsPerPage: 5,
+                  attributesToSnippet: [
+                    'content:10',
+                    'hierarchy.lvl0:10',
+                    'hierarchy.lvl1:10',
+                    'hierarchy.lvl2:10',
+                    'hierarchy.lvl3:10',
+                    'hierarchy.lvl4:10',
+                    'hierarchy.lvl5:10',
+                    'hierarchy.lvl6:10',
+                  ],
+                  snippetEllipsisText: '…',
+                },
+              },
+            ],
           });
         },
         getItemUrl({ item }) {
@@ -48,7 +60,7 @@ For example, try typing the letter "s" in the search box below.
                   .slice(0, -1)}
               />
             );
-          }
+          },
         },
       },
     ];

packages/website/src/components/AutocompleteDocSearchItem.tsx

@@ -1,5 +1,6 @@
+import { snippetHit } from '@algolia/autocomplete-js';
 import { Hit } from '@algolia/client-search';
-import React from 'react';
+import React, { createElement } from 'react';
 
 type DocSearchItem = {
   content: string | null;
@@ -25,14 +26,20 @@ type DocSearchItem = {
     lvl6: string | null;
   };
 };
-type DocSearchHit = Hit<DocSearchItem>;
-type AutocompleteItemProps = { hit: DocSearchHit; breadcrumb: string[] };
+type AutocompleteItemProps = {
+  hit: Hit<DocSearchItem>;
+  breadcrumb: string[];
+};
 
 export function AutocompleteDocSearchItem({
   hit,
   breadcrumb,
 }: AutocompleteItemProps) {
-  const title = hit.type === 'content' ? hit.content : hit.hierarchy[hit.type];
+  const title = snippetHit({
+    hit,
+    attribute: hit.type === 'content' ? 'content' : ['hierarchy', hit.type],
+    createElement,
+  });
 
   return (
     <a href={hit.url} className="aa-ItemLink">

packages/website/src/components/AutocompleteExample.tsx

@@ -1,8 +1,9 @@
+import { BaseItem } from '@algolia/autocomplete-core';
 import { autocomplete, AutocompleteOptions } from '@algolia/autocomplete-js';
 import React, { createElement, Fragment, useEffect, useRef } from 'react';
 import { render } from 'react-dom';
 
-export function AutocompleteExample<TItem extends {}>(
+export function AutocompleteExample<TItem extends BaseItem>(
   props: Omit<AutocompleteOptions<TItem>, 'container'>
 ) {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -28,5 +29,10 @@ export function AutocompleteExample<TItem extends {}>(
     };
   }, [props]);
 
-  return <div ref={containerRef} style={{ padding: '1rem 0' }} />;
+  return (
+    <div
+      ref={containerRef}
+      style={{ marginBottom: 'var(--ifm-paragraph-margin-bottom)' }}
+    />
+  );
 }