Merge pull request #20953 from dvdksn/ask-ai-copy

site: Ask AI copy updates

hugo_stats.json

@@ -172,7 +172,6 @@
       "border",
       "border-0",
       "border-amber-light",
-      "border-b",
       "border-b-2",
       "border-b-4",
       "border-b-gray-light-400",
@@ -273,6 +272,7 @@
       "flex-wrap",
       "focus:ring-blue-light",
       "font-medium",
+      "font-semibold",
       "footnote-backref",
       "footnote-ref",
       "footnotes",
@@ -314,6 +314,7 @@
       "hover:bg-gray-light-100",
       "hover:bg-gray-light-200",
       "hover:bg-gray-light-300",
+      "hover:bg-white/20",
       "hover:border-gray-light-200",
       "hover:border-white/20",
       "hover:dark:bg-gray-dark-300",
@@ -343,6 +344,10 @@
       "leading-snug",
       "left-0",
       "lg:block",
+      "lg:flex",
+      "lg:flex-row",
+      "lg:gap-4",
+      "lg:gap-8",
       "lg:grid-cols-2",
       "lg:grid-cols-3",
       "lg:hidden",
@@ -371,7 +376,6 @@
       "md:col-start-3",
       "md:flex",
       "md:flex-row",
-      "md:gap-8",
       "md:grid-cols-2",
       "md:grid-cols-3",
       "md:h-[334px]",
@@ -381,6 +385,7 @@
       "md:px-20",
       "md:scale-100",
       "md:sticky",
+      "md:text-base",
       "md:text-sm",
       "md:top-16",
       "md:w-[300px]",
@@ -388,10 +393,10 @@
       "min-h-screen",
       "min-w-0",
       "min-w-52",
+      "min-w-fit",
       "ml-3",
       "ml-auto",
       "mt-1",
-      "mt-2",
       "mt-20",
       "mx-auto",
       "my-0",
@@ -528,6 +533,7 @@
       "w-fit",
       "w-full",
       "w-screen",
+      "whitespace-nowrap",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
       "xl:w-[1200px]",

layouts/_default/search.html

@@ -7,16 +7,19 @@
     <h1 class="py-4">{{ .Title }}</h1>
     {{ .Content }}
     <div class="not-prose">
-      <div class="flex gap-4">
+      <div class="flex flex-col lg:flex-row justify-between gap-8">
         <input type="search" id="search-page-input"
-          class="ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
+          class="min-w-0 ring-[1.5px] ring-gray-light-200 dark:ring-gray-dark-400 w-full max-w-xl rounded px-4 py-2 outline-none bg-white dark:bg-background-dark focus:ring-blue-light dark:focus:ring-blue-dark"
           placeholder="Search…" tabindex="0" />
-        <button
-          class="py-1 px-4 rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
-          <span>Ask&nbsp;AI</span>
-          <img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
-            alt="AI sparkles!" />
-        </button>
+        <div class="flex min-w-fit flex-col flex-grow items-center">
+          <p>Not finding what you're looking for?</p>
+          <button
+            class="px-2 py-1 font-semibold rounded open-kapa-widget flex w-fit gap-2 items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
+            <span>Try Ask AI</span>
+            <img height="24px" width="24px" src="{{ (resources.Get "images/ai-stars.svg").Permalink }}"
+              alt="AI sparkles!" />
+          </button>
+        </div>
       </div>
       <hr class="border-divider-light dark:border-divider-dark">
       <div id="search-page-results">

layouts/partials/header.html

@@ -1,6 +1,6 @@
 <header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-gradient-to-r from-blue-light-600 to-blue-light dark:from-blue-dark-200 to-50% dark:to-blue-dark-100">
-  <div class="max-w-[1920px] mx-auto flex gap-8 h-full items-center justify-between">
-    <div class="flex h-full items-center md:gap-8 gap-2">
+  <div class="max-w-[1920px] mx-auto flex lg:gap-8 gap-2 h-full items-center justify-between">
+    <div class="flex h-full items-center lg:gap-8 gap-2">
       {{- if not .IsHome }}
       <button x-data @click="$store.showSidebar = true"
         class="icon-svg block px-4 md:hidden h-full" aria-label="Menu">
@@ -16,7 +16,7 @@
         </a>
       </div>
       <nav class="mt-1 hidden md:block">
-        <ul class="flex gap-4">
+        <ul class="flex text-sm md:text-base lg:gap-4">
           {{ range site.Menus.main }}
           <li
             {{- if or (eq page .Page) (page.IsDescendant .Page) }}
@@ -24,14 +24,19 @@
             {{- else }}
               class="border-b-4 border-transparent hover:border-white/20"
             {{- end }}>
-            <a class="block px-2 py-1" href="{{ .URL }}">{{ .Name }}</a>
+            <a class="block px-2 py-1 whitespace-nowrap" href="{{ .URL }}">{{ .Name }}</a>
           </li>
           {{ end }}
         </ul>
       </nav>
     </div>
-    <div class="flex min-w-0 items-center gap-6 flex-grow justify-end">
+    <div class="flex min-w-0 items-center gap-4 flex-grow justify-end">
       {{ partialCached "search-bar.html" "-" }}
+      <button @click="open = false"
+        class="dark:text-white py-1 px-2 rounded open-kapa-widget flex gap-1 items-center hover:bg-white/20 transition">
+        <span>Ask&nbsp;AI</span>
+        <img src="{{ (resources.Get "images/ai-stars.svg").Permalink }}" alt="AI Stars" />
+      </button>
       <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
         x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
         localStorage.setItem('theme-preference', value);

layouts/partials/search-bar.html

@@ -5,7 +5,7 @@
 <!-- search button -->
 <div x-ref="searchBarRef" x-data="{ open: false }" @click.outside="open = false;"
   @keyup.escape.window="open = false" id="search-bar"
-  class="hidden sm:flex relative bg-white/10 rounded items-center p-2 sm:w-full xl:w-[400px]">
+  class="hidden min-w-0 sm:flex relative bg-white/10 rounded items-center p-2 sm:w-full xl:w-[400px]">
   {{ (resources.Get "images/search-ai.svg").Content | safeHTML }}
   <input x-ref="searchBarInput" type="search" id="search-bar-input" @focus="open = true;"
     @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
@@ -18,9 +18,9 @@
             }
             break;
           }
-        }" class="flex-grow px-2 bg-transparent text-white placeholder:text-white outline-none" placeholder="Search"
+        }" class="flex-grow px-2 bg-transparent min-w-0 text-white placeholder:text-white outline-none" placeholder="Search"
     tabindex="0" />
-  <div x-cloak :class="open && 'hidden'" class="border px-1 text-sm border-white rounded flex items-center">
+  <div x-cloak :class="open && 'hidden'" class="hidden lg:flex border px-1 text-sm border-white rounded items-center">
     <div class="-mt-0.5">
       <span x-show="navigator.platform == 'MacIntel'" class="icon-svg icon-sm">{{ partialCached "icon" "keyboard_command_key" "keyboard_command_key" }}</span>
       <span x-show="navigator.platform != 'MacIntel'" class="icon-svg icon-sm">{{ partialCached "icon" "keyboard_control_key" "keyboard_control_key" }}</span>
@@ -34,17 +34,9 @@
   </div>
   <div x-show="open" x-cloak
     class="absolute px-6 py-4 right-0 w-screen max-w-xl top-full bg-background-light dark:bg-background-dark rounded shadow-lg z-50">
-    <button @click="open = false"
-      class="text-black dark:text-white py-1 px-2 rounded w-full open-kapa-widget flex justify-between items-center hover:bg-gray-light-200 dark:hover:bg-gray-dark-200">
-      <div class="flex gap-1 items-center">
-        <img src="{{ (resources.Get "images/ai-stars.svg").Permalink }}" alt="AI Stars" />
-        <span>Ask AI</span>
-      </div>
-      <span>→</span>
-    </button>
-    <hr class="mt-2 border-b border-divider-light dark:border-divider-dark">
     <div id="search-bar-results">
-      <div class="p-2 text-gray-light dark:text-gray-dark">Start typing to search…</div>
+      {{- $emptyState := `<div class="p-2 text-gray-light dark:text-gray-dark">Start typing to search… or try <button @click="open=false" class="open-kapa-widget link">Ask AI</button></div>` }}
+      {{- $emptyState | safe.HTML }}
       <!-- results -->
     </div>
   </div>
@@ -60,7 +52,7 @@
       async function search(e) {
         const query = e.target.value;
         if (query === "") {
-          searchBarResults.innerHTML = `<div class="p-2 text-gray-light dark:text-gray-dark">Start typing to search…</div>`;
+          searchBarResults.innerHTML = `{{ $emptyState | safe.HTML }}`;
           return;
         }
         const search = await pagefind.debouncedSearch(query);