vuepress-theme-craftdocs
vuepress-theme-craftdocs copied to clipboard
Algolia search results can be visually indistinguishable from one another.
Description
Algolia’s search results can include the page title only, which most of the time is a class name without its namespace. When classes with identical names but differing namespaces are listed as search results, it’s impossible to distinguish them from one another visually.
If you search for variant
, as an example, the following classes will be in the results:
craft\commerce\gql\queries\Variant
craft\commerce\records\Variant
craft\commerce\gql\interfaces\elements\Variant
craft\commerce\gql\arguments\elements\Variant
craft\commerce\elements\db\VariantQuery
craft\commerce\elements\Variant
craft\commerce\gql\types\elements\Variant
Because only the page titles are listed in search results, those classes will basically be presented like this:
Variant
Variant
Variant
Variant
VariantQuery
Variant
Variant
A PR to index the full namespace+class rather than each page’s <h1>
resulted in more specific results that were also much harder to read:

...so that was reverted.
Need to figure out a better way to differentiate results, whether that involves indexing configuration or customization of the Algolia DocSearch component.
Steps to reproduce
- Visit the latest Commerce docs.
- Search for keyword
variant
. - Observe multiple results with identical “Variant” title, hovering over each to see unique links to different namespaces.
I have no experience at all with Algolia - but it is possible to adjust the listing so that if the left and right columns are the same, you just list one? That'd become a readable and useful list then?
Surely not impossible @MattWilcox, just a matter of customizing either the VuePress DocSearch component or re-indexing in some way that better differentiates results without creating a new problem.