/** * category-cards.js * * On category index pages, fully replaces each Mintlify-rendered body * with a custom anchor that we own. Mintlify's React-rendered Card DOM has * internal layout (icon wrapper, flex spacing, p-6 padding) that resists * external manipulation, so we read out the title/href/desc, hide the original * content, and append our own structure. * * ┌──────────────────────────────────┐ * │ [icon box] CATEGORY NAME │ ← dark navy header (.hc-card-header) * ├──────────────────────────────────┤ * │ Article Title │ * │ Description from frontmatter │ * │ ────────────────────────────── │ * │ 3 min read · Updated May 2026 │ * └──────────────────────────────────┘ * * Data source: /article-data.js (generated by scripts/generate-article-data.ts, * assigns window.__articleData keyed by article title). Lives at the repo root * because Mintlify auto-includes root .js files but does not serve .json from * /static. */ (function () { var SECTION_ICONS = { '/getting-started': '', '/core-platform': '', '/growth': '', '/integrations': '' }; var FALLBACK_ICON = ''; function getIcon() { var path = window.location.pathname; for (var prefix in SECTION_ICONS) { if (path.indexOf(prefix) === 0) return SECTION_ICONS[prefix]; } return FALLBACK_ICON; } /* Data is loaded synchronously from article-data.js (root-level, auto-included by Mintlify) which assigns window.__articleData. We can't serve a .json from /static — Mintlify only serves image types from there. */ function getArticleData(cb) { cb(window.__articleData || {}); } function getCategory() { var h1 = document.querySelector('h1#page-title'); return h1 ? h1.textContent.trim().toUpperCase() : ''; } function buildMetaText(entry) { var parts = []; if (entry.readingTime) parts.push(entry.readingTime + ' min read'); if (entry.lastUpdated) { /* "May 1, 2026" → "May 2026" */ var monthYear = entry.lastUpdated.replace(/\s+\d+,\s+/, ' '); parts.push('Updated ' + monthYear); } return parts.join(' · '); } function escapeHtml(s) { return String(s).replace(/[&<>"']/g, function (c) { return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]; }); } function rebuildCard(card, category, articleData) { if (card.dataset.hcRebuilt) return; var titleEl = card.querySelector('[data-component-part="card-title"]'); var contentEl = card.querySelector('[data-component-part="card-content"]'); var origAnchor = card.querySelector('a[href], [data-component-part="card-content-container"]'); if (!titleEl) return; var title = titleEl.textContent.trim(); var origDesc = contentEl ? contentEl.textContent.trim() : ''; var entry = articleData[title] || {}; var description = entry.description || origDesc; var href = '#'; if (origAnchor && origAnchor.tagName === 'A' && origAnchor.getAttribute('href')) { href = origAnchor.getAttribute('href'); } else { var anchorChild = card.querySelector('a[href]'); if (anchorChild) href = anchorChild.getAttribute('href'); } card.dataset.hcRebuilt = '1'; /* Hide all existing children (preserves React's tree for re-render safety) */ Array.prototype.forEach.call(card.children, function (child) { child.style.cssText = 'display:none!important;'; }); /* Build our complete card body as a new anchor child */ var rebuilt = document.createElement('a'); rebuilt.className = 'hc-rebuilt-card'; rebuilt.setAttribute('href', href); var metaText = buildMetaText(entry); var metaHtml = metaText ? '

' + escapeHtml(metaText) + '

' : ''; var descHtml = description ? '

' + escapeHtml(description) + '

' : ''; rebuilt.innerHTML = '

' + '

' + getIcon() + '

' + (category ? '' + escapeHtml(category) + '' : '') + '

' + '

' + escapeHtml(title) + '

' + descHtml + metaHtml + '

'; card.appendChild(rebuilt); } function rebuildAll() { var groups = document.querySelectorAll('.mdx-content .card-group'); if (!groups.length) return; var category = getCategory(); getArticleData(function (articleData) { groups.forEach(function (group) { var cards = group.querySelectorAll('.card'); cards.forEach(function (card) { rebuildCard(card, category, articleData); }); }); }); } /* Re-apply on re-render (React may mount/unmount cards). */ function observe() { var target = document.querySelector('#content-area, main, body'); if (!target) return; var obs = new MutationObserver(function () { rebuildAll(); }); obs.observe(target, { childList: true, subtree: true }); } function init() { setTimeout(function () { rebuildAll(); observe(); }, 100); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } }());

Documentation Index

Notes

Comments