docs: general cleanup (#503)

sarahdayan · web-flow · commit ac90dcee293e · 2021-03-28T18:44:55.000+02:00
* docs: change Discord link

* docs: space out the embedded example more

* docs: add missing `sourceId`

* docs: fix code background color in admonitions

* docs: fix homepage content

* style: format

* style: format
diff --git a/packages/website/docs/autocomplete-js.md b/packages/website/docs/autocomplete-js.md
@@ -57,7 +57,7 @@ const autocompleteSearch = autocomplete({
   getSources() {
     return [
       {
-        sourceId: 'querySuggestionsSources',
+        sourceId: 'querySuggestions',
         getItemInputValue: ({ item }) => item.query,
         getItems({ query }) {
           return getAlgoliaHits({
diff --git a/packages/website/docs/basic-options.md b/packages/website/docs/basic-options.md
@@ -19,6 +19,7 @@ autocomplete({
   getSources() {
     return [
       {
+        sourceId: 'links',
         getItems({ query }) {
           return [
             { label: 'Twitter', url: 'https://twitter.com' },
diff --git a/packages/website/docs/createAutocomplete.md b/packages/website/docs/createAutocomplete.md
@@ -52,7 +52,7 @@ const autocomplete = createAutocomplete({
   getSources() {
     return [
       {
-        sourceId: 'querySuggestionsSource',
+        sourceId: 'querySuggestions',
         getItemInputValue: ({ item }) => item.query,
         getItems({ query }) {
           return getAlgoliaHits({
diff --git a/packages/website/docs/keyboard-navigation.md b/packages/website/docs/keyboard-navigation.md
@@ -19,7 +19,7 @@ The Navigator API defines three navigation schemes based on key combinations:
 
 To activate keyboard navigation, you need to implement a [`getItemUrl`](createAutocomplete#getitemurl) function in each of your [sources](/docs/sources) to provide the URL to navigate to. It tells the Navigator API which link to open on <kbd>Enter</kbd>.
 
-```js {6-8}
+```js {7-9}
 autocomplete({
   // ...
   getSources() {
@@ -30,7 +30,9 @@ autocomplete({
           return item.url;
         },
         getItems() {
-          return [];
+          return [
+            // ...
+          ];
         },
       },
     ];
diff --git a/packages/website/docs/plugins.md b/packages/website/docs/plugins.md
@@ -59,6 +59,7 @@ const gitHubReposPlugin = {
   getSources() {
     return [
       {
+        sourceId: 'githubPlugin',
         getItems() {
           return [
             { name: 'algolia/autocomplete.js', stars: 1237 },
@@ -114,6 +115,7 @@ export function createGitHubReposPlugin(options) {
         .then((repositories) => {
           return [
             {
+              sourceId: 'githubPlugin',
               getItems() {
                 return repositories.items;
               },
diff --git a/packages/website/docs/sending-algolia-insights-events.md b/packages/website/docs/sending-algolia-insights-events.md
@@ -54,6 +54,7 @@ autocomplete({
   getSources({ query }) {
     return [
       {
+        sourceId: 'products',
         getItems() {
           return getAlgoliaHits({
             searchClient,
diff --git a/packages/website/docs/sources.md b/packages/website/docs/sources.md
@@ -21,7 +21,7 @@ autocomplete({
   getSources() {
     return [
       {
-        sourceId: 'staticSource',
+        sourceId: 'links',
         getItems() {
           return [
             { label: 'Twitter', url: 'https://twitter.com' },
@@ -50,7 +50,7 @@ autocomplete({
   getSources() {
     return [
       {
-        sourceId: 'staticSource',
+        sourceId: 'links',
         getItems({ query }) {
           return [
             { label: 'Twitter', url: 'https://twitter.com' },
@@ -146,7 +146,7 @@ autocomplete({
   getSources() {
     return [
       {
-        sourceId: 'algoliaHits',
+        sourceId: 'products',
         getItems({ query }) {
           return getAlgoliaHits({
             searchClient,
@@ -185,6 +185,7 @@ autocomplete({
       .then(({ predictions }) => {
         return [
           {
+            sourceId: 'predictions',
             getItems() {
               return predictions;
             },
@@ -236,7 +237,7 @@ autocomplete({
 
       return [
         {
-          sourceId: 'querySuggestionsSource',
+          sourceId: 'querySuggestions',
           getItems() {
             return suggestions.hits;
           },
@@ -245,7 +246,7 @@ autocomplete({
           },
         },
         {
-          sourceId: 'algoliaHits',
+          sourceId: 'products',
           getItems() {
             return products.hits;
           },
diff --git a/packages/website/docs/using-react.md b/packages/website/docs/using-react.md
@@ -104,6 +104,7 @@ function App() {
         getSources={({ query }) =>
           [
             {
+              sourceId: 'products',
               getItems() {
                 return getAlgoliaHits({
                   searchClient,
diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
@@ -63,7 +63,8 @@ module.exports = {
             },
             {
               label: 'Discord',
-              href: 'https://discord.gg/tXdr5mP',
+              href:
+                'https://discord.com/channels/477328979074744322/823816543136907264',
             },
           ],
         },
diff --git a/packages/website/src/components/AutocompleteExample.tsx b/packages/website/src/components/AutocompleteExample.tsx
@@ -33,8 +33,7 @@ export function AutocompleteExample<TItem extends BaseItem>(
     <div
       ref={containerRef}
       style={{
-        margin: 'auto',
-        marginBottom: 'var(--ifm-paragraph-margin-bottom)',
+        margin: 'calc(var(--ifm-paragraph-margin-bottom) * 2) auto',
         maxWidth: 540,
       }}
     />
diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css
@@ -71,3 +71,19 @@ kbd {
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
   }
 }
+
+.alert--success {
+  --ifm-code-background: var(--ifm-color-success-darker);
+}
+
+.alert--info {
+  --ifm-code-background: var(--ifm-color-info-darker);
+}
+
+.alert--warning {
+  --ifm-code-background: var(--ifm-color-warning-darker);
+}
+
+.alert--danger {
+  --ifm-code-background: var(--ifm-color-danger-darker);
+}
diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js
@@ -14,10 +14,10 @@ const features = [
     title: 'Powered by Algolia',
     imageUrl: 'img/undraw_algolia_msba.svg',
     description:
-      'Autocomplete helps you to leverage the full power of Algolia. You will be able to create a complete discovery experience with no pain.',
+      'Autocomplete helps you leverage the full power of Algolia and create a complete search and discovery experience without pain.',
   },
   {
-    title: 'Search with recommended guidelines',
+    title: 'Recommended guidelines',
     imageUrl: 'img/undraw_file_searching_duff.svg',
     description:
       'Empowered by our expertise, Autocomplete helps you create a state-of-the-art search experience on your website.',
@@ -26,7 +26,7 @@ const features = [
     title: 'Experimental work',
     imageUrl: 'img/undraw_maker_launch_crhe.svg',
     description:
-      'This project is experimental yet. Stay tuned, it will be shipped soon.',
+      'This project is still experimental. Stay tuned, it will be shipped soon.',
   },
 ];
 

Original file line number	Diff line number	Diff line change
`@@ -57,7 +57,7 @@ const autocompleteSearch = autocomplete({`
`57`	`57`	`getSources() {`
`58`	`58`	`return [`
`59`	`59`	`{`
`60`		`- sourceId: 'querySuggestionsSources',`
	`60`	`+ sourceId: 'querySuggestions',`
`61`	`61`	`getItemInputValue: ({ item }) => item.query,`
`62`	`62`	`getItems({ query }) {`
`63`	`63`	`return getAlgoliaHits({`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ autocomplete({`
`19`	`19`	`getSources() {`
`20`	`20`	`return [`
`21`	`21`	`{`
	`22`	`+ sourceId: 'links',`
`22`	`23`	`getItems({ query }) {`
`23`	`24`	`return [`
`24`	`25`	`{ label: 'Twitter', url: 'https://twitter.com' },`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@ const autocomplete = createAutocomplete({`
`52`	`52`	`getSources() {`
`53`	`53`	`return [`
`54`	`54`	`{`
`55`		`- sourceId: 'querySuggestionsSource',`
	`55`	`+ sourceId: 'querySuggestions',`
`56`	`56`	`getItemInputValue: ({ item }) => item.query,`
`57`	`57`	`getItems({ query }) {`
`58`	`58`	`return getAlgoliaHits({`
Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@ autocomplete({`
`54`	`54`	`getSources({ query }) {`
`55`	`55`	`return [`
`56`	`56`	`{`
	`57`	`+ sourceId: 'products',`
`57`	`58`	`getItems() {`
`58`	`59`	`return getAlgoliaHits({`
`59`	`60`	`searchClient,`
Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,7 @@ function App() {`
`104`	`104`	`getSources={({ query }) =>`
`105`	`105`	`[`
`106`	`106`	`{`
	`107`	`+ sourceId: 'products',`
`107`	`108`	`getItems() {`
`108`	`109`	`return getAlgoliaHits({`
`109`	`110`	`searchClient,`