lerobot/robot-learning-tutorial

1---2 3---4 5<div class="sidenote-container">6  <aside class="sidenote">7    <slot />8  </aside>9</div>10 11<script>12  document.addEventListener("DOMContentLoaded", () => {13    const containers = document.querySelectorAll(".sidenote-container");14 15    containers.forEach((container) => {16      // Find the previous element (sibling just before)17      const previousElement = container.previousElementSibling as HTMLElement;18 19      if (previousElement && previousElement.parentNode) {20        // Create a wrapper div that will contain both the previous element and the sidenote21        const wrapper = document.createElement("div");22        wrapper.className = "sidenote-wrapper";23 24        // Insert the wrapper before the previous element25        previousElement.parentNode.insertBefore(wrapper, previousElement);26 27        // Move both the previous element and the sidenote container into the wrapper28        wrapper.appendChild(previousElement);29        wrapper.appendChild(container);30 31        // Style the wrapper to create the layout32        wrapper.style.position = "relative";33        wrapper.style.display = "block";34 35        // Style the sidenote container so it positions correctly36        const sidenoteContainer = container as HTMLElement;37        sidenoteContainer.style.position = "absolute";38        sidenoteContainer.style.top = "0";39        sidenoteContainer.style.right = "-292px"; // 260px width + 32px gap40        sidenoteContainer.style.width = "260px";41 42        // Display the container with a fade-in43        sidenoteContainer.style.display = "block";44        sidenoteContainer.style.opacity = "0";45 46        // Fade-in with transition47        setTimeout(() => {48          sidenoteContainer.style.opacity = "1";49        }, 10);50      }51    });52  });53</script>54 55<style is:global>56  .sidenote-wrapper {57    /* Le wrapper contient l'élément original et le sidenote */58    position: relative;59    display: block;60  }61 62  .sidenote-container {63    /* Caché par défaut, sera affiché par JS */64    display: none;65    margin: 0;66    /* Transition for fade-in */67    transition: opacity 0.3s ease-in-out;68  }69 70  .sidenote {71    border-radius: 8px;72    padding: 0 30px;73    font-size: 0.9rem;74    color: var(--muted-color);75    margin: 0;76  }77 78  @media (--bp-content-collapse) {79    .sidenote-wrapper {80      /* Sur mobile, le wrapper n'a pas besoin de position relative */81      position: static !important;82    }83 84    .sidenote-container {85      position: static !important;86      width: auto !important;87      right: auto !important;88      top: auto !important;89      margin-top: 8px;90      /* Affichage normal sur mobile */91      display: block !important;92      opacity: 1 !important;93    }94 95    .sidenote {96      padding: 0;97    }98  }99</style>100