From b42743337197c6ae028032160f9c4c453657accb Mon Sep 17 00:00:00 2001 From: Arthur Date: Mon, 11 Aug 2025 09:33:02 +0200 Subject: [PATCH] ux: copy search term to AI widget (#23212) Harmonize buttons in the nav and automatically copy the search term to the AI widget. Uses "cmd k" to open the AI widget instead of search. Touch up search results. --- assets/css/components.css | 2 +- assets/css/global.css | 2 +- assets/css/utilities.css | 7 ++++ assets/icons/search.svg | 8 +++++ assets/icons/sparkle.svg | 8 +++++ assets/images/ai-stars.svg | 14 -------- assets/images/search-ai.svg | 9 ----- hugo_stats.json | 46 +++++++++++++------------- layouts/_default/search.html | 27 +++++---------- layouts/partials/head.html | 29 +++++++++++++++++ layouts/partials/header.html | 22 +++++++------ layouts/partials/search-bar.html | 56 ++++++++++---------------------- 12 files changed, 116 insertions(+), 114 deletions(-) create mode 100644 assets/icons/search.svg create mode 100644 assets/icons/sparkle.svg delete mode 100644 assets/images/ai-stars.svg delete mode 100644 assets/images/search-ai.svg diff --git a/assets/css/components.css b/assets/css/components.css index 108134dd29..1e3f897903 100644 --- a/assets/css/components.css +++ b/assets/css/components.css @@ -95,7 +95,7 @@ } } .button { - @apply my-2 mr-2 inline-block rounded-sm bg-blue-500 p-1 px-3 text-blue-50 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400; + @apply my-2 mr-2 inline-block rounded-sm bg-blue-500 p-1 px-3 text-white hover:bg-blue-600 dark:bg-blue-500 hover:dark:bg-blue-400; } .summary-bar { diff --git a/assets/css/global.css b/assets/css/global.css index 9e6aaae28e..1be4564ecf 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -20,7 +20,7 @@ } mark { - @apply bg-transparent font-bold text-blue-500 dark:text-blue-800; + @apply bg-transparent font-bold text-blue-500 dark:text-blue-400; } /* Hide the clear (X) button for search inputs */ diff --git a/assets/css/utilities.css b/assets/css/utilities.css index 4ffcddcbf8..1923df36b4 100644 --- a/assets/css/utilities.css +++ b/assets/css/utilities.css @@ -249,3 +249,10 @@ @utility breadcrumbs { font-size: 90%; } +@utility topbar-button { + @apply text-white font-semibold min-h-10 px-2 bg-blue-300/50 rounded-md border-1 border-blue-300 inline-flex justify-center items-center gap-1.5 hover:bg-blue-400/70 hover:border-blue-200 transition-colors; + svg { + font-size: 19px; + } +} + diff --git a/assets/icons/search.svg b/assets/icons/search.svg new file mode 100644 index 0000000000..8d3e225aa6 --- /dev/null +++ b/assets/icons/search.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/icons/sparkle.svg b/assets/icons/sparkle.svg new file mode 100644 index 0000000000..aa93b15221 --- /dev/null +++ b/assets/icons/sparkle.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/images/ai-stars.svg b/assets/images/ai-stars.svg deleted file mode 100644 index b7c6a9085c..0000000000 --- a/assets/images/ai-stars.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/assets/images/search-ai.svg b/assets/images/search-ai.svg deleted file mode 100644 index a898a28113..0000000000 --- a/assets/images/search-ai.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/hugo_stats.json b/hugo_stats.json index 2c6b88e62d..32d14ab95d 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -4,13 +4,13 @@ "classes": [ "--mount", "--tmpfs", - "-mt-0.5", "-mt-8", "-top-10", "-top-16", "-v", "-z-10", ".NET", + "2xl:flex", "AWS-Route-53", "Admin-Console", "After", @@ -162,15 +162,15 @@ "aspect-video", "bake-action", "bg-amber-500", - "bg-background-light", "bg-background-toc", "bg-black/100", "bg-black/50", "bg-blue", "bg-blue-400", + "bg-blue-400/95", "bg-blue-500", + "bg-blue-600", "bg-gradient-to-br", - "bg-gradient-to-r", "bg-gray-100", "bg-gray-400", "bg-gray-50", @@ -182,24 +182,25 @@ "bg-pattern-purple", "bg-pattern-verde", "bg-red-500", - "bg-transparent", "bg-violet-500", "bg-white", - "bg-white/10", "block", "border", "border-0", + "border-1", "border-b", "border-b-4", "border-blue", + "border-blue-300", "border-divider-light", + "border-gray-100", "border-gray-200", "border-gray-400", "border-green-400", "border-l-2", "border-l-magenta-light", + "border-none", "border-transparent", - "border-white", "bottom-0", "breadcrumbs", "build-push-action", @@ -246,13 +247,11 @@ "dark:fill-blue-300", "dark:focus:ring-3-blue-dark", "dark:from-blue-300", - "dark:from-blue-600", "dark:hidden", "dark:hover:bg-blue-400", "dark:hover:bg-blue-500", "dark:hover:bg-blue-700", "dark:hover:bg-gray-600", - "dark:hover:bg-gray-800", "dark:hover:bg-gray-900", "dark:hover:text-blue", "dark:outline-gray-800", @@ -271,7 +270,6 @@ "dark:text-magenta-dark", "dark:text-white", "dark:to-blue-400", - "dark:to-blue-500", "docker/bake-action", "docker/build-push-action", "download-links", @@ -288,8 +286,11 @@ "flex-col-reverse", "flex-grow", "flex-none", + "flex-row", "flex-shrink", + "flex-shrink-0", "flex-wrap", + "focus:outline-none", "focus:ring-3-blue-light", "font-bold", "font-medium", @@ -299,7 +300,6 @@ "footnote-ref", "footnotes", "from-blue-400", - "from-blue-600", "gap-0", "gap-1", "gap-10", @@ -334,11 +334,11 @@ "highlight", "hover:bg-blue", "hover:bg-blue-400", + "hover:bg-blue-400/90", "hover:bg-blue-500", "hover:bg-gray-100", "hover:bg-gray-200", "hover:bg-gray-50", - "hover:bg-white/20", "hover:border-white/20", "hover:dark:bg-blue-500", "hover:dark:bg-gray-800", @@ -346,11 +346,11 @@ "hover:dark:text-blue-700", "hover:opacity-90", "hover:text-blue", - "hover:text-white", "hover:underline", "icon-lg", "icon-sm", "icon-svg", + "icon-svg-stroke", "inline", "inline-block", "inline-flex", @@ -400,6 +400,7 @@ "mb-8", "md-dropdown", "md:block", + "md:flex", "md:flex-nowrap", "md:flex-row", "md:grid-cols-2", @@ -447,6 +448,8 @@ "object-cover", "open-kapa-widget", "openSUSE-and-SLES", + "order-1", + "order-2", "origin-bottom-right", "origin-top-right", "ot-sdk-show-settings", @@ -454,6 +457,7 @@ "outline-1", "outline-gray-200", "outline-hidden", + "outline-none", "outline-offset-[-1px]", "overflow-clip", "overflow-hidden", @@ -478,7 +482,6 @@ "pl-4", "pl-5", "place-items-center", - "placeholder:text-white", "pr-2", "prose", "pt-10", @@ -518,14 +521,11 @@ "self-center", "self-start", "shadow", - "shadow-lg", "shadow-md", "sm:block", - "sm:flex", "sm:flex-row", "sm:hidden", "sm:items-center", - "sm:w-full", "space-y-2", "space-y-4", "sticky", @@ -558,41 +558,41 @@ "text-white", "text-xl", "text-xs", - "to-50%", "to-blue-200", - "to-blue-500", "toc", "top-0", "top-1", "top-16", "top-6", - "top-full", + "topbar-button", "transition", "transition-colors", "transition-transform", "truncate", "underline-offset-2", + "w-0", "w-2", + "w-32", "w-5", "w-65", "w-8", "w-[1200px]", - "w-fit", + "w-[500px]", "w-full", - "w-screen", "whitespace-nowrap", + "xl:flex", "xl:flex-row", "xl:grid-cols-3", "xl:grid-cols-4", "xl:mb-0", "xl:w-[1200px]", - "xl:w-[400px]", "youtube-video", "z-10", "z-20", "z-30", "z-40", - "z-50" + "z-50", + "z-[999]" ], "ids": null } diff --git a/layouts/_default/search.html b/layouts/_default/search.html index 841cd4276b..5d17098366 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -8,25 +8,16 @@ {{ .Content }}
- -
-

Not finding what you're looking for?

-
diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 696f6d5991..4c1455512c 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -74,7 +74,36 @@ data-user-analytics-fingerprint-enabled="true" data-bot-protection-mechanism="hcaptcha" data-website-id="{{ site.Params.kapa.id }}" + data-modal-open-on-command-k="true" + data-modal-border-radius="6px" > + {{/* preload Roboto Flex as it's a critical font: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload */}}
{{- if not .IsHome }} @@ -26,7 +26,8 @@
-
-
- {{ partialCached "search-bar.html" "-" }} +
+
+ {{ partialCached "search-bar.html" "-" }} +
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html index 48c1d166d0..7dd5a5c6b6 100644 --- a/layouts/partials/search-bar.html +++ b/layouts/partials/search-bar.html @@ -1,21 +1,16 @@ - - - {{ partialCached "icon" "search" "search" }} - -