update multi images

app/scripts/latex-to-mdx/mdx-converter.mjs

@@ -123,6 +123,104 @@ function addComponentImports(content) {
 }
 
 
+/**
+ * Convert grouped figures (subfigures) to MultiImage components
+ * @param {string} content - MDX content
+ * @returns {string} - Content with MultiImage components for grouped figures
+ */
+function convertSubfiguresToMultiImage(content) {
+    console.log('  🖼️✨ Converting subfigures to MultiImage components...');
+
+    let convertedCount = 0;
+
+    // Pattern to match: <figure> containing multiple <figure> elements with a global caption
+    // This matches the LaTeX subfigure pattern that gets converted by Pandoc
+    const subfigureGroupPattern = /<figure>\s*((?:<figure>[\s\S]*?<\/figure>\s*){2,})<figcaption>([\s\S]*?)<\/figcaption>\s*<\/figure>/g;
+
+    const convertedContent = content.replace(subfigureGroupPattern, (match, figuresMatch, globalCaption) => {
+        convertedCount++;
+
+        // Extract individual figures within the group
+        // This pattern is more flexible to handle variations in HTML structure
+        const individualFigurePattern = /<figure>\s*<img src="([^"]*)"[^>]*\/>\s*<p>&lt;span id="([^"]*)"[^&]*&gt;&lt;\/span&gt;<\/p>\s*<figcaption>([\s\S]*?)<\/figcaption>\s*<\/figure>/g;
+
+        const images = [];
+        let figureMatch;
+
+        while ((figureMatch = individualFigurePattern.exec(figuresMatch)) !== null) {
+            const [, src, id, caption] = figureMatch;
+
+            // Clean the source path (similar to existing transformImages function)
+            const cleanSrc = src.replace(/.*\/output\/assets\//, './assets/')
+                .replace(/\/Users\/[^\/]+\/[^\/]+\/[^\/]+\/[^\/]+\/[^\/]+\/app\/scripts\/latex-to-markdown\/output\/assets\//, './assets/');
+
+            // Clean caption text (remove HTML, normalize whitespace)
+            const cleanCaption = caption
+                .replace(/<[^>]*>/g, '')
+                .replace(/\n/g, ' ')
+                .replace(/\s+/g, ' ')
+                .replace(/'/g, "\\'")
+                .trim();
+
+            // Generate alt text from caption
+            const altText = cleanCaption.length > 100
+                ? cleanCaption.substring(0, 100) + '...'
+                : cleanCaption;
+
+            // Generate variable name for import
+            const varName = generateImageVarName(cleanSrc);
+            imageImports.set(cleanSrc, varName);
+
+            images.push({
+                src: varName,
+                alt: altText,
+                caption: cleanCaption,
+                id: id
+            });
+        }
+
+        // Clean global caption
+        const cleanGlobalCaption = globalCaption
+            .replace(/<[^>]*>/g, '')
+            .replace(/\n/g, ' ')
+            .replace(/\s+/g, ' ')
+            .replace(/'/g, "\\'")
+            .trim();
+
+        // Mark MultiImage component as used
+        usedComponents.add('MultiImage');
+
+        // Determine layout based on number of images
+        let layout = 'auto';
+        if (images.length === 2) layout = '2-column';
+        else if (images.length === 3) layout = '3-column';
+        else if (images.length === 4) layout = '4-column';
+
+        // Generate MultiImage component
+        const imagesJson = images.map(img =>
+            `    {\n      src: ${img.src},\n      alt: "${img.alt}",\n      caption: "${img.caption}",\n      id: "${img.id}"\n    }`
+        ).join(',\n');
+
+        return `<MultiImage
+  images={[
+${imagesJson}
+  ]}
+  layout="${layout}"
+  zoomable
+  downloadable
+  caption="${cleanGlobalCaption}"
+/>`;
+    });
+
+    if (convertedCount > 0) {
+        console.log(`    ✅ Converted ${convertedCount} subfigure group(s) to MultiImage component(s)`);
+    } else {
+        console.log('    ℹ️  No subfigure groups found');
+    }
+
+    return convertedContent;
+}
+
 /**
  * Transform images to ResponsiveImage components
  * @param {string} content - MDX content
@@ -724,6 +822,7 @@ function processMdxContent(content, latexContent = '') {
     processedContent = formatDisplayMathBlocks(processedContent);
     processedContent = removeHtmlComments(processedContent);
     processedContent = cleanMdxSyntax(processedContent);
+    processedContent = convertSubfiguresToMultiImage(processedContent);
     processedContent = transformImages(processedContent);
     processedContent = transformStyledSpans(processedContent);
     processedContent = transformReferenceLinks(processedContent);

app/scripts/latex-to-mdx/output/main.mdx

@@ -18,15 +18,16 @@ published: "Sep 18, 2025"
 tableOfContentsAutoCollapse: true
 ---
 
+import MultiImage from '../components/MultiImage.astro';
 import ResponsiveImage from '../components/ResponsiveImage.astro';
+import ch2_planar_manipulator_free from './assets/image/figures/ch2/ch2-planar-manipulator-free.png';
+import ch2_planar_manipulator_floor from './assets/image/figures/ch2/ch2-planar-manipulator-floor.png';
+import ch2_planar_manipulator_floor_shelf from './assets/image/figures/ch2/ch2-planar-manipulator-floor-shelf.png';
 import ch1_lerobot_figure1 from './assets/image/figures/ch1/ch1-lerobot-figure1.png';
 import ch2_approaches from './assets/image/figures/ch2/ch2-approaches.png';
 import ch2_platforms from './assets/image/figures/ch2/ch2-platforms.png';
 import ch2_cost_accessibility from './assets/image/figures/ch2/ch2-cost-accessibility.png';
 import ch2_so100_to_planar_manipulator from './assets/image/figures/ch2/ch2-so100-to-planar-manipulator.png';
-import ch2_planar_manipulator_free from './assets/image/figures/ch2/ch2-planar-manipulator-free.png';
-import ch2_planar_manipulator_floor from './assets/image/figures/ch2/ch2-planar-manipulator-floor.png';
-import ch2_planar_manipulator_floor_shelf from './assets/image/figures/ch2/ch2-planar-manipulator-floor-shelf.png';
 import ch2_planar_manipulator_floor_box from './assets/image/figures/ch2/ch2-planar-manipulator-floor-box.png';
 import ch2_classical_limitations from './assets/image/figures/ch2/ch2-classical-limitations.png';
 import ch3_learning_benefits from './assets/image/figures/ch3/ch3-learning-benefits.png';
@@ -304,42 +305,32 @@ Further, let us make the simplifying assumption that actuators can produce rotat
 
 All these simplifying assumptions leave us with the planar manipulator of Figure <a href="#planar-manipulation-simple" data-reference-type="ref" data-reference="planar-manipulation-simple">[planar-manipulation-simple]</a>, free of moving its end-effector by controlling the angles $\theta_1$ and $\theta_2$, jointly referred to as the robot’s *configuration*, and indicated with $q = [\theta_1, \theta_2 ] \in [-\pi, +\pi]^2$. The axis attached to the joints indicate the associated reference frame, whereas circular arrows indicate the maximal feasible rotation allowed at each joint. In this tutorial, we do not cover topics related to spatial algebra, and we instead refer the reader to and for excellent explanations of the mechanics and theoretical foundations of producing motion on rigid bodies.
 
-<figure>
-<figure>
-<ResponsiveImage
-  src={ch2_planar_manipulator_free}
+<MultiImage
+  images={[
+    {
+      src: ch2_planar_manipulator_free,
+      alt: "Free to move",
+      caption: "Free to move",
+      id: "planar-manipulation-simple"
+    },
+    {
+      src: ch2_planar_manipulator_floor,
+      alt: "Constrained by the surface",
+      caption: "Constrained by the surface",
+      id: "planar-manipulator-floor"
+    },
+    {
+      src: ch2_planar_manipulator_floor_shelf,
+      alt: "Constrained by surface and (fixed) obstacle",
+      caption: "Constrained by surface and (fixed) obstacle",
+      id: "planar-manipulator-floor-shelf"
+    }
+  ]}
+  layout="3-column"
   zoomable
   downloadable
-  layout="fixed"
-  alt="Figure"
+  caption="Planar, 2-dof schematic representation of the SO-100 manipulator under diverse deployment settings. From left to right: completely free of moving; constrained by the presence of the surface; constrained by the surface and presence of obstacles. Circular arrows around each joint indicate the maximal rotation feasible at that joint."
 />
-<span id="planar-manipulation-simple" style="position: absolute;"></span>
-<figcaption>Free to move</figcaption>
-</figure>
-<figure>
-<ResponsiveImage
-  src={ch2_planar_manipulator_floor}
-  zoomable
-  downloadable
-  layout="fixed"
-  alt="Figure"
-/>
-<span id="planar-manipulator-floor" style="position: absolute;"></span>
-<figcaption>Constrained by the surface</figcaption>
-</figure>
-<figure>
-<ResponsiveImage
-  src={ch2_planar_manipulator_floor_shelf}
-  zoomable
-  downloadable
-  layout="fixed"
-  alt="Figure"
-/>
-<span id="planar-manipulator-floor-shelf" style="position: absolute;"></span>
-<figcaption>Constrained by surface and (fixed) obstacle</figcaption>
-</figure>
-<figcaption>Planar, 2-dof schematic representation of the SO-100 manipulator under diverse deployment settings. From left to right: completely free of moving; constrained by the presence of the surface; constrained by the surface and presence of obstacles. Circular arrows around each joint indicate the maximal rotation feasible at that joint.</figcaption>
-</figure>
 
 Considering the (toy) example presented in Figure <a href="#planar-manipulation-simple" data-reference-type="ref" data-reference="planar-manipulation-simple">[planar-manipulation-simple]</a>, then we can analytically write the end-effector’s position $p \in \mathbb R^2$ as a function of the robot’s configuration, $p = p(q), p: \mathcal Q \mapsto \mathbb R^2$. In particular, we have: $p(q) = \begin{pmatrix} p_x(\theta_1, \theta_2) \\ p_y(\theta_1, \theta_2) \end{pmatrix} = \begin{pmatrix} l \cos(\theta_1) + l \cos(\theta_1 + \theta_2) \\ l \sin(\theta_1) + l \sin(\theta_1 + \theta_2) \end{pmatrix} \in S^{n=2}_{l_1+l_2} = \{ p(q) \in \mathbb R^2: \Vert p(q) \Vert_2^2 \leq (2l)^2, \ \forall q \in \mathcal Q \}$
 

app/src/components/MultiImage.astro

@@ -0,0 +1,233 @@
+---
+// @ts-ignore - types provided by Astro at runtime
+import ResponsiveImage from "./ResponsiveImage.astro";
+
+interface ImageItem {
+    /** Source image imported via astro:assets */
+    src: any;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Individual caption for this image */
+    caption?: string;
+    /** Optional individual image ID for referencing */
+    id?: string;
+    /** Enable zoom on this specific image (defaults to parent zoomable setting) */
+    zoomable?: boolean;
+    /** Enable download on this specific image (defaults to parent downloadable setting) */
+    downloadable?: boolean;
+}
+
+interface Props {
+    /** Array of images to display */
+    images: ImageItem[];
+    /** Global caption for the entire figure */
+    caption?: string;
+    /** Layout mode: number of columns or 'auto' for responsive */
+    layout?: "2-column" | "3-column" | "4-column" | "auto";
+    /** Enable medium-zoom behavior on all images (can be overridden per image) */
+    zoomable?: boolean;
+    /** Show download buttons on all images (can be overridden per image) */
+    downloadable?: boolean;
+    /** Optional class to apply on the wrapper */
+    class?: string;
+    /** Optional global ID for the multi-image figure */
+    id?: string;
+}
+
+const {
+    images,
+    caption,
+    layout = "3-column",
+    zoomable = false,
+    downloadable = false,
+    class: className,
+    id,
+} = Astro.props as Props;
+
+const hasCaptionSlot = Astro.slots.has("caption");
+const hasCaption =
+    hasCaptionSlot || (typeof caption === "string" && caption.length > 0);
+const uid = `mi_${Math.random().toString(36).slice(2)}`;
+
+// Generate CSS grid columns based on layout
+const getGridColumns = () => {
+    switch (layout) {
+        case "2-column":
+            return "repeat(2, 1fr)";
+        case "3-column":
+            return "repeat(3, 1fr)";
+        case "4-column":
+            return "repeat(4, 1fr)";
+        case "auto":
+            return "repeat(auto-fit, minmax(200px, 1fr))";
+        default:
+            return "repeat(3, 1fr)";
+    }
+};
+
+const gridColumns = getGridColumns();
+---
+
+<div
+    class={`multi-image ${className || ""}`}
+    data-mi-root={uid}
+    data-layout={layout}
+    {id}
+>
+    {
+        hasCaption ? (
+            <figure class="multi-image-figure">
+                <div
+                    class="multi-image-grid"
+                    style={`grid-template-columns: ${gridColumns}`}
+                >
+                    {images.map((image, index) => (
+                        <div class="multi-image-item">
+                            <ResponsiveImage
+                                src={image.src}
+                                alt={image.alt}
+                                zoomable={image.zoomable ?? zoomable}
+                                downloadable={
+                                    image.downloadable ?? downloadable
+                                }
+                                class="multi-image-img"
+                            />
+                            {image.caption && (
+                                <div class="multi-image-subcaption">
+                                    {image.caption}
+                                </div>
+                            )}
+                            {image.id && (
+                                <span
+                                    id={image.id}
+                                    style="position: absolute;"
+                                />
+                            )}
+                        </div>
+                    ))}
+                </div>
+                <figcaption class="multi-image-caption">
+                    {hasCaptionSlot ? (
+                        <slot name="caption" />
+                    ) : (
+                        caption && <span set:html={caption} />
+                    )}
+                </figcaption>
+            </figure>
+        ) : (
+            <div
+                class="multi-image-grid"
+                style={`grid-template-columns: ${gridColumns}`}
+            >
+                {images.map((image, index) => (
+                    <div class="multi-image-item">
+                        <ResponsiveImage
+                            src={image.src}
+                            alt={image.alt}
+                            zoomable={image.zoomable ?? zoomable}
+                            downloadable={image.downloadable ?? downloadable}
+                            class="multi-image-img"
+                        />
+                        {image.caption && (
+                            <div class="multi-image-subcaption">
+                                {image.caption}
+                            </div>
+                        )}
+                        {image.id && (
+                            <span id={image.id} style="position: absolute;" />
+                        )}
+                    </div>
+                ))}
+            </div>
+        )
+    }
+</div>
+
+<style>
+    .multi-image {
+        margin: var(--block-spacing-y) 0;
+    }
+
+    .multi-image-figure {
+        margin: 0;
+    }
+
+    .multi-image-grid {
+        display: grid;
+        gap: 1rem;
+        align-items: start;
+    }
+
+    .multi-image-item {
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .multi-image-item :global(.ri-root) {
+        margin: 0;
+    }
+
+    .multi-image-item :global(figure) {
+        margin: 0;
+    }
+
+    .multi-image-img {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+    }
+
+    .multi-image-subcaption {
+        font-size: 0.85rem;
+        color: var(--muted-color);
+        margin-top: 0.5rem;
+        line-height: 1.4;
+    }
+
+    .multi-image-caption {
+        text-align: left;
+        font-size: 0.9rem;
+        color: var(--muted-color);
+        margin-top: 1rem;
+        line-height: 1.4;
+    }
+
+    /* Responsive behavior */
+    @media (max-width: 768px) {
+        .multi-image-grid[style*="repeat(3, 1fr)"],
+        .multi-image-grid[style*="repeat(4, 1fr)"] {
+            grid-template-columns: 1fr !important;
+            gap: 1.5rem;
+        }
+
+        .multi-image-grid[style*="repeat(2, 1fr)"] {
+            grid-template-columns: 1fr !important;
+            gap: 1.5rem;
+        }
+    }
+
+    @media (min-width: 769px) and (max-width: 1024px) {
+        .multi-image-grid[style*="repeat(4, 1fr)"] {
+            grid-template-columns: repeat(2, 1fr) !important;
+        }
+    }
+
+    /* Equal height images when desired */
+    .multi-image[data-layout*="column"] .multi-image-item :global(img) {
+        height: 200px;
+        object-fit: contain;
+    }
+
+    /* Auto layout gets flexible heights */
+    .multi-image[data-layout="auto"] .multi-image-item :global(img) {
+        height: auto;
+    }
+
+    /* Ensure images maintain aspect ratio */
+    .multi-image-item :global(img) {
+        max-width: 100%;
+        display: block;
+        margin: 0 auto;
+    }
+</style>

app/src/content/article.mdx

@@ -18,15 +18,16 @@ published: "Sep 18, 2025"
 tableOfContentsAutoCollapse: true
 ---
 
+import MultiImage from '../components/MultiImage.astro';
 import ResponsiveImage from '../components/ResponsiveImage.astro';
+import ch2_planar_manipulator_free from './assets/image/figures/ch2/ch2-planar-manipulator-free.png';
+import ch2_planar_manipulator_floor from './assets/image/figures/ch2/ch2-planar-manipulator-floor.png';
+import ch2_planar_manipulator_floor_shelf from './assets/image/figures/ch2/ch2-planar-manipulator-floor-shelf.png';
 import ch1_lerobot_figure1 from './assets/image/figures/ch1/ch1-lerobot-figure1.png';
 import ch2_approaches from './assets/image/figures/ch2/ch2-approaches.png';
 import ch2_platforms from './assets/image/figures/ch2/ch2-platforms.png';
 import ch2_cost_accessibility from './assets/image/figures/ch2/ch2-cost-accessibility.png';
 import ch2_so100_to_planar_manipulator from './assets/image/figures/ch2/ch2-so100-to-planar-manipulator.png';
-import ch2_planar_manipulator_free from './assets/image/figures/ch2/ch2-planar-manipulator-free.png';
-import ch2_planar_manipulator_floor from './assets/image/figures/ch2/ch2-planar-manipulator-floor.png';
-import ch2_planar_manipulator_floor_shelf from './assets/image/figures/ch2/ch2-planar-manipulator-floor-shelf.png';
 import ch2_planar_manipulator_floor_box from './assets/image/figures/ch2/ch2-planar-manipulator-floor-box.png';
 import ch2_classical_limitations from './assets/image/figures/ch2/ch2-classical-limitations.png';
 import ch3_learning_benefits from './assets/image/figures/ch3/ch3-learning-benefits.png';
@@ -304,42 +305,32 @@ Further, let us make the simplifying assumption that actuators can produce rotat
 
 All these simplifying assumptions leave us with the planar manipulator of Figure <a href="#planar-manipulation-simple" data-reference-type="ref" data-reference="planar-manipulation-simple">[planar-manipulation-simple]</a>, free of moving its end-effector by controlling the angles $\theta_1$ and $\theta_2$, jointly referred to as the robot’s *configuration*, and indicated with $q = [\theta_1, \theta_2 ] \in [-\pi, +\pi]^2$. The axis attached to the joints indicate the associated reference frame, whereas circular arrows indicate the maximal feasible rotation allowed at each joint. In this tutorial, we do not cover topics related to spatial algebra, and we instead refer the reader to and for excellent explanations of the mechanics and theoretical foundations of producing motion on rigid bodies.
 
-<figure>
-<figure>
-<ResponsiveImage
-  src={ch2_planar_manipulator_free}
+<MultiImage
+  images={[
+    {
+      src: ch2_planar_manipulator_free,
+      alt: "Free to move",
+      caption: "Free to move",
+      id: "planar-manipulation-simple"
+    },
+    {
+      src: ch2_planar_manipulator_floor,
+      alt: "Constrained by the surface",
+      caption: "Constrained by the surface",
+      id: "planar-manipulator-floor"
+    },
+    {
+      src: ch2_planar_manipulator_floor_shelf,
+      alt: "Constrained by surface and (fixed) obstacle",
+      caption: "Constrained by surface and (fixed) obstacle",
+      id: "planar-manipulator-floor-shelf"
+    }
+  ]}
+  layout="3-column"
   zoomable
   downloadable
-  layout="fixed"
-  alt="Figure"
+  caption="Planar, 2-dof schematic representation of the SO-100 manipulator under diverse deployment settings. From left to right: completely free of moving; constrained by the presence of the surface; constrained by the surface and presence of obstacles. Circular arrows around each joint indicate the maximal rotation feasible at that joint."
 />
-<span id="planar-manipulation-simple" style="position: absolute;"></span>
-<figcaption>Free to move</figcaption>
-</figure>
-<figure>
-<ResponsiveImage
-  src={ch2_planar_manipulator_floor}
-  zoomable
-  downloadable
-  layout="fixed"
-  alt="Figure"
-/>
-<span id="planar-manipulator-floor" style="position: absolute;"></span>
-<figcaption>Constrained by the surface</figcaption>
-</figure>
-<figure>
-<ResponsiveImage
-  src={ch2_planar_manipulator_floor_shelf}
-  zoomable
-  downloadable
-  layout="fixed"
-  alt="Figure"
-/>
-<span id="planar-manipulator-floor-shelf" style="position: absolute;"></span>
-<figcaption>Constrained by surface and (fixed) obstacle</figcaption>
-</figure>
-<figcaption>Planar, 2-dof schematic representation of the SO-100 manipulator under diverse deployment settings. From left to right: completely free of moving; constrained by the presence of the surface; constrained by the surface and presence of obstacles. Circular arrows around each joint indicate the maximal rotation feasible at that joint.</figcaption>
-</figure>
 
 Considering the (toy) example presented in Figure <a href="#planar-manipulation-simple" data-reference-type="ref" data-reference="planar-manipulation-simple">[planar-manipulation-simple]</a>, then we can analytically write the end-effector’s position $p \in \mathbb R^2$ as a function of the robot’s configuration, $p = p(q), p: \mathcal Q \mapsto \mathbb R^2$. In particular, we have: $p(q) = \begin{pmatrix} p_x(\theta_1, \theta_2) \\ p_y(\theta_1, \theta_2) \end{pmatrix} = \begin{pmatrix} l \cos(\theta_1) + l \cos(\theta_1 + \theta_2) \\ l \sin(\theta_1) + l \sin(\theta_1 + \theta_2) \end{pmatrix} \in S^{n=2}_{l_1+l_2} = \{ p(q) \in \mathbb R^2: \Vert p(q) \Vert_2^2 \leq (2l)^2, \ \forall q \in \mathcal Q \}$