docs: add docsearch

Author: mrholek

packages/docs/gatsby-browser.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
 import './src/styles/styles.scss'
 

packages/docs/gatsby-ssr.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import '@docsearch/css'
 import DefaultLayout from './src/templates/DefaultLayout'
 import './src/styles/styles.scss'
 

packages/docs/package.json

@@ -29,6 +29,7 @@
     "@coreui/icons": "^3.0.0",
     "@coreui/icons-react": "^2.1.0",
     "@coreui/react-chartjs": "^2.1.2",
+    "@docsearch/css": "^3.3.3",
     "@mdx-js/mdx": "^2.2.1",
     "@mdx-js/react": "^2.2.1",
     "@types/react-helmet": "^6.1.6",

packages/docs/src/components/Header.tsx

@@ -20,6 +20,7 @@ const Header: FC = () => {
             >
               <CIcon icon={cilMenu} size="lg" />
             </CHeaderToggler>
+            <div className="docs-search" id="docsearch"></div>
             <CHeaderNav className="ms-auto">
               <CNavItem
                 href="https://github.com/coreui/coreui-react/"

packages/docs/src/styles/_search.scss

@@ -0,0 +1,114 @@
+// stylelint-disable selector-class-pattern
+
+.DocSearch-Container {
+  --docsearch-muted-color: #{$text-muted};
+  --docsearch-hit-shadow: none;
+
+  z-index: 2000; // Make sure to be over all components showcased in the documentation
+  cursor: auto; // Needed because of [role="button"] in Algolia search modal. Remove once https://github.com/algolia/docsearch/issues/1370 is tackled.
+
+  @include media-breakpoint-up(lg) {
+    padding-top: 4rem;
+  }
+}
+
+.DocSearch-Button {
+  min-width: 200px;
+  min-height: 38px;
+  font-family: $input-font-family;
+  font-weight: $input-font-weight;
+  line-height: $input-line-height;
+  @include font-size($input-font-size);
+  color: $input-color;
+  background-color: $input-bg;
+  background-clip: padding-box;
+  border: $input-border-width solid $input-border-color;
+
+  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
+  @include border-radius($btn-border-radius);
+
+  @include box-shadow($input-box-shadow);
+  @include transition($input-transition);
+
+  &:focus {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    border-color: $input-focus-border-color;
+    outline: 0;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $form-file-button-hover-bg;
+  }
+
+  .DocSearch-Search-Icon {
+    opacity: .65;
+  }
+}
+
+
+.DocSearch-Button-Keys {
+  min-width: 0;
+  padding: 0 .25rem;
+  background: rgba($black, .125);
+  @include border-radius(.25rem);
+}
+
+.DocSearch-Button-Key {
+  top: 0;
+  width: auto;
+  height: 1.5rem;
+  padding: 0 .125rem;
+  margin-right: 0;
+  font-size: .875rem;
+  background: none;
+  box-shadow: none;
+}
+
+.DocSearch-Commands-Key {
+  padding-left: 1px;
+  font-size: .875rem;
+  background-color: rgba($black, .1);
+  background-image: none;
+  box-shadow: none;
+}
+
+.DocSearch-Form {
+  @include border-radius(var(--cui-border-radius));
+}
+
+.DocSearch-Hits {
+  mark {
+    padding: 0;
+  }
+}
+
+.DocSearch-Hit {
+  padding-bottom: 0;
+  @include border-radius(0);
+
+  a {
+    @include border-radius(0);
+    border: solid var(--cui-border-color);
+    border-width: 0 1px 1px;
+  }
+
+  &:first-child a {
+    @include border-top-radius(var(--cui-border-radius));
+    border-top-width: 1px;
+  }
+  &:last-child a {
+    @include border-bottom-radius(var(--cui-border-radius));
+  }
+}
+
+.DocSearch-Hit-icon {
+  display: flex;
+  align-items: center;
+}

packages/docs/src/styles/styles.scss

@@ -10,6 +10,7 @@
 @import "footer";
 @import "layout";
 @import "prism";
+@import "search";
 @import "sidebar";
 @import "table-api";
 @import "toc";

packages/docs/src/templates/DefaultLayout.tsx

@@ -4,6 +4,8 @@ import { CContainer } from '@coreui/react/src/'
 import DocsLayout from './DocsLayout'
 
 import { AppContext } from '../AppContext'
+import { Script } from 'gatsby'
+import { Helmet } from 'react-helmet'
 
 interface DefaultLayoutProps {
   children: any
@@ -42,6 +44,29 @@ const DefaultLayout: FC<DefaultLayoutProps> = ({ children, data, pageContext, pa
         </div>
         <Footer />
       </div>
+      <Script
+        src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"
+        onLoad={() => {
+          const searchElement = document.getElementById('docsearch')
+
+          // @ts-expect-error global variable
+          if (!window.docsearch || !searchElement) {
+            return
+          }
+
+          // @ts-expect-error global variable
+          window.docsearch({
+            appId: 'JIOZIZPLMM',
+            apiKey: '6e3f7692d2589d042bb40426b75df1b7',
+            indexName: 'coreui-react',
+            container: searchElement,
+            // Set debug to `true` if you want to inspect the dropdown
+            debug: true,
+          })
+        }}
+      />
+
+      <script type="text/javascript"></script>
     </AppContext.Provider>
   )
 }

yarn.lock

@@ -1101,6 +1101,11 @@
   resolved "https://registry.yarnpkg.com/@coreui/icons/-/icons-3.0.0.tgz#e36ef6e10fdc61aaff22e4ab1f6e71775b26f365"
   integrity sha512-t4hJilv5IFBvaHIIQeUoXctV5nJkW21PTIhgeGO80xS25Ii4kkXa2gzryj6v6OEPSDPnY2YWhYm39TBjbXt1Xw==
 
+"@docsearch/css@^3.3.3":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.3.3.tgz#f9346c9e24602218341f51b8ba91eb9109add434"
+  integrity sha512-6SCwI7P8ao+se1TUsdZ7B4XzL+gqeQZnBc+2EONZlcVa0dVrk0NjETxozFKgMv0eEGH8QzP1fkN+A1rH61l4eg==
+
 "@eslint/eslintrc@^0.4.3":
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"