diff --git a/eyebrow.js b/eyebrow.js index 30a839d7..13df4943 100644 --- a/eyebrow.js +++ b/eyebrow.js @@ -1,12 +1,36 @@ /* - * Hide the page eyebrow when it repeats the page title. + * Show the parent group in the page eyebrow when the eyebrow repeats the title. * * Mintlify shows the sidebar group name above every page title. On a section's * overview page the title is the section name, so the eyebrow would repeat it. + * On those pages, show the next group up from the sidebar instead ("Configure" + * above "Proxies", "How it works" above "Configure"). The name goes in a + * data attribute that style.css renders, so React keeps owning the text node. + * If there is no parent group to show, hide the eyebrow. * Mintlify loads every .js file in this directory on every docs page and * navigates client-side, so re-check whenever the header changes. */ (function () { + function parentGroup() { + var item = document.querySelector( + '#navigation-items li[data-active-nav-item="true"]' + ); + if (!item) return null; + var groups = []; + for (var el = item.parentElement; el; el = el.parentElement) { + if (el.matches("li[data-group-tag]")) groups.push(el); + } + // groups[0] is the page's own group, the one the eyebrow names. + if (groups.length > 1) return groups[1].getAttribute("data-title"); + if (!groups.length) return null; + var section = groups[0].parentElement.previousElementSibling; + var heading = + section && + section.classList.contains("sidebar-group-header") && + section.querySelector(".sidebar-title"); + return heading ? heading.textContent.trim() : null; + } + function sync() { var header = document.getElementById("header"); if (!header) return; @@ -16,7 +40,13 @@ var same = eyebrow.textContent.trim().toLowerCase() === title.textContent.trim().toLowerCase(); - eyebrow.style.display = same ? "none" : ""; + var parent = same ? parentGroup() : null; + if (parent) { + eyebrow.setAttribute("data-parent-group", parent); + } else { + eyebrow.removeAttribute("data-parent-group"); + } + eyebrow.style.display = same && !parent ? "none" : ""; } var scheduled = false; diff --git a/style.css b/style.css index 19f5385a..6716638d 100644 --- a/style.css +++ b/style.css @@ -334,6 +334,16 @@ html.dark #navigation-items img[src*="/images/integration-icons/"] { display: none; } +/* eyebrow.js sets data-parent-group on section overview pages, where the + eyebrow would repeat the title; show the parent group's name instead. */ +#header .eyebrow[data-parent-group] { + font-size: 0; +} +#header .eyebrow[data-parent-group]::after { + content: attr(data-parent-group); + font-size: 0.875rem; +} + /* cookbooks card category label — matches the site eyebrow/type setup in the reference */ .cookbook-tag { display: block;