[docs] Improve in-site search #17450
Conversation
eps1lon
added
docs
Details of bundle changes.Comparing: 1a480fe...a2ad77c
|
| apiKey: '1d8534f83b9b0cfea8f16498d19fbcab', | ||
| indexName: 'material-ui', | ||
| inputSelector: '#docsearch-input', | ||
| algoliaOptions: { | ||
| facetFilters: ['version:master', `language:${userLanguage}`], | ||
| hitsPerPage: 40, |
There was a problem hiding this comment.
Random thought: I'm wondering if it's not too many options 🤔?
There was a problem hiding this comment.
Why would it be too many?
There was a problem hiding this comment.
The initial thought comes from the tradeoff Algolia took in the default value of this option. Aside from that, I can only guess and make inaccurate reasoning.
We can take the query "modal", let's say we are looking for the API, with 40 results, we have to scroll 10 results, with the default value, we can see it without scrolling.
https://www.smartinsights.com/search-engine-optimisation-seo/seo-analytics/comparison-of-google-clickthrough-rates-by-position/ could be an interesting resource. Seems that most people stop looking after 10 results.
There was a problem hiding this comment.
We can take the query "modal", let's say we are looking for the API, with 40 results, we have to scroll 10 results, with the default value, we can see it without scrolling.
I don't understand this point. How can something be hidden with less results?
There was a problem hiding this comment.
Seems that most people stop looking after 10 results.
So lets improve the situation for the people who keep looking.
There was a problem hiding this comment.
Agree, if we can help the few without harming the many, it's good to take 👍
| }, | ||
| })); | ||
| }), | ||
| { name: 'AppSearch' }, |
There was a problem hiding this comment.
Do we need to provide a name?
There was a problem hiding this comment.
Better DX. IMO I would add a lint rule against omitting the name. Makes CSS debugging hard.
There was a problem hiding this comment.
Maybe we need a Babel plugin that adds it automatically based on the filename 🤔
There was a problem hiding this comment.
Makes sense Probably based on the var name since this will automatically work for multiple components per file.
* [docs] Batch small changes (mui#17435) * [docs] Add synonyms for brand icons (mui#17455) * [docs] Add synonyms for brand icons * Remove Ic prefixed icons * [docs] Improve in-site search (mui#17450) * [ButtonBase] Fix blurry text issue (mui#17453) * [docs] Revert hits per page change (mui#17458) * [docs] Fix heading format in CONTRIBUTING.md (mui#17460) * [Chip] Load the right version of Avatar (mui#17469) * [TablePagination] Merge root classes properly (mui#17467) * [Breadcrumbs] Improve API docs (mui#17468) * [TextField] Handle Chrome autofill (mui#17436) * [docs] Clarify props spread for ListItem when button flag is set (mui#17466)
Ref: #16502
At some point we probably want to use our own combobox implementation. autocomplete.js has some a11y (nvda announces non-descriptive label when browsing through list) as well as UX issues (scroll when browsing should be handled by the package not the app author)