// Shared helper: run callback when selector appears in DOM function waitForElement(selector, callback) { var el = document.querySelector(selector); if (el) { callback(el); return; } var observer = new MutationObserver(function(_, obs) { var el = document.querySelector(selector); if (el) { obs.disconnect(); callback(el); } }); observer.observe(document.body, { childList: true, subtree: true }); } // Add links to the sidebar without duplication $(window).on('pageLoad', function(e, state) { function createLink(url, text) { var link = document.createElement('a'); link.href = url; link.innerHTML = text; link.target = '_blank'; link.style.color = 'grey'; link.style.textDecoration = 'none'; link.style.fontSize = '16px'; link.style.marginTop = '4px'; link.style.marginBottom = '4px'; link.style.marginLeft = '10px'; link.style.fontWeight = 'bold'; return link; } function createHr() { var hr = document.createElement('hr'); hr.style.marginTop = '10px'; hr.style.border = '1px solid grey'; hr.style.width = '90%'; hr.style.marginLeft = '-10px'; return hr; } function createBottomMargin() { var marginDiv = document.createElement('div'); marginDiv.style.marginBottom = '20px'; return marginDiv; } var links = [ { text: 'Get Support ⧉', url: 'https://community.lucid.co/lucid-for-developers-6' }, { text: 'Request Feature ⧉', url: 'https://community.lucid.co/ideas' }, { text: 'Terms of Service ⧉', url: 'https://lucid.co/developer-terms' } ]; waitForElement('.rm-Sidebar', function(nav) { var hrAdded = false; links.forEach(function(linkData) { if (!nav.innerHTML.includes(linkData.url)) { if (!hrAdded) { nav.appendChild(createHr()); hrAdded = true; } var newLink = createLink(linkData.url, linkData.text); var listItem = document.createElement('li'); listItem.appendChild(newLink); if (nav.tagName.toLowerCase() === 'ul' || nav.tagName.toLowerCase() === 'ol') { nav.appendChild(listItem); } else { nav.appendChild(newLink); } } }); if (hrAdded) { nav.appendChild(createBottomMargin()); } }); }); // Custom Page Search for Guides $(window).on("pageLoad", function (e, state) { if ( window.location.pathname.includes("/docs/") && !window.location.pathname.includes("/docs/refs/") ) { waitForElement('#hub-sidebar', function(navContainer) { let filterInput = document.getElementById("filterInput"); let clearButton = document.getElementById("clearFilterButton"); if (!filterInput) { filterInput = document.createElement("input"); filterInput.type = "text"; filterInput.id = "filterInput"; filterInput.placeholder = "Filter by title…"; filterInput.style.marginTop = "5px"; filterInput.style.width = "100%"; filterInput.style.padding = "6px 8px"; filterInput.style.marginLeft = "8px"; filterInput.style.fontSize = "13px"; filterInput.style.border = "1px solid #ccc"; filterInput.style.borderRadius = "4px"; filterInput.style.outline = "0px"; clearButton = document.createElement("button"); clearButton.id = "clearFilterButton"; clearButton.innerHTML = ''; clearButton.style.position = "absolute"; clearButton.style.right = "0px"; clearButton.style.top = "60%"; clearButton.style.transform = "translateY(-50%)"; clearButton.style.border = "none"; clearButton.style.background = "transparent"; clearButton.style.cursor = "pointer"; clearButton.style.color = "#1D69F6"; clearButton.style.fontSize = "15px"; clearButton.style.borderRadius = "4px"; clearButton.style.display = "none"; clearButton.onmouseover = function () { this.style.color = "#0000FF"; }; clearButton.onmouseout = function () { this.style.color = "#1D69F6"; }; const inputWrapper = document.createElement("div"); inputWrapper.style.display = "flex"; inputWrapper.style.position = "relative"; inputWrapper.style.width = "100%"; inputWrapper.appendChild(filterInput); inputWrapper.appendChild(clearButton); navContainer.prepend(inputWrapper); const infoMessage = document.createElement("div"); infoMessage.id = "infoMessage"; infoMessage.textContent = "*3 or more characters required to filter"; infoMessage.style.color = "#777"; infoMessage.style.marginTop = "4px"; infoMessage.style.marginLeft = "15px"; infoMessage.style.marginBottom = "-10px"; infoMessage.style.fontSize = "11px"; infoMessage.style.fontFamily = "Arial"; navContainer.insertBefore(infoMessage, inputWrapper.nextSibling); infoMessage.style.display = "none"; clearButton.addEventListener("click", function () { filterInput.value = ""; infoMessage.style.display = "none"; updateVisibilityAndHighlight(); const allCategories = document.querySelectorAll(".rm-Sidebar-section"); allCategories.forEach((category) => { const isActive = category.querySelector(".rm-Sidebar-link.active"); if (!isActive) { category.querySelector(".rm-Sidebar-heading").classList.remove("section-expanded"); category.querySelector(".rm-Sidebar-list").classList.remove("section-list-expanded"); } }); }); filterInput.addEventListener("input", function () { if (this.value === "") { clearButton.click(); } infoMessage.style.display = this.value.length < 3 ? "block" : "none"; }); } filterInput.addEventListener("input", function () { if (this.value.length < 3) { clearButton.style.display = "none"; infoMessage.style.display = "block"; this.style.borderColor = "rgb(204, 204, 204)"; this.style.backgroundColor = "transparent"; } else { clearButton.style.display = "block"; infoMessage.style.display = "none"; this.style.borderColor = "rgb(204, 204, 204)"; } }); function overrideDisplayStyle() { const hiddenElements = document.querySelectorAll( ".Sidebar-item23D-2Kd61_k3:not(.subnav-expanded) .subpages" ); hiddenElements.forEach((element) => { element.style.display = ""; }); } function clearHighlights() { document.querySelectorAll(".highlight").forEach((highlight) => { highlight.parentNode.replaceChild( document.createTextNode(highlight.textContent), highlight ); }); } function highlightText(text, term, hasSubpages) { const startIndex = text.toLowerCase().indexOf(term.toLowerCase()); if (startIndex === -1) return text; const endIndex = startIndex + term.length; let highlightedText = text.substring(0, startIndex) + '' + text.substring(startIndex, endIndex) + "" + text.substring(endIndex); if (hasSubpages) { highlightedText = '' + highlightedText; } return highlightedText; } function updateVisibilityAndHighlight() { overrideDisplayStyle(); clearHighlights(); const searchText = filterInput.value.toLowerCase().trim(); let totalHighlights = 0; if (searchText.length < 3) { document .querySelectorAll(".Sidebar-item23D-2Kd61_k3, .Sidebar-listWrapper6Q9_yUrG906C") .forEach((item) => { item.style.display = ""; }); const noResultsMessage = document.getElementById("noResultsMessage"); if (noResultsMessage) { noResultsMessage.style.display = "none"; } return; } const sections = document.querySelectorAll(".Sidebar-listWrapper6Q9_yUrG906C"); let expandedSections = new Set(); sections.forEach((section) => { let sectionHasVisibleLinks = false; const links = section.querySelectorAll(".Sidebar-link-textLuTE1ySm4Kqn"); links.forEach((link) => { const item = link.closest(".Sidebar-item23D-2Kd61_k3"); const text = link.textContent.toLowerCase(); const hasSubpages = item.querySelector(".subpages") !== null; if (text.includes(searchText)) { const highlighted = highlightText(link.textContent, searchText, hasSubpages); link.innerHTML = highlighted; sectionHasVisibleLinks = true; totalHighlights++; if (highlighted.includes("highlight active")) { link.closest("a").style.backgroundColor = "rgba(0, 0, 0, 0)"; } const parentSection = $(section).closest(".rm-Sidebar-section"); if (parentSection.length > 0) { parentSection.find(".rm-Sidebar-heading").addClass("section-expanded"); parentSection .find(".rm-Sidebar-list") .removeClass("section-collapsed") .addClass("section-list-expanded"); expandedSections.add(parentSection); } let parent = item; while ( parent && !parent.classList.contains("Sidebar-listWrapper6Q9_yUrG906C") ) { parent.style.display = ""; if ( parent.classList.contains("Sidebar-item23D-2Kd61_k3") && !parent.classList.contains("subnav-expanded") ) { parent.classList.add("subnav-expanded"); } parent = parent.parentElement.closest(".Sidebar-item23D-2Kd61_k3"); } } else { item.style.display = "none"; } }); if (sectionHasVisibleLinks) { section.style.display = ""; } else { section.style.display = "none"; } }); const noResultsMessage = document.getElementById("noResultsMessage"); if (searchText.length >= 3) { if (totalHighlights === 0) { if (!noResultsMessage) { const messageContainer = document.createElement("div"); messageContainer.id = "noResultsMessage"; messageContainer.textContent = "No results found - please try again"; messageContainer.style.fontWeight = "normal"; messageContainer.style.color = "red"; messageContainer.style.fontSize = "11px"; messageContainer.style.fontFamily = "Arial"; messageContainer.style.marginLeft = "15px"; messageContainer.style.marginTop = "5px"; var inputWrapper = filterInput.parentNode; inputWrapper.parentNode.insertBefore(messageContainer, inputWrapper.nextSibling); } else { noResultsMessage.style.display = ""; } } else { if (noResultsMessage) { noResultsMessage.style.display = "none"; } } } else { if (noResultsMessage) { noResultsMessage.style.display = "none"; } } } filterInput.addEventListener("input", updateVisibilityAndHighlight); updateVisibilityAndHighlight(); }); } }); // Custom Nav Updates $(window).on("pageLoad", function (e, state) { initializeSidebar(); }); function initializeSidebar() { const previousActive = document.querySelector(".rm-Sidebar-link.active"); const observer = new MutationObserver(function (mutations, obs) { const current = document.querySelector(".rm-Sidebar-link.active"); if (current && current !== previousActive) { obs.disconnect(); runSidebarInit(); } }); observer.observe(document.body, { childList: true, subtree: true }); } function runSidebarInit() { // Collapse all sections, clearing any previously expanded state $(".rm-Sidebar-section > .rm-Sidebar-list") .addClass("section-collapsed") .removeClass("section-list-expanded"); $(".rm-Sidebar-heading").removeClass("section-expanded"); // Add chevron only if not already present $(".rm-Sidebar-heading").each(function () { if (!$(this).find(".icon-chevron").length) { $(this).append(""); } }); // Expand the section containing the active link const activeLink = $(".rm-Sidebar-link.active"); if (activeLink.length > 0) { activeLink.parents(".rm-Sidebar-list") .removeClass("section-collapsed") .addClass("section-list-expanded"); activeLink .parents(".rm-Sidebar-section") .children(".rm-Sidebar-heading") .addClass("section-expanded"); $(".section-list-expanded .Sidebar-item23D-2Kd61_k3").addClass("expanded-section-item"); } // Fix issue with sub-items getting stuck expanded $(".subpages").removeClass("section-list-expanded"); // Add tabindex attribute to each heading $(".rm-Sidebar-heading").attr("tabindex", "0"); // Unbind existing event handlers to prevent duplication $(".rm-Sidebar-heading, .rm-Sidebar-link").off(); // Handle keyboard navigation for Enter key $(document).on("keydown", ".rm-Sidebar-heading", function (e) { if (e.key === "Enter") { e.preventDefault(); $(this).toggleClass("section-expanded"); $(this).next() .toggleClass("section-list-expanded") .toggleClass("section-collapsed"); $(".section-list-expanded .Sidebar-item23D-2Kd61_k3").toggleClass("expanded-section-item"); } }); // Handle click events on sidebar headings and links $(".rm-Sidebar-heading, .rm-Sidebar-link").on("click", function (event) { $(this).toggleClass("section-expanded"); $(this).next("ul") .toggleClass("section-list-expanded") .toggleClass("section-collapsed"); $(".section-list-expanded .Sidebar-item23D-2Kd61_k3").toggleClass("expanded-section-item"); }); // Hide and toggle content for expand-trigger $(".expand-content").hide(); $(".expand-trigger").on("click", function () { const isHidden = $(".expand-content").toggle().is(":hidden"); $(this) .find("span") .text(isHidden ? "Show" : "Hide"); }); } // Trigger all pageLoad handlers on initial hard load document.addEventListener("DOMContentLoaded", function () { initializeSidebar(); $(window).trigger("pageLoad"); }); /*****************************/ /******* Add Header **********/ /*****************************/ /* $(window).on("pageLoad", function (e, state) { if($("#webinar").length == 0) { $(".rm-Markdown").first().prepend('

✅
Upcoming webinar
See firsthand how easy it is to build in Lucid. Thursday, May 30th at 11 a.m. MDT. We'd love to see you there! Register now

'); } }); */ /*****************************/ /**** Tracking Testing *******/ /*****************************/ /* $(window).on("pageLoad", function (e, state) { console.log("crimn"); const options = {method: 'GET', headers: {accept: 'application/json'}, credentials: 'include'}; fetch('https://analytics.lucid.app/sessionActions', options) .then(response => response.json()) .then(response => console.log(response)) .catch(err => console.error(err)); }); */ $(window).on("pageLoad", function() { const scrubHashes = () => { $('[data-testid="serverurl"]').each(function() { const text = $(this).text(); if (text.includes('#')) { $(this).text(text.replace(/#[a-zA-Z0-9_-]+/g, '')); } }); $('.cm-string').each(function() { const text = $(this).text(); if (text.includes('#')) { $(this).text(text.replace(/#[a-zA-Z0-9_-]+/g, '')); } }); }; scrubHashes(); const playground = document.querySelector('.rm-Playground'); if (playground) { const observer = new MutationObserver((mutations) => { const addedNodes = mutations.some(m => m.addedNodes.length > 0); if (addedNodes) { clearTimeout(window.hashScrubTimeout); window.hashScrubTimeout = setTimeout(scrubHashes, 50); } }); observer.observe(playground, { childList: true, subtree: true }); } });

✅Upcoming webinar

✅
Upcoming webinar