Feat Request: Native custom button support

[dylanh724]

Here's what I did to add a custom button to my sphinx-book-theme:

1. Add a js/customAlgoliaDocSearchBtn.js containing:

// #########################################
// _static/js/customAlgoliaDocSearchBtn.js
// - This script allows .
// - This script should be loaded deferred
// - Initial template suggestion thanks from yafimvo @ 
//   https://github.com/jupyter-book/jupyter-book/issues/1324#issuecomment-1512757574 
// #########################################

// Declare the selector for the search button
const SEARCH_BUTTON_SELECTOR = '.search-button__button';
const searchButtons = document.querySelectorAll(SEARCH_BUTTON_SELECTOR);

// On click, for all search bars found, emulate CTRL+K to bring up search UI for both buttons
searchButtons.forEach(button => {
    button.addEventListener('click', () => {
  	  console.log('[js/customAlgoliaDocSearchBtn.js] Clicked search btn -> emulating CTRL+K');
  	  const event = new KeyboardEvent('keydown', {
  		  key: 'k',
  		  ctrlKey: true,
  		  bubbles: true // Allows the event to propagate up through the DOM
  	  });
  	  document.dispatchEvent(event);
    });
});

2. In conf.py, add:

html_js_files.append(("js/customAlgoliaDocSearchBtn.js", {"defer": "defer"}))

I forgot if I did anything else, but that's just about it. You could wrap this in your extension and allow a custom button that'll just simply trigger a CTLR+K to hook into your existing code. You'd just need a conf.py var that replaces the current SEARCH_BUTTON_SELECTOR for it to magically work.

[kai687]

Could you explain why I would need a custom button?

[dylanh724]

I already customized the theme's search button before I found yours, liked it, and wanted to keep it, in my example:

I tried tweaking the CSS for yours at first, but couldn't quite get what I wanted

[dylanh724]

Replaced the image above with my theme's search bar vs yours to see them side-by-side as an example. It'd take way too much effort to deconstruct both sides of the CSS. It made more sense to just display:none yours, then redirect the theme search to trigger CTRL+K.

I also needed this to hide your search bar (in sphinx-book-theme, at least) while doing it manually:

/* Custom search bar (use sphinx-book-theme's search bar, instead): Hide Algolia's */
.sidebar-primary-item:has(#docsearch) {
    display:none
}