docsearch icon indicating copy to clipboard operation
docsearch copied to clipboard

Ability to have custom output templates (Results.tsx) or ability to customize hitSource output

Open khaos119 opened this issue 11 months ago • 2 comments

Describe the problem

→ When we released DocSearch for our site, the immediate response was asking to be able to click article titles (HitSource). This continues to come up from different sources, and is becoming a must have.

→ Our search results come from two different websites and there is no way to differentiate to the user where the result is coming from, therefore it is confusing. We would like to be able to: a. Append some indicator to the results such as the website name, or something similar b. Be able to open the link in a new tab if the result is from the other site.

I have tried to find other solutions to these to no avail, but if I have missed something please let me know.

Describe the solution

Ideas I have:

→ Config option in docsearch() that allows template override, such as Results.txt where you can have a custom template in your project's directory.

OR

→ Add a new hook in the API for hitSource where the output of the title can be customized.

Alternatives you've considered

Note that the site is built with Starlight Astro, and it is using the plugin.

The hit source is one little line of code, and it's too far out of my reach <div className="DocSearch-Hit-source">{props.title}</div>

I have tried:

→ Forking the DocSearch repo to be able to submit a PR for these changes, but it was too complicated to override everything in Astro.

→ Forking the Starlight plugin, but this does not open up options for hitSource customization.

→ Banging my head against a wall, but I just got a headache so that didn't work.

→ I gave up and came to you for help!

Would Starlight have to make any changes if there was a new configuration option...?


This would be such a huge thing for us, so I would be happy to help in any way that I can! Thank you.

khaos119 avatar Mar 05 '25 16:03 khaos119

@khaos119 do you have a website or a code sandbox where this issue is occuring? It will help us investigate it further.

Thanks

NatanTechofNY avatar Mar 25 '25 16:03 NatanTechofNY

@NatanTechofNY yes, this site is using DocSearch https://dev.arcxp.com/api/

khaos119 avatar Mar 25 '25 17:03 khaos119

@khaos119 Have you tried playing with the HitComponent prop

See examples here: https://docsearch.algolia.com/docs/examples

dylantientcheu avatar Aug 27 '25 08:08 dylantientcheu