generated from coulomb/repo-seed
tegwick
902aafcfb1
Extracts the TOC-injection pattern into a reusable component:
src/components/toc-sidebar.js
injectTocTop(id, element) — prepends an element to #observablehq-toc,
removing any previous instance with the same id first so reactive cells
can re-inject on each poll without accumulating duplicates.
decisions.md now uses injectTocTop to place a single widget (live
indicator + Decision Health KPI box) into the right-column sidebar,
removing the standalone live-indicator cell and the ad-hoc id/remove
pattern that was previously inlined.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
30 lines
1.2 KiB
JavaScript
30 lines
1.2 KiB
JavaScript
/**
|
|
* toc-sidebar — inject a persistent widget into Observable Framework's
|
|
* right-column table-of-contents sidebar.
|
|
*
|
|
* Observable Framework renders a non-scrolling TOC aside (#observablehq-toc)
|
|
* in the right column. This helper lets you prepend a custom element to it,
|
|
* replacing any previously injected element with the same id on each call so
|
|
* reactive cells can refresh the widget without accumulating duplicates.
|
|
*
|
|
* Usage:
|
|
* import {injectTocTop} from "./components/toc-sidebar.js";
|
|
*
|
|
* const el = html`<div>…</div>`;
|
|
* injectTocTop("my-widget-id", el); // call again on each reactive update
|
|
*
|
|
* @param {string} id Stable id used to find and remove the previous
|
|
* instance. Must be unique per widget on the page.
|
|
* @param {HTMLElement} element Element to inject. Its id will be set to `id`.
|
|
* @returns {boolean} true if injected into the TOC sidebar;
|
|
* false if #observablehq-toc was not found.
|
|
*/
|
|
export function injectTocTop(id, element) {
|
|
document.getElementById(id)?.remove();
|
|
element.id = id;
|
|
const toc = document.querySelector("#observablehq-toc");
|
|
if (!toc) return false;
|
|
toc.prepend(element);
|
|
return true;
|
|
}
|