Skip to content

docs: add AI Catalog header button and reorder theme selector #399

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaitor merged 2 commits into from
Sep 14, 2026
Merged

docs: add AI Catalog header button and reorder theme selector #399

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7780019
docs: add AI Catalog header link with ribbon shimmer
aaitor Sep 14, 2026
894b8b8
docs: address catalog header review feedback
aaitor Sep 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 86 additions & 0 deletions custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,3 +335,89 @@ ul.sidebar-group {
-webkit-mask-image: radial-gradient(120% 140% at 0 0, #000 0%, transparent 55%);
mask-image: radial-gradient(120% 140% at 0 0, #000 0%, transparent 55%);
}

/* =====================================================
Header — theme selector order + AI Catalog (nevermined-io/docs#399)
Mintlify places the theme selector after nav with no config for ordering.
This DOM-dependent override changes visual order only; keyboard order
remains App → AI Catalog → theme. Recheck after Mintlify layout changes.
===================================================== */
#navbar div:has(> nav #topbar-cta-button) > nav {
order: 1;
/* Move Tailwind v4's DOM-first end margin to the visually-last nav's start. */
margin-inline: 1rem 0;
}

/* Older local Mintlify previews use Tailwind v3's margin on the theme wrapper. */
#navbar div:has(> nav #topbar-cta-button) > div {
margin-inline: 0;
}
Comment on lines +345 to +354

@r-marques r-marques Sep 14, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 SHOULD FIX — Margin compensation targets Tailwind v3 space-x; the served bundle is v4, so > div { margin-inline: 0 } is a no-op and the CTA sits 1rem short of the right edge

The parent container is flex … justify-end space-x-4. In the CSS Mintlify actually serves (/docs/_next/static/chunks/c9c6061f3cdd5c21.css) that utility is the Tailwind v4 shape:

:where(.space-x-4 > :not(:last-child)) { margin-inline-end: 1rem; }

i.e. an END margin on every child except the DOM-last one — not v3's margin-left on every child except the first. :last-child is DOM order, which order: does not change, so after this rule:

  • nav (DOM-first) keeps margin-inline-end: 1rem and gains margin-inline-start: 1rem. Once it is visually last, that end margin becomes a trailing 16px gap: the AI Catalog button's right edge sits 1rem inside the header's right edge, where the theme toggle used to sit flush.
  • the theme div is DOM-last and never had a margin, so > div { margin-inline: 0 } (lines 345-347) changes nothing.

Suggested fix — put the whole compensation on the nav and drop the > div rule:

#navbar div:has(> nav #topbar-cta-button) > nav {
  order: 1;
  margin-inline: 1rem 0; /* Tailwind v4 space-x puts its 1rem on this (DOM-first) child's END; move it to the start now that the nav is visually last */
}

Worth a comment either way — as written a maintainer cannot tell which space-x shape the two margins are compensating, or that the > div rule is dead.

🤖 pr-review-toolkit · code-reviewer · high


/* Ribbon shimmer: accent ↔ lime fill pulses, with the right stroke delayed.
Masks reproduce the two strokes of the Nevermined mark in logo/light.svg;
update both when the logo changes. ::before is left, ::after is right.
Target the desktop CTA hook; mobile menu links retain Mintlify's styling. */
#topbar-cta-button > a {
--catalog-accent: #12a89e;
--catalog-lime: #8fbf1f;
position: relative;
display: inline-flex;
align-items: center;
padding: 13px 22px 13px 57px;
border-radius: 12px;
background: #0d3f48;
font-size: 15px;
font-weight: 600;
line-height: 1;
}

:is(.dark, [data-theme="dark"]) #topbar-cta-button > a {
--catalog-accent: #4ac6bf;
--catalog-lime: #bcdc4a;
}

/* Hide the mint theme's background overlay and trailing chevron so the
anchor background and ribbon show. Recheck these children on theme updates. */
#topbar-cta-button > a > span.absolute,
#topbar-cta-button > a > div > svg {
display: none;
Comment on lines +378 to +383

@r-marques r-marques Sep 14, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 NIT — "Replace" → these rules hide; say what is hidden and what reappears if the scraped class changes

The rule hides two things; the replacement is the anchor background at line 360 and the pseudo-elements at 380-401. Worth naming what is hidden: span.absolute is Mintlify's absolute inset-0 bg-primary-dark rounded-xl group-hover:opacity-[0.9] overlay on the mint theme's primary button, and svg is its trailing chevron. Failure mode if Mintlify drops the absolute utility or restructures: the bg-primary-dark rounded-xl pill paints over the #0d3f48 box (and, being a DOM child, over ::before but under ::after, so the ribbon shows half), and the chevron reappears after "AI Catalog" — no error, only a visual regression. a svg also swallows any icon Mintlify adds to the primary button later; > svg-scoped or div > svg would be narrower.

🤖 pr-review-toolkit · comment-analyzer · medium

}

#topbar-cta-button > a::before,
#topbar-cta-button > a::after {
content: "";
position: absolute;
left: 22px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 17px;
background-color: var(--catalog-accent);
mask: var(--catalog-ribbon) center / contain no-repeat;
-webkit-mask: var(--catalog-ribbon) center / contain no-repeat;
pointer-events: none;
}

#topbar-cta-button > a::before {
--catalog-ribbon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2031.06%2022%22%3E%3Cpath%20d%3D%22M0%2011.153L10.4179%2020.6426V11.0576L0%201.56805V11.153Z%22%2F%3E%3C%2Fsvg%3E");
}

#topbar-cta-button > a::after {
--catalog-ribbon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2031.06%2022%22%3E%3Cpath%20d%3D%22M10.4178%201.56805V11.153L20.8325%2020.6426L31.0596%2011.153V1.56805L20.8325%2011.0576L10.4178%201.56805Z%22%2F%3E%3C%2Fsvg%3E");
}

@media (prefers-reduced-motion: no-preference) {
#topbar-cta-button > a:is(:hover, :focus-visible)::before,
#topbar-cta-button > a:is(:hover, :focus-visible)::after {
animation: nvm-catalog-shimmer .8s ease-in-out infinite;
}

#topbar-cta-button > a:is(:hover, :focus-visible)::after {
animation-delay: .12s;
}
}

Comment on lines +409 to +419

@r-marques r-marques Sep 14, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ NICE — Reduced motion is genuinely honoured

The animation lives only inside @media (prefers-reduced-motion: no-preference), so under reduce no animation is ever applied — nothing to un-set, and the @keyframes outside the query is inert without a reference. Opt-in is the right shape here (an opt-out reduce block would have to remember every animation it cancels). Hover and :focus-visible both start the shimmer, with the .12s stagger on ::after.

🤖 pr-review-toolkit · code-reviewer · high

@keyframes nvm-catalog-shimmer {
0%, 100% { background-color: var(--catalog-accent); }
50% { background-color: var(--catalog-lime); }
}
10 changes: 8 additions & 2 deletions docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,10 +738,16 @@
"dark": "/logo/dark.svg"
},
"navbar": {
"links": [
{
"label": "App",
"href": "https://nevermined.app"
}
],
"primary": {
"type": "button",
"label": "App",
"href": "https://nevermined.app"
"label": "AI Catalog",
"href": "https://nevermined.app/catalog/"
Comment on lines +741 to +750

@r-marques r-marques Sep 14, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ NICE — Minimal, valid edit; trailing slash is the canonical form; host matches precedent

Eight-line text edit, no reflow, jq valid. https://nevermined.app/catalog/ answers 200 directly, while /catalog without the slash 301s to it — so the slash saves a redirect hop on every click. Hardcoding the production host is consistent with the existing App link (https://nevermined.app) — the docs site has one production deployment, so there is no staging variant to parameterise for. The :is(#navbar, #mobile-nav) guard in custom.css keeps the page-body links to nevermined.app untouched. Note for the CSS side: the exact string here is what custom.css:351 matches on (see that comment).

🤖 pr-review-toolkit · code-reviewer · high

}
},
"footer": {
Expand Down