From cda2c542b6bb582c569f73ab04b77b47395e3dcf Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Sun, 22 Jun 2025 17:50:51 -0400 Subject: [PATCH 1/7] feat(docs): cmd+k Signed-off-by: Aaron Pham --- docs/mkdocs/javascript/shortcuts.js | 7 +++++++ docs/mkdocs/stylesheets/extra.css | 15 +++++++++++++++ mkdocs.yaml | 3 ++- 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 docs/mkdocs/javascript/shortcuts.js diff --git a/docs/mkdocs/javascript/shortcuts.js b/docs/mkdocs/javascript/shortcuts.js new file mode 100644 index 00000000000..dbf98f571a7 --- /dev/null +++ b/docs/mkdocs/javascript/shortcuts.js @@ -0,0 +1,7 @@ +keyboard$.subscribe(key => { + if (key.mode === 'global' && key.type === 'k' && (key.ctrlKey || key.metaKey)) { + key.claim(); + query$.focus(); + query$.select(); + } +}) diff --git a/docs/mkdocs/stylesheets/extra.css b/docs/mkdocs/stylesheets/extra.css index 220657f83d5..414acb83ea8 100644 --- a/docs/mkdocs/stylesheets/extra.css +++ b/docs/mkdocs/stylesheets/extra.css @@ -108,3 +108,18 @@ body[data-md-color-scheme="slate"] .md-nav__item--section > label.md-nav__link . .md-content__button-wrapper a:hover { color: var(--md-accent-fg-color); } + +/* https://github.com/squidfunk/mkdocs-material/issues/2574#issuecomment-821979698 */ +[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after { + position: absolute; + top: .3rem; + right: .3rem; + display: block; + padding: .1rem .4rem; + color: var(--md-default-bg-color); + font-weight: bold; + font-size: .8rem; + border: .05rem solid var(--md-default-bg-color--lighter); + border-radius: .1rem; + content: "cmd+k"; +} diff --git a/mkdocs.yaml b/mkdocs.yaml index 9fb3fed8b8a..8f4732f47a9 100644 --- a/mkdocs.yaml +++ b/mkdocs.yaml @@ -17,7 +17,7 @@ theme: name: Switch to light mode # Palette toggle for light mode - media: "(prefers-color-scheme: light)" - scheme: default + scheme: default primary: white toggle: icon: material/brightness-7 @@ -127,6 +127,7 @@ extra_javascript: - mkdocs/javascript/run_llm_widget.js - https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML - mkdocs/javascript/edit_and_feedback.js + - mkdocs/javascript/shortcuts.js # Makes the url format end in .html rather than act as a dir # So index.md generates as index.html and is available under URL /index.html From 595cd56849aba2ff5b4a9a5630f7c6118d546ef2 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Sun, 22 Jun 2025 18:28:11 -0400 Subject: [PATCH 2/7] chore: update theme and bind correct item Signed-off-by: Aaron Pham --- docs/mkdocs/javascript/shortcuts.js | 11 +++++++++-- docs/mkdocs/stylesheets/extra.css | 6 +++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/mkdocs/javascript/shortcuts.js b/docs/mkdocs/javascript/shortcuts.js index dbf98f571a7..f0e2e8d22c6 100644 --- a/docs/mkdocs/javascript/shortcuts.js +++ b/docs/mkdocs/javascript/shortcuts.js @@ -1,7 +1,14 @@ +document$.subscribe(() => { + const isMac = window.navigator.userAgent.toLowerCase().includes("mac") + const shortcut = isMac ? "⌘+k" : "ctrl+k"; + document.documentElement.style.setProperty('--md-search-extension-shortcut', shortcut); +}) + keyboard$.subscribe(key => { + const query = document.querySelector('[data-md-component="search-query"]') if (key.mode === 'global' && key.type === 'k' && (key.ctrlKey || key.metaKey)) { key.claim(); - query$.focus(); - query$.select(); + query.focus(); + query.select(); } }) diff --git a/docs/mkdocs/stylesheets/extra.css b/docs/mkdocs/stylesheets/extra.css index 414acb83ea8..d2c7c2ff38d 100644 --- a/docs/mkdocs/stylesheets/extra.css +++ b/docs/mkdocs/stylesheets/extra.css @@ -116,10 +116,10 @@ body[data-md-color-scheme="slate"] .md-nav__item--section > label.md-nav__link . right: .3rem; display: block; padding: .1rem .4rem; - color: var(--md-default-bg-color); + color: var(--md-primary-bg-color); font-weight: bold; font-size: .8rem; - border: .05rem solid var(--md-default-bg-color--lighter); + border: .05rem solid var(--md-primary-bg-color); border-radius: .1rem; - content: "cmd+k"; + content: var(--md-search-extension-shortcut); } From fe5444f6dad57c6f98c85df61a5b70fb35fb50f9 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Sun, 22 Jun 2025 18:43:13 -0400 Subject: [PATCH 3/7] fix: listening to events Signed-off-by: Aaron Pham --- docs/mkdocs/javascript/shortcuts.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/mkdocs/javascript/shortcuts.js b/docs/mkdocs/javascript/shortcuts.js index f0e2e8d22c6..966c1830d6e 100644 --- a/docs/mkdocs/javascript/shortcuts.js +++ b/docs/mkdocs/javascript/shortcuts.js @@ -1,8 +1,6 @@ -document$.subscribe(() => { - const isMac = window.navigator.userAgent.toLowerCase().includes("mac") - const shortcut = isMac ? "⌘+k" : "ctrl+k"; - document.documentElement.style.setProperty('--md-search-extension-shortcut', shortcut); -}) +const isMac = window.navigator.userAgent.toLowerCase().includes("mac") +const shortcut = isMac ? "⌘+k" : "ctrl+k"; +document.documentElement.style.setProperty('--md-search-extension-shortcut', shortcut); keyboard$.subscribe(key => { const query = document.querySelector('[data-md-component="search-query"]') From 5b2bbc50a4219888a9a1b54f35021e391bc4c595 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Mon, 23 Jun 2025 12:14:36 -0400 Subject: [PATCH 4/7] chore: use raw addEventListener Signed-off-by: Aaron Pham --- docs/mkdocs/javascript/shortcuts.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/mkdocs/javascript/shortcuts.js b/docs/mkdocs/javascript/shortcuts.js index 966c1830d6e..bfea242fc7f 100644 --- a/docs/mkdocs/javascript/shortcuts.js +++ b/docs/mkdocs/javascript/shortcuts.js @@ -2,11 +2,13 @@ const isMac = window.navigator.userAgent.toLowerCase().includes("mac") const shortcut = isMac ? "⌘+k" : "ctrl+k"; document.documentElement.style.setProperty('--md-search-extension-shortcut', shortcut); -keyboard$.subscribe(key => { - const query = document.querySelector('[data-md-component="search-query"]') - if (key.mode === 'global' && key.type === 'k' && (key.ctrlKey || key.metaKey)) { - key.claim(); - query.focus(); - query.select(); +document.addEventListener('keydown', function (event) { + if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') { + event.preventDefault(); + const query = document.querySelector('[data-md-component="search-query"]'); + if (query) { + query.focus(); + query.select(); + } } -}) +}); From 4edc7aea1e649bdbe97610b22e0c3c79c29318f0 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Mon, 23 Jun 2025 16:05:32 -0400 Subject: [PATCH 5/7] chore: add placeholder Signed-off-by: Aaron Pham --- docs/mkdocs/javascript/shortcuts.js | 9 ++++----- docs/mkdocs/stylesheets/extra.css | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/mkdocs/javascript/shortcuts.js b/docs/mkdocs/javascript/shortcuts.js index bfea242fc7f..337b931b4af 100644 --- a/docs/mkdocs/javascript/shortcuts.js +++ b/docs/mkdocs/javascript/shortcuts.js @@ -1,9 +1,8 @@ -const isMac = window.navigator.userAgent.toLowerCase().includes("mac") -const shortcut = isMac ? "⌘+k" : "ctrl+k"; -document.documentElement.style.setProperty('--md-search-extension-shortcut', shortcut); - document.addEventListener('keydown', function (event) { - if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') { + if (event.key === '/') { + // we actually don't want to bind this key on docs given that it uses builtin mkdocs search. + event.preventDefault(); + } elif ((event.altKey || event.metaKey) && event.key === 'k') { event.preventDefault(); const query = document.querySelector('[data-md-component="search-query"]'); if (query) { diff --git a/docs/mkdocs/stylesheets/extra.css b/docs/mkdocs/stylesheets/extra.css index d2c7c2ff38d..7946d2e62c4 100644 --- a/docs/mkdocs/stylesheets/extra.css +++ b/docs/mkdocs/stylesheets/extra.css @@ -121,5 +121,5 @@ body[data-md-color-scheme="slate"] .md-nav__item--section > label.md-nav__link . font-size: .8rem; border: .05rem solid var(--md-primary-bg-color); border-radius: .1rem; - content: var(--md-search-extension-shortcut); + content: '⌘+k'; } From f31db3a941c200495e4afb3ed0d827e7a2b19018 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Tue, 24 Jun 2025 04:45:18 -0400 Subject: [PATCH 6/7] chore: remove styles Signed-off-by: Aaron Pham --- docs/mkdocs/stylesheets/extra.css | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/docs/mkdocs/stylesheets/extra.css b/docs/mkdocs/stylesheets/extra.css index 7946d2e62c4..220657f83d5 100644 --- a/docs/mkdocs/stylesheets/extra.css +++ b/docs/mkdocs/stylesheets/extra.css @@ -108,18 +108,3 @@ body[data-md-color-scheme="slate"] .md-nav__item--section > label.md-nav__link . .md-content__button-wrapper a:hover { color: var(--md-accent-fg-color); } - -/* https://github.com/squidfunk/mkdocs-material/issues/2574#issuecomment-821979698 */ -[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after { - position: absolute; - top: .3rem; - right: .3rem; - display: block; - padding: .1rem .4rem; - color: var(--md-primary-bg-color); - font-weight: bold; - font-size: .8rem; - border: .05rem solid var(--md-primary-bg-color); - border-radius: .1rem; - content: '⌘+k'; -} From 6d2f19cccb0315062f6f93d6a889ceea72645368 Mon Sep 17 00:00:00 2001 From: Aaron Pham Date: Tue, 24 Jun 2025 17:39:14 -0400 Subject: [PATCH 7/7] chore: update js Signed-off-by: Aaron Pham --- docs/mkdocs/javascript/shortcuts.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/mkdocs/javascript/shortcuts.js b/docs/mkdocs/javascript/shortcuts.js index 337b931b4af..4b08ab8796b 100644 --- a/docs/mkdocs/javascript/shortcuts.js +++ b/docs/mkdocs/javascript/shortcuts.js @@ -1,13 +1,13 @@ document.addEventListener('keydown', function (event) { - if (event.key === '/') { + if (event.key.lower() === '/') { // we actually don't want to bind this key on docs given that it uses builtin mkdocs search. event.preventDefault(); - } elif ((event.altKey || event.metaKey) && event.key === 'k') { + } else if ((event.altKey || event.metaKey) && event.key.lower() === 'k') { event.preventDefault(); const query = document.querySelector('[data-md-component="search-query"]'); if (query) { query.focus(); query.select(); } - } + }; });