add stack and glossary | remove multi image ( replaced by stack ) | update doc

app/.astro/settings.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5cd907e18678e90f342986642cb5fcdca79f1c4a61fe1d75caa2df036e69070e
+oid sha256:2698c64dc5f43414f1e5c9baf32bc19408ed3ef10b9d21165027ec49d593a35b
 size 58

app/src/components/Hero.astro

@@ -91,58 +91,33 @@ const pdfBase = titleRaw ? stripHtml(titleRaw) : stripHtml(title);
 const pdfFilename = `${slugify(pdfBase)}.pdf`;
 ---
 
-<section class="w-full pt-12 pb-4 px-4 text-center">
-  <h1
-    class="text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight m-0 mb-2 max-w-full mx-auto"
-    set:html={title}
-  />
-  <div class="max-w-4xl mx-auto">
+<section class="hero">
+  <h1 class="hero-title" set:html={title} />
+  <div class="hero-banner">
     <HtmlEmbed src="banner.html" frameless />
-    {
-      description && (
-        <p class="text-gray-500 dark:text-gray-400 italic m-0 mb-4">
-          {description}
-        </p>
-      )
-    }
+    {description && <p class="hero-desc">{description}</p>}
   </div>
 </section>
 
-<header
-  class="border-t border-b border-gray-200 dark:border-gray-700 py-4 text-sm"
-  aria-label="Article meta information"
->
-  <div
-    class="max-w-4xl mx-auto flex flex-row justify-between px-4 gap-2 md:flex md:gap-2 max-md:flex-wrap"
-  >
+<header class="meta" aria-label="Article meta information">
+  <div class="meta-container">
     {
       normalizedAuthors.length > 0 && (
-        <div class="meta-cell flex flex-col gap-2 max-w-64 md:min-w-0 max-xs:text-center">
-          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
-            Author{normalizedAuthors.length > 1 ? "s" : ""}
-          </h3>
-          <ul class="m-0 list-none p-0 flex flex-wrap">
+        <div class="meta-container-cell">
+          <h3>Author{normalizedAuthors.length > 1 ? "s" : ""}</h3>
+          <ul class="authors">
             {normalizedAuthors.map((a, i) => {
               const supers =
                 shouldShowAffiliationSupers &&
                 Array.isArray(a.affiliationIndices) &&
                 a.affiliationIndices.length ? (
-                  <sup>{a.affiliationIndices.join(",")}</sup>
+                  <sup>{a.affiliationIndices.join(", ")}</sup>
                 ) : null;
               return (
-                <li class="whitespace-nowrap mr-1">
-                  {a.url ? (
-                    <a
-                      href={a.url}
-                      class="text-blue-600 dark:text-blue-400 underline underline-offset-2 decoration-1 decoration-blue-300 dark:decoration-blue-500 hover:decoration-blue-500 dark:hover:decoration-blue-400 transition-colors duration-150"
-                    >
-                      {a.name}
-                    </a>
-                  ) : (
-                    a.name
-                  )}
+                <li>
+                  {a.url ? <a href={a.url}>{a.name}</a> : a.name}
                   {supers}
-                  {i < normalizedAuthors.length - 1 && ", "}
+                  {i < normalizedAuthors.length - 1 && <span set:html=",&nbsp;" />}
                 </li>
               );
             })}
@@ -152,21 +127,14 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     }
     {
       Array.isArray(affiliations) && affiliations.length > 0 && (
-        <div class="meta-cell flex flex-col gap-2 max-w-64 max-md:text-right md:min-w-0 max-xs:text-center">
-          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
-            Affiliation{affiliations.length > 1 ? "s" : ""}
-          </h3>
+        <div class="meta-container-cell meta-container-cell--affiliations">
+          <h3>Affiliation{affiliations.length > 1 ? "s" : ""}</h3>
           {hasMultipleAffiliations ? (
-            <ol class="m-0 pl-5 max-xs:list-inside max-xs:pl-0 max-xs:ml-0">
+            <ol class="affiliations">
               {affiliations.map((af) => (
-                <li value={af.id} class="m-0 max-xs:text-center">
+                <li value={af.id}>
                   {af.url ? (
-                    <a
-                      href={af.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-blue-600 dark:text-blue-400 underline underline-offset-2 decoration-1 decoration-blue-300 dark:decoration-blue-500 hover:decoration-blue-500 dark:hover:decoration-blue-400 transition-colors duration-150"
-                    >
+                    <a href={af.url} target="_blank" rel="noopener noreferrer">
                       {af.name}
                     </a>
                   ) : (
@@ -176,13 +144,12 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
               ))}
             </ol>
           ) : (
-            <p class="m-0">
+            <p>
               {affiliations[0]?.url ? (
                 <a
                   href={affiliations[0].url}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="text-blue-600 dark:text-blue-400 underline underline-offset-2 decoration-1 decoration-blue-300 dark:decoration-blue-500 hover:decoration-blue-500 dark:hover:decoration-blue-400 transition-colors duration-150"
                 >
                   {affiliations[0].name}
                 </a>
@@ -196,21 +163,17 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     }
     {
       (!affiliations || affiliations.length === 0) && affiliation && (
-        <div class="meta-cell flex flex-col gap-2 max-w-64 max-md:text-right md:min-w-0 max-xs:text-center">
-          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
-            Affiliation
-          </h3>
-          <p class="m-0">{affiliation}</p>
+        <div class="meta-container-cell meta-container-cell--affiliations">
+          <h3>Affiliation</h3>
+          <p>{affiliation}</p>
         </div>
       )
     }
     {
       published && (
-        <div class="meta-cell flex flex-col gap-2 max-w-64 md:min-w-0 max-xs:text-center">
-          <h3 class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide">
-            Published
-          </h3>
-          <p class="m-0">{published}</p>
+        <div class="meta-container-cell meta-container-cell--published">
+          <h3>Published</h3>
+          <p>{published}</p>
         </div>
       )
     }
@@ -220,17 +183,11 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
         <p><a href={`https://doi.org/${doi}`} target="_blank" rel="noopener noreferrer">{doi}</a></p>
       </div>
     )} -->
-    <div
-      class="meta-cell flex flex-col gap-2 max-w-64 max-md:text-right md:min-w-0 max-xs:text-center"
-    >
-      <h3
-        class="m-0 text-xs font-normal text-gray-500 dark:text-gray-400 uppercase tracking-wide"
-      >
-        PDF
-      </h3>
-      <p class="m-0">
+    <div class="meta-container-cell meta-container-cell--pdf">
+      <h3>PDF</h3>
+      <p>
         <a
-          class="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-150 no-underline"
+          class="button"
           href={`/${pdfFilename}`}
           download={pdfFilename}
           aria-label={`Download PDF ${pdfFilename}`}
@@ -243,18 +200,112 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 </header>
 
 <style>
-  /* Flex behavior for meta cells */
-  .meta-cell {
-    flex: 1 1 calc(50% - 8px);
+  /* Hero (full-width) */
+  .hero {
+    width: 100%;
+    padding: 48px 16px 16px;
+    text-align: center;
+  }
+  .hero-title {
+    font-size: clamp(28px, 4vw, 48px);
+    font-weight: 800;
+    line-height: 1.1;
+    margin: 0 0 8px;
+    max-width: 100%;
+    margin: auto;
+  }
+  .hero-banner {
+    max-width: 980px;
+    margin: 0 auto;
+  }
+  .hero-desc {
+    color: var(--muted-color);
+    font-style: italic;
+    margin: 0 0 16px 0;
   }
 
-  .meta-cell.max-xs\:flex-1 {
-    flex: 1 1 100% !important;
+  /* Meta (byline-like header) */
+  .meta {
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    font-size: 0.9rem;
+  }
+  .meta-container {
+    max-width: 760px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+    gap: 8px;
+  }
+  /* Subtle underline for links in meta; keep buttons without underline */
+  .meta-container a:not(.button) {
+    color: var(--primary-color);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 0.06em;
+    text-decoration-color: var(--link-underline);
+    transition: text-decoration-color 0.15s ease-in-out;
+  }
+  .meta-container a:hover {
+    text-decoration-color: var(--link-underline-hover);
+  }
+  .meta-container a.button,
+  .meta-container .button {
+    text-decoration: none;
+  }
+  .meta-container-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 250px;
+  }
+  .meta-container-cell h3 {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--muted-color);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+  .meta-container-cell p {
+    margin: 0;
+  }
+  .authors {
+    margin: 0;
+    list-style-type: none;
+    padding-left: 0;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .authors li {
+    white-space: nowrap;
+  }
+  .affiliations {
+    margin: 0;
+    padding-left: 1.25em;
+  }
+  .affiliations li {
+    margin: 0;
+  }
+
+  header.meta .meta-container {
+    flex-wrap: wrap;
+    row-gap: 12px;
+  }
+
+  @media (max-width: 768px) {
+    .meta-container-cell--affiliations,
+    .meta-container-cell--pdf {
+      text-align: right;
+    }
   }
 
   @media print {
-    .max-md\\:text-right {
-      @apply hidden;
+    .meta-container-cell--pdf {
+      display: none !important;
     }
   }
 </style>

app/src/components/MultiImage.astro

@@ -1,342 +0,0 @@
----
-// @ts-ignore - types provided by Astro at runtime
-import Image from "./Image.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">
-                            <Image
-                                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">
-                        <Image
-                            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;
-        position: relative;
-        z-index: var(--z-content);
-        transition: z-index 0.3s ease;
-    }
-
-    /* Quand medium-zoom est actif, masquer temporairement les autres images du multi-image */
-    :global(.medium-zoom--opened) .multi-image-item {
-        opacity: 0;
-        z-index: calc(var(--z-base) - 1);
-        transition:
-            opacity 0.3s ease,
-            z-index 0.3s ease;
-    }
-
-    /* Masquer spécifiquement les captions pendant le zoom - approche radicale */
-    :global(.medium-zoom--opened) .multi-image-subcaption {
-        display: none !important;
-    }
-
-    /* Masquer complètement tous les éléments multi-image pendant le zoom */
-    :global(.medium-zoom--opened) .multi-image {
-        z-index: -1 !important;
-    }
-
-    /* Masquer tous les textes de l'ensemble des multi-images */
-    :global(.medium-zoom--opened) .multi-image-caption {
-        display: none !important;
-    }
-
-    /* L'image actuellement zoomée reste visible */
-    :global(.medium-zoom--opened)
-        .multi-image-item:has(:global(.medium-zoom--opened)) {
-        opacity: 1;
-        z-index: var(--z-overlay);
-    }
-
-    /* Fallback for browsers without :has() support */
-    :global(.medium-zoom--opened) .multi-image-item.zoom-active {
-        opacity: 1 !important;
-        z-index: var(--z-overlay) !important;
-    }
-
-    /* Garder la caption de l'image active visible */
-    :global(.medium-zoom--opened)
-        .multi-image-item.zoom-active
-        .multi-image-subcaption {
-        opacity: 1 !important;
-        z-index: var(--z-overlay) !important;
-    }
-
-    .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;
-        }
-    }
-
-    /* Images maintain natural aspect ratio */
-    .multi-image[data-layout*="column"] .multi-image-item :global(img) {
-        height: auto;
-        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>
-
-<script>
-    // Enhanced medium-zoom integration for MultiFigure
-    document.addEventListener("DOMContentLoaded", () => {
-        // Improve MultiFigure behavior with medium-zoom
-        const multiImages = document.querySelectorAll(".multi-image");
-
-        multiImages.forEach((multiImage) => {
-            const items = multiImage.querySelectorAll(".multi-image-item");
-            const zoomableImages = multiImage.querySelectorAll(
-                'img[data-zoomable="1"]',
-            );
-
-            zoomableImages.forEach((img) => {
-                img.addEventListener("click", () => {
-                    // Trouver l'item parent de l'image cliquée et le ri-root
-                    const activeItem = img.closest(".multi-image-item");
-                    const riRoot = img.closest(".ri-root");
-
-                    // Nettoyer TOUS les zoom-active (MultiFigure items et Figure)
-                    document
-                        .querySelectorAll(
-                            ".multi-image-item.zoom-active, .ri-root.zoom-active",
-                        )
-                        .forEach((el) => el.classList.remove("zoom-active"));
-
-                    // Ajouter zoom-active aux éléments actifs
-                    if (activeItem) {
-                        activeItem.classList.add("zoom-active");
-                    }
-                    if (riRoot) {
-                        riRoot.classList.add("zoom-active");
-                    }
-                });
-            });
-        });
-
-        // Nettoyer TOUTES les classes lors de la fermeture du zoom
-        document.addEventListener("click", (e) => {
-            if (e.target.classList.contains("medium-zoom-overlay")) {
-                // Zoom fermé, nettoyer toutes les classes zoom-active
-                document
-                    .querySelectorAll(
-                        ".multi-image-item.zoom-active, .ri-root.zoom-active",
-                    )
-                    .forEach((item) => item.classList.remove("zoom-active"));
-            }
-        });
-
-        // Listen for keyboard events to close zoom
-        document.addEventListener("keydown", (e) => {
-            if (e.key === "Escape") {
-                document
-                    .querySelectorAll(
-                        ".multi-image-item.zoom-active, .ri-root.zoom-active",
-                    )
-                    .forEach((item) => item.classList.remove("zoom-active"));
-            }
-        });
-    });
-</script>

app/src/components/Stack.astro

@@ -87,7 +87,7 @@ const gapSize = getGapSize();
     }
 
     .stack[data-layout="auto"] {
-        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
     }
 
     /* Default layout (2-column) */
@@ -139,6 +139,7 @@ const gapSize = getGapSize();
         .stack[data-layout="3-column"],
         .stack[data-layout="4-column"],
         .stack[data-layout="2-column"],
+        .stack[data-layout="auto"],
         .stack:not([data-layout]) {
             grid-template-columns: 1fr !important;
         }
@@ -146,7 +147,8 @@ const gapSize = getGapSize();
 
     @media (min-width: 769px) and (max-width: 1100px) {
         .stack[data-layout="3-column"],
-        .stack[data-layout="4-column"] {
+        .stack[data-layout="4-column"],
+        .stack[data-layout="auto"] {
             grid-template-columns: repeat(2, 1fr) !important;
         }
     }

app/src/content/article.mdx

@@ -6,6 +6,9 @@ authors:
   - name: "Thibaud Frere"
     url: "https://huggingface.co/tfrere"
     affiliations: [1]
+  - name: "Thibaud Frere2"
+    url: "https://huggingface.co/tfrere"
+    affiliations: [1]
 affiliations:
   - name: "Hugging Face"
     url: "https://huggingface.co"

app/src/content/chapters/demo/components.mdx

@@ -8,9 +8,10 @@ import Note from '../../../components/Note.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Accordion from '../../../components/Accordion.astro';
 import Image from '../../../components/Image.astro';
-import MultiImage from '../../../components/MultiImage.astro';
 import Quote from '../../../components/Quote.astro';
 import Reference from '../../../components/Reference.astro';
+import Glossary from '../../../components/Glossary.astro';
+import Stack from '../../../components/Stack.astro';
 
 ## Components
 
@@ -22,7 +23,6 @@ To use any component in your MDX file, add the import statement at the top:
 
 ```mdx
 import Image from '../components/Image.astro';
-import MultiImage from '../components/MultiImage.astro';
 import Note from '../components/Note.astro';
 
 # Your content
@@ -39,10 +39,6 @@ Here are the components that are available:
     <strong>Image</strong>
     <span>Optimized images</span>
   </a>
-  <a href="#multiimage" className="feature-card">
-    <strong>MultiImage</strong>
-    <span>Multi-panel images</span>
-  </a>
   <a href="#placement" className="feature-card">
     <strong>Placement</strong>
     <span>Layout helpers</span>
@@ -71,6 +67,14 @@ Here are the components that are available:
     <strong>Iframe</strong>
     <span>Web embeds</span>
   </a>
+  <a href="#glossary" className="feature-card">
+    <strong>Glossary</strong>
+    <span>Interactive term definitions</span>
+  </a>
+  <a href="#stack" className="feature-card">
+    <strong>Stack</strong>
+    <span>Flexible grid layouts</span>
+  </a>
 </div>
 
 ### Image
@@ -116,48 +120,6 @@ import myImage from './assets/image/placeholder.jpg'
 ```
 </Accordion>
 
-### MultiImage
-
-**Display multiple images** in a grid layout with customizable columns and captions. Perfect for **multi-panel images**, **comparisons**, and **step-by-step visualizations** — just like LaTeX's `subfigure` environment.
-
-<MultiImage
-  images={[
-    { src: placeholder, alt: "Image 1", caption: "First image with caption" },
-    { src: placeholder, alt: "Image 2", caption: "Second image" },
-    { src: placeholder, alt: "Image 3", caption: "Third image description" }
-  ]}
-  layout="3-column"
-  caption="Gallery of three images with individual captions"
-  zoomable={true}
-/>
-
-<Accordion title="Code example">
-```mdx
-import placeholder from '../assets/image/placeholder.png';
-
-<MultiImage
-  images={[
-    { src: placeholder, alt: "Panel A", caption: "(a) First panel" },
-    { src: placeholder, alt: "Panel B", caption: "(b) Second panel" },
-    { src: placeholder, alt: "Panel C", caption: "(c) Third panel" }
-  ]}
-  layout="3-column"
-  caption="Figure 1: Multi-panel comparison showing different conditions"
-  zoomable={true}
-/>
-```
-</Accordion>
-
-| Prop                   | Required | Type                                                                  | Description                                                                                                         
-|------------------------|----------|-----------------------------------------------------------------------|-------------------------------------------------------
-| `images`               | Yes      | `ImageItem[]`                                                         | Array of image objects with `src`, `alt`, and optional `caption`, `id`, `zoomable`, `downloadable` properties                                                                             
-| `layout`               | No       | `"2-column" \| "3-column" \| "4-column" \| "auto"`                    | Grid layout for the images (default: "3-column")                                                                                               
-| `caption`              | No       | `string`                                                               | Global caption for the entire multi-image figure                                                                                          
-| `zoomable`             | No       | `boolean`                                                              | Enable zoom functionality on all images (can be overridden per image)                                                                                               
-| `downloadable`         | No       | `boolean`                                                              | Show download buttons on all images (can be overridden per image)                                                                                               
-| `class`                | No       | `string`                                                               | Additional CSS classes to apply to the wrapper                                                                                          
-| `id`                   | No       | `string`                                                               | Global ID for the multi-image figure (for deep-linking and cross-references)                                                                                          
-
 ### Placement
 
 Use these helpers when you need to step outside the main content flow: **Sidenotes** for contextual side notes, **Wide** to extend beyond the main column, and **Full-width** for full-width, immersive sections.
@@ -446,3 +408,153 @@ As long as your files are there, they will be served from the **`public/data`**
 You can fetch them with this address: **`[domain]/data/your-data.ext`**
 
 <Note emoji="⚠️" variant="danger"><b>Be careful</b>, unlike images, <b>data files are not optimized</b> by Astro. You need to optimize them manually.</Note>
+
+### Glossary
+
+The **Glossary** component creates interactive term definitions with hover tooltips. Perfect for **technical terms**, **acronyms**, and **concepts** that need explanation without breaking the reading flow.
+
+<Glossary term="Machine Learning" definition="A subset of artificial intelligence that enables computers to learn and improve from experience without being explicitly programmed." />
+
+<Glossary term="Neural Network" definition="A computing system inspired by biological neural networks, consisting of interconnected nodes (neurons) that process information." position="bottom" />
+
+<Glossary term="API" definition="Application Programming Interface - a set of protocols and tools for building software applications." position="right" disableOnMobile={true} />
+<br/><br/>
+
+| Prop              | Required | Type                                    | Description                                                                                                         
+|-------------------|----------|-----------------------------------------|-------------------------------------------------------
+| `term`            | Yes      | `string`                                | The word or term to define                                                                             
+| `definition`      | Yes      | `string`                                | The definition of the term                                                                             
+| `class`           | No       | `string`                                | Optional CSS class to apply to the term                                                                             
+| `style`           | No       | `string`                                | Optional inline style to apply to the term                                                                             
+| `position`        | No       | `'top' \| 'bottom' \| 'left' \| 'right'` | Tooltip position (default: 'top')                                                                             
+| `delay`           | No       | `number`                                | Delay before showing tooltip in ms (default: 300)                                                                             
+| `disableOnMobile` | No       | `boolean`                               | Disable tooltip on mobile devices (default: false)                                                                             
+
+<Accordion title="Code example">
+```mdx
+import Glossary from '../../../components/Glossary.astro'
+
+<Glossary term="Machine Learning" definition="A subset of artificial intelligence that enables computers to learn and improve from experience." />
+
+<Glossary 
+  term="Deep Learning" 
+  definition="A subset of machine learning that uses neural networks with multiple layers to model and understand complex patterns in data."
+  position="bottom"
+  delay={500}
+/>
+
+<Glossary 
+  term="API" 
+  definition="Application Programming Interface - a set of protocols and tools for building software applications."
+  disableOnMobile={true}
+/>
+
+
+```
+</Accordion>
+
+**Use cases:**
+- **Technical terms** that need explanation
+- **Acronyms** and abbreviations
+- **Domain-specific concepts** for broader audiences
+- **Interactive glossaries** for educational content
+
+### Stack
+
+The **Stack** component provides flexible grid layouts for organizing content. Perfect for **comparisons**, **side-by-side examples**, **multi-column layouts**, and **responsive content organization**.
+
+<Stack layout="auto" gap="large">
+  <div>
+    <h4>Auto Layout</h4>
+    <p>This layout automatically adjusts based on content and available space.</p>
+  </div>
+  <div>
+    <h4>Responsive</h4>
+    <p>Items will wrap to new lines as needed, with a minimum width of 300px.</p>
+  </div>
+  <div>
+    <h4>Flexible</h4>
+    <p>Perfect for varying content lengths and dynamic layouts.</p>
+  </div>
+</Stack>
+
+<Stack layout="2-column" gap="medium">
+  <Image
+    src={placeholder}
+    alt="First image in stack"
+    caption="Image 1: Example of using Image component within Stack"
+    zoomable
+  />
+  <Image
+    src={placeholder}
+    alt="Second image in stack"
+    caption="Image 2: Side-by-side comparison layout"
+    zoomable
+  />
+</Stack>
+
+| Prop     | Required | Type                                                                  | Description                                                                                                         
+|----------|----------|-----------------------------------------------------------------------|-------------------------------------------------------
+| `layout` | No       | `"2-column" \| "3-column" \| "4-column" \| "auto"`                    | Grid layout for the content (default: "2-column")                                                                                               
+| `gap`    | No       | `"small" \| "medium" \| "large" \| string`                            | Gap between items - predefined size or custom value (e.g., "2rem", "20px")                                                                                               
+| `class`  | No       | `string`                                                               | Optional CSS class to apply to the wrapper                                                                                          
+| `id`     | No       | `string`                                                               | Optional ID for the stack                                                                                          
+
+<Accordion title="Code example">
+```mdx
+import Stack from '../../../components/Stack.astro'
+
+<Stack layout="auto" gap="large">
+  <div>
+    <h4>Auto Layout</h4>
+    <p>This layout automatically adjusts based on content and available space.</p>
+  </div>
+  <div>
+    <h4>Responsive</h4>
+    <p>Items will wrap to new lines as needed, with a minimum width of 300px.</p>
+  </div>
+  <div>
+    <h4>Flexible</h4>
+    <p>Perfect for varying content lengths and dynamic layouts.</p>
+  </div>
+</Stack>
+
+<Stack layout="2-column" gap="medium">
+  <Image
+    src={placeholder}
+    alt="First image in stack"
+    caption="Image 1: Example of using Image component within Stack"
+    zoomable
+  />
+  <Image
+    src={placeholder}
+    alt="Second image in stack"
+    caption="Image 2: Side-by-side comparison layout"
+    zoomable
+  />
+</Stack>
+```
+</Accordion>
+
+**Layout options:**
+- **2-column**: Two equal-width columns
+- **3-column**: Three equal-width columns  
+- **4-column**: Four equal-width columns
+- **auto**: Responsive grid that adapts to content and screen size
+
+**Gap options:**
+- **small**: 0.5rem spacing
+- **medium**: 1rem spacing (default)
+- **large**: 1.5rem spacing
+- **custom**: Any CSS value (e.g., "2rem", "20px", "1.5em")
+
+**Responsive behavior:**
+- **Mobile (≤768px)**: All layouts collapse to single column
+- **Tablet (769px-1100px)**: 3-column and 4-column layouts become 2-column
+- **Desktop (>1100px)**: Full layout as specified
+
+**Use cases:**
+- **Feature comparisons** and side-by-side content
+- **Multi-column text** and documentation
+- **Responsive card layouts** and grids
+- **Flexible content organization** for varying screen sizes

app/src/styles/_base.css

@@ -45,6 +45,23 @@ html {
   ;
 }
 
+/* External links with arrow indicator */
+.content-grid main a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):not([href*="0.0.0.0"])::after {
+  content: "↗";
+  display: inline-block;
+  margin-left: 6px;
+  font-size: 0.9em;
+  opacity: 0.8;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+  transform: translateY(-1px);
+  font-weight: 600;
+}
+
+/* External links with arrow indicator */
+.content-grid main a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):not([href*="0.0.0.0"]) {
+  white-space: nowrap;
+}
+
 .content-grid main a:hover {
   color: var(--primary-color-hover);
   border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #007AFF) 40%, transparent);