(function () { const svgMarkup = ``; function insertSVGTo(target) { if (!target) return false; // If element was recreated the dataset guard might be absent; check content instead if (target.dataset.svgInserted === '1' || target.querySelector('svg')) return true; target.innerHTML = svgMarkup; target.dataset.svgInserted = '1'; console.debug('SVG inserted into .api-capabilities', target); return true; } function tryInsert() { const t = document.querySelector('.api-capabilities'); return insertSVGTo(t); } // Run initial attempt if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', tryInsert); } else { tryInsert(); } // Persistent MutationObserver: watch for new nodes and attribute changes (class/style/hidden) const observer = new MutationObserver((mutations) => { for (const m of mutations) { if (m.type === 'childList') { // check added nodes quickly for (const node of m.addedNodes) { if (node.nodeType !== 1) continue; if (node.matches && node.matches('.api-capabilities')) { insertSVGTo(node); } else { const found = node.querySelector && node.querySelector('.api-capabilities'); if (found) insertSVGTo(found); } } } else if (m.type === 'attributes') { // attributes changes on existing nodes (useful when tab only toggles classes) const el = m.target; if (el && el.matches && el.matches('.api-capabilities')) { // short delay to allow framework to finish any internal rendering setTimeout(() => insertSVGTo(el), 0); } } } }); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['class', 'style', 'hidden'] }); // Patch history API once (for SPA pushState/replaceState) (function patchHistory() { if (history.__patchedForLocationChange) return; history.__patchedForLocationChange = true; const origPush = history.pushState; const origReplace = history.replaceState; history.pushState = function () { const res = origPush.apply(this, arguments); window.dispatchEvent(new Event('locationchange')); return res; }; history.replaceState = function () { const res = origReplace.apply(this, arguments); window.dispatchEvent(new Event('locationchange')); return res; }; window.addEventListener('popstate', () => window.dispatchEvent(new Event('locationchange'))); })(); // On SPA nav, retry a bit after change (gives frameworks time to mount) window.addEventListener('locationchange', () => setTimeout(tryInsert, 40)); // Tab clicks / generic click hook (covers manual tab systems) document.addEventListener('click', (e) => { // tune selector to match your tab element(s) if you have specific structure const tabClicked = e.target.closest('[data-toggle="tab"], [role="tab"], .tab, .nav-link'); if (tabClicked) { // slight delay to allow tab panel to be inserted/activated setTimeout(tryInsert, 40); } }); // If using Bootstrap tabs, listen to shown.bs.tab (works reliably) document.addEventListener('shown.bs.tab', () => setTimeout(tryInsert, 30)); // Short fallback retry loop for edge cases let tries = 0; const fallback = setInterval(() => { if (tryInsert() || ++tries > 15) clearInterval(fallback); }, 200); })(); (function () { "use strict"; const RECIPES_PATH = "/recipes"; const PADDING_OFFSET = 18; const WRAPPER_ID = "rm-recipe-tabs-wrapper"; const HEADING_ID = "rm-recipe-tabs-heading"; const TAB_BAR_ID = "rm-recipe-category-tabs"; const STYLE_ID = "rm-recipe-category-tabs-style"; let activeCategory = "All"; let observer = null; function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement("style"); style.id = STYLE_ID; style.textContent = ` #${WRAPPER_ID} { margin-bottom: 24px; box-sizing: border-box; } #${HEADING_ID} { margin: 0 0 12px 0; } #${TAB_BAR_ID} { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; border-bottom: 1px solid rgba(128, 128, 128, 0.25); } #${TAB_BAR_ID} button { appearance: none; background: transparent; border: none; border-bottom: 2px solid transparent; padding: 10px 16px; margin-bottom: -1px; font-size: inherit; font-family: inherit; font-weight: 500; color: inherit; opacity: 0.6; cursor: pointer; transition: opacity 0.15s ease, border-color 0.15s ease; } #${TAB_BAR_ID} button:hover { opacity: 0.9; } #${TAB_BAR_ID} button[aria-selected="true"] { opacity: 1; border-bottom-color: currentColor; } [data-recipe-hidden="true"] { display: none !important; } `; document.head.appendChild(style); } function isRecipesIndex() { return location.pathname.replace(/\/+$/, "").endsWith(RECIPES_PATH); } function parseTitle(raw) { if (!raw) return { categories: ["Uncategorized"], display: "" }; const m = raw.match(/^@([^@]+)@\s*(.+)$/); if (!m) return { categories: ["Uncategorized"], display: raw }; const cats = m[1].split(",").map((c) => c.trim()).filter(Boolean); return { categories: cats.length ? cats : ["Uncategorized"], display: m[2].trim(), }; } function findOuterCard(el) { let cur = el.parentElement; while (cur && cur !== document.body) { const cls = typeof cur.className === "string" ? cur.className : ""; if (/\bTutorialCard[A-Za-z0-9_-]*\b/.test(cls) && !/TutorialCard-[A-Z]/.test(cls)) { return cur; } cur = cur.parentElement; } return el.closest("article") || el.parentElement; } function getRecipeSections() { const sections = []; const heroTitleEl = document.querySelector('[class*="TutorialHero-Col-Title"]'); if (heroTitleEl) { const heroSection = heroTitleEl.closest('section[class*="TutorialHero"]') || heroTitleEl.closest(".rm-RecipeHero") || heroTitleEl.closest("section"); if (heroSection) { sections.push({ rawTitle: (heroTitleEl.dataset.originalTitle || heroTitleEl.textContent).trim(), titleEl: heroTitleEl, el: heroSection, }); } } document.querySelectorAll('[class*="TutorialCard-Title"]').forEach((t) => { const card = findOuterCard(t); if (card && !sections.find((s) => s.el === card)) { sections.push({ rawTitle: (t.dataset.originalTitle || t.textContent).trim(), titleEl: t, el: card, }); } }); return sections; } function buildCategoryList(sections) { const set = new Set(); sections.forEach((s) => { parseTitle(s.rawTitle).categories.forEach((c) => set.add(c)); }); const cats = [...set].filter((c) => c !== "Uncategorized").sort(); return ["All", ...cats]; } function buildHeading() { const h = document.createElement("h3"); h.id = HEADING_ID; h.textContent = "Recipes"; return h; } function buildTabBar(categories) { const bar = document.createElement("div"); bar.id = TAB_BAR_ID; bar.setAttribute("role", "tablist"); categories.forEach((cat) => { const btn = document.createElement("button"); btn.type = "button"; btn.setAttribute("role", "tab"); btn.setAttribute("aria-selected", cat === activeCategory ? "true" : "false"); btn.textContent = cat; btn.addEventListener("click", () => { activeCategory = cat; [...bar.querySelectorAll("button")].forEach((b) => { b.setAttribute("aria-selected", b.textContent === activeCategory ? "true" : "false"); }); applyFilter(); }); bar.appendChild(btn); }); return bar; } function applyFilter() { const sections = getRecipeSections(); sections.forEach(({ rawTitle, titleEl, el }) => { if (!titleEl.dataset.originalTitle) { titleEl.dataset.originalTitle = rawTitle; } const { categories, display } = parseTitle(titleEl.dataset.originalTitle); if (titleEl.textContent !== display) { titleEl.textContent = display; } const visible = activeCategory === "All" || categories.includes(activeCategory); if (visible) el.removeAttribute("data-recipe-hidden"); else el.setAttribute("data-recipe-hidden", "true"); }); } // Measure the actual horizontal position of the recipe title text within // the parent container, and apply that exact indent to the wrapper. This // way the heading and tabs line up with the recipe content visually. function alignWrapperToContent(wrapper, referenceTitleEl) { try { // Pass 1: zero out padding so we can measure the wrapper's true left edge. wrapper.style.paddingLeft = "0px"; wrapper.style.paddingRight = "0px"; // Force layout so getBoundingClientRect is accurate. void wrapper.offsetHeight; const wrapperRect = wrapper.getBoundingClientRect(); const titleRect = referenceTitleEl.getBoundingClientRect(); // Pass 2: apply the exact horizontal indent from wrapper's left edge to where the title text sits. const leftIndent = Math.max(0, Math.round(titleRect.left - wrapperRect.left)); wrapper.style.paddingLeft = leftIndent + "px"; wrapper.style.paddingRight = leftIndent + "px"; } catch (e) { wrapper.style.paddingLeft = "32px"; wrapper.style.paddingRight = "32px"; } } function injectTabBar() { if (document.getElementById(WRAPPER_ID)) return true; const sections = getRecipeSections(); if (sections.length === 0) return false; const categories = buildCategoryList(sections); const firstSection = sections[0]; const parent = firstSection.el.parentNode; if (!parent) return false; const wrapper = document.createElement("div"); wrapper.id = WRAPPER_ID; wrapper.appendChild(buildHeading()); wrapper.appendChild(buildTabBar(categories)); parent.insertBefore(wrapper, firstSection.el); // Measure AFTER the wrapper is in the DOM so getBoundingClientRect is accurate. alignWrapperToContent(wrapper, parent, firstSection.titleEl); applyFilter(); return true; } function mount() { if (!isRecipesIndex()) return; injectStyles(); if (injectTabBar()) { watchForRerender(); return; } if (observer) observer.disconnect(); observer = new MutationObserver(() => { if (!isRecipesIndex()) { unmount(); return; } if (injectTabBar()) watchForRerender(); }); observer.observe(document.body, { childList: true, subtree: true }); } function watchForRerender() { if (observer) observer.disconnect(); let scheduled = false; observer = new MutationObserver(() => { if (!isRecipesIndex()) { unmount(); return; } if (scheduled) return; scheduled = true; requestAnimationFrame(() => { scheduled = false; if (!document.getElementById(WRAPPER_ID)) injectTabBar(); else applyFilter(); }); }); observer.observe(document.body, { childList: true, subtree: true }); } function unmount() { if (observer) { observer.disconnect(); observer = null; } const wrapper = document.getElementById(WRAPPER_ID); if (wrapper) wrapper.remove(); document.querySelectorAll('[data-recipe-hidden="true"]').forEach((el) => el.removeAttribute("data-recipe-hidden") ); } function wrapHistory(method) { const orig = history[method]; history[method] = function () { const r = orig.apply(this, arguments); window.dispatchEvent(new Event("rm:locationchange")); return r; }; } wrapHistory("pushState"); wrapHistory("replaceState"); window.addEventListener("popstate", () => window.dispatchEvent(new Event("rm:locationchange"))); window.addEventListener("rm:locationchange", () => { setTimeout(() => { isRecipesIndex() ? mount() : unmount(); }, 50); }); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", mount); } else { mount(); } // Re-measure on window resize in case layout changes (responsive breakpoints, etc.) window.addEventListener("resize", () => { const wrapper = document.getElementById(WRAPPER_ID); if (!wrapper || !isRecipesIndex()) return; const sections = getRecipeSections(); if (sections.length === 0) return; const parent = sections[0].el.parentNode; if (parent) alignWrapperToContent(wrapper, parent, sections[0].titleEl); }); })(); (function () { "use strict"; const TITLE_RE = /^@([^@]+)@\s*(.+)$/; // Broad selector set: index views + modal/opened-recipe views. const TITLE_SELECTORS = [ '[class*="TutorialHero-Col-Title"]', '[class*="TutorialCard-Title"]', '[class*="TutorialModal"] h1', '[class*="TutorialModal"] h2', '[class*="TutorialModal"] h3', '[class*="TutorialTop"]', '[class*="TutorialTop-Title"]', '[class*="TutorialTop__Title"]', '[class*="Tutorial"] [class*="Title"]', ].join(","); function cleanEl(el) { if (!el) return; // Always test the LIVE text, not just a cached stash. This survives // ReadMe re-writing the node's text back to the raw value. const live = el.textContent.trim(); const m = live.match(TITLE_RE); if (m) { const display = m[2].trim(); if (el.textContent !== display) el.textContent = display; return; } // If live text has no prefix but a stashed raw one does, use the stash. const raw = el.dataset.originalTitle; if (raw) { const rm = raw.match(TITLE_RE); if (rm && el.textContent !== rm[2].trim()) { el.textContent = rm[2].trim(); } } } function cleanAll() { document.querySelectorAll(TITLE_SELECTORS).forEach(cleanEl); // Some modal titles are the ONLY node with the raw prefix — sweep any // heading/element whose text still matches, as a safety net. document .querySelectorAll("h1, h2, h3, [class*='Title']") .forEach((el) => { if (el.children.length === 0 && TITLE_RE.test(el.textContent.trim())) { cleanEl(el); } }); // Clean the browser tab title too. const dm = document.title.match(TITLE_RE); if (dm) document.title = dm[2].trim(); } let scheduled = false; const observer = new MutationObserver(() => { if (scheduled) return; scheduled = true; requestAnimationFrame(() => { scheduled = false; cleanAll(); }); }); function start() { cleanAll(); // Watch text changes too (characterData), not just node additions — // this catches ReadMe re-writing the title text in place. observer.observe(document.body, { childList: true, subtree: true, characterData: true, }); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", start); } else { start(); } })();