docs: write "what is autocomplete"? #393

Meschreiber · 2021-01-14T23:40:49Z

This PR writes the first introduction page, "What is autocomplete".

It describes:

what an autocomplete experience is, in general,
what this library does and doesn't provide.

I feel like the second part is still a bit weak and could use some more technical details, so please suggest any you see missing. Thanks!

codesandbox-ci · 2021-01-14T23:43:59Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 76ecdc3:

Sandbox	Source
@algolia/js-example	Configuration
@algolia/react-renderer-example	Configuration

packages/website/docs/introduction.md

Co-authored-by: Sarah Dayan <[email protected]>

Meschreiber · 2021-01-15T21:24:06Z

Thanks for the thorough review @sarahdayan !

Right after this section I think we should have a video that showcases a basic autocomplete with some patterns. This is a visual topic, so I think we should show in addition to telling.

I agree. I was originally thinking of adding the video I added to the internal autocomplete docs, but decided against it since it's not using this library. I'll create a new one for this purpose.

sarahdayan · 2021-01-16T14:00:47Z

Maybe @francoischalifour has a good looking demo we could use?

packages/website/docs/introduction.md

francoischalifour · 2021-01-18T09:44:53Z

Maybe @francoischalifour has a good looking demo we could use?

For now we can use https://lkrug.csb.app which is the preview of the always-updated sandbox.

Meschreiber · 2021-01-20T00:55:52Z

Maybe @francoischalifour has a good looking demo we could use?

For now we can use https://lkrug.csb.app which is the preview of the always-updated sandbox.

Sounds good, I'll make a small video file.

In an intro page, I think this is better than embedding a demo since it does everything for the user. In subsequent pages we can link/embed the demo itself.

WDYT? @francoischalifour @sarahdayan

francoischalifour · 2021-01-20T09:49:24Z

A video would be great but I think it's a little bit early since the API is still changing (I'm thinking about #381).

What are you planning to address in the video?

…ethod (#395) * Implements `empty` template and `renderEmpty` method * Add wait function to `test/utils` folder Co-authored-by: François Chalifour <[email protected]>

* feat(js): change renderer implementation to virtual DOM * feat(highlighting): revamp highlighting system to VDOM (#399)

Meschreiber · 2021-01-27T17:21:17Z

We can leave that off until a v2 of docs though, when the API is stable.

Yes, that makes sense. Could we then embed an autocomplete experience right in the page, maybe after the second paragraph? That would be a nice touch, and we could say "try typing the letter "s" in the search box below" instead of "try typing the letter "s" in the search box on the top right of this site".

I know I'm a broken record with the Vue.js docs, but they have that in their docs and that's super nice, as you can try what you just read about right in the page: https://vuejs.org/v2/guide/#Handling-User-Input

Totally agree! Was actually just thinking of injecting the example into the getting started page after outlining it. What's the best way to do that in the context of Docusaurus? Just put in the markup container and include a separate script file to call?

sarahdayan · 2021-01-28T12:13:21Z

My guess would be using an iframe to one of our CodeSandbox demos but I haven't actually tried it.

francoischalifour · 2021-01-28T12:30:06Z

We can wrap autocomplete in a React component to insert it in the MDX. That's how I did it in the experimental website at the time.

For now we can add placeholders, @yannickcr is working on a generic solution for that.

sarahdayan · 2021-01-28T15:58:29Z

Ah yes indeed, I forgot that Docusaurus supports MDX. So much better!

sarahdayan

LGTM!

Meschreiber · 2021-02-01T22:29:09Z

Hey @francoischalifour , since merging the latest docs-1, I'm having build failures, would you let me know if I've missed something please?

I also used the super simple (even without highlighting) autocomplete example from "getting started" here.

Is this what we were thinking, or should we somehow recreate the actual docsearch UX in this first introductory example?

Also: I originally used htm to display each item, but decided that was probably unnecessary. Now I'm running into issues that I'm using a separate component. Would also love your help with that. Thanks!

francoischalifour · 2021-02-03T09:16:22Z

@Meschreiber Sorry, I messed the merge with next. It should be fixed in e36ea32.

The example is what I had in mind. We'll rework the design later.

yarn.lock

packages/website/src/components/AutocompleteItem.tsx

…nto docs/intro/what-is-autocomplete

Meschreiber · 2021-02-04T02:00:39Z

@francoischalifour I’m still not sure what I’m messing up when using the <AutocompleteExample/> here. Since removing htm and importing a typed component, I’m getting Cannot add property __, object is not extensible error.

I also get the error when using a non-typed function directly in the file without importing it. No issues in other guides where I'm not providing an item template.

To reproduce, yarn start this branch and try typing into the autocomplete on the "what is autocomplete" page.

Any help greatly appreciated!

Once this is set, I'd love to merge it and then use the same component in "Getting started". Thanks in advance!

francoischalifour · 2021-02-04T10:37:35Z

@Meschreiber In this guide, AutocompleteExample didn't work because we were using React components (which translate to createElement) with a Preact renderer. I updated the implementation in d10f3b9 to use a React renderer so it now works with components as well.

Meschreiber · 2021-02-04T18:40:38Z

Thanks @francoischalifour , merging!

francoischalifour and others added 5 commits January 13, 2021 16:28

docs(website): bootstrap new doc structure

ec3b76b

docs(website): add doc for createAlgoliaInsightsPlugin

2934a25

docs(website): add draft sections

f6d73da

docs: rewrite "Integrating keyboard navigation" (#389)

e488186

feat: add intro

27c8fdf

Meschreiber changed the title ~~feat: add intro~~ docs: add "what is autocomplete"? Jan 15, 2021

Meschreiber changed the title ~~docs: add "what is autocomplete"?~~ docs: write "what is autocomplete"? Jan 15, 2021

Meschreiber mentioned this pull request Jan 15, 2021

docs: write "what is autocomplete" #392

Closed

francoischalifour requested review from francoischalifour and sarahdayan January 15, 2021 09:54

sarahdayan requested changes Jan 15, 2021

View reviewed changes

Apply suggestions from code review

746403f

Co-authored-by: Sarah Dayan <[email protected]>

fix: remove conflicting sentence

196f7a2

francoischalifour reviewed Jan 18, 2021

View reviewed changes

packages/website/docs/introduction.md Show resolved Hide resolved

packages/website/docs/introduction.md Outdated Show resolved Hide resolved

sarahdayan and others added 3 commits January 18, 2021 11:09

docs: rewrite "Accessing data with Context" (#390)

1180016

docs: rewrote "Controlling behavior with State" (#391)

20461d1

fix: bold and underline text

23b7ad0

sarahdayan and others added 7 commits January 20, 2021 17:00

docs: rewrite "Populating autocomplete with Sources" (#396)

085dcec

docs: write "Displaying items with Templates" (#397)

3be020f

fix(core): update query conditions

08640ce

chore(test): add tests for getEnvironmentProps onTouchMove (#398)

3d5638b

feat(emptyStates): implements empty source template and renderEmpty m…

04a88c0

…ethod (#395) * Implements `empty` template and `renderEmpty` method * Add wait function to `test/utils` folder Co-authored-by: François Chalifour <[email protected]>

Add tests for onActive and onSelect on plugins (#400)

475b930

feat(js): change renderer implementation to virtual DOM (#381)

7be2249

* feat(js): change renderer implementation to virtual DOM * feat(highlighting): revamp highlighting system to VDOM (#399)

Meschreiber added 3 commits January 28, 2021 11:59

feat: put in a placeholder input

188dd94

Merge branch 'docs-1' into docs/intro/what-is-autocomplete

15aa6fc

fix: update links

19c9636

Meschreiber mentioned this pull request Jan 28, 2021

docs: write "getting started" #415

Merged

fix: links

2686de0

sarahdayan approved these changes Jan 29, 2021

View reviewed changes

francoischalifour force-pushed the docs-1 branch from 886284c to d869f07 Compare February 1, 2021 19:51

Meschreiber added 4 commits February 1, 2021 13:44

Merge docs-1

079687b

fix: merge conflict

e97a2ac

fix: merge conflict

7c3dc85

feat: add AutocompleteExample

973cf80

Meschreiber added 2 commits February 1, 2021 16:49

feat: add AutocompleteItem

54a0664

fix: remove htm package

7584bc8

francoischalifour approved these changes Feb 3, 2021

View reviewed changes

yarn.lock Outdated Show resolved Hide resolved

packages/website/src/components/AutocompleteItem.tsx Outdated Show resolved Hide resolved

Meschreiber added 3 commits February 3, 2021 14:30

Merge branch 'docs-1' of https://github.com/algolia/autocomplete.js i…

ace8d5c

…nto docs/intro/what-is-autocomplete

fix: remove htm package

a86fd37

fix: rename AutocompleteItem -> AutocompleteDocSearchItem

eb481fd

fix(website): use React renderer in AutocompleteExample

d10f3b9

fix(website): support content record types

76ecdc3

Meschreiber merged commit 48fc7da into docs-1 Feb 4, 2021

francoischalifour deleted the docs/intro/what-is-autocomplete branch April 29, 2021 10:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: write "what is autocomplete"? #393

docs: write "what is autocomplete"? #393

Meschreiber commented Jan 14, 2021

codesandbox-ci bot commented Jan 14, 2021 •

edited

Loading

Meschreiber commented Jan 15, 2021

sarahdayan commented Jan 16, 2021 •

edited

Loading

francoischalifour commented Jan 18, 2021

Meschreiber commented Jan 20, 2021

francoischalifour commented Jan 20, 2021

Meschreiber commented Jan 27, 2021

sarahdayan commented Jan 28, 2021 •

edited

Loading

francoischalifour commented Jan 28, 2021

sarahdayan commented Jan 28, 2021

sarahdayan left a comment

Meschreiber commented Feb 1, 2021 •

edited

Loading

francoischalifour commented Feb 3, 2021

Meschreiber commented Feb 4, 2021

francoischalifour commented Feb 4, 2021

Meschreiber commented Feb 4, 2021

docs: write "what is autocomplete"? #393

docs: write "what is autocomplete"? #393

Conversation

Meschreiber commented Jan 14, 2021

codesandbox-ci bot commented Jan 14, 2021 • edited Loading

Meschreiber commented Jan 15, 2021

sarahdayan commented Jan 16, 2021 • edited Loading

francoischalifour commented Jan 18, 2021

Meschreiber commented Jan 20, 2021

francoischalifour commented Jan 20, 2021

Meschreiber commented Jan 27, 2021

sarahdayan commented Jan 28, 2021 • edited Loading

francoischalifour commented Jan 28, 2021

sarahdayan commented Jan 28, 2021

sarahdayan left a comment

Choose a reason for hiding this comment

Meschreiber commented Feb 1, 2021 • edited Loading

francoischalifour commented Feb 3, 2021

Meschreiber commented Feb 4, 2021

francoischalifour commented Feb 4, 2021

Meschreiber commented Feb 4, 2021

codesandbox-ci bot commented Jan 14, 2021 •

edited

Loading

sarahdayan commented Jan 16, 2021 •

edited

Loading

sarahdayan commented Jan 28, 2021 •

edited

Loading

Meschreiber commented Feb 1, 2021 •

edited

Loading