update

app/src/components/Accordion.astro

@@ -48,7 +48,7 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
       };
 
       const close = () => {
-        const start = content.scrollHeight;
+        const start = wrapper.offsetHeight || content.scrollHeight;
         wrapper.style.height = `${start}px`;
         void wrapper.offsetHeight; // reflow
         wrapper.style.transition = `height ${duration}ms ease`;
@@ -83,7 +83,6 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
   }
 
   .accordion[open] {
-    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
     border-color: color-mix(in oklab, var(--border-color), var(--primary-color) 20%);
   }
 
@@ -92,13 +91,15 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--spacing-1);
-    padding: var(--spacing-1);
+    gap: 4px;
+    padding: 4px;
     cursor: pointer;
     color: var(--text-color);
     user-select: none;
   }
 
+  /* Remove conditional padding to avoid jump on close */
+
   /* Remove native marker */
   .accordion__summary::-webkit-details-marker {
     display: none;
@@ -126,10 +127,23 @@ const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
     overflow: hidden;
     height: 0px;
     will-change: height;
+    position: relative;
   }
 
   .accordion__content {
-    padding: var(--spacing-1);
+    padding: 12px 4px 4px;
+  }
+
+  /* Separator between header and content when open (edge-to-edge) */
+  .accordion[open] .accordion__content-wrapper::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 6px; /* space below header */
+    height: 1px;
+    background: var(--neutral-300);
+    pointer-events: none;
   }
 
   /* Focus styles for accessibility */

app/src/content/chapters/available-blocks.mdx

@@ -229,8 +229,18 @@ Accessible accordion based on `details/summary`. You can pass any children conte
   <p>This one stays collapsed until the user clicks the summary.</p>
 </Accordion>
 
+<Accordion title="Accordion with code example">
+```ts
+function greet(name: string) {
+  console.log(`Hello, ${name}`);
+}
+
+greet("Astro");
+```
+</Accordion>
+
 <small className="muted">Example</small>
-```mdx
+````mdx
 import Accordion from '../components/Accordion.astro'
 
 <Accordion title="Accordion title" open>
@@ -243,7 +253,27 @@ import Accordion from '../components/Accordion.astro'
     <li>Item B</li>
   </ul>
 </Accordion>
+
+<Accordion title="Accordion with code example">
+```ts
+function greet(name: string) {
+  console.log(`Hello, ${name}`);
+}
+
+greet("Astro");
+```
+</Accordion>
+
+<Accordion title="Accordion with code example">
+```ts
+function greet(name: string) {
+  console.log(`Hello, ${name}`);
+}
+
+greet("Astro");
 ```
+</Accordion>
+````
 
 
 ### Minimal table
@@ -283,22 +313,29 @@ The main purpose of the ```HtmlFragment``` component is to **embed** a **Plotly*
 
 They exist in the `app/src/content/fragments` folder.
 
+Plotly and D3 are already supported by the template. For researchers who want to stay in **Python** while targeting **D3**, the [d3blocks](https://github.com/d3blocks/d3blocks) library lets you create interactive D3 charts with only a few lines of code. In **2025**, **D3** often provides more flexibility and a more web‑native rendering than **Plotly** for custom visualizations.
+
 Here are some examples of the two **libraries** in the template:
 
-D3 version
+<small class="muted">D3 version</small>
   <div className="plot-card">
     <HtmlFragment src="d3-line.html" />
 </div>
+<caption className="caption">D3 Line chart — simple time series example.</caption>
 
   <div className="plot-card">
     <HtmlFragment src="d3-bar.html" />
 </div>
+<caption className="caption">D3 Bar chart — categorical distribution example.</caption>
 
+--- 
+
+<small class="muted">Plotly version</small>
 
-Plotly version
 <div className="plot-card">
   <HtmlFragment src="line.html" />
 </div>
+<caption className="caption">Plotly Line chart — interactive time series with hover and zoom.</caption>
 
 <small className="muted">Example</small>
 ```mdx
@@ -315,8 +352,22 @@ You can embed external content in your article using **iframes**. For example, *
 
 <iframe className="plot-card" src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="660" frameborder="0"></iframe>
 
+
 <small className="muted">Example</small>
 ```mdx
 <iframe frameborder="0" scrolling="no" style="width:100%; height:292px;" allow="clipboard-write" src="https://emgithub.com/iframe.html?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F1004ae37b87887cde597c9060fb067faa060bafe%2Fsetup.py&style=default&type=code&showBorder=on&showLineNumbers=on"></iframe>
 <iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
 ```
+
+#### gradio
+
+You can also embed **gradio** apps.
+
+<gradio-app theme_mode="light" space="hebrew-llm-leaderboard/leaderboard"></gradio-app>
+
+
+
+<small className="muted">Example</small>
+```mdx
+<gradio-app theme_mode="light" space="hebrew-llm-leaderboard/leaderboard"></gradio-app>
+```

app/src/content/chapters/writing-your-content.mdx

@@ -16,7 +16,7 @@ Your article lives in two places
 - `app/src/content/` — where you can find the `article.mdx`, `bibliography.bib` and html fragments.
 - `app/src/assets/` — images, audio, and other static assets. (handled by git lfs)
 
-The `article.mdx` file is a markdown file with html. It is the main file that contains your article.
+The `article.mdx` file is the main file that contains your article.
 
 <small className="muted">Example</small>
 ```mdx
@@ -49,21 +49,38 @@ This is a short paragraph written in Markdown. Below is an example image:
 <Image src={placeholder} alt="Example image" />
 ```
 
-### Markdown 
+### MDX 
 
-You can use **markdown** to write your content. Here is the complete [markdown documentation](https://www.markdownguide.org/basic-syntax/).
+MDX is a mix of Markdown and HTML/JSX: write regular Markdown, and embed interactive components inline when needed. We’ll describe the available components you can use later in this guide. For Markdown syntax, see the complete [Markdown documentation](https://www.markdownguide.org/basic-syntax/).
 
 <small className="muted">Example</small>
 ```mdx
-# This is the main title
+{/* IMPORTS */}
+import { Image } from 'astro:assets'
+import placeholder from '../assets/images/placeholder.png'
+import Aside from '../components/Aside.astro'
+
+# Mixing Markdown and components
+
+This paragraph is written in Markdown.
+
+<Aside>A short callout inserted via a component.</Aside>
+
+Below is an image imported via Astro and optimized at build time:
+
+<Image src={placeholder} alt="Sample image with Astro optimization" />
+```
+
+
+Use `---` on its own line to insert a horizontal separator between sections. This is a standard Markdown “thematic break”. Don’t confuse it with the `---` used at the very top of the file to delimit the frontmatter.
 
-This is a short paragraph containing **bold** and *italic* text.
+<small className="muted">Example</small>
+```mdx
+Intro paragraph.
 
-## This is a second level heading
+---
 
-- This is a list item
-- This is a second list item
-- This is a third list item
+Next section begins here.
 ```
 
 

app/src/content/fragments/palettes.html

@@ -44,21 +44,93 @@
           const base = chroma(baseHex);
           const lc = base.lch();
           const baseH = base.get('hsl.h') || 0;
-          const L = Math.max(40, Math.min(85, lc[0] || 70));
-          const C = Math.max(40, Math.min(90, lc[1] || 80));
-          const offsets = [180, 120, -120, 60, -60];
-          const rest = offsets.map(off => chroma.lch(L, C, (baseH + off + 360) % 360).hex());
-          return [base.hex(), ...rest];
+          const L0 = Math.max(40, Math.min(85, lc[0] || 70));
+          const C0 = Math.max(45, Math.min(75, lc[1] || 70));
+          const MIN_DELTA = 18; // distance minimale en Lab
+
+          const seen = new Set();
+          const results = [];
+
+          const makeSafe = (h, L, C) => {
+            let c = C;
+            let col = chroma.lch(L, c, h);
+            let guard = 0;
+            while (col.clipped && typeof col.clipped === 'function' && col.clipped() && c > 30 && guard < 8) {
+              c -= 5;
+              col = chroma.lch(L, c, h);
+              guard++;
+            }
+            return col;
+          };
+
+          const isFarEnough = (hex) => results.every(prev => chroma.distance(hex, prev, 'lab') >= MIN_DELTA);
+          const pushHex = (col) => {
+            const hex = col.hex();
+            if (!seen.has(hex.toLowerCase())) { results.push(hex); seen.add(hex.toLowerCase()); }
+          };
+
+          // Base en premier
+          pushHex(base);
+
+          // Cinq couleurs supplémentaires, espacées de 60°
+          const angles = [60, 120, 180, 240, 300];
+          const hueOffsets = [0, 20, -20, 40, -40, 60, -60, 80, -80];
+          const lVariants = [L0, Math.max(40, L0 - 6), Math.min(85, L0 + 6)];
+
+          angles.forEach(step => {
+            let accepted = false;
+            for (let li = 0; li < lVariants.length && !accepted; li++) {
+              for (let oi = 0; oi < hueOffsets.length && !accepted; oi++) {
+                let h = (baseH + step + hueOffsets[oi] + 360) % 360;
+                let col = makeSafe(h, lVariants[li], C0);
+                const hex = col.hex();
+                if (!seen.has(hex.toLowerCase()) && isFarEnough(hex)) {
+                  pushHex(col);
+                  accepted = true;
+                }
+              }
+            }
+            if (!accepted) {
+              // Réduction de C si nécessaire
+              let cTry = C0 - 10;
+              let h = (baseH + step + 360) % 360;
+              let trials = 0;
+              while (!accepted && cTry >= 30 && trials < 6) {
+                const col = makeSafe(h, L0, cTry);
+                const hex = col.hex();
+                if (!seen.has(hex.toLowerCase()) && isFarEnough(hex)) {
+                  pushHex(col);
+                  accepted = true;
+                  break;
+                }
+                cTry -= 5;
+                trials++;
+              }
+              // Dernier recours: choisir la teinte la plus éloignée possible même si < seuil
+              if (!accepted) {
+                let bestHex = null; let bestMin = -1;
+                hueOffsets.forEach(off => {
+                  const hh = (baseH + step + off + 360) % 360;
+                  const cand = makeSafe(hh, L0, C0).hex();
+                  const minD = results.reduce((m, prev) => Math.min(m, chroma.distance(cand, prev, 'lab')), Infinity);
+                  if (minD > bestMin && !seen.has(cand.toLowerCase())) { bestMin = minD; bestHex = cand; }
+                });
+                if (bestHex) { seen.add(bestHex.toLowerCase()); results.push(bestHex); }
+              }
+            }
+          });
+
+          return results.slice(0, 6);
       }},
       { key: 'sequential', title: 'Sequential', desc: 'For <strong>numeric scales</strong>; gradient from <strong>light to dark</strong>; ideal for <strong>heatmaps</strong>.', generator: (baseHex) => {
           const c = chroma(baseHex).saturate(0.3);
-          return chroma.scale([c.brighten(2), c, c.darken(2)]).mode('lab').correctLightness(true).colors(6);
+          return chroma.scale([c.darken(2), c, c.brighten(2)]).mode('lab').correctLightness(true).colors(6);
       }},
       { key: 'diverging', title: 'Diverging', desc: 'For <strong>centered ranges</strong> with <strong>two extremes</strong> (e.g., negatives/positives) around a <strong>baseline</strong>.', generator: (baseHex) => {
           const baseH = chroma(baseHex).get('hsl.h');
           const compH = (baseH + 180) % 360;
-          const left = chroma.hsl(compH, 0.75, 0.55);
-          const right = chroma.hsl(baseH, 0.75, 0.55);
+          const left = chroma.hsl(baseH, 0.75, 0.55);
+          const right = chroma.hsl(compH, 0.75, 0.55);
           const center = '#ffffff';
           const leftRamp = chroma.scale([left, center]).mode('lch').correctLightness(true).colors(4);
           const rightRamp = chroma.scale([center, right]).mode('lch').correctLightness(true).colors(4);

app/src/pages/index.astro

@@ -66,9 +66,10 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
       })();
     </script>
     
-    
+    <!-- TO MANAGE PROPERLY -->
     <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
     <script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>
+    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.4.0/gradio.js"> </script>
   </head>
   <body>
     <ThemeToggle />

app/src/styles/components/_code.css

@@ -63,3 +63,6 @@ html[data-theme='light'] .astro-code {
 }
 
 
+
+/* Overrides inside Accordion: remove padding and border on code containers */
+.accordion .astro-code { padding: 0; border: none; }