language-servers/roc
1
0
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2025-10-02 08:11:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Search docs with S instead of /

Browse source 
It turns out / on Firefox is already search,
and we don't want to override that.

Also adds a tip to make the shortcut discoverable.
This commit is contained in:
Richard Feldman 2022-10-09 04:26:00 -04:00
parent 04bceae956
commit 34f56371f7
No known key found for this signature in database
GPG key ID: F1F21AA5B1D9E43B
3 changed files with 11 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/docs/src/static/index.html
View file

@ -15,7 +15,7 @@
<body> <body>
<nav id="sidebar-nav"> <nav id="sidebar-nav">
<input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" /> <input id="module-search" aria-labelledby="search-link" type="text" placeholder="Search" />
<label for="module-search" id="search-link">Search</label> <label for="module-search" id="search-link"><span id="search-link-text">Search</span> <span id="search-link-hint">(shortcut: S)</span></label>
<div class="module-links"> <div class="module-links">
<!-- Module links --> <!-- Module links -->
</div> </div>

6
crates/docs/src/static/search.js
View file

@ -47,18 +47,16 @@
// Capture '/' keypress for quick search // Capture '/' keypress for quick search
window.addEventListener("keyup", (e) => { window.addEventListener("keyup", (e) => {
if (e.key === "s") {
if (e.code === "Slash") {
e.preventDefault; e.preventDefault;
searchBox.focus(); searchBox.focus();
searchBox.value = ""; searchBox.value = "";
} }
if (e.code === "Escape" && document.activeElement === searchBox) { if (e.key === "Escape" && document.activeElement === searchBox) {
e.preventDefault; e.preventDefault;
searchBox.blur(); searchBox.blur();
} }
}); });
})(); })();

8
crates/docs/src/static/styles.css
View file

@ -446,10 +446,16 @@ pre {
cursor: pointer; cursor: pointer;
} }
#search-link:hover { #search-link:hover #search-link-text {
text-decoration: underline; text-decoration: underline;
} }
#search-link-hint {
font-style: italic;
margin-left: 1em;
opacity: 0.7;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--body-bg-color: var(--purple-8); --body-bg-color: var(--purple-8);