Add Ask AI to Algolia results and add more filters to search results page (#266)

* Add Ask AI to Algolia results and add more filters to search results page

* Move View all results to the bottom

Do not submit AI question to allow users to refine

Add preview of the search page

* Update ui-model.yml

* Pass on relevant products

Author: JakeSCahill

preview-src/index.adoc

@@ -34,6 +34,10 @@ link:./cloud-api.html[Cloud API]
 
 link:./playground.html[Playground]
 
+== Site search
+
+link:./search.html[Search]
+
 == Tables
 
 |===

preview-src/search.adoc

@@ -0,0 +1,2 @@
+= Search the Documentation
+:page-layout: search

preview-src/ui-model.yml

@@ -2,7 +2,7 @@ antoraVersion: '1.0.0'
 site:
   url: http://localhost:5252
   title: UI Preview
-  homeUrl: &home_url /xyz/23.2/index.html
+  homeUrl: &home_url /xyz/24.3/index.html
   components:
   - name: abc
     title: Project ABC
@@ -28,8 +28,8 @@ site:
     - &component_version
       title: *component_title
       url: '#'
-      version: '23.2'
-      displayVersion: '23.2'
+      version: '24.3'
+      displayVersion: '24.3'
     - url: '#'
       version: '5.1'
       displayVersion: '5.1'
@@ -58,8 +58,8 @@ page:
   title: Brand’s Hardware & Software Requirements
   component: *component
   componentVersion: *component_version
-  version: '23.2'
-  displayVersion: '23.2'
+  version: '24.3'
+  displayVersion: '24.3'
   module: ROOT
   relativeSrcPath: index.adoc
   editUrl: http://example.com/project-xyz/blob/main/index.adoc
@@ -78,14 +78,14 @@ page:
     url: '#'
     urlType: internal
   - content: Brand’s Hardware & Software Requirements
-    url: /xyz/23.2/index.html
+    url: /xyz/24.3/index.html
     urlType: internal
   versions:
   - version: '6.0'
     displayVersion: '6.0'
     url: '#'
-  - version: '23.2'
-    displayVersion: '23.2'
+  - version: '24.3'
+    displayVersion: '24.3'
     url: '#'
   - version: '5.1'
     displayVersion: '5.1'
@@ -102,12 +102,12 @@ page:
       urlType: internal
       items:
       - content: Brand’s Hardware & Software Requirements
-        url: /xyz/23.2/index.html
+        url: /xyz/24.3/index.html
         urlType: internal
       - content: Cloud API
-        url: /xyz/23.2/cloud-api.html
+        url: /xyz/24.3/cloud-api.html
         urlType: internal
       - content: Bloblang Playground
-        url: /xyz/23.2/playground.html
+        url: /xyz/24.3/playground.html
         urlType: internal
 

src/css/search.css

@@ -161,6 +161,46 @@ article.search .ais-Heading > a {
   color: var(--body-font-color);
 }
 
+.aa-Header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;          /* Space between the button and link */
+  padding: 12px;
+}
+
+.aa-Header .ask-ai {
+  display: flex;
+  align-items: center;
+  background-color: rgb(225, 66, 37);
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;
+  border-radius: 10px;
+  padding: 10px;
+  border: none;
+  color: white;
+  height: 32px;
+  font-size: var(--secondary-font-size);
+  text-transform: none;
+}
+
+.aa-Header .ask-ai svg {
+  margin-right: 6px;
+}
+
+.search-footer .view-all {
+  color: var(--link-highlight-color);
+  font-size: 16px;
+  text-decoration: none;
+  padding: 4px 0;
+  cursor: pointer;
+  margin-top: 10px;
+  margin-bottom: 50px;
+}
+
+.search-footer .view-all:hover {
+  text-decoration: underline;
+}
+
 .ais-Breadcrumbs a,
 .aa-Breadcrumbs a {
   color: var(--body-font-color);
@@ -294,7 +334,10 @@ kbd.algolia-command {
 }
 
 .search-footer {
-  display: none;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+  padding: 10px;
 }
 
 .aa-Footer {
@@ -308,6 +351,11 @@ kbd.algolia-command {
   display: block;
 }
 
+.aa-DetachedContainer .aa-Panel {
+  overflow: auto;
+  height: fit-content;
+}
+
 .aa-SourceFooter {
   position: sticky;
   bottom: -13px;
@@ -500,11 +548,6 @@ li.aa-Item:not([id*=filters]) {
 }
 
 @media screen and (min-width: 900px) {
-  .search-footer {
-    display: flex;
-    justify-content: space-evenly;
-  }
-
   .aa-Preview.aa-Column {
     display: flex;
     flex-direction: column;

src/css/vars.css

@@ -159,8 +159,8 @@ html[data-theme=dark] {
   --z-index-toolbar: 4;
   --z-index-navbar: 5;
   /* Algolia */
-  --aa-detached-modal-max-width: 800px;
-  --aa-spacing-factor: 1.3;
+  --aa-detached-modal-max-width: 1200px;
+  --aa-spacing-factor: 0.8;
   /* Prism */
   --highlight-background: rgba(255, 255, 0, 0.23);
 }