mirror of
https://github.com/cloudflare/cloudflare-docs.git
synced 2026-01-16 23:11:06 +00:00
Add keyboard shortcut for sidebar search (#24753)
This commit is contained in:
Greg Brimble
GitHub
parent
f3b19e988d
commit
a204f12e0a
4 changed files with 177 additions and 1 deletions
93
patches/@astrojs+starlight-docsearch+0.6.0.patch
Normal file
93
patches/@astrojs+starlight-docsearch+0.6.0.patch
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
diff --git a/node_modules/@astrojs/starlight-docsearch/DocSearch.astro b/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
|
||||
index f50c208..5309557 100644
|
||||
--- a/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
|
||||
+++ b/node_modules/@astrojs/starlight-docsearch/DocSearch.astro
|
||||
@@ -109,15 +109,20 @@ const docsearchTranslations: DocSearchTranslationProps = {
|
||||
.DocSearch-Button-Keys {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
- .DocSearch-Button-Keys::before {
|
||||
- content: '';
|
||||
- width: 1em;
|
||||
- height: 1em;
|
||||
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
- -webkit-mask-size: 100%;
|
||||
- mask-size: 100%;
|
||||
- background-color: currentColor;
|
||||
+ .DocSearch-Button-Key:first-child {
|
||||
+ margin-right: 0.4em;
|
||||
+ }
|
||||
+ .DocSearch-Button-Key {
|
||||
+ display: inline-block;
|
||||
+ font-size: 0.75em;
|
||||
+ font-weight: 600;
|
||||
+ opacity: 0.8;
|
||||
+ border: 1px solid var(--sl-color-gray-4);
|
||||
+ border-radius: 0.25rem;
|
||||
+ padding: 0.125rem 0.375rem;
|
||||
+ background-color: var(--sl-color-gray-6);
|
||||
+ color: var(--sl-color-gray-1);
|
||||
+ line-height: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -128,6 +133,7 @@ const docsearchTranslations: DocSearchTranslationProps = {
|
||||
class StarlightDocSearch extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
+
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
const { default: docsearch } = await import('@docsearch/js');
|
||||
const options = { ...config, container: 'sl-doc-search' };
|
||||
@@ -136,6 +142,27 @@ const docsearchTranslations: DocSearchTranslationProps = {
|
||||
Object.assign(options, translations);
|
||||
} catch {}
|
||||
docsearch(options);
|
||||
+
|
||||
+ const keyboardShortcuts = options.keyboardShortcuts ?? {};
|
||||
+ const slashEnabled = keyboardShortcuts?.['/'] !== false;
|
||||
+ const ctrlCmdKEnabled = keyboardShortcuts?.['Ctrl/Cmd+K'] !== false;
|
||||
+
|
||||
+ if (slashEnabled && !ctrlCmdKEnabled) {
|
||||
+ const styleContainer = document.createElement('style');
|
||||
+ styleContainer.innerHTML = `
|
||||
+ .DocSearch-Button-Keys::before {
|
||||
+ content: '';
|
||||
+ width: 1em;
|
||||
+ height: 1em;
|
||||
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
+ -webkit-mask-size: 100%;
|
||||
+ mask-size: 100%;
|
||||
+ background-color: currentColor;
|
||||
+ }
|
||||
+ `;
|
||||
+ document.head.appendChild(styleContainer);
|
||||
+ }
|
||||
});
|
||||
}
|
||||
}
|
||||
diff --git a/node_modules/@astrojs/starlight-docsearch/index.ts b/node_modules/@astrojs/starlight-docsearch/index.ts
|
||||
index e8cc7e5..6c88e07 100644
|
||||
--- a/node_modules/@astrojs/starlight-docsearch/index.ts
|
||||
+++ b/node_modules/@astrojs/starlight-docsearch/index.ts
|
||||
@@ -43,6 +43,18 @@ const DocSearchConfigSchema = z
|
||||
* @see https://www.algolia.com/doc/api-reference/search-api-parameters/
|
||||
*/
|
||||
searchParameters: z.custom<SearchOptions>(),
|
||||
+ /**
|
||||
+ * Configuration for keyboard shortcuts that trigger the DocSearch modal.
|
||||
+ * @see https://docsearch.algolia.com/docs/api/#keyboardshortcuts
|
||||
+ */
|
||||
+ keyboardShortcuts: z
|
||||
+ .object({
|
||||
+ /** Enable/disable Ctrl/Cmd+K shortcut. @default true */
|
||||
+ 'Ctrl/Cmd+K': z.boolean().optional(),
|
||||
+ /** Enable/disable / shortcut. @default true */
|
||||
+ '/': z.boolean().optional(),
|
||||
+ })
|
||||
+ .optional(),
|
||||
})
|
||||
.strict()
|
||||
.or(
|
||||
38
patches/@docsearch+js+3.8.2.patch
Normal file
38
patches/@docsearch+js+3.8.2.patch
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -22,8 +22,9 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
|
|||
type="text"
|
||||
id="sidebar-search"
|
||||
placeholder="Search sidebar..."
|
||||
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-orange-500 dark:focus:border-orange-500 transition-colors duration-200"
|
||||
class="w-full px-3 py-2 pr-10 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-orange-500 dark:focus:border-orange-500 transition-colors duration-200"
|
||||
/>
|
||||
<div class="sidebar-search-icon"></div>
|
||||
</div>
|
||||
|
||||
<!-- No Results Message -->
|
||||
|
|
@ -255,6 +256,30 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener(
|
||||
"keydown",
|
||||
(keyboardEvent) => {
|
||||
const target = keyboardEvent.target;
|
||||
|
||||
const isInput =
|
||||
target instanceof EventTarget &&
|
||||
(("tagName" in target &&
|
||||
(target.tagName === "INPUT" ||
|
||||
target.tagName === "TEXTAREA" ||
|
||||
target.tagName === "SELECT")) ||
|
||||
("isContentEditable" in target && target.isContentEditable));
|
||||
|
||||
if (keyboardEvent.key === "/" && !isInput) {
|
||||
keyboardEvent.preventDefault();
|
||||
keyboardEvent.stopPropagation();
|
||||
searchInput.focus();
|
||||
}
|
||||
},
|
||||
{
|
||||
capture: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
|
|
@ -269,6 +294,21 @@ const [product, module] = Astro.url.pathname.split("/").filter(Boolean);
|
|||
</script>
|
||||
|
||||
<style is:global>
|
||||
.sidebar-search-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2H7a5 5 0 0 0-5 5v10a5 5 0 0 0 5 5h10a5 5 0 0 0 5-5V7a5 5 0 0 0-5-5Zm3 15a3 3 0 0 1-3 3H7a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v10Z'%3E%3C/path%3E%3Cpath d='M15.293 6.707a1 1 0 1 1 1.414 1.414l-8.485 8.486a1 1 0 0 1-1.414-1.415l8.485-8.485Z'%3E%3C/path%3E%3C/svg%3E");
|
||||
-webkit-mask-size: 100%;
|
||||
mask-size: 100%;
|
||||
background-color: currentColor;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
:root {
|
||||
.sidebar-content {
|
||||
--sl-color-hairline-light: #cacaca !important;
|
||||
|
|
|
|||
|
|
@ -43,4 +43,9 @@ export default {
|
|||
},
|
||||
};
|
||||
},
|
||||
// @ts-expect-error Will be fixed with the next release of @docsearch/js
|
||||
keyboardShortcuts: {
|
||||
"Ctrl/Cmd+K": true,
|
||||
"/": false,
|
||||
},
|
||||
} satisfies DocSearchClientOptions;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue