app/src/components/Tenet.astro

---
interface Props {
  /** The tenet term to display */
  term: string;
  /** Custom display text (if not provided, uses tenet name) */
  display?: string;
  /** Optional CSS class to apply to the term */
  class?: string;
  /** Optional style to apply to the term */
  style?: string;
  /** Tooltip position (top, bottom, left, right) */
  position?: 'top' | 'bottom' | 'left' | 'right';
  /** Delay before showing tooltip in ms */
  delay?: number;
  /** Disable tooltip on mobile */
  disableOnMobile?: boolean;
}

const {
  term,
  display,
  class: className = '',
  style: inlineStyle = '',
  position = 'top',
  delay = 300,
  disableOnMobile = false,
} = Astro.props as Props;

// Tenet definitions (original version)
const tenets = {
  "source-of-truth": "Model implementations should be reliable, reproducible, and faithful to original performances.",
  "one-model-one-file": "All inference and training core logic visible, top‑to‑bottom, in a single file.",
  "code-is-product": "Optimize for reading, diffing, and tweaking. Code quality matters as much as functionality.",
  "standardize-dont-abstract": "Model-specific logic belongs in the model file, not hidden behind abstractions.",
  "do-repeat-yourself": "Strategic duplication can improve readability and maintainability when done thoughtfully.",
  "minimal-user-api": "Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. Least amount of codepaths.",
  "backwards-compatibility": "Any artifact once on the hub must remain loadable. Breaking changes are unacceptable.",
  "consistent-public-surface": "Uniform naming, signatures, and conventions across all models for predictability."
};

// Get the tenet definition
const definition = tenets[term as keyof typeof tenets];

if (!definition) {
  console.warn(`Tenet "${term}" not found in definitions`);
}

// Generate a unique ID for this component
const tooltipId = `tenet-${Math.random().toString(36).slice(2)}`;
---
<span
  class={`glossary-term ${className}`}
  style={inlineStyle}
  data-tooltip-id={tooltipId}
  onmouseenter={`window.showTenetTooltip(event, '${tooltipId}')`}
  onmousemove={`window.updateTenetTooltip(event, '${tooltipId}')`}
  onmouseleave={`window.hideTenetTooltip('${tooltipId}')`}
>{display}</span><span id={tooltipId} class="glossary-tooltip" data-position={position}>
  <span class="glossary-tooltip__content">
    <span class="glossary-tooltip__term">{term}</span>
    <span class="glossary-tooltip__definition">{definition}</span>
  </span>
  <span class="glossary-tooltip__arrow"></span>
</span>

<script is:inline>
if (!window.tenetTooltipInitialized) {
  window.tenetTooltipInitialized = true;

  window.showTenetTooltip = function(event, id) {
    const tooltip = document.getElementById(id);
    if (!tooltip) return;
    tooltip.style.visibility = 'visible';
    tooltip.style.opacity = '1';
    tooltip.style.top = (event.clientY + 10) + 'px';
    tooltip.style.left = (event.clientX + 10) + 'px';
  };

  window.updateTenetTooltip = function(event, id) {
    const tooltip = document.getElementById(id);
    if (!tooltip) return;
    tooltip.style.top = (event.clientY + 10) + 'px';
    tooltip.style.left = (event.clientX + 10) + 'px';
  };

  window.hideTenetTooltip = function(id) {
    const tooltip = document.getElementById(id);
    if (!tooltip) return;
    tooltip.style.visibility = 'hidden';
    tooltip.style.opacity = '0';
  };
}
</script>