InstantSearch integration

.stylelintrc

@@ -3,5 +3,6 @@
   "rules": {
     "comment-empty-line-before": null,
     "no-descending-specificity": null,
+    "rule-empty-line-before": null,
   }
 }

package.json

@@ -19,15 +19,16 @@
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
     "@asciidoctor/tabs": "1.0.0-beta.3",
+    "@docsearch/js": "3",
     "@fontsource/roboto": "~4.5",
     "@fontsource/roboto-mono": "~4.5",
     "@springio/asciidoctor-extensions": "1.0.0-alpha.8",
+    "algoliasearch": "4",
     "autoprefixer": "~10.4",
     "browser-pack-flat": "~3.5",
     "browserify": "~17.0",
     "core-js": "~3.26",
     "cssnano": "~5.1",
-    "@docsearch/js": "3",
     "eslint": "~6.8",
     "eslint-config-standard": "~14.1",
     "eslint-plugin-import": "~2.22",
@@ -46,8 +47,10 @@
     "gulp-vinyl-zip": "~2.5",
     "handlebars": "~4.7",
     "highlight.js": "9.18.3",
+    "instantsearch.js": "^4.54.1",
     "js-yaml": "~4.1",
     "merge-stream": "~2.0",
+    "micromodal": "^0.4.10",
     "postcss": "~8.4",
     "postcss-calc": "~8.2",
     "postcss-custom-properties": "~12.1",
@@ -59,5 +62,8 @@
     "stylelint": "~13.13",
     "stylelint-config-standard": "~22.0",
     "vinyl-fs": "~3.0"
+  },
+  "dependencies": {
+    "@algolia/client-search": "^4.17.0"
   }
 }

src/css/modal.css

@@ -0,0 +1,219 @@
+.modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(235, 242, 242, 0.8);
+  z-index: 999;
+  padding: 3rem;
+}
+
+.modal__container {
+  background-color: var(--body-background-color);
+  max-width: 500px;
+  min-width: 50%;
+  margin: 0 auto;
+  height: auto;
+}
+
+.modal__content {
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+@keyframes mmfadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes mmfadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes mmslideIn {
+  from {
+    transform: translateY(15%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes mmslideOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-10%);
+  }
+}
+
+.micromodal-slide {
+  display: none;
+}
+
+.micromodal-slide.is-open {
+  display: block;
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__overlay {
+  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="false"] .modal__container {
+  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__overlay {
+  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide[aria-hidden="true"] .modal__container {
+  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.micromodal-slide .modal__container,
+.micromodal-slide .modal__overlay {
+  will-change: transform;
+}
+
+.ais-SearchBox {
+  position: relative;
+  top: 0;
+  height: 52px;
+  background: var(--body-background-color);
+  border-bottom: 1px solid #dce8e8;
+}
+
+.ais-SearchBox-reset {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  padding: 10px;
+}
+
+.ais-SearchBox-reset svg {
+  fill: var(--body-font-color);
+}
+
+.ais-SearchBox-reset:hover svg {
+  fill: var(--color-accent-3);
+}
+
+.ais-SearchBox-input {
+  display: block;
+  width: 100%;
+  border: 0 none;
+  background: var(--body-background-color);
+  height: 50px;
+  line-height: 50px;
+  padding: 7px 15px 3px;
+  font-size: 17px;
+  font-family: "Metropolis", Arial, sans-serif;
+  color: var(--body-font-color);
+}
+
+.ais-SearchBox-input::-webkit-search-decoration,
+.ais-SearchBox-input::-webkit-search-cancel-button,
+.ais-SearchBox-input::-webkit-search-results-button,
+.ais-SearchBox-input::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+
+.ais-SearchBox-input::placeholder {
+  font-style: italic;
+  color: var(--body-font-color);
+  font-weight: lighter;
+}
+
+.ais-SearchBox-input:focus {
+  box-shadow: none;
+  border: 0 none;
+  outline: none;
+}
+
+a.ais-Hits-item {
+  display: block;
+  color: var(--body-font-color);
+  text-decoration: none;
+  padding: 1rem;
+}
+
+a.ais-Hits-item:hover {
+  text-decoration: none;
+  background-color: #f2f2f2;
+}
+
+.modal #hits {
+  max-height: 80vh;
+  position: relative;
+  overflow: scroll;
+}
+.modal #hits ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.modal #hits ul li {
+  padding: 0;
+  margin: 0;
+  border-bottom: 1px solid #dce8e8;
+}
+
+.modal #hits ul li:last-child {
+  border-bottom: none;
+}
+
+.modal .hit-description,
+.modal .hit-breadcrumbs {
+  margin: 0;
+  padding: 0;
+  font-size: 0.9rem;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.modal #hits ul li.no-result {
+  display: block;
+  color: var(--body-font-color);
+  padding: 1rem;
+  font-style: italic;
+  border: none;
+  opacity: 0.6;
+}
+
+.dark-theme .modal .hit-description,
+.dark-theme .modal .hit-breadcrumbs {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.dark-theme .ais-SearchBox,
+.dark-theme .modal #hits ul li {
+  border-color: var(--nav-panel-divider-color);
+}
+
+.dark-theme a.ais-Hits-item:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.dark-theme mark.ais-Highlight-highlighted,
+.dark-theme mark.ais-Snippet-highlighted {
+  color: white;
+  background: #6db33f;
+}
+
+.dark-theme .modal__overlay {
+  background: rgba(0, 0, 0, 0.85);
+}

src/css/site.css

@@ -8,6 +8,7 @@
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";
+@import "modal.css";
 @import "toc.css";
 @import "doc.css";
 @import "pagination.css";

src/css/spring/settings.css

@@ -36,7 +36,7 @@
   --link-font-color: #1565c0;
   --hover-link-font-color: #104d92;
   --scrollbar-thumb-color: silver;
-  --mark-background-color: #39ff14;
+  --mark-background-color: #80ea6e;
   --selected-background-color: #191e1e;
 
   /* Layout */

src/css/vars.css

@@ -32,7 +32,7 @@
   --body-font-dark-color: #141818;
   --link-font-color: #1565c0;
   --link_hover-font-color: #104d92;
-  --mark-background-color: #39ff14;
+  --mark-background-color: #6db33f;
   --selected-background-color: #191e1e;
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */

src/css/vendor/docsearch.css

@@ -1,19 +1,35 @@
-
 @import "https://cdn.jsdelivr.net/npm/@docsearch/css@3";
 
 .DocSearch-Button {
+  position: relative;
+  display: block;
   margin: 0;
   width: 100%;
   border-radius: 0;
   height: 40px;
   border: 0 none;
   font-weight: normal;
   line-height: 40px;
+  color: var(--body-font-color);
+  background: var(--body-background-color);
+  text-align: left;
+  padding-left: 35px;
+}
+
+.DocSearch-Button:focus {
+  outline: none !important;
+  border: 0 none;
+  box-shadow: none;
+  color: var(--body-font-color);
+  background: var(--body-background-color);
 }
 
-.DocSearch-Button:hover {
+.DocSearch-Button:hover,
+.DocSearch-Button:active {
   border: 0 none;
   box-shadow: none;
+  color: var(--body-font-color);
+  background: var(--body-background-color);
 }
 
 .DocSearch-Button .DocSearch-Search-Icon {
@@ -23,49 +39,17 @@
 }
 
 .DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--docsearch-text-color);
+  color: var(--body-font-color);
 }
 
 .DocSearch-Button-Placeholder {
   font-size: 14px;
 }
 
-/* Variables */
-
-:root {
-  --docsearch-primary-color: var(--link-font-color: #086dc3);
-  --docsearch-searchbox-background: var(--body-background-color);
-}
-
-/* Darkmode */
-
-html.dark-theme,
-html[data-theme='dark'] {
-  --docsearch-text-color: rgb(245, 246, 247);
-  --docsearch-container-background: rgba(9, 10, 17, 0.8);
-  --docsearch-modal-background: rgb(21, 23, 42);
-  --docsearch-modal-shadow:
-    inset 1px 1px 0 0 rgb(44, 46, 64),
-    0 3px 8px 0 rgb(0, 3, 9);
-  --docsearch-searchbox-background: var(--body-background-color);
-  --docsearch-searchbox-focus-background: var(--panel-background-color);
-  --docsearch-hit-color: rgb(190, 195, 201);
-  --docsearch-hit-shadow: none;
-  --docsearch-hit-background: rgb(9, 10, 17);
-  --docsearch-key-gradient:
-    linear-gradient(
-      -26.5deg,
-      rgb(86, 88, 114) 0%,
-      rgb(49, 53, 91) 100%
-    );
-  --docsearch-key-shadow:
-    inset 0 -2px 0 0 rgb(40, 45, 85),
-    inset 0 0 1px 1px rgb(81, 87, 125),
-    0 2px 2px 0 rgba(3, 4, 9, 0.3);
-  --docsearch-footer-background: rgb(30, 33, 54);
-  --docsearch-footer-shadow:
-    inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
-    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
-  --docsearch-logo-color: rgb(255, 255, 255);
-  --docsearch-muted-color: rgb(127, 132, 151);
+.DocSearch-Button svg {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  width: 20px;
+  fill: var(--body-font-color);
 }