feat: integrate algolia v3

Author: kamilmysliwiec

src/app/homepage/header/header.component.html

@@ -45,9 +45,9 @@
   <ng-content></ng-content>
   <app-social-wrapper></app-social-wrapper>
   <div class="menu-wrapper">
-    <div class="search-wrapper">
+    <div class="search-wrapper" id="search">
       <i class="fa fa-search search-icon"></i>
-      <input id="search" class="search-input" placeholder="Search..." />
+      <input class="search-input" placeholder="Search..." />
     </div>
     <ul>
       <li>

src/app/homepage/header/header.component.scss

@@ -359,14 +359,23 @@ header {
   position: relative;
 }
 
-.search-icon {
+.search-icon,
+:host ::ng-deep .DocSearch-Search-Icon {
   position: absolute;
   margin-top: 7px;
-  color: #a5a5a5;
+  color: #a5a5a5 !important;
   font-size: 14px;
+  width: 14px;
+}
+
+:host ::ng-deep .DocSearch-Search-Icon {
+  @media (max-width: 1150px) {
+    margin-top: 0;
+  }
 }
 
-.search-input {
+.search-input,
+::ng-deep .DocSearch-Button {
   background: transparent;
   border: 0;
   border-bottom: 2px solid #414141;
@@ -377,7 +386,7 @@ header {
   font-size: 14px;
   outline: 0 !important;
   transition: all 90ms ease-in-out;
-  width: 165px;
+  width: 215px;
 
   &:active,
   &:focus {
@@ -386,11 +395,45 @@ header {
   }
 }
 
+::ng-deep .DocSearch-Button:hover,
+::ng-deep .DocSearch-Button:active
+::ng-deep .DocSearch-Button:focus {
+  border-bottom-color: $red-color;
+  width: 240px;
+}
+
 .search-input::placeholder {
   color: #a5a5a5;
   opacity: 1;
 }
 
+::ng-deep .DocSearch-Button {
+  border-radius: 0;
+  color: #a5a5a5;
+  padding: 5px;
+}
+
+::ng-deep .DocSearch-Button-Placeholder {
+  padding-left: 30px;
+  font-size: 14px;
+  margin-top: 7px;
+  display: block !important;
+
+  @media (max-width: 1150px) {
+    margin-top: 0;
+  }
+}
+
+::ng-deep .DocSearch-Button-Keys {
+  display: none;
+}
+
+::ng-deep .DocSearch-Button:active, 
+::ng-deep .DocSearch-Button:focus, 
+::ng-deep.DocSearch-Button:hover {
+  color: #a5a5a5;
+}
+
 .close-icon {
   position: absolute;
   right: 0;

src/app/homepage/homepage.component.ts

@@ -157,14 +157,14 @@ export class HomepageComponent implements OnInit, OnDestroy, AfterViewInit {
   createDocSearchScriptTag(): HTMLScriptElement {
     const scriptTag = document.createElement('script');
     scriptTag.type = 'text/javascript';
-    scriptTag.src =
-      'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js';
+    scriptTag.src = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3';
     scriptTag.async = true;
     scriptTag.onload = () => {
       (window as any).docsearch({
         apiKey: environment.algoliaApiKey,
         indexName: 'nestjs',
-        inputSelector: '#search',
+        container: '#search',
+        appId: 'SDCBYAN96J',
         debug: false,
       });
     };

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  algoliaApiKey: '9ea53de1a6911255834352bbbe4d3417'
+  algoliaApiKey: '6d1869890dab96592b191e63a8deb5b5',
 };

src/environments/environment.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: false,
-  algoliaApiKey: '9ea53de1a6911255834352bbbe4d3417'
+  algoliaApiKey: '6d1869890dab96592b191e63a8deb5b5'
 };

src/index.html

@@ -72,10 +72,7 @@
     ></script>
     <link href="https://cdn.carbonads.com" rel="preconnect" crossorigin>
     <link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
-    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 
     <script>
       (function(i, s, o, g, r, a, m) {

src/styles.scss

@@ -5,7 +5,12 @@
 @import './scss/utils.scss';
 
 :root {
-  // scroll-behavior: smooth;
+  --docsearch-primary-color: #ed2945;
+  --docsearch-highlight-color: #ed2945;
+  --docsearch-logo-color: #ed2945;
+  --docsearch-modal-background: #fafafa;
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-searchbox-shadow: none;
 }
 
 body {
@@ -708,3 +713,13 @@ perfect-scrollbar.ps-show-active.ps-show-limits
     }
   }
 }
+
+.DocSearch-Modal {
+  margin-top: 120px;
+  border-radius: 3px;
+}
+
+.DocSearch-Container {
+  z-index: 20000;
+  background: rgba(0, 0, 0, 0.6);
+}