jothepro / doxygen-awesome-css

Custom CSS theme for doxygen html-documentation with lots of customization parameters.
https://jothepro.github.io/doxygen-awesome-css/
MIT License
1k stars 117 forks source link

feat: add readthedocs javascript search #158

Open ReenigneArcher opened 1 month ago

ReenigneArcher commented 1 month ago

This PR adds a custom readthedocs search extension using javascript. I found the default doxygen search is quite terrible, and doesn't seem to actually search any markdown files (or barely searches them)... which is not great when you have user documentation.

I have added this for my own projects (here: https://github.com/LizardByte/doxyconfig/pull/4), and figured I could share it back here for others to benefit from. A live preview is available here: https://docs.lizardbyte.dev/projects/doxyconfig/latest/search.html?query=doxygen

This is what it looks like. image

image

Old version ![image](https://github.com/user-attachments/assets/e7a7d9de-27dd-499b-99fd-bca805129eca) ![image](https://github.com/user-attachments/assets/9b87cf22-eebc-4c28-a970-0951180ed1cc)

The styling is somewhat based on Furo, this is how that looks in one of my projects. image

TODO:

ReenigneArcher commented 1 month ago

A user of mine reported there is an issue with the search results page on mobile. I don't think it's anything related to my code, but possibly a doxygen bug?

When the user clicks the search bar, the keyboard pops up, but then immediately closes... and there is no way to enter a search term. I know doxygen generates search pages slightly differently depending on the variable search config options. Seems to work perfectly fine on desktop though.

This code is in the original doxygen search.js, so maybe something to do with this.

function SearchBox(name, resultsPath, extension) {
  this.DOMSearchField = () => document.getElementById("MSearchField");
  this.DOMSearchBox = () => document.getElementById("MSearchBox");
  this.OnSearchFieldFocus = isActive => {
    if (isActive) {
      this.DOMSearchBox().className = 'MSearchBoxActive';
    } else {
      this.DOMSearchBox().className = 'MSearchBoxInactive';
    }
  }
}
ReenigneArcher commented 3 days ago

When starting the search with the readthedocs addon widget at the bottom right, a really nice popover with live search is opened. IMO that's a really nice user experience! Do you think it would be possible to use the searchbar in the upper right just as a link that opens this popover?

I'm not sure I fully understand the ask, but if you're just asking if the live search will work (search as you type)... it's possible, I just don't know how to implement it.