etherlinkcom · timothymcmackin · Jun 6, 2025 · Jun 10, 2025 · Jun 10, 2025 · Jun 23, 2025
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -7,6 +7,9 @@ const { themes } = require('prism-react-renderer');
 
 const BIEL_PROJECT = 'w30c27l8fg';
 const BIEL_WARNING = 'AI-generated answers may contain errors. Verify the information before use. For more information, see <a href="https://docs.tezos.com/overview/chatbot">Using the chatbot</a>.';
+const BIEL_SEARCH_HEADER_TITLE = 'Search or use AI to learn about Tezos';
+const BIEL_SEARCH_BOX_TEXT = 'Search all docs/Ask AI';
+const ALGOLIA_SEARCH_BOX_TEXT = 'Search docs.etherlink.com';
 
 // script-src causes development builds to fail
 // But unsafe-eval should NOT be in production builds
@@ -50,8 +53,16 @@ module.exports = async function createConfigAsync() {
     future: {
       v4: true,
     },
+    scripts: [
+      '/scripts/cssForBielSearch.js',
+    ],
 
     customFields: {
+      BIEL_PROJECT,
+      BIEL_WARNING,
+      BIEL_SEARCH_HEADER_TITLE,
+      BIEL_SEARCH_BOX_TEXT,
+      ALGOLIA_SEARCH_BOX_TEXT,
       THIRDWEB_CLIENT_ID: process.env.THIRDWEB_CLIENT_ID,
     },
 

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -71,15 +71,22 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 
+  /* See also src/theme/SearchBar/styles.module.css and static/scripts/cssForBielSearch.js */
   --biel-primary-color: var(--ifm-color-primary-darkest);
   --biel-search-ask-ai-color: var(--ifm-font-color-base);
+  --biel-search-button-icon-size: 16px; /* This doesn't seem to work */
+  --biel-search-button-border-radius: 24px;
+  --biel-search-button-border-color: none;
+  --biel-search-button-bg-color: #151515;
+  --biel-search-button-icon-size: 16px;
+  --biel-search-button-padding: 12px 20px 10px 20px;
+  --biel-search-button-text-font-size: 14px;
+  --biel-search-button-text-font-weight: 500;
+  --biel-search-button-z-index: calc(var(--ifm-z-index-fixed) + 1);
+  --biel-search-content-box-shadow: 0px 0px 6px 0px rgba(51, 232, 142, 0.40)!important;
 
 }
 
-biel-search-button a.biel-search-button-content {
-  box-shadow: 0px 0px 6px 0px rgba(51, 232, 142, 0.40); /* no worky */
-}
-
 h1 {
   margin-bottom: 8px !important;
 }
@@ -163,18 +170,7 @@ nav.navbar {
 }
 
 .DocSearch-Button-Keys {
-  display: flex;
-  width: 100%;
-  justify-content: end;
-}
-.DocSearch-Button-Key {
-  color:white !important;
-  font-size: 14px;
-  width: 0px !important;
-  padding: 0px 4px !important;
-  background: #151515 !important;
-  border: none !important;
-  box-shadow: none !important;
+  display: none !important;
 }
 .DocSearch.DocSearch-Container {
   background: rgba(16, 16, 16, 0.10);

diff --git a/src/theme/SearchBar/index.tsx b/src/theme/SearchBar/index.tsx
@@ -26,6 +26,8 @@ import type {
   StoredDocSearchHit,
 } from "@docsearch/react/dist/esm/types";
 import type { SearchClient } from "algoliasearch/lite";
+import clsx from 'clsx';
+import styles from './styles.module.css';
 
 type DocSearchProps = Omit<
   DocSearchModalProps,
@@ -210,6 +212,16 @@ function DocSearch({
     searchButtonRef,
   });
 
+  const {siteConfig} = useDocusaurusContext();
+
+  const customTranslations = {
+    button: {
+      buttonText: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT,
+      buttonAriaLabel: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT,
+    },
+    placeholder: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT,
+  };
+
   return (
     <>
       <Head>
@@ -229,7 +241,7 @@ function DocSearch({
         onMouseOver={importDocSearchModalIfNeeded}
         onClick={onOpen}
         ref={searchButtonRef}
-        translations={translations.button}
+        translations={customTranslations.button}
       />
 
       {isOpen &&
@@ -249,7 +261,7 @@ function DocSearch({
             })}
             {...props}
             searchParameters={searchParameters}
-            placeholder={translations.placeholder}
+            placeholder={customTranslations.placeholder}
             translations={translations.modal}
           />,
           searchContainer.current
@@ -260,5 +272,16 @@ function DocSearch({
 
 export default function SearchBar(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
-  return <DocSearch {...(siteConfig.themeConfig.algolia as DocSearchProps)} />;
+  return <div className={clsx(styles.container)}>
+    <biel-search-button
+      project={siteConfig.customFields.BIEL_PROJECT}
+      hide-ctrl-k="true"
+      button-style="rounded"
+      header-title={siteConfig.customFields.BIEL_SEARCH_HEADER_TITLE}
+      search-placeholder={siteConfig.customFields.BIEL_SEARCH_BOX_TEXT}
+      footer-text={siteConfig.customFields.BIEL_WARNING}>
+        {siteConfig.customFields.BIEL_SEARCH_BOX_TEXT}
+    </biel-search-button>
+    <DocSearch {...(siteConfig.themeConfig.algolia as DocSearchProps)} />
+  </div>;
 }
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
@@ -11,7 +11,6 @@
   border-radius: 24px;
   background-color: #151515;
   box-shadow: 0px 0px 6px 0px rgba(51, 232, 142, 0.40);
-  width: 100%;
   max-width: 558px;
 }
 @media screen and (min-width: 997px) {

diff --git a/src/theme/SearchBar/styles.module.css b/src/theme/SearchBar/styles.module.css
@@ -0,0 +1,4 @@
+.container {
+  display: inline-flex;
+  gap: 10px;
+}
diff --git a/static/scripts/cssForBielSearch.js b/static/scripts/cssForBielSearch.js
@@ -0,0 +1,40 @@
+// Tweak styles for Biel search button
+// Have to access the CSS in this way because it's in the shadow DOM
+
+// The transition should be transition: all var(--ifm-transition-fast) var(--ifm-transition-timing-default); but I can't seem to access the variables here
+document.addEventListener('DOMContentLoaded', async function () {
+  const bielButtonLink = await getBielButtonLink('biel-search-button', 'a.biel-search-button-content');
+  bielButtonLink.style['box-shadow'] = '0px 0px 6px 0px rgba(51, 232, 142, 0.40)';
+  bielButtonLink.style['transition'] = 'all 200ms cubic-bezier(0.08, 0.52, 0.52, 1)';
+
+  const magnifyingGlassSpan = bielButtonLink.querySelector('span.biel-search-button-content-icon');
+  magnifyingGlassSpan.style['padding-bottom'] = '5px';
+  magnifyingGlassSpan.style['padding-right'] = '3px';
+  const magnifyingGlassSVG = bielButtonLink.querySelector('svg.lucide-search');
+  magnifyingGlassSVG.setAttribute('width', '18px');
+  magnifyingGlassSVG.setAttribute('height', '18px');
+});
+
+const getBielButtonLink = async (parentSelector, childSelector) =>
+  new Promise((resolve) => {
+    const bielFirstTry = document.querySelector(parentSelector);
+    if (bielFirstTry) {
+      const firstTry = bielFirstTry.shadowRoot.querySelector('a.biel-search-button-content');
+      if (firstTry) {
+        resolve(firstTry);
+      }
+    } else {
+      // Wait for it to be initialized
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(parentSelector)) {
+          const bielButton = document.querySelector(parentSelector);
+          if (bielButton && bielButton.shadowRoot && bielButton.shadowRoot.querySelector(childSelector)) {
+            observer.disconnect();
+            resolve(bielButton.shadowRoot.querySelector(childSelector));
+          }
+        }
+      });
+      observer.observe(document.body, { childList: true, subtree: true });
+    }
+  });
+