search

algolia / react-instantsearch

⚡️ Lightning-fast search for React and React Native applications, by Algolia.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/
MIT License
1.97k stars 386 forks source link

Examples/demos dev and preview workflow #161

Closed vvo closed 1 year ago

vvo commented 7 years ago

The goal of this issue is to simplify our examples/ demos/ dev and preview workflow for both contributors and users.

Today some demos/ are live and examples/ are not. For the former one it's not that easy to read/see the code and for the later it's not easy to see it live/working.

For every example demo that we link from our website, we should use CodeSandbox dual preview/edit to showcase them. It would be a better experience for the users.

And our examples are already working with it: https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/packages/react-instantsearch/examples/react-router-v4

We need to:

What do you think? Should we do something similar for instantsearch.js? cc @bobylito

Haroenv commented 7 years ago

re: responsive codeSandbox: CompuIves/codesandbox-client#35

CompuIves commented 7 years ago

Wow, this is great to hear! The editor of CodeSandbox isn't responsive yet, but the embed is. If you go to https://codesandbox.io/embed/github/algolia/react-instantsearch/tree/master/packages/react-instantsearch/examples/react-router-v4 on mobile you'll see a version that defaults to preview for mobile.

Embeds are also editable if the user wants to play with the sandbox, though you can't save. In that case you need to open the editor using the link in the right top corner.

Embeds are faster and smaller than the editor, because only the minimum amount for display and editing is loaded.

Haroenv commented 7 years ago

In that case, maybe we should just embed, but the embed link seems to work as external page just fine too -- for most usecases

mthuret commented 7 years ago

move everything to examples/ (the demos/ examples/ difference is not big enough to separate them)

Not sure we want to do that, demos and recipes are not really the same thing. The first ones are demonstrating Algolia capabilities, where the later is demonstrating how you can use React-InstantSearch with React technologies. I would keep it separate.

Also, how do we handle React Native / Server side rendering example as it can't be codesandbox?

vvo commented 7 years ago

Also, how do we handle React Native / Server side rendering example as it can't be codesandbox?

This one can't be put on CodeSandbox indeed.

As for demos/examples. As a user I would want to have a single Examples items and page where we list first the full featured examples and then the community/react router/ssr examples.

But at least having a single page and single way to showcase/dev those examples would be good. What do you think?

mthuret commented 7 years ago

One part will hide the second, so in the end we'll need a Menu on top or on the left. In the end, I'm not sure what we're trying to solve with the one page. If it's a naming issue maybe we should just change names.

sarahdayan commented 1 year ago

Hey!

We're doing a round of clean up before migrating this repository to the new InstantSearch monorepo. This issue seems not to have generated much activity lately and to be mostly solved, so we're going to close it.