feat(template): search docs use algolia #OSP-5

docgeni · Sep 22, 2021 · d7bcc6e · d7bcc6e
1 parent ffb909f
commit d7bcc6e
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 8 deletions.
diff --git a/.docgenirc.js b/.docgenirc.js
@@ -7,6 +7,13 @@ module.exports = {
     description: '为 Angular 组件开发场景而生的文档工具',
     logoUrl: 'https://cdn.pingcode.com/open-sources/docgeni/logo.png',
     repoUrl: 'https://github.com/docgeni/docgeni',
+    algolia: {
+        appId: 'EQYQQ0VW2G',
+        apiKey: 'd5ade9b542071796c2a4e9bea5e73063',
+        indexName: 'docgeni'
+        // apiKey: '9f7d9d6527ff52ec484e90bb1f256971',
+        // indexName: 'ng_zorro',
+    },
     navs: [
         null,
         {

diff --git a/package.json b/package.json
@@ -65,6 +65,7 @@
     "@types/watchpack": "^1.1.7",
     "chokidar": "^3.3.1",
     "cosmiconfig": "^6.0.0",
+    "docsearch.js": "2.6.3",
     "fancy-log": "^1.3.3",
     "marked": "^3.0.2",
     "rxjs": "~6.5.4",

diff --git a/packages/core/src/interfaces/config.ts b/packages/core/src/interfaces/config.ts
@@ -44,6 +44,14 @@ export interface DocgeniNavItem {
     };
 }
 
+export interface DocgeniAlgoliaConfig {
+    appId?: string;
+
+    apiKey: string;
+
+    indexName: string;
+}
+
 export interface DocgeniConfig {
     /** Title of documentation, e.g: Docgeni **/
     title?: string;
@@ -81,6 +89,8 @@ export interface DocgeniConfig {
     defaultLocale?: string;
     /** footer content **/
     footer?: string;
+    /** algolia config */
+    algolia?: DocgeniAlgoliaConfig;
 }
 
 // For Angular Template
@@ -111,4 +121,6 @@ export interface DocgeniSiteConfig {
     defaultLocale?: string;
     /** footer content **/
     footer?: string;
+    /** algolia config */
+    algolia?: DocgeniAlgoliaConfig;
 }
diff --git a/packages/core/src/plugins/config.ts b/packages/core/src/plugins/config.ts
@@ -20,7 +20,8 @@ export class ConfigPlugin implements Plugin {
                     defaultLocale: docgeni.config.defaultLocale,
                     logoUrl: docgeni.config.logoUrl,
                     repoUrl: docgeni.config.repoUrl,
-                    footer: docgeni.config.footer
+                    footer: docgeni.config.footer,
+                    algolia: docgeni.config.algolia
                 };
                 const outputConfigPath = resolve(docgeni.paths.absSiteContentPath, 'config.ts');
                 const content = toolkit.template.compile('config.hbs', {

diff --git a/packages/core/src/site-template/src/polyfills.ts b/packages/core/src/site-template/src/polyfills.ts
@@ -55,9 +55,14 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+
+(window as any).global = window;
+
+(window as any).process = {
+    env: { DEBUG: undefined }
+};
diff --git a/packages/template/src/interfaces/config.ts b/packages/template/src/interfaces/config.ts
@@ -45,6 +45,14 @@ export interface DocgeniNavItem {
     };
 }
 
+export interface DocgeniAlgoliaConfig {
+    appId?: string;
+
+    apiKey: string;
+
+    indexName: string;
+}
+
 export interface DocgeniConfig {
     /** Title of documentation, e.g: Docgeni **/
     title?: string;
@@ -82,6 +90,8 @@ export interface DocgeniConfig {
     defaultLocale?: string;
     /** footer content **/
     footer?: string;
+    /** algolia config */
+    algolia?: DocgeniAlgoliaConfig;
 }
 
 // For Angular Template
@@ -112,4 +122,6 @@ export interface DocgeniSiteConfig {
     defaultLocale?: string;
     /** footer content **/
     footer?: string;
+    /** algolia config */
+    algolia?: DocgeniAlgoliaConfig;
 }
diff --git a/packages/template/src/shared/navbar/navbar.component.html b/packages/template/src/shared/navbar/navbar.component.html
@@ -19,9 +19,9 @@
 </div>
 <div class="spacer"></div>
 <div class="action-items">
-  <!-- <div class="action-item search-container">
-      <input class="search" placeholder="搜索" />
-    </div> -->
+  <div class="action-item search-container">
+    <input class="search" id="inputSearch" placeholder="搜索" />
+  </div>
   <dg-locales-selector class="action-item" *ngIf="global.config.locales && global.config.locales.length > 1"></dg-locales-selector>
   <a *ngIf="global.config.repoUrl" class="action-item repo-url" href="{{ global.config.repoUrl }}" target="_blank">
     <dg-icon iconName="github"></dg-icon>

diff --git a/packages/template/src/shared/navbar/navbar.component.ts b/packages/template/src/shared/navbar/navbar.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, HostBinding, ElementRef } from '@angular/core';
 import { NavigationService, GlobalContext } from '../../services/public-api';
 import { ChannelItem } from '../../interfaces/public-api';
+import docsearch from 'docsearch.js';
 
 @Component({
     selector: 'dg-navbar',
@@ -18,9 +19,33 @@ export class NavbarComponent implements OnInit {
     ngOnInit(): void {
         this.channels = this.navigationService.getChannels();
         this.elementRef.nativeElement.classList.add(this.global.config.theme);
+        this.initAlgolia();
     }
 
     toggleNavbar() {
         this.showNav = !this.showNav;
     }
+
+    initAlgolia() {
+        if (this.global.config.algolia) {
+            const algolia = this.global.config.algolia.appId
+                ? {
+                      appId: this.global.config.algolia.appId,
+                      apiKey: this.global.config.algolia.apiKey,
+                      indexName: this.global.config.algolia.indexName
+                  }
+                : {
+                      apiKey: this.global.config.algolia.apiKey,
+                      indexName: this.global.config.algolia.indexName
+                  };
+
+            docsearch({
+                ...algolia,
+                inputSelector: '#inputSearch',
+                debug: true
+            });
+        }
+    }
+
+    search() {}
 }
diff --git a/packages/template/src/styles/docsearch.scss b/packages/template/src/styles/docsearch.scss
@@ -0,0 +1,36 @@
+.algolia-autocomplete {
+    .ds-dropdown-menu {
+        border: none;
+        box-shadow: 0 0 24px rgba($dg-black, 0.18);
+
+        [class^='ds-dataset-'] {
+            background: $dg-white;
+            border: none;
+            .algolia-docsearch-suggestion {
+                background: $dg-white;
+            }
+        }
+
+        &::before {
+            display: none;
+        }
+    }
+
+    .algolia-docsearch-suggestion--title {
+        color: $dg-gray-800;
+    }
+
+    .algolia-docsearch-suggestion--highlight {
+        color: $dg-primary;
+    }
+    .page-wrapper-rtl & {
+        direction: rtl !important;
+    }
+
+    .ds-dropdown-menu
+        .ds-suggestion.ds-cursor
+        .algolia-docsearch-suggestion:not(.suggestion-layout-simple)
+        .algolia-docsearch-suggestion--content {
+        background-color: rgba($dg-primary, 0.05);
+    }
+}
diff --git a/packages/template/src/styles/index.scss b/packages/template/src/styles/index.scss
@@ -22,3 +22,5 @@
 @import '../pages/component-viewer/component-viewer.component.scss';
 @import '~prismjs/themes/prism.css';
 // @import '~prismjs/themes/prism-okaidia.css';
+@import '~docsearch.js/dist/cdn/docsearch.min.css';
+@import './docsearch.scss';
diff --git a/packages/template/src/styles/navbar.scss b/packages/template/src/styles/navbar.scss
@@ -74,8 +74,8 @@
                 width: 200px;
                 outline: none;
                 padding: 0.532rem 10px;
-                border: none;
-                border-radius: 4px;
+                border: 1px solid $dg-gray-200;
+                border-radius: 18px;
                 -webkit-appearance: none;
             }
         }