upgrade docsearch v3

kotlin-orm · Oct 1, 2024 · bc56ec6 · bc56ec6
1 parent 9d725c7
commit bc56ec6
Show file tree

Hide file tree

Showing 20 changed files with 487 additions and 10,842 deletions.
diff --git a/themes/doc/layout/layout.ejs b/themes/doc/layout/layout.ejs
@@ -22,7 +22,7 @@
     <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,600,700" rel="stylesheet">
     <link href="<%- url_for('vendors/font-awesome@4.7.0/css/font-awesome.min.css') %>" rel="stylesheet">
-    <link href="<%- url_for('vendors/docsearch@2.6.3/docsearch.min.css') %>" rel="stylesheet"/>
+    <link href="<%- url_for('vendors/docsearch-css@3.6.2/style.css') %>" rel="stylesheet"/>
     <link href="<%- url_for('style/doc.css') %>" rel="stylesheet">
 
     <!-- favicon -->
@@ -76,22 +76,8 @@
     <script src="<%- url_for('vendors/jquery@3.2.1/jquery.min.js') %>"></script>
     <script src="<%- url_for('script/doc.js') %>"></script>
 
-    <!-- algolia docsearch -->
-    <script type="text/javascript" src="<%- url_for('vendors/docsearch@2.6.3/docsearch.min.js') %>"></script>
-    <script type="text/javascript">
-      docsearch({
-        appId: "0DGANM0MZ3",
-        apiKey: "071ea85fb6b0933d3f3d3925aa434e23",
-        indexName: "ktorm",
-        inputSelector: "#doc-search-input",
-        algoliaOptions: { facetFilters: ["lang:<%- lang %>", "tags:doc"] },
-        autocompleteOptions: { hint: false, appendTo: "body" },
-        debug: false
-      });
-    </script>
-
+    <!-- fix code highlight -->
     <script>
-      // fix code highlight
       (function() {
         $(".kotlin .code .keyword").each(function() {
           var node = $(this);

diff --git a/themes/doc/lib/browser/navigation/components.jsx b/themes/doc/lib/browser/navigation/components.jsx
@@ -1,4 +1,5 @@
 const React = require('react');
+const { DocSearch  } = require('@docsearch/react');
 
 function Navbar(props) {
   return (
@@ -79,16 +80,14 @@ class Sidebar extends React.Component {
 
         <div className="doc-sidebar-content">
           <div className="doc-sidebar__search-form">
-            <div className="dc-search-form doc-search-form">
-              <input type="search"
-                     id="doc-search-input"
-                     className="dc-input dc-search-form__input doc-search-form__input"
-                     placeholder={page.lang === 'zh-cn' ? '搜索文档' : 'Search documents'}
-                     autoFocus={true} />
-              <button className="dc-btn dc-search-form__btn doc-search-form__btn" aria-label="Search">
-                <i className="dc-icon dc-icon--search"/>
-              </button>
-            </div>
+            <DocSearch 
+              appId="0DGANM0MZ3"
+              apiKey="071ea85fb6b0933d3f3d3925aa434e23"
+              indexName="ktorm"
+              searchParameters={{ facetFilters: ["lang:" + page.lang, "tags:doc"] }}
+              placeholder={page.lang === 'zh-cn' ? '搜索文档' : 'Search documents'}
+              translations={{ button: { buttonText: page.lang === 'zh-cn' ? '搜索文档' : 'Search documents' } }}
+            />
           </div>
           <ul className="doc-sidebar-list">
             { renderItems() }
@@ -109,7 +108,7 @@ class SidebarItem extends React.Component  {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const {item, page} = this.props;
     const hasChildren = Array.isArray(item.children) && item.children.length > 0;
     const childrenListIsVisible = (item.children || []).find((child) => {
@@ -122,14 +121,14 @@ class SidebarItem extends React.Component  {
     });
   }
 
-  toggleChildrenVisibility () {
+  toggleChildrenVisibility() {
     if (!this.state.hasChildren) { return; }
     this.setState({
       childrenListIsVisible: !this.state.childrenListIsVisible
     });
   }
 
-  render () {
+  render() {
     const {item, page, url_for, tocItems, config, visibleHeaderId, className} = this.props;
     const isLabel = item.type === 'label';
     const isCurrentAncestor = item.isCurrentAncestor;
@@ -205,8 +204,7 @@ class SidebarItem extends React.Component  {
   }
 }
 
-function SidebarChildrenList ({item, page, config, tocItems, visibleHeaderId, url_for, hidden}) {
-
+function SidebarChildrenList({item, page, config, tocItems, visibleHeaderId, url_for, hidden}) {
   return (<ul className={classNames({
     'doc-sidebar-list__children-list': true,
     'doc-sidebar-list__children-list--hidden': hidden
@@ -229,34 +227,28 @@ function SidebarChildrenList ({item, page, config, tocItems, visibleHeaderId, ur
   </ul>);
 }
 
-function SidebarTocItem ({item, visibleHeaderId}) {
-  const handleOnClick = () => {
-    $('#doc-search-results').hide();
-    $('#page-content').show();
-  };
-
+function SidebarTocItem({item, visibleHeaderId}) {
   return (
     <li className={`doc-sidebar-list__toc-item ${item.id === visibleHeaderId ? 'doc-sidebar-list__toc-item--current' : '' }`}>
-      <a href={ '#' + item.id } data-scroll onClick={handleOnClick}>
+      <a href={ '#' + item.id } data-scroll>
         <span>{ item.text }</span>
       </a>
     </li>);
 }
 
-
-function SidebarToggle ({className, onClick}) {
+function SidebarToggle({className, onClick}) {
   return (
     <i className={'dc-icon dc-icon--menu dc-icon--interactive doc-sidebar-toggle ' + (className || '')} onClick={onClick}/>
   );
 }
 
-function SidebarClose ({className, onClick}) {
+function SidebarClose({className, onClick}) {
   return (
     <i className={'dc-icon dc-icon--close dc-icon--interactive doc-sidebar-close ' + (className || '')} onClick={onClick}/>
   );
 }
 
-function classNames (map = {}) {
+function classNames(map = {}) {
   return Object.keys(map).reduce((acc, key) => {
     if (typeof key !== 'string' || key === 'undefined') { return acc; }
     if (map[key]) {

diff --git a/themes/doc/lib/browser/navigation/containers.jsx b/themes/doc/lib/browser/navigation/containers.jsx
@@ -8,7 +8,7 @@ const SIDEBAR_IS_VISIBLE_CLASS = 'doc-sidebar--is-visible';
 const NAVIGATION_IS_COLLAPSED_CLASS = 'doc-navigation--is-collapsed';
 
 class Navigation extends React.Component {
-  constructor (props) {
+  constructor(props) {
     super(props);
 
     this.url_for = this.props.url_for;
@@ -20,7 +20,7 @@ class Navigation extends React.Component {
     };
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const SmoothScroll = require('smooth-scroll');
     const $headers = $('h2');
     const tocItems = this.getTocItems($headers);
@@ -29,11 +29,6 @@ class Navigation extends React.Component {
     this.$content = $('.doc-content');
     this.items = this.getItems();
 
-    // this selector is wrapped in a function
-    // since the selected element can be removed and recreated depending on the state
-    // we have to access the DOM everytime, we can't keep a reference
-    this.$searchFormInput = () => $('.dc-search-form__input');
-
     this.addAnchorToHeaders($headers);
     this.listenContentClick();
     this.listenVisibleHeaderChanges($headers);
@@ -59,12 +54,12 @@ class Navigation extends React.Component {
     }
   }
 
-  getItems () {
+  getItems() {
     const {page} = this.props;
     const navigation = this.getNavigationConfig();
     const items = navigation.main || [];
 
-    (function recurse (items, parent) {
+    (function recurse(items, parent) {
       items.forEach((item) => {
         // add parent methods
         item.parent = () => { return parent; };
@@ -99,7 +94,7 @@ class Navigation extends React.Component {
     return items;
   }
 
-  getTocItems ($headers) {
+  getTocItems($headers) {
     return $headers.map(function (i, h) {
       return {
         id: h.id,
@@ -109,7 +104,7 @@ class Navigation extends React.Component {
     });
   }
 
-  addAnchorToHeaders ($headers) {
+  addAnchorToHeaders($headers) {
     $headers.each(function makeHeaderLinkable (i, h) {
       const span = document.createElement('span');
       h.insertBefore(span, h.firstChild);
@@ -128,7 +123,7 @@ class Navigation extends React.Component {
 
   // Listen to "DOMContentLoaded|scroll|resize" events and determines
   // which header is currently "visible"
-  listenVisibleHeaderChanges ($headers) {
+  listenVisibleHeaderChanges($headers) {
     const offsetThreshold =  120;
     let prev, next;
 
@@ -172,46 +167,41 @@ class Navigation extends React.Component {
     return listener;
   }
 
-  listenContentClick () {
+  listenContentClick() {
     this.$content.on('click', this.onContentClick.bind(this));
   }
 
-  onContentClick () {
+  onContentClick() {
     if (this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS)) {
       this.toggleSidebar();
     }
   }
 
-  collapseSidebar () {
+  collapseSidebar() {
     this.$body.addClass(NAVIGATION_IS_COLLAPSED_CLASS);
 
     if (window.localStorage) {
       window.localStorage.setItem('navigation_collapsed', 'true');
     }
   }
 
-  uncollapseSidebar () {
+  uncollapseSidebar() {
     this.$body.removeClass(NAVIGATION_IS_COLLAPSED_CLASS);
-    this.$searchFormInput()[0].focus();
 
     if (window.localStorage) {
       window.localStorage.setItem('navigation_collapsed', 'false');
     }
   }
 
-  toggleSidebar () {
+  toggleSidebar() {
     this.$body.toggleClass(SIDEBAR_IS_VISIBLE_CLASS);
-
-    if (this.$body.hasClass(SIDEBAR_IS_VISIBLE_CLASS)) {
-      this.$searchFormInput()[0].focus();
-    }
   }
 
-  hideSidebar () {
+  hideSidebar() {
     this.$body.removeClass(SIDEBAR_IS_VISIBLE_CLASS);
   }
 
-  render () {
+  render() {
     return (
       <div className="doc-navigation">
         <Navbar>