From bddb5b08b180bae7b7ba78b1280507be62a08e3e Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Fri, 6 Jun 2025 10:14:12 -0400 Subject: [PATCH 1/6] Add Biel search and match style to Algolia --- docusaurus.config.js | 11 ++++++++ src/css/custom.css | 28 +++++++++------------ src/theme/SearchBar/index.tsx | 25 +++++++++++++++++-- src/theme/SearchBar/styles.css | 1 - src/theme/SearchBar/styles.module.css | 4 +++ static/scripts/cssForBielSearch.js | 36 +++++++++++++++++++++++++++ 6 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 src/theme/SearchBar/styles.module.css create mode 100644 static/scripts/cssForBielSearch.js 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..4ac2abcc 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,15 @@ function DocSearch({ searchButtonRef, }); + const {siteConfig} = useDocusaurusContext(); + + const customTranslations = { + button: { + buttonText: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT, + buttonAriaLabel: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT, + }, + }; + return ( <> @@ -229,7 +240,7 @@ function DocSearch({ onMouseOver={importDocSearchModalIfNeeded} onClick={onOpen} ref={searchButtonRef} - translations={translations.button} + translations={customTranslations.button} /> {isOpen && @@ -260,5 +271,15 @@ 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..d98848ad --- /dev/null +++ b/static/scripts/cssForBielSearch.js @@ -0,0 +1,36 @@ +// Tweak styles for Biel search button +// Have to access the CSS in this way because it's in the shadow DOM +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)'; + 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 }); + } + }); + From e8c38be05f8a956c8c29642dea958822ab7507f8 Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Tue, 10 Jun 2025 11:14:46 -0400 Subject: [PATCH 2/6] Set placeholder for Algolia search box to same as button --- src/theme/SearchBar/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/theme/SearchBar/index.tsx b/src/theme/SearchBar/index.tsx index 4ac2abcc..062d4e21 100644 --- a/src/theme/SearchBar/index.tsx +++ b/src/theme/SearchBar/index.tsx @@ -219,6 +219,7 @@ function DocSearch({ buttonText: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT, buttonAriaLabel: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT, }, + placeholder: siteConfig.customFields.ALGOLIA_SEARCH_BOX_TEXT, }; return ( @@ -260,7 +261,7 @@ function DocSearch({ })} {...props} searchParameters={searchParameters} - placeholder={translations.placeholder} + placeholder={customTranslations.placeholder} translations={translations.modal} />, searchContainer.current From fffde5cd59897d517a483a9ade25381285336d7b Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Tue, 10 Jun 2025 11:15:29 -0400 Subject: [PATCH 3/6] Set placeholder for Biel to match button text --- src/theme/SearchBar/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/SearchBar/index.tsx b/src/theme/SearchBar/index.tsx index 062d4e21..692daaad 100644 --- a/src/theme/SearchBar/index.tsx +++ b/src/theme/SearchBar/index.tsx @@ -278,6 +278,7 @@ export default function SearchBar(): JSX.Element { 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} From ef93049cfcc3f94d270384692daa2ba144cda0f1 Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Mon, 23 Jun 2025 16:12:11 -0400 Subject: [PATCH 4/6] Handle hover --- static/scripts/cssForBielSearch.js | 33 ++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/static/scripts/cssForBielSearch.js b/static/scripts/cssForBielSearch.js index d98848ad..ce5dc4f1 100644 --- a/static/scripts/cssForBielSearch.js +++ b/static/scripts/cssForBielSearch.js @@ -1,8 +1,26 @@ // 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 +const bielButtonStyleTextHover = ` + a.hoverLink:hover { + background: #1B1B1B; + box-shadow: 0px 0px 6px 0px #33E88E !important; + } +`; + document.addEventListener('DOMContentLoaded', async function () { + console.log("ok") 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 bielButtonStyle = document.createElement('style'); + bielButtonStyle.textContent = bielButtonStyleTextHover; + const buttonShadowRoot = await getShadowRoot('biel-search-button'); + buttonShadowRoot.appendChild(bielButtonStyle); + bielButtonLink.classList.add('hoverLink'); + const magnifyingGlassSpan = bielButtonLink.querySelector('span.biel-search-button-content-icon'); magnifyingGlassSpan.style['padding-bottom'] = '5px'; magnifyingGlassSpan.style['padding-right'] = '3px'; @@ -11,6 +29,21 @@ document.addEventListener('DOMContentLoaded', async function () { magnifyingGlassSVG.setAttribute('height', '18px'); }); +const getShadowRoot = async (parentSelector) => + new Promise((resolve) => { + const observer = new MutationObserver(() => { + if (document.querySelector(parentSelector)) { + const bielButton = document.querySelector(parentSelector); + if (bielButton && bielButton.shadowRoot) { + observer.disconnect(); + resolve(bielButton.shadowRoot); + } + } + }); + observer.observe(document.body, { childList: true, subtree: true }); + }); +; + const getBielButtonLink = async (parentSelector, childSelector) => new Promise((resolve) => { const bielFirstTry = document.querySelector(parentSelector); From 60e4b3fbb5f6fc268a0d0731359da1db9f750893 Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Mon, 23 Jun 2025 16:27:55 -0400 Subject: [PATCH 5/6] test --- static/scripts/cssForBielSearch.js | 1 + 1 file changed, 1 insertion(+) diff --git a/static/scripts/cssForBielSearch.js b/static/scripts/cssForBielSearch.js index ce5dc4f1..bceb494d 100644 --- a/static/scripts/cssForBielSearch.js +++ b/static/scripts/cssForBielSearch.js @@ -27,6 +27,7 @@ document.addEventListener('DOMContentLoaded', async function () { const magnifyingGlassSVG = bielButtonLink.querySelector('svg.lucide-search'); magnifyingGlassSVG.setAttribute('width', '18px'); magnifyingGlassSVG.setAttribute('height', '18px'); + console.log("done"); }); const getShadowRoot = async (parentSelector) => From 88976e08710b4fd5898138b9be182f4328db0e6f Mon Sep 17 00:00:00 2001 From: Tim McMackin Date: Tue, 24 Jun 2025 10:41:20 -0400 Subject: [PATCH 6/6] Revert hover changed because they don't work --- static/scripts/cssForBielSearch.js | 30 ------------------------------ 1 file changed, 30 deletions(-) diff --git a/static/scripts/cssForBielSearch.js b/static/scripts/cssForBielSearch.js index bceb494d..f433e364 100644 --- a/static/scripts/cssForBielSearch.js +++ b/static/scripts/cssForBielSearch.js @@ -2,49 +2,19 @@ // 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 -const bielButtonStyleTextHover = ` - a.hoverLink:hover { - background: #1B1B1B; - box-shadow: 0px 0px 6px 0px #33E88E !important; - } -`; - document.addEventListener('DOMContentLoaded', async function () { - console.log("ok") 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 bielButtonStyle = document.createElement('style'); - bielButtonStyle.textContent = bielButtonStyleTextHover; - const buttonShadowRoot = await getShadowRoot('biel-search-button'); - buttonShadowRoot.appendChild(bielButtonStyle); - bielButtonLink.classList.add('hoverLink'); - 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'); - console.log("done"); }); -const getShadowRoot = async (parentSelector) => - new Promise((resolve) => { - const observer = new MutationObserver(() => { - if (document.querySelector(parentSelector)) { - const bielButton = document.querySelector(parentSelector); - if (bielButton && bielButton.shadowRoot) { - observer.disconnect(); - resolve(bielButton.shadowRoot); - } - } - }); - observer.observe(document.body, { childList: true, subtree: true }); - }); -; - const getBielButtonLink = async (parentSelector, childSelector) => new Promise((resolve) => { const bielFirstTry = document.querySelector(parentSelector);