diff --git a/docusaurus.config.js b/docusaurus.config.js
index 93427c54..5b541f75 100644
--- 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 Using the chatbot.';
+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
index 44b07d17..d10c3782 100644
--- 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
index 9f7680d2..692daaad 100644
--- 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 (
<>
@@ -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 ;
+ return
+
+ {siteConfig.customFields.BIEL_SEARCH_BOX_TEXT}
+
+
+
;
}
diff --git a/src/theme/SearchBar/styles.css b/src/theme/SearchBar/styles.css
index 4dd6ee2f..0652c301 100644
--- 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
new file mode 100644
index 00000000..fe157428
--- /dev/null
+++ 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
new file mode 100644
index 00000000..f433e364
--- /dev/null
+++ 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 });
+ }
+ });
+