docs(search): searching with keyboard shortcut

[ydcjeff]

Description: searching within the docs is faster now, we can now search with command + K on mac and ctrl + K on windows/linux. And, it still searches correct version docs on each version docs.

https://deploy-preview-1770--pytorch-ignite-preview.netlify.app

Check list:

• New tests are added (if a new feature is added)
• New doc strings: description and/or example code are in RST format
• Documentation is updated (if required)

[vfdev-5]

Thanks for the PR @ydcjeff ! I disabled for a moment netlify as we can run out in the number of builds per month. Let me activate it for this PR.

[ydcjeff]

I disabled for a moment netlify as we can run out in the number of builds per month. Let me activate it for this PR.

For this, I think we can build the docs in github actions and upload the build/html to netlify to lower the build minutes. I haven't tried before tho.

[vfdev-5]

Nice addition @ydcjeff ! I was just wondering if we can change this searchbar button to something more subtle

I'm a bit bothered by large [Cmd][K] button images and small length of the button vs previous version...

[ydcjeff]

@vfdev-5 it is now almost same like previous one, it looks good now

[vfdev-5]

Yeah, looks much better now. Do you think we could remove drawn [Apple][K] buttons and just put that into the text "Search", like "Search Docs (Cmd/Ctrl + K)"?

[ydcjeff]

Yeah, looks much better now. Do you think we could remove drawn [Apple][K] buttons and just put that into the text "Search" ?

It tells keyboard shortcut for searching, so removing isn't good IMO.

[vfdev-5]

Yeah, looks much better now. Do you think we could remove drawn [Apple][K] buttons and just put that into the text "Search" ?

It tells keyboard shortcut for searching, so removing isn't good IMO.

Yeah, I know, I propose to display the shortcut a bit differently. The size of those buttons is a bit too large IMO.

[ydcjeff]

OK I see. I inspected that they are directly inside html, I don't know how to edit them.

[vfdev-5]

@ydcjeff looks like they are binded to classes that probably could be modified with css ?

[ydcjeff]

Following this answer and adding this to ignite_theme.css

.DocSearch-Button-Placeholder, .DocSearch-Button-Key {
  display: none !important;
}

.DocSearch:after {
  content: "Search Docs (⌘/CTRL + K)";
  padding: 0 12px 0 6px;
}

This works but display failed when launch search modal.

[vfdev-5]

Thanks for digging into it @ydcjeff ! Do you think we could just tweak button's graphical representation, for example, change their size to a smaller one ?

[ydcjeff]

I removed box shadow and it shows like

[vfdev-5]

IMO looks better. What do you think, Jeff ?

[ydcjeff]

IMO looks better. What do you think, Jeff ?

I am ok with both styles

[vfdev-5]

OK, can you update the PR with buttons without shadows to see that integrated

[vfdev-5]

Looks great for me now ! Thanks @ydcjeff