docs(autocomplete-preset-algolia): unify examples (#495)

* docs(autocomplete-preset-algolia): unify examples

* docs(autocomplete-preset-algolia): fix remaining examples

* docs(autocomplete-preset-algolia): add missing comma

Author: sarahdayan

packages/website/docs/highlightHit.md

@@ -42,7 +42,7 @@ import { highlightHit } from '@algolia/autocomplete-js';
 const hit = {
   hierarchicalCategories: {
     lvl1: 'Cameras & Camcoders',
-  }
+  },
   _highlightResult: {
     hierarchicalCategories: {
       lvl1: {

packages/website/docs/parseAlgoliaHitHighlight.md

@@ -39,12 +39,13 @@ If you don't use a package manager, you can use a standalone endpoint:
 ```js
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "the"
 const hit = {
-  name: 'Laptop',
+  name: 'The Legend of Zelda: Breath of the Wild',
   _highlightResult: {
     name: {
-      value: '__aa_highlight__Lap__/aa_highlight__top',
+      value:
+        '__aa-highlight__The__/aa-highlight__ Legend of Zelda: Breath of __aa-highlight__the__/aa-highlight__ Wild',
     },
   },
 };
@@ -53,33 +54,48 @@ const highlightedParts = parseAlgoliaHitHighlight({
   attribute: 'name',
 });
 
-// [{ value: 'Lap', isHighlighted: true }, { value: 'top', isHighlighted: false }]
+/*
+ * [
+ *  { value: 'The', isHighlighted: true },
+ *  { value: ' Legend of Zelda: Breath of ', isHighlighted: false },
+ *  { value: 'the', isHighlighted: true },
+ *  { value: ' Wild', isHighlighted: false },
+ * ]
+ */
 ```
 
 ### With nested attributes
 
 ```js
 import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "cam"
 const hit = {
-  name: {
-    type: 'Laptop',
+  hierarchicalCategories: {
+    lvl1: 'Cameras & Camcoders',
   },
   _highlightResult: {
-    name: {
-      type: {
-        value: '__aa_highlight__Lap__/aa_highlight__top',
+    hierarchicalCategories: {
+      lvl1: {
+        value:
+          '__aa-highlight__Cam__/aa-highlight__eras & __aa-highlight__Cam__/aa-highlight__coders',
       },
     },
   },
 };
 const highlightedParts = parseAlgoliaHitHighlight({
   hit,
-  attribute: ['name', 'type'],
+  attribute: ['hierarchicalCategories', 'lvl1'],
 });
 
-// [{ value: 'Lap', isHighlighted: true }, { value: 'top', isHighlighted: false }]
+/*
+ * [
+ *  { value: 'Cam', isHighlighted: true },
+ *  { value: 'eras & ', isHighlighted: false },
+ *  { value: 'Cam', isHighlighted: true },
+ *  { value: 'coders', isHighlighted: false },
+ * ]
+ */
 ```
 
 ## Parameters

packages/website/docs/parseAlgoliaHitReverseHighlight.md

@@ -39,47 +39,59 @@ If you don't use a package manager, you can use a standalone endpoint:
 ```js
 import { parseAlgoliaHitReverseHighlight } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "zelda"
 const hit = {
-  name: 'Laptop',
+  query: 'zelda switch',
   _highlightResult: {
-    name: {
-      value: '__aa_highlight__Lap__/aa_highlight__top',
+    query: {
+      value:
+        '__aa-highlight__zelda__/aa-highlight__ switch',
     },
   },
 };
 const reverseHighlightedParts = parseAlgoliaHitReverseHighlight({
   hit,
-  attribute: 'name',
+  attribute: 'query',
 });
 
-// [{ value: 'Lap', isHighlighted: false }, { value: 'top', isHighlighted: true }]
+/*
+ * [
+ *  { value: 'zelda', isHighlighted: false },
+ *  { value: ' switch', isHighlighted: true },
+ * ]
+ */
 ```
 
 ### With nested attributes
 
 ```js
 import { parseAlgoliaHitReverseHighlight } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "video"
 const hit = {
-  name: {
-    type: 'Laptop',
+  hierarchicalCategories: {
+    lvl1: 'Video games',
   },
   _highlightResult: {
-    name: {
-      type: {
-        value: '__aa_highlight__Lap__/aa_highlight__top',
+    hierarchicalCategories: {
+      lvl1: {
+        value:
+          '__aa-highlight__Video__/aa-highlight__ games',
       },
     },
   },
 };
 const reverseHighlightedParts = parseAlgoliaHitReverseHighlight({
   hit,
-  attribute: ['name', 'type'],
+  attribute: ['hierarchicalCategories', 'lvl1'],
 });
 
-// [{ value: 'Lap', isHighlighted: false }, { value: 'top', isHighlighted: true }]
+/*
+ * [
+ *  { value: 'Video', isHighlighted: false },
+ *  { value: ' games', isHighlighted: true },
+ * ]
+ */
 ```
 
 ## Parameters

packages/website/docs/parseAlgoliaHitReverseSnippet.md

@@ -39,47 +39,59 @@ If you don't use a package manager, you can use a standalone endpoint:
 ```js
 import { parseAlgoliaHitReverseSnippet } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "zelda"
 const hit = {
-  name: 'Laptop',
+  query: 'zelda switch',
   _snippetResult: {
-    name: {
-      value: '__aa_highlight__Lap__/aa_highlight__top',
+    query: {
+      value:
+        '__aa-highlight__zelda__/aa-highlight__ switch',
     },
   },
 };
 const reverseSnippetedParts = parseAlgoliaHitReverseSnippet({
   hit,
-  attribute: 'name',
+  attribute: 'query',
 });
 
-// [{ value: 'Lap', isHighlighted: false }, { value: 'top', isHighlighted: true }]
+/*
+ * [
+ *  { value: 'zelda', isHighlighted: false },
+ *  { value: ' switch', isHighlighted: true },
+ * ]
+ */
 ```
 
 ## Example with nested attributes
 
 ```js
 import { parseAlgoliaHitReverseSnippet } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "video"
 const hit = {
-  name: {
-    type: 'Laptop',
+  hierarchicalCategories: {
+    lvl1: 'Video games',
   },
   _snippetResult: {
-    name: {
-      type: {
-        value: '__aa_highlight__Lap__/aa_highlight__top',
+    hierarchicalCategories: {
+      lvl1: {
+        value:
+          '__aa-highlight__Video__/aa-highlight__ games',
       },
     },
   },
 };
 const reverseSnippetedParts = parseAlgoliaHitReverseSnippet({
   hit,
-  attribute: ['name', 'type'],
+  attribute: ['hierarchicalCategories', 'lvl1'],
 });
 
-// [{ value: 'Lap', isHighlighted: false }, { value: 'top', isHighlighted: true }]
+/*
+ * [
+ *  { value: 'Video', isHighlighted: false },
+ *  { value: ' games', isHighlighted: true },
+ * ]
+ */
 ```
 
 ## Parameters

packages/website/docs/parseAlgoliaHitSnippet.md

@@ -37,14 +37,15 @@ If you don't use a package manager, you can use a standalone endpoint:
 ### With a single string
 
 ```js
-import { parseAlgoliaHitSnippet } from '@algolia/autocomplete-preset-algolia';
+import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "the"
 const hit = {
-  name: 'Laptop',
+  name: 'The Legend of Zelda: Breath of the Wild',
   _snippetResult: {
     name: {
-      value: '__aa_highlight__Lap__/aa_highlight__top',
+      value:
+        '__aa-highlight__The__/aa-highlight__ Legend of Zelda: Breath of __aa-highlight__the__/aa-highlight__ Wild',
     },
   },
 };
@@ -53,33 +54,48 @@ const snippetedParts = parseAlgoliaHitSnippet({
   attribute: 'name',
 });
 
-// [{ value: 'Lap', isHighlighted: true }, { value: 'top', isHighlighted: false }]
+/*
+ * [
+ *  { value: 'The', isHighlighted: true },
+ *  { value: ' Legend of Zelda: Breath of ', isHighlighted: false },
+ *  { value: 'the', isHighlighted: true },
+ *  { value: ' Wild', isHighlighted: false },
+ * ]
+ */
 ```
 
 ### With nested attributes
 
 ```js
 import { parseAlgoliaHitSnippet } from '@algolia/autocomplete-preset-algolia';
 
-// An Algolia hit for query "lap"
+// An Algolia hit for query "cam"
 const hit = {
-  name: {
-    type: 'Laptop',
+  hierarchicalCategories: {
+    lvl1: 'Cameras & Camcoders',
   },
   _snippetResult: {
-    name: {
-      type: {
-        value: '__aa_highlight__Lap__/aa_highlight__top',
+    hierarchicalCategories: {
+      lvl1: {
+        value:
+          '__aa-highlight__Cam__/aa-highlight__eras & __aa-highlight__Cam__/aa-highlight__coders',
       },
     },
   },
 };
 const snippetedParts = parseAlgoliaHitSnippet({
   hit,
-  attribute: ['name', 'type'],
+  attribute: ['hierarchicalCategories', 'lvl1'],
 });
 
-// [{ value: 'Lap', isHighlighted: true }, { value: 'top', isHighlighted: false }]
+/*
+ * [
+ *  { value: 'Cam', isHighlighted: true },
+ *  { value: 'eras & ', isHighlighted: false },
+ *  { value: 'Cam', isHighlighted: true },
+ *  { value: 'coders', isHighlighted: false },
+ * ]
+ */
 ```
 
 ## Parameters

packages/website/docs/reverseSnippetHit.md

@@ -38,7 +38,7 @@ If you're referencing a nested attribute, you can use the array syntax.
 ```js
 import { reverseSnippetHit } from '@algolia/autocomplete-js';
 
-// An Algolia hit for query "hello"
+// An Algolia hit for query "video"
 const hit = {
   hierarchicalCategories: {
     lvl1: 'Video games',

packages/website/docs/snippetHit.md

@@ -15,13 +15,13 @@ To determine what attribute to parse, you can pass it as a string.
 ```js
 import { snippetHit } from '@algolia/autocomplete-js';
 
-// An Algolia hit for query "he"
+// An Algolia hit for query "the"
 const hit = {
-  query: 'Hello there',
+  name: 'The Legend of Zelda: Breath of the Wild',
   _snippetResult: {
     query: {
       value:
-        '__aa-highlight__He__/aa-highlight__llo t__aa-highlight__he__/aa-highlight__re',
+        '__aa-highlight__The__/aa-highlight__ Legend of Zelda: Breath of __aa-highlight__the__/aa-highlight__ Wild',
     },
   },
 };
@@ -38,23 +38,23 @@ If you're referencing a nested attribute, you can use the array syntax.
 ```js
 import { snippetHit } from '@algolia/autocomplete-js';
 
-// An Algolia hit for query "he"
+// An Algolia hit for query "cam"
 const hit = {
-  query: {
-    title: 'Hello there',
-  }
+  hierarchicalCategories: {
+    lvl1: 'Cameras & Camcoders',
+  },
   _snippetResult: {
-    query: {
-      title: {
+    hierarchicalCategories: {
+      lvl1: {
         value:
-          '__aa-highlight__He__/aa-highlight__llo t__aa-highlight__he__/aa-highlight__re',
+          '__aa-highlight__Cam__/aa-highlight__eras & __aa-highlight__Cam__/aa-highlight__coders',
       },
     },
   },
 };
 const snippetedValue = snippetHit({
   hit,
-  attribute: ['query', 'title'],
+  attribute: ['hierarchicalCategories', 'lvl1'],
 });
 ```