app/src/components/Footer.astro

---
interface Props {
  citationText: string;
  bibtex: string;
}
const { citationText, bibtex } = Astro.props as Props;
---
<footer class="distill-footer">
  <div class="footer-inner">
    <section class="citation-block">
      <h3>Citation</h3>
      <p>For attribution in academic contexts, please cite this work as</p>
      <pre class="citation short">{citationText}</pre>

      <p>BibTeX citation</p>
      <pre class="citation long">{bibtex}</pre>
    </section>
    <section class="references-block">
      <slot />
    </section>
  </div>
</footer>


<script is:inline>
  (() => {
    const getFooter = () => document.currentScript?.closest('footer') || document.querySelector('footer.distill-footer');
    const footer = getFooter();
    if (!footer) return;
    const target = footer.querySelector('.references-block');
    if (!target) return;

    const contentRoot = document.querySelector('section.content-grid main') || document.querySelector('main') || document.body;

    const findFirstOutsideFooter = (selectors) => {
      for (const sel of selectors) {
        const el = contentRoot.querySelector(sel);
        if (el && !footer.contains(el)) return el;
      }
      return null;
    };

    const ensureHeading = (text) => {
      const exists = Array.from(target.children).some((c) => c.tagName === 'H3' && c.textContent.trim().toLowerCase() === text.toLowerCase());
      if (!exists) {
        const h = document.createElement('h3');
        h.textContent = text;
        target.appendChild(h);
      }
    };

    const moveIntoFooter = (element, headingText) => {
      if (!element) return false;
      if (element.classList.contains('footnotes')) {
        const hr = element.querySelector('hr');
        if (hr) hr.remove();
      }
      // Remove an eventual heading already included inside the block (avoid duplicates)
      const firstHeading = element.querySelector(':scope > h1, :scope > h2, :scope > h3');
      if (firstHeading) {
        const txt = (firstHeading.textContent || '').trim().toLowerCase();
        const targetTxt = headingText.trim().toLowerCase();
        if (txt === targetTxt || txt.includes('reference') || txt.includes('bibliograph')) {
          firstHeading.remove();
        }
      }
      ensureHeading(headingText);
      target.appendChild(element);
      return true;
    };

    const run = () => {
      const referencesEl = findFirstOutsideFooter(['#references', '.references', '.bibliography']);
      const footnotesEl = findFirstOutsideFooter(['.footnotes']);
      const movedRefs = moveIntoFooter(referencesEl, 'References');
      const movedNotes = moveIntoFooter(footnotesEl, 'Footnotes');
      return movedRefs || movedNotes;
    };

    // Try now; if not found yet, try again on DOM ready
    const done = run();
    if (!done) {
      const onReady = () => run();
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', onReady, { once: true });
      } else {
        setTimeout(onReady, 0);
      }
    }

    // Resize on window changes (e.g., fonts, layout)
    // No textarea auto-resize needed for <pre> blocks
  })();
</script>