lerobot/robot-learning-tutorial

1---2interface Props { src: string; title?: string; desc?: string; frameless?: boolean; align?: 'left' | 'center' | 'right'; id?: string, data?: string | string[], config?: any }3const { src, title, desc, frameless = false, align = 'left', id, data, config } = Astro.props as Props;4 5// Load all .html embeds under src/content/embeds/** as strings (dev & build)6const embeds = (import.meta as any).glob('../content/embeds/**/*.html', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;7 8function resolveFragment(requested: string): string | null {9  // Allow both "banner.html" and "embeds/banner.html"10  const needle = requested.replace(/^\/*/, '');11  for (const [key, html] of Object.entries(embeds)) {12    if (key.endsWith('/' + needle) || key.endsWith('/' + needle.replace(/^embeds\//, ''))) {13      return html;14    }15  }16  return null;17}18 19const html = resolveFragment(src);20const mountId = `frag-${Math.random().toString(36).slice(2)}`;21const dataAttr = Array.isArray(data) ? JSON.stringify(data) : (typeof data === 'string' ? data : undefined);22const configAttr = typeof config === 'string' ? config : (config != null ? JSON.stringify(config) : undefined);23 24// Apply the ID to the HTML content if provided25const htmlWithId = id && html ? html.replace(/<div class="([^"]*)"[^>]*>/, `<div class="$1" id="${id}">`) : html;26---27{ html ? (28  <figure class="html-embed" id={id}>29    {title && <figcaption class="html-embed__title" style={`text-align:${align}`}>{title}</figcaption>}30    <div class={`html-embed__card${frameless ? ' is-frameless' : ''}`}>31      <div id={mountId} data-datafiles={dataAttr} data-config={configAttr} set:html={htmlWithId} />32    </div>33    {desc && <figcaption class="html-embed__desc" style={`text-align:${align}`} set:html={desc}></figcaption>}34  </figure>35 ) : (36  <div><!-- Fragment not found: {src} --></div>37 ) }38 39 40 41<script>42  // Re-execute <script> tags inside the injected fragment (innerHTML doesn't run scripts)43  const scriptEl = document.currentScript;44  const mount = scriptEl ? scriptEl.previousElementSibling : null;45  const execute = () => {46    if (!mount) return;47    const scripts = mount.querySelectorAll('script');48    scripts.forEach(old => {49      // ignore non-executable types (e.g., application/json)50      if (old.type && old.type !== 'text/javascript' && old.type !== 'module' && old.type !== '') return;51      if (old.dataset.executed === 'true') return;52      old.dataset.executed = 'true';53      if (old.src) {54        const s = document.createElement('script');55        Array.from(old.attributes).forEach(attr => s.setAttribute(attr.name, attr.value));56        document.body.appendChild(s);57      } else {58        try {59          // run inline60          (0, eval)(old.text || '');61        } catch (e) {62          console.error('HtmlEmbed inline script error:', e);63        }64      }65    });66  };67  // Execute after DOM is parsed (ensures deferred module scripts are executed first)68  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', execute, { once: true });69  else execute();70  </script>71 72<style is:global>73  .html-embed { margin: 0 0 var(--block-spacing-y);74    z-index: var(--z-elevated);75    position: relative;76  }77  .html-embed__title { 78    text-align: left; 79    font-weight: 600; 80    font-size: 0.95rem; 81    color: var(--text-color);82    margin: 0;83    padding: 0;84    padding-bottom: var(--spacing-1);85    position: relative;86    display: block;87    width: 100%;88    background: var(--page-bg);89    z-index: var(--z-elevated);90  }91  .html-embed__card {92    background: var(--code-bg);93    border: 1px solid var(--border-color);94    border-radius: 10px;95    padding: 24px;96    z-index: calc(var(--z-elevated) + 1);97    position: relative;98  }99  .html-embed__card.is-frameless {100    background: transparent;101    border-color: transparent;102    padding: 0;103  }104  .html-embed__desc { 105    text-align: left; 106    font-size: 0.9rem; 107    color: var(--muted-color); 108    margin: 0; 109    padding: 0;110    padding-top: var(--spacing-1);111    position: relative;112    z-index: var(--z-elevated);113    display: block;114    width: 100%;115    background: var(--page-bg);116  }117  /* Plotly – fragments & controls */118  .html-embed__card svg text { fill: var(--text-color); }119  .html-embed__card label { color: var(--text-color); }120  .plotly-graph-div { width: 100%; min-height: 320px; }121  @media (max-width: 768px) { .plotly-graph-div { min-height: 260px; } }122  [id^="plot-"] { display: flex; flex-direction: column; align-items: center; gap: 15px; }123  .plotly_caption { font-style: italic; margin-top: 10px; }124  .plotly_controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }125  .plotly_input_container { display: flex; align-items: center; flex-direction: column; gap: 10px; }126  .plotly_input_container > select { padding: 2px 4px; line-height: 1.5em; text-align: center; border-radius: 4px; font-size: 12px; background-color: var(--neutral-200); outline: none; border: 1px solid var(--neutral-300); }127  .plotly_slider { display: flex; align-items: center; gap: 10px; }128  .plotly_slider > input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; background: var(--neutral-400); border-radius: 5px; outline: none; }129  .plotly_slider > input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; }130  .plotly_slider > input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; }131  .plotly_slider > span { font-size: 14px; line-height: 1.6em; min-width: 16px; }132  /* Dark mode overrides for Plotly readability */133  [data-theme="dark"] .html-embed__card:not(.is-frameless) { background: #12151b; border-color: rgba(255,255,255,.15); }134  [data-theme="dark"] .html-embed__card .xaxislayer-above text,135  [data-theme="dark"] .html-embed__card .yaxislayer-above text,136  [data-theme="dark"] .html-embed__card .infolayer text,137  [data-theme="dark"] .html-embed__card .legend text,138  [data-theme="dark"] .html-embed__card .annotation text,139  [data-theme="dark"] .html-embed__card .colorbar text,140  [data-theme="dark"] .html-embed__card .hoverlayer text { fill: #fff !important; }141  [data-theme="dark"] .html-embed__card .xaxislayer-above path,142  [data-theme="dark"] .html-embed__card .yaxislayer-above path,143  [data-theme="dark"] .html-embed__card .xlines-above,144  [data-theme="dark"] .html-embed__card .ylines-above { stroke: rgba(255,255,255,.35) !important; }145  [data-theme="dark"] .html-embed__card .gridlayer path { stroke: rgba(255,255,255,.15) !important; }146  [data-theme="dark"] .html-embed__card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }147  [data-theme="dark"] .html-embed__card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; }148  [data-theme="dark"] .html-embed__card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }149  @media print {150    .html-embed, .html-embed__card { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }151    .html-embed__card { padding: 6px; }152    .html-embed__card.is-frameless { padding: 0; }153    .html-embed__card svg,154    .html-embed__card canvas,155    .html-embed__card img { max-width: 100% !important; height: auto !important; }156    .html-embed__card > div[id^="frag-"] { width: 100% !important; }157  }158  @media print {159    /* Avoid breaks inside embeds */160    .html-embed, .html-embed__card { break-inside: avoid; page-break-inside: avoid; }161    /* Constrain width and scale inner content */162    .html-embed, .html-embed__card { max-width: 100% !important; width: 100% !important; }163    .html-embed__card { padding: 6px; }164    .html-embed__card.is-frameless { padding: 0; }165    .html-embed__card svg,166    .html-embed__card canvas,167    .html-embed__card img,168    .html-embed__card video,169    .html-embed__card iframe { max-width: 100% !important; height: auto !important; }170    .html-embed__card > div[id^="frag-"] { width: 100% !important; max-width: 100% !important; }171    /* Center and constrain the banner (galaxy) when printing */172    .html-embed .d3-galaxy { width: 100% !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }173  }174</style>175 176 177