Added Relevance AI widget to documentation (#24289)

Co-authored-by: Topher Lubaway <asimplechris@gmail.com>
airbytehq · Mar 22, 2023 · 1bfb83a · 1bfb83a
1 parent 609b453
commit 1bfb83a
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 3 deletions.
diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js
@@ -20,9 +20,6 @@ const config = {
     projectName: 'airbyte', // Usually your repo name.
 
     plugins:    [
-                  [
-                    require.resolve('@cmfcmf/docusaurus-search-local'), {indexBlog: false},
-                  ],
                   [
                     '@docusaurus/plugin-client-redirects',
                     {
@@ -107,6 +104,14 @@ const config = {
         ],
     ],
 
+    scripts: [
+        {
+            src: 'https://cdn.jsdelivr.net/gh/RelevanceAI/ask-relevance-widget@latest/dist/bundle.min.js',
+            defer: true,
+            config: 'eyJ1cmwiOiJodHRwczovL2FwaS1iY2JlNWEuc3RhY2sudHJ5cmVsZXZhbmNlLmNvbS9sYXRlc3QvZGF0YXNldHMvYWlyYnl0ZS1naXRodWIvc2ltcGxlX3NlYXJjaCIsImZpZWxkIjoiZmlsZV9jb250ZW50X3BsYWluIiwidmVjdG9yX2ZpZWxkIjoiZmlsZV9jb250ZW50X3BsYWluX29wZW5haV90ZXh0LWVtYmVkZGluZy1hZGEtMDAyX3ZlY3Rvcl8iLCJtb2RlbCI6InRleHQtZW1iZWRkaW5nLWFkYS0wMDIiLCJhdXRoX2hlYWRlciI6ImUyZmE5NjE4M2M5Mi00N2Y2LTk1YjMtZjRiOWUwZmFjMTMyOk5HVTFORGRtTkRBdE1HSTVPQzAwTmpFNUxXRXhZVGN0T0dNMFpUZGlOekE1TXpoaSIsInJlZmVyZW5jZV90aXRsZV9maWVsZCI6InRpdGxlIiwicmVmZXJlbmNlX3VybF9maWVsZCI6InVybCIsInNob3dEb2N1bWVudHMiOnRydWUsImhlYWRsZXNzIjp0cnVlfQ'
+        }
+    ],
+
     themeConfig:
         /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
         ({

diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css
@@ -93,3 +93,57 @@ img {
 }
 
 
+/* Relevance AI button styles */
+.relevance_button {
+  border-radius: 0.5rem;
+  padding: 0.55rem 1.1rem;
+  background: #ffffff;
+  color: var(--ifm-color-primary-darkest);
+  font-weight: 700;
+  font-family: Inter, sans-serif;
+  font-size: 0.9rem;
+  transition: color 0.2s ease-in-out, background 0.2s ease-in-out;
+  cursor: pointer;
+
+  /* Border animation effect */
+  border-color: transparent;
+  outline: none;
+  box-shadow: none;
+  --relevance-button-bg: white;
+  background-image: linear-gradient(var(--relevance-button-bg), var(--relevance-button-bg)),
+      linear-gradient(
+          315deg,
+          var(--ifm-color-primary-lightest),
+          rgb(132, 255, 232),
+          rgb(227, 105, 203),
+          rgb(98, 33, 210),
+          rgb(255, 204, 160)
+      );
+  background-size: 200% auto;
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  animation: bg-hue 4s linear infinite;
+}
+
+html[data-theme='dark'] .relevance_button {
+  --relevance-button-bg: var(--ifm-background-surface-color);
+  color: white;
+}
+
+.relevance_button:hover {
+  color: var(--ifm-color-primary);
+}
+
+/* @keyframes for the gradient animation */
+@keyframes bg-hue {
+  0% {
+      background-position: 100% 0;
+  }
+  50% {
+      background-position: 0 0;
+  }
+  100% {
+      background-position: 100% 0;
+  }
+}
+
diff --git a/docusaurus/src/theme/SearchBar.js b/docusaurus/src/theme/SearchBar.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+class Bar extends React.Component {
+  render() {
+    return (
+      <div>
+        <button className='relevance_button' onClick={() => {
+          if (window.relevance) {
+            window.relevance.show();
+          }
+        }}>Search or ask</button>
+      </div>
+    );
+  }
+}
+
+export default function SearchBarWrapper(props) {
+  return (
+    <>
+      <Bar {...props} />
+    </>
+  );
+}