lerobot/robot-learning-tutorial

1---2interface Props {3  citationText: string;4  bibtex: string;5  licence?: string;6  doi?: string;7}8const { citationText, bibtex, licence, doi } = Astro.props as Props;9---10<footer class="footer">11  <div class="footer-inner">12    <section class="citation-block">13      <h3>Citation</h3>14      <p>For attribution in academic contexts, please cite this work as</p>15      <pre class="citation short">{citationText}</pre>16 17      <p>BibTeX citation</p>18      <pre class="citation long">{bibtex}</pre>19    </section>20    {doi && (21      <section class="doi-block">22        <h3>DOI</h3>23        <p><a href={`https://doi.org/${doi}`} target="_blank" rel="noopener noreferrer">{doi}</a></p>24      </section>25    )}26    {licence && (27      <section class="reuse-block">28        <h3>Reuse</h3>29        <p set:html={licence}></p>30      </section>31    )}32    <section class="references-block">33      <slot />34    </section>35  </div>36</footer>37 38 39<script is:inline>40  (() => {41    const getFooter = () => document.currentScript?.closest('footer') || document.querySelector('footer.footer');42    const footer = getFooter();43    if (!footer) return;44    const target = footer.querySelector('.references-block');45    if (!target) return;46 47    const contentRoot = document.querySelector('section.content-grid main') || document.querySelector('main') || document.body;48 49    const ensureHeading = (text) => {50      const exists = Array.from(target.children).some((c) => c.tagName === 'H3' && c.textContent.trim().toLowerCase() === text.toLowerCase());51      if (!exists) {52        const h = document.createElement('h3');53        h.textContent = text;54        target.appendChild(h);55      }56    };57 58    const moveIntoFooter = (element, headingText) => {59      if (!element) return false;60      // Remove an eventual heading already included inside the block (avoid duplicates)61      const firstHeading = element.querySelector(':scope > h1, :scope > h2, :scope > h3');62      if (firstHeading) {63        const txt = (firstHeading.textContent || '').trim().toLowerCase();64        const targetTxt = headingText.trim().toLowerCase();65        if (txt === targetTxt || txt.includes('reference') || txt.includes('bibliograph')) {66          firstHeading.remove();67        }68      }69      ensureHeading(headingText);70      target.appendChild(element);71      return true;72    };73    const run = () => {74      const findFirstOutsideFooter = (selectors) => {75        for (const sel of selectors) {76          const el = contentRoot.querySelector(sel);77          if (el && !footer.contains(el)) return el;78        }79        return null;80      };81 82      const referencesEl = findFirstOutsideFooter(['#references', '.references', '.bibliography']);83      const footnotesEl = findFirstOutsideFooter(['.footnotes']);84 85      const movedRefs = moveIntoFooter(referencesEl, 'References');86      const movedNotes = moveIntoFooter(footnotesEl, 'Footnotes');87      return movedRefs || movedNotes;88    };89 90    // Try now; if not found yet, try again on DOM ready91    const done = run();92    if (!done) {93      const onReady = () => run();94      if (document.readyState === 'loading') {95        document.addEventListener('DOMContentLoaded', onReady, { once: true });96      } else {97        setTimeout(onReady, 0);98      }99    }100 101    // Resize on window changes (e.g., fonts, layout)102    // No textarea auto-resize needed for <pre> blocks103  })();104</script>105 106 107<style is:global>108  .footer {109    contain: layout style;110    font-size: 0.8em;111    line-height: 1.7em;112    margin-top: 60px;113    margin-bottom: 0;114    border-top: 1px solid rgba(0, 0, 0, 0.1);115    color: rgba(0, 0, 0, 0.5);116  }117 118  .footer-inner {119    max-width: 1280px;120    margin: 0 auto;121    padding: 60px 16px 48px;122    display: grid;123    grid-template-columns: 220px minmax(0, 680px) 260px;124    gap: 32px;125    align-items: start;126  }127 128  /* Use the parent grid (3 columns like .content-grid) */129  .citation-block,130  .references-block,131  .reuse-block,132  .doi-block {133    display: contents;134  }135 136  .citation-block > h3,137  .references-block > h3,138  .reuse-block > h3,139  .doi-block > h3 {140    grid-column: 1;141    font-size: 15px;142    margin: 0;143    text-align: right;144    padding-right: 30px;145  }146 147  .citation-block > :not(h3),148  .references-block > :not(h3),149  .reuse-block > :not(h3),150  .doi-block > :not(h3) {151    grid-column: 2;152  }153 154 155  .citation-block h3 {156    margin: 0 0 8px;157  }158 159  .citation-block h4 {160    margin: 16px 0 8px;161    font-size: 14px;162    text-transform: uppercase;163    color: var(--muted-color);164  }165 166  .citation-block p,167  .reuse-block p,168  .doi-block p,169  .footnotes ol,170  .footnotes ol p,171  .references {172    margin-top: 0;173  }174 175  /* Distill-like appendix citation styling */176  .citation {177    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;178    font-size: 11px;179    line-height: 15px;180    border-left: 1px solid rgba(0, 0, 0, 0.1);181    padding-left: 18px;182    border: 1px solid rgba(0,0,0,0.1);183    background: rgba(0, 0, 0, 0.02);184    padding: 10px 18px;185    border-radius: 3px;186    color: rgba(150, 150, 150, 1);187    overflow: hidden;188    margin-top: -12px;189    white-space: pre-wrap;190    word-wrap: break-word;191  }192 193  .citation a {194    color: rgba(0, 0, 0, 0.6);195    text-decoration: underline;196  }197 198  .citation.short {199    margin-top: -4px;200  }201 202  .references-block h3 {203    margin: 0;204  }205 206  /* Distill-like list styling for references/footnotes */207  .references-block ol {208    padding: 0 0 0 15px;209  }210 211  @media (min-width: 768px) {212    .references-block ol {213      padding: 0 0 0 30px;214      margin-left: -30px;215    }216  }217 218  .references-block li {219    margin-bottom: 1em;220  }221 222  .references-block a {223    color: var(--text-color);224  }225 226  [data-theme="dark"] .footer { border-top-color: rgba(255,255,255,.15); color: rgba(200,200,200,.8); }227  [data-theme="dark"] .citation { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,.15); color: rgba(200,200,200,1); }228[data-theme="dark"] .citation a { color: rgba(255,255,255,0.75); }229 230 231  /* Footer links: use primary color consistently */232  .footer a {233    color: var(--primary-color);234    border-bottom: 1px solid var(--link-underline);235    text-decoration: none;236  }237  .footer a:hover {238    color: var(--primary-color-hover);239    border-bottom-color: var(--link-underline-hover);240  }241  [data-theme="dark"] .footer a {242    color: var(--primary-color);243  }244</style>245