Draft-js: DocSearch ready for your documentation website

Created on 29 May 2018  ยท  13Comments  ยท  Source: facebook/draft-js

๐Ÿ‘‹ team:

Congratulations, your search is now ready! You can try a showcase here:
Preview here

I've successfully configured the underlying crawler and it will now run every 24h.

You're now a few steps away from having it working on your website:

  • Copy the following CSS/JS snippets and add them to your page
<!-- at the end of the HEAD -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

<!-- at the end of the BODY -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript"> docsearch({
  apiKey: 'ae94c9e3ee00ea8edddd484adafc37cd',
  indexName: 'draft-js',
  inputSelector: '### REPLACE ME ####',
  debug: false // Set debug to true if you want to inspect the dropdown
});
</script>
  • Add a search input in your page if you don't have any yet. Then update the inputSelector value in JS snippet to a CSS selector that targets your search input field.
  • Optionally customize the look and feel by following the DocSearch documentation
  • You can also check your configuration in our GitHub repo.

The integration within Docusaurus is even faster. We do provide analytics on the search. Feel free to ping if you want me to grant you access.

Please open a pull request if want to leverage your configuration!

Feel free to get back to us if you have any issues or questions regarding the integration.

We'd also be happy to get your feedback and thoughts about DocSearch - so we can continue to improve it.

Have a nice day :)

enhancement

Most helpful comment

I have no permissions to close this issue but we can close this now. We have search on draftjs.org now! ๐ŸŽ‰

All 13 comments

Seeking input from some folks who have helped with setting up Docusaurus for Draft.js - @yangshun, @NoamELB, @aadsm. What do you think about adding this and is it being used in other FB open-source projects?

@niveditc Yes! Algolia DocSearch is frequently being used for Docusaurus projects. It's the de facto way we integrate search into a Docusaurus site now.

@yangshun - awesome! Seems exciting :D

@niveditc I could help to integrate it into draftjs.org if you like ๐Ÿ˜„

@yangshun - that would be amazing! Thank you ๐Ÿ˜„

@niveditc We need an Algolia API Key before we can even start on this. I'm not sure of the process for FB OSS projects to create one. cc @JoelMarcey do you know of the typical process?

@yangshun the API key is embedded in the comment from @s-pace above, right? Or am I misunderstanding your question?

@JoelMarcey Oh I thought that API key above is their demo API key which is
not managed by Facebook/Draftjs. Is it ok to use that key?

On Mon, Sep 10, 2018, 9:12 AM Joel Marcey notifications@github.com wrote:

@yangshun https://github.com/yangshun the API key is embedded in the
comment from @s-pace https://github.com/s-pace above, right? Or am I
misunderstanding your question?

โ€”
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/draft-js/issues/1775#issuecomment-419760333,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABQRHZO47POjU7UstFxeINjKG4_5-DnVks5uZbx1gaJpZM4URK3d
.

I believe we can use it.

@s-pace is it ok to use the above API-key for the DraftJS site?

Hi all.

Indeed @JoelMarcey, this key is the one to integrate within your website:

apiKey: 'ae94c9e3ee00ea8edddd484adafc37cd',
indexName: 'draft-js',

I have updated your configuration in order to acknowledge and integrate the changes from your website. Effects are live and deployed.

Let us know if you need anything else. Thank you @yangshun

I have no permissions to close this issue but we can close this now. We have search on draftjs.org now! ๐ŸŽ‰

Awesome news. Thank you. Feel free to ping for further help

@yangshun - awesome! Thanks for implementing this ๐Ÿ‘

Was this page helpful?
0 / 5 - 0 ratings