Merge pull request #78 from spring-io/gh-algolia

Customise search css

Author: rwinch

src/css/header.css

@@ -293,27 +293,26 @@ body {
 .search {
   align-items: center;
   border-left: 1px solid var(--toolbar-border-color);
-  display: flex;
+  display: block;
   height: 100%;
-  padding: 8px 10px;
   position: relative;
   width: 192px;
 }
 
-.search .field {
+/* .search .field {
   align-items: center;
   border: 1px solid var(--kbd-border-color);
   border-radius: 0.1em;
   display: flex;
   flex: auto;
   height: inherit;
-}
+} */
 
-.search .field * {
+/* .search .field * {
   color: var(--body-font-dark-color);
-}
+} */
 
-.search .query {
+/* .search .query {
   background: transparent;
   border: none;
   flex: auto;
@@ -330,7 +329,7 @@ body {
 
 .search .query:focus {
   outline: none;
-}
+} */
 
 .edit-this-page {
   height: 40px;

src/css/vendor/docsearch.css

@@ -1,110 +1,31 @@
-/*! docsearch 2.6.x | © Algolia | github.com/algolia/docsearch */
-@import "https://cdn.jsdelivr.net/npm/@docsearch/css@3";
 
-.algolia-autocomplete-results {
-  position: relative;
-  top: 14px;
-  right: -1px;
-}
+@import "https://cdn.jsdelivr.net/npm/@docsearch/css@3";
 
-.algolia-autocomplete {
-  left: auto !important;
-  top: auto !important;
+.DocSearch-Button {
+  margin: 0;
+  width: 100%;
+  border-radius: 0;
+  height: 40px;
+  border: 0 none;
+  font-weight: normal;
+  line-height: 40px;
 }
 
-.algolia-autocomplete .ds-dropdown-menu {
-  background: var(--panel-background);
-  border: 1px solid var(--codetools-border-color);
-  border-radius: 4px;
+.DocSearch-Button:hover {
+  border: 0 none;
   box-shadow: none;
-  display: flex !important;
-  flex-direction: column;
-  max-height: calc(var(--nav-height) - 8px);
-  max-width: none;
-  min-width: auto;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 35vw;
-}
-
-.algolia-autocomplete .ds-dropdown-menu::before {
-  content: none;
-}
-
-.algolia-autocomplete .ds-dropdown-menu .ds-dataset-1 {
-  background: none;
-  border: none;
-  border-radius: inherit;
-  overscroll-behavior: none;
-  padding: 0 8px;
-}
-
-.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
-  margin: 8px 0;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion {
-  background: none;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header,
-.algolia-autocomplete .algolia-docsearch-suggestion--title {
-  color: inherit;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
-  color: var(--color-gray-50);
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
-  color: var(--link-font-color);
-}
-
-.algolia-autocomplete .ds-footer {
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  background-color: var(--body-background-color);
-  border-top: 1px solid var(--codetools-border-color);
-  padding: 10px 8px 8px;
-  border-radius: 0 0 4px 4px;
-}
-
-.algolia-autocomplete .ds-pagination {
-  display: flex;
-  align-items: center;
-  font-size: 0.9em;
-  line-height: 1;
-}
-
-.algolia-autocomplete .ds-pagination > :not(:first-child) {
-  margin-left: 0.5em;
-}
-
-.algolia-autocomplete .ds-pagination a {
-  color: var(--link-font-color);
-}
-
-.algolia-autocomplete .ds-pagination--prev::before,
-.algolia-autocomplete .ds-pagination--next::after {
-  display: inline-block;
-  width: 0.5em;
-  font-size: 1.2em;
-  line-height: 0;
 }
 
-.algolia-autocomplete .ds-pagination--prev::before {
-  content: "\2039";
+.DocSearch-Button .DocSearch-Search-Icon {
+  color: var(--docsearch-muted-color);
+  width: 18px;
+  margin: 0 3px;
 }
 
-.algolia-autocomplete .ds-pagination--next::after {
-  content: "\203a";
-  text-align: right;
+.DocSearch-Button:hover .DocSearch-Search-Icon {
+  color: var(--docsearch-text-color);
 }
 
-.algolia-autocomplete .algolia-docsearch-footer {
-  margin-top: 0;
-  width: 112px;
-  height: 16px;
+.DocSearch-Button-Placeholder {
+  font-size: 14px;
 }

src/js/vendor/docsearch.bundle.js

@@ -10,9 +10,7 @@
       appId: config.appId,
       indexName: config.indexName,
       apiKey: config.apiKey,
-      // searchParameters: {
-      //   facetFilters: ['version:6.0.2'],
-      // },
+      searchParameters: { facetFilters: [`version:${config.pageVersion}`] },
     })
   }
 })()

src/partials/footer-scripts.hbs

@@ -2,5 +2,7 @@
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/{{#if (asciidocExtensionRegistered '@asciidoctor/tabs')}}asciidoctor{{else}}spring{{/if}}-tabs.js" data-sync-storage-key="docs:preferred-tab"></script>
 {{#if env.ALGOLIA_API_KEY}}
+{{#if (and page.latest (eq page.url page.latest.url))}}
 <script async id="search-script" src="{{{uiRootPath}}}/js/vendor/docsearch.js"{{#if env.ALGOLIA_APP_ID}} data-app-id="{{env.ALGOLIA_APP_ID}}"{{/if}} data-api-key="{{env.ALGOLIA_API_KEY}}" data-index-name="{{env.ALGOLIA_INDEX_NAME}}" data-stylesheet="{{{uiRootPath}}}/css/vendor/docsearch.css" data-page-version="{{{page.version}}}"></script>
 {{/if}}
+{{/if}}

src/partials/head-styles.hbs

@@ -4,6 +4,6 @@
 }(localStorage && localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)') && 'dark'))
     </script>
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/docsearch.css">
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/{{#if (asciidocExtensionRegistered '@asciidoctor/tabs')}}asciidoctor{{else}}spring{{/if}}-tabs.css">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />