Add DocsSearch to mlem.ai

src/@dvcorg/gatsby-theme-iterative/components/Documentation/Layout/SearchForm/index.tsx

@@ -0,0 +1,67 @@
+import React, { useEffect, useState } from 'react'
+import Promise from 'promise-polyfill'
+import { loadResource } from '@dvcorg/gatsby-theme-iterative/src/utils/front/resources'
+
+import * as styles from '@dvcorg/gatsby-theme-iterative/src/components/Documentation/Layout/SearchForm/styles.module.css'
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface Window {
+    docsearch?: (opts: Record<string, unknown>) => void
+  }
+}
+
+const SearchForm: React.FC = props => {
+  const [searchAvailable, setSearchAvailable] = useState<boolean>(false)
+  useEffect(() => {
+    if (window) {
+      if (!window.docsearch) {
+        Promise.all([
+          loadResource(
+            'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.css'
+          ),
+          loadResource(
+            'https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn/docsearch.min.js'
+          )
+        ]).then(() => {
+          if (window.docsearch) {
+            window.docsearch({
+              appId: 'MY83GIY4K1',
+              apiKey: '3167487c02cc2d86a6ef55e1aaf1839a',
+              indexName: 'mlemai',
+              inputSelector: '#doc-search',
+              debug: false // Set to `true` if you want to inspect the dropdown
+            })
+            setSearchAvailable(true)
+          }
+        })
+      } else {
+        window.docsearch({
+          appId: 'MY83GIY4K1',
+          apiKey: '3167487c02cc2d86a6ef55e1aaf1839a',
+          indexName: 'mlemai',
+          inputSelector: '#doc-search',
+          debug: false // Set to `true` if you want to inspect the dropdown
+        })
+        setSearchAvailable(true)
+      }
+    }
+  }, [])
+
+  return (
+    <div className={styles.searchArea}>
+      <div className={styles.container}>
+        <input
+          className={styles.input}
+          type="text"
+          id="doc-search"
+          placeholder="Search docs"
+          disabled={!searchAvailable}
+          {...props}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default SearchForm