[documentation] Add a nice search experience to the website #416

s-pace · 2018-08-28T16:22:15Z

This PR will add DocSearch to the documentation website. It will allow an user to have a learn-as-you-type experience by displaying results thanks to a dropdown in a live way.

If there is no result, pressing enter will enable the legacy search.

Ref Bootstraping PR as jquery/api.jquery.com#1104

This commit will add DocSearch to the documentation website. It is the first step in order to fully integrate it. Ref Bootstraping PR as jquery/api.jquery.com#1104

jsf-clabot · 2018-08-28T16:22:18Z

All committers have signed the CLA.

s-pace · 2018-08-28T16:25:56Z

You can wait for our green light.

We will do an internal check in order to provide you a final PR soon

This commit will enhance the includes by moving it to the end of the page

s-pace · 2018-08-29T14:00:26Z

On iPhone X:

On iPad:

On desktop:

Live demo of this PR

Please review it :)

mgol

A few remarks, otherwise looks good.

One thing I couldn't comment inline - please don't add the .DS_Store file to the repository.

mgol · 2018-09-05T13:40:28Z

themes/jquery/footer.php

+	indexName: 'jquery',
+	inputSelector: 'input[name=\'s\']',
+	debug: true // Set debug to true if you want to inspect the dropdown
+	})" async></script>


We use tabs for indentation in this file, can you update it? Also, what's inside of the object should be indented more than the closing parens.

mgol · 2018-09-05T13:42:01Z

themes/jquery/css/docsearch.css

@@ -0,0 +1,16 @@
+/* Custom DocSeach CSS to adapt the generic one * See https://community.algolia.com/docsearch/styling.html for more info */
+nav#main .searchform {
+    text-shadow: none;


Please use tabs, not spaces.

s-pace · 2018-09-05T14:55:55Z

Thank you for the guidance @mgol.
Sorry for the .DS_Store, removed ✅
Let us know if you need anything else

mgol · 2018-09-05T15:06:55Z

themes/jquery/css/docsearch.css

@@ -0,0 +1,19 @@
+/* Custom DocSeach CSS to adapt the generic one * See https://community.algolia.com/docsearch/styling.html for more info */
+nav#main .searchform {
+  text-shadow: none;


This file still uses spaces, please change to tabs.

My bad. fixed

mgol

Looks good to me, thanks!

mgol · 2018-09-05T22:01:20Z

I've tested it now on https://api.jquery.com/ and it works absolutely awesome; such a nice experience. Wonderful work, thanks a lot! 👏

dmethvin · 2018-09-05T22:10:48Z

THIS IS AWESOME! 🎉 Many thanks @s-pace, and @mgol for getting this landed. Much better than the old search.

This commit adds DocSearch to the UI/Mobile/QUnit websites. It allows a user to have a learn-as-you-type experience by displaying results thanks to a dropdown in a live way. If there is no result, pressing enter will enable the legacy search. The commit also fixes the jQuery DocSearch handling to be skipped when the search input cannot be found. Ref #416 Closes #421

Krinkle · 2020-08-06T20:07:23Z

@s-pace Hi - is the API key added here part of an account we can access? The QUnit since has since switched to a static site where we push new content with a secret key during CI builds (ref qunitjs/qunit#1460). As I wasn't able to find which account this key belongs to (e.g. to login and generate a secret key), we opted to create an ad-hoc personal account for now and use. However, I'd rather this not depend on a personal account long-term.

What do you recommend we do?

s-pace · 2020-08-10T14:36:55Z

👋 @Krinkle
Please apply to DocSearch from this application form and we will make sure to grant you access to these analytics. The apiKey is not related to any account and it is a search only one that can be safely shared publicly.

Krinkle · 2020-08-10T17:17:20Z

@s-pace I don't think we need/want analytics. I'm referring to the secret key used in jekyll-algolia to push new content after an update. This is currently set jquery/qunit's Jenkins job in a secret ALGOLIA_API_KEY environment variable for post-commit builds on the main branch. These are generated from the logged-in Algolia account which is currently a personal one.

Would you recommend we just create another account like that, but with shared credentials stored in a safe place by OpenJS Foundation? Note that QUnit doesn't use docsearch.js, I don't know if what we use falls under "DocSearch", though.

s-pace · 2020-08-11T06:32:00Z

Thanks for the details. I thought that QUnit was still using DocSearch. I have disabled the daily crawl since this index is not used.

The account you are referring to is tied to @trentmwillis account. I would definitely recommend you to create a shared account with shared credentials stored in a safe place by the OpenJS foundation.

Component: Add DocSeach to jquery website

892ba08

This commit will add DocSearch to the documentation website. It is the first step in order to fully integrate it. Ref Bootstraping PR as jquery/api.jquery.com#1104

s-pace force-pushed the adding_docsearch branch from 3ced3de to 892ba08 Compare August 28, 2018 16:29

Sylvain Pace added 2 commits August 29, 2018 15:57

make it mobile compliant

5df05ec

Component: Add DocSeach better integrated into jquery website

d076a03

This commit will enhance the includes by moving it to the end of the page

mgol requested changes Sep 5, 2018

View reviewed changes

Code: Format as requested from reviews

c2cb501

mgol requested changes Sep 5, 2018

View reviewed changes

Code: avoid automatic space from IDE

e3f16f3

mgol approved these changes Sep 5, 2018

View reviewed changes

mgol merged commit 495f31a into jquery:master Sep 5, 2018

s-pace mentioned this pull request Apr 2, 2020

All: Add Algolia's DocSearch to UI/Mobile/QUnit website searches #421

Merged

s-pace deleted the adding_docsearch branch April 2, 2020 14:05

s-pace pushed a commit to algolia/docsearch-configs that referenced this pull request Aug 11, 2020

disabling qunits following jquery/jquery-wp-content#416

a5b319b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[documentation] Add a nice search experience to the website #416

[documentation] Add a nice search experience to the website #416

s-pace commented Aug 28, 2018

jsf-clabot commented Aug 28, 2018 •

edited

s-pace commented Aug 28, 2018 •

edited

s-pace commented Aug 29, 2018

mgol left a comment

mgol Sep 5, 2018

s-pace Sep 5, 2018

mgol Sep 5, 2018

s-pace commented Sep 5, 2018

mgol Sep 5, 2018

s-pace Sep 5, 2018

mgol left a comment

mgol commented Sep 5, 2018 •

edited

dmethvin commented Sep 5, 2018

Krinkle commented Aug 6, 2020

s-pace commented Aug 10, 2020

Krinkle commented Aug 10, 2020

s-pace commented Aug 11, 2020

[documentation] Add a nice search experience to the website #416

[documentation] Add a nice search experience to the website #416

Conversation

s-pace commented Aug 28, 2018

jsf-clabot commented Aug 28, 2018 • edited

s-pace commented Aug 28, 2018 • edited

s-pace commented Aug 29, 2018

mgol left a comment

Choose a reason for hiding this comment

mgol Sep 5, 2018

Choose a reason for hiding this comment

s-pace Sep 5, 2018

Choose a reason for hiding this comment

mgol Sep 5, 2018

Choose a reason for hiding this comment

s-pace commented Sep 5, 2018

mgol Sep 5, 2018

Choose a reason for hiding this comment

s-pace Sep 5, 2018

Choose a reason for hiding this comment

mgol left a comment

Choose a reason for hiding this comment

mgol commented Sep 5, 2018 • edited

dmethvin commented Sep 5, 2018

Krinkle commented Aug 6, 2020

s-pace commented Aug 10, 2020

Krinkle commented Aug 10, 2020

s-pace commented Aug 11, 2020

jsf-clabot commented Aug 28, 2018 •

edited

s-pace commented Aug 28, 2018 •

edited

mgol commented Sep 5, 2018 •

edited