/** * Changelog page enhancements: * 1. Category colour-coding on the tag badges and the filter chips. * 2. A "Jump to" month index below the filters. * * Mintlify auto-loads every .js file in the content directory on EVERY page, so * this must be inert everywhere else. It bails unless it finds the changelog * filters rail, and every entry point is wrapped so a Mintlify DOM change * degrades to "no enhancements" rather than a console error site-wide. * * Colours live in styles/global.css as .cl-cat-- rules; this file only * attaches the class, because CSS cannot select an element by its text. */ (function () { 'use strict'; var MONTHS = ['january','february','march','april','may','june','july','august','september','october','november','december']; var SHORT = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; var NAV_ID = 'cl-jump'; /** "API / MCP" -> "api-mcp", matching the .cl-cat--* rules in global.css. */ function slug(text) { return String(text || '') .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/^-+|-+$/g, ''); } function parseId(id) { var m = /^([a-z]+)-(\d{1,2})-(\d{4})$/.exec(id || ''); if (!m || MONTHS.indexOf(m[1]) === -1) return null; return { year: +m[3], month: MONTHS.indexOf(m[1]) }; } /** * The date anchor Mintlify generates from an (e.g. * "september-9-2026") sits on the .update element itself; descendants are * checked only as a fallback in case that changes. */ function readDate(updateEl) { var own = parseId(updateEl.id); if (own) return own; var nodes = updateEl.querySelectorAll('[id]'); for (var i = 0; i < nodes.length; i++) { var found = parseId(nodes[i].id); if (found) return found; } return null; } /** Updates hidden by a tag filter stay in the DOM, so test layout instead. */ function isVisible(el) { return el.offsetParent !== null; } /** Each entry's summary renders as one . */ function entryCount(updateEl) { var content = updateEl.querySelector('[data-component-part="update-content"]'); if (!content) return 1; return content.querySelectorAll('[data-as="p"]').length || 1; } /** * Mintlify re-renders a filter chip's className when it is selected or * deselected, which wipes our class. It does NOT touch dataset, so a * dataset-based "already painted" guard survives the wipe and would stop us * ever repainting — the class itself has to be the guard. * * A selected chip is left alone so Mintlify's own selected styling (solid * bg-primary) still reads as selected; we only colour unselected chips and * the per-entry badges. Nothing is written unless it actually changes, so * this is safe to call from a MutationObserver watching these same classes. */ function paintCategories() { var targets = document.querySelectorAll( '[data-component-part="update-tag"], #changelog-filters-content button', ); for (var i = 0; i < targets.length; i++) { var el = targets[i]; var name = slug(el.textContent); if (!name) continue; var selected = /\bbg-primary\b/.test(el.className); var want = selected ? null : 'cl-cat--' + name; var has = null; for (var j = 0; j < el.classList.length; j++) { if (el.classList[j].indexOf('cl-cat--') === 0) { has = el.classList[j]; break; } } if (has === want && (!want || el.classList.contains('cl-cat'))) continue; if (has) el.classList.remove(has); if (want) el.classList.add('cl-cat', want); else el.classList.remove('cl-cat'); } } function collect() { var updates = document.querySelectorAll('.mdx-content .update'); var order = []; var byKey = {}; for (var i = 0; i < updates.length; i++) { var el = updates[i]; var date = readDate(el); if (!date) continue; var key = date.year + '-' + date.month; if (!byKey[key]) { byKey[key] = { key: key, year: date.year, month: date.month, visible: 0, first: null }; order.push(byKey[key]); } if (isVisible(el)) { byKey[key].visible += entryCount(el); // Point at the topmost update the current filter still shows. if (!byKey[key].first) byKey[key].first = el; } } return order; } function build(groups) { var nav = document.createElement('nav'); nav.id = NAV_ID; nav.className = 'cl-jump'; nav.setAttribute('aria-label', 'Jump to month'); var heading = document.createElement('span'); heading.className = 'cl-jump-title'; heading.textContent = 'Jump to'; nav.appendChild(heading); var currentYear = null; var list = null; groups.forEach(function (g) { if (g.year !== currentYear) { currentYear = g.year; var yr = document.createElement('span'); yr.className = 'cl-jump-year'; yr.textContent = String(g.year); nav.appendChild(yr); list = document.createElement('ul'); list.className = 'cl-jump-months'; nav.appendChild(list); } var li = document.createElement('li'); var btn = document.createElement('button'); btn.type = 'button'; btn.className = 'cl-jump-month'; btn.dataset.key = g.key; btn.setAttribute( 'aria-label', SHORT[g.month] + ' ' + g.year + ', ' + g.visible + (g.visible === 1 ? ' update' : ' updates'), ); var name = document.createElement('span'); name.textContent = SHORT[g.month]; var count = document.createElement('span'); count.className = 'cl-jump-count'; count.textContent = String(g.visible); btn.appendChild(name); btn.appendChild(count); btn.addEventListener('click', function () { if (g.first) g.first.scrollIntoView({ behavior: 'smooth', block: 'start' }); }); li.appendChild(btn); list.appendChild(li); }); return nav; } /** * Highlights the month currently being read. * * This deliberately does not use IntersectionObserver: with a narrow * observation band, the gap between two updates in the same month leaves * nothing intersecting, the active month resolves to null, and the highlight * flickers off between entries. Instead we resolve the active month from * scroll position — the last update whose top has passed the reference line — * which always yields exactly one month and never gaps. * * Offsets are cached because they only change on resize or when a filter * shows/hides updates, so scrolling stays a cheap comparison. */ var offsets = []; function measureOffsets() { offsets = []; var updates = document.querySelectorAll('.mdx-content .update'); for (var i = 0; i < updates.length; i++) { if (!isVisible(updates[i])) continue; var d = readDate(updates[i]); if (!d) continue; offsets.push({ top: updates[i].getBoundingClientRect().top + window.pageYOffset, key: d.year + '-' + d.month, }); } offsets.sort(function (a, b) { return a.top - b.top; }); } var lastKey = null; function applyActive(nav) { if (!offsets.length) return; var line = window.pageYOffset + 140; var key = offsets[0].key; for (var i = 0; i < offsets.length; i++) { if (offsets[i].top <= line) key = offsets[i].key; else break; } if (key === lastKey) return; lastKey = key; var buttons = nav.querySelectorAll('.cl-jump-month'); for (var j = 0; j < buttons.length; j++) { buttons[j].classList.toggle('is-active', buttons[j].dataset.key === key); } } var bound = false; var ticking = false; function trackActive(nav) { measureOffsets(); lastKey = null; applyActive(nav); if (bound) return; bound = true; function onScroll() { if (ticking) return; ticking = true; requestAnimationFrame(function () { ticking = false; var current = document.getElementById(NAV_ID); if (current) applyActive(current); }); } window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', function () { measureOffsets(); lastKey = null; var current = document.getElementById(NAV_ID); if (current) applyActive(current); }); } function render() { var content = document.querySelector('#content-side-layout #changelog-filters #changelog-filters-content'); if (!content) return; paintCategories(); // The inner filters box carries the column's vertical spacing; append there. var host = content.parentElement; var groups = collect().filter(function (g) { return g.visible > 0; }); if (!host || !groups.length) return; var existing = document.getElementById(NAV_ID); if (existing) existing.remove(); var nav = build(groups); host.appendChild(nav); trackActive(nav); } var pending = null; function schedule() { clearTimeout(pending); pending = setTimeout(function () { try { render(); } catch (err) { /* leave the page alone */ } }, 120); } function start() { try { schedule(); // Re-render on filter clicks: counts, jump targets and offsets all change. document.addEventListener('click', function (e) { if (e.target && e.target.closest && e.target.closest('#changelog-filters')) schedule(); }); // Mintlify rewrites chip classNames on select/deselect, which drops our // category class. Repaint when that happens. paintCategories only writes // when something actually changed, so this cannot loop. new MutationObserver(function () { try { paintCategories(); } catch (err) { /* no-op */ } }).observe(document.body, { attributes: true, attributeFilter: ['class'], subtree: true, }); // Client-side navigation swaps the page content wholesale. new MutationObserver(function () { if (!document.getElementById(NAV_ID) && document.querySelector('#changelog-filters-content')) schedule(); }).observe(document.body, { childList: true, subtree: true }); } catch (err) { /* no-op */ } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', start); } else { start(); } })();