update

app/src/components/HtmlEmbed.astro

@@ -64,7 +64,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
   </script>
 
 <style>
-  .html-embed { margin: 12px 0; }
+  .html-embed { margin: 0; }
   .html-embed__title { 
     text-align: left; 
     font-weight: 600; 
@@ -81,6 +81,7 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
   .html-embed__card.is-frameless {
     background: transparent;
     border-color: transparent;
+    padding: 0;
   }
   .html-embed__desc { 
     text-align: left; 

app/src/components/Seo.astro

@@ -29,6 +29,7 @@ const jsonLd = {
   image: ogImage ? [ogImage] : undefined,
 };
 ---
+<title>{title}</title>
 <meta name="description" content={description} />
 <link rel="canonical" href={url} />
 

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

@@ -358,26 +358,27 @@ import HtmlEmbed from '../components/HtmlEmbed.astro'
 
 You can embed external content in your article using **iframes**. For example, **TrackIO or github code embeds** can be used this way.
 
+<small className="muted">Github code embed</small>
 <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 className="html-embed__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">TrackIO embed</small>
+<div className="">
+<iframe 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>
+</div>
 
+<small className="muted">Gradio embed</small>
+<div className="">
+<iframe
+  src="https://gradio-hello-world.hf.space"
+  width="100%"
+  height="380"
+  frameborder="0"
+></iframe>
+</div>
 
 <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="gradio/hello_world"></gradio-app>
-
-
-
-<small className="muted">Example</small>
-```mdx
-<gradio-app theme_mode="light" space="gradio/hello_world"></gradio-app>
+<iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
 ```

app/src/content/embeds/d3-line.html

@@ -191,6 +191,8 @@
       let runList = [];
       let runOrder = [];
       const dataByMetric = new Map(); // metric => { run => [{step,value}] }
+      let isRankStrictFlag = false;
+      let rankTickMax = 1;
 
       // Scales and layout
       let width = 800, height = 360;
@@ -231,14 +233,19 @@
         yScale.range([innerHeight, 0]);
 
         // Compute integer ticks for Y
-        const yDomain = yScale.domain();
-        const yMin = Math.min(yDomain[0], yDomain[1]);
-        const yMax = Math.max(yDomain[0], yDomain[1]);
-        let yStep = Math.max(1, Math.round((yMax - yMin) / 6));
-        if (!isFinite(yStep) || yStep <= 0) yStep = 1;
         let yIntTicks = [];
-        for (let v = Math.ceil(yMin); v <= Math.floor(yMax); v += yStep) { yIntTicks.push(v); }
-        if (yIntTicks.length === 0) { yIntTicks = [Math.round(yMin), Math.round(yMax)]; }
+        if (isRankStrictFlag) {
+          const maxR = Math.max(1, Math.round(rankTickMax));
+          for (let v = 1; v <= maxR; v += 1) yIntTicks.push(v);
+        } else {
+          const yDomain = yScale.domain();
+          const yMin = Math.min(yDomain[0], yDomain[1]);
+          const yMax = Math.max(yDomain[0], yDomain[1]);
+          let yStep = Math.max(1, Math.round((yMax - yMin) / 6));
+          if (!isFinite(yStep) || yStep <= 0) yStep = 1;
+          for (let v = Math.ceil(yMin); v <= Math.floor(yMax); v += yStep) { yIntTicks.push(v); }
+          if (yIntTicks.length === 0) { yIntTicks = [Math.round(yMin), Math.round(yMax)]; }
+        }
 
         // Grid (horizontal)
         gGrid.selectAll('*').remove();
@@ -255,7 +262,18 @@
 
         // Axes
         gAxes.selectAll('*').remove();
-        const xAxis = d3.axisBottom(xScale).ticks(8).tickSizeOuter(0);
+        let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        if (isRankStrictFlag) {
+          const [dx0, dx1] = xScale.domain();
+          const start = Math.ceil(dx0 / 1000) * 1000;
+          const end = Math.floor(dx1 / 1000) * 1000;
+          const xTicks = [];
+          for (let v = start; v <= end; v += 1000) xTicks.push(v);
+          if (xTicks.length === 0) xTicks.push(Math.round(dx0));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(d3.format('d'));
+        } else {
+          xAxis = xAxis.ticks(8);
+        }
         const yAxis = d3.axisLeft(yScale).tickValues(yIntTicks).tickSizeOuter(0).tickFormat(d3.format('d'));
         gAxes.append('g')
           .attr('transform', `translate(0,${innerHeight})`)
@@ -333,7 +351,13 @@
         });
         if (!isFinite(minStep) || !isFinite(maxStep)) { return; }
         xScale.domain([minStep, maxStep]);
-        yScale.domain(isRank ? [Math.max(maxVal, 1), Math.min(minVal, 0)] : [0, Math.max(1, maxVal)]).nice();
+        if (isRank) {
+          rankTickMax = Math.max(1, Math.round(maxVal));
+          yScale.domain([rankTickMax, 1]);
+        } else {
+          yScale.domain([0, Math.max(1, maxVal)]).nice();
+        }
+        isRankStrictFlag = isRankStrict;
 
         const { innerWidth, innerHeight } = updateScales();
 
@@ -345,6 +369,7 @@
             .slice()
             .sort((a,b)=>a.step-b.step)
             .map(pt => isRankStrict ? { step: pt.step, value: Math.round(pt.value) } : pt)
+            .filter(pt => !isRankStrict || (pt.step % 1000 === 0))
         }));
         const paths = gLines.selectAll('path.run-line').data(series, d=>d.run);
         const gen = isRank ? lineGenStep : lineGenSmooth;

app/src/content/embeds/palettes.html

@@ -5,13 +5,24 @@
     /* removed circular badge */
     .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0;  }
     .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 8px; border: 1px solid var(--border-color); }
-    .palettes .palette-card__content { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; min-width: 0; padding-right: 12px; border-right: 1px solid var(--border-color); }
-    .palettes .palette-card__actions { display: flex; align-items: center; justify-content: flex-start; justify-self: start; }
-    .palettes .palette-card__actions { align-self: stretch; }
+    .palettes .palette-card__content { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding-right: 24px; border-right: 1px solid var(--border-color); }
+    .palettes .palette-card__content__info { display: flex; flex-direction: column;  }
+    .palettes .palette-card__title { text-align: left; font-weight: 800; font-size: 15px; }
+    .palettes .palette-card__desc { text-align: left; color: var(--muted-color); line-height: 1.5; font-size: 12px; }
+    .palettes .palette-card__actions { display: flex; align-items: center; justify-content: flex-start; justify-self: start; align-self: stretch; }
     /* .palettes .copy-btn { margin: 0; padding: 0 10px; height: 100%; border-radius: 8px; } */
     /* .palettes .copy-btn:hover { background: var(--primary-color); color: var(--on-primary)!important; border-color: transparent; }
     .palettes .copy-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } */
     .palettes .copy-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
+    /* Simulation UI */
+    .palettes .palettes__select { width: 100%; max-width: 260px; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color); padding: 8px 10px; border-radius: 8px; }
+    .palettes .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 1px, 1px); white-space: nowrap; border: 0; }
+    /* Page-wide color vision simulation classes */
+    html.cb-grayscale, body.cb-grayscale { filter: grayscale(1) !important; }
+    html.cb-protanopia, body.cb-protanopia { filter: url(#cb-protanopia) !important; }
+    html.cb-deuteranopia, body.cb-deuteranopia { filter: url(#cb-deuteranopia) !important; }
+    html.cb-tritanopia, body.cb-tritanopia { filter: url(#cb-tritanopia) !important; }
+    html.cb-achromatopsia, body.cb-achromatopsia { filter: url(#cb-achromatopsia) !important; }
     @media (max-width: 640px) {
       .palettes .palette-card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
       .palettes .palette-card__swatches { grid-template-columns: repeat(6, minmax(0, 1fr));  }
@@ -20,6 +31,37 @@
     }
   </style>
   <div class="palettes__grid"></div>
+  <div class="palettes__simu" role="group" aria-labelledby="cb-sim-title">
+    <br/>
+    <p ><strong>Use color with care.</strong> Color should rarely be the only channel of meaning. Always pair it with text, icons, shape or position. The simulation below helps you spot palettes and states that become indistinguishable for people with color‑vision deficiencies. Toggle modes while checking charts, legends and interactions to ensure sufficient contrast and redundant cues.</p>
+    <label for="cb-select">Color vision simulation</label>
+    <select id="cb-select" class="palettes__select">
+      <option value="none">None — full color</option>
+      <option value="grayscale">Grayscale — no hue (luminance only)</option>
+      <option value="protanopia">Protanopia — reduced/absent reds</option>
+      <option value="deuteranopia">Deuteranopia — reduced/absent greens</option>
+      <option value="tritanopia">Tritanopia — reduced/absent blues</option>
+      <option value="achromatopsia">Achromatopsia — no color at all</option>
+    </select>
+    <!-- Hidden SVG filters used by the page-wide simulation classes -->
+    <svg aria-hidden="true" focusable="false" width="0" height="0" style="position:absolute; left:-9999px; overflow:hidden;">
+      <defs>
+        <!-- Matrices from common color vision deficiency simulations -->
+        <filter id="cb-protanopia">
+          <feColorMatrix type="matrix" values="0.567 0.433 0     0 0  0.558 0.442 0     0 0  0      0.242 0.758 0 0  0 0 0 1 0"/>
+        </filter>
+        <filter id="cb-deuteranopia">
+          <feColorMatrix type="matrix" values="0.625 0.375 0     0 0  0.7   0.3   0     0 0  0      0.3   0.7   0 0  0 0 0 1 0"/>
+        </filter>
+        <filter id="cb-tritanopia">
+          <feColorMatrix type="matrix" values="0.95  0.05  0     0 0  0     0.433 0.567 0 0  0     0.475 0.525 0 0  0 0 0 1 0"/>
+        </filter>
+        <filter id="cb-achromatopsia">
+          <feColorMatrix type="matrix" values="0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0.299 0.587 0.114 0 0  0 0 0 1 0"/>
+        </filter>
+      </defs>
+    </svg>
+  </div>
 </div>
 <script>
   (() => {
@@ -154,39 +196,81 @@
       const css = getCssPrimary();
       const baseHex = css && /^#|rgb|hsl/i.test(css) ? chroma(css).hex() : '#E889AB';
 
-      cards.forEach((c) => {
-        const card = document.createElement('div'); card.className = 'palette-card';
-        const sw = document.createElement('div'); sw.className = 'palette-card__swatches';
+      const html = cards.map((c) => {
         const colors = c.generator(baseHex).slice(0, 6);
-        colors.forEach(col => { const d = document.createElement('div'); d.className = 'sw'; d.style.background = col; sw.appendChild(d); });
-
-        const content = document.createElement('div'); content.className = 'palette-card__content';
-        const title = document.createElement('div'); title.className = 'palette-card__title'; title.style.textAlign = 'left'; title.style.fontWeight = '800'; title.style.fontSize = '15px'; title.textContent = c.title;
-        const desc = document.createElement('div'); desc.className = 'palette-card__desc'; desc.style.textAlign = 'left'; desc.style.color = 'var(--muted-color)'; desc.style.lineHeight = '1.5'; desc.style.fontSize = '12px'; desc.innerHTML = c.desc;
-        const actions = document.createElement('div'); actions.className = 'palette-card__actions';
-        const btn = document.createElement('button'); btn.className = 'copy-btn button--ghost';
-        btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>';
-        btn.addEventListener('click', async () => {
-          const json = JSON.stringify(colors, null, 2);
-          try {
-            await navigator.clipboard.writeText(json);
-            const old = btn.innerHTML;
-            btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
-            setTimeout(() => btn.innerHTML = old, 900);
-          } catch {
-            window.prompt('Copy palette', json);
-          }
-        });
-
-        content.appendChild(title); content.appendChild(desc);
-        actions.appendChild(btn);
-        card.appendChild(actions); card.appendChild(content); card.appendChild(sw);
-        grid.appendChild(card);
-        });
+        const swatches = colors.map(col => `<div class="sw" style="background:${col}"></div>`).join('');
+        return `
+          <div class="palette-card" data-colors="${colors.join(',')}">
+            <div class="palette-card__content">
+              <div class="palette-card__content__info">
+                <div class="palette-card__title">${c.title}</div>
+                <div class="palette-card__desc">${c.desc}</div>
+              </div>
+              <button class="copy-btn button--ghost" type="button" aria-label="Copy palette">
+                <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+              </button>
+            </div>
+            <div class="palette-card__actions"></div>
+            <div class="palette-card__swatches">${swatches}</div>
+          </div>
+        `;
+      }).join('');
+      grid.innerHTML = html;
       };
 
+    const MODE_TO_CLASS = { grayscale: 'cb-grayscale', protanopia: 'cb-protanopia', deuteranopia: 'cb-deuteranopia', tritanopia: 'cb-tritanopia', achromatopsia: 'cb-achromatopsia' };
+    const CLEAR_CLASSES = Object.values(MODE_TO_CLASS);
+    const clearCbClasses = () => {
+      const rootEl = document.documentElement;
+      CLEAR_CLASSES.forEach(cls => rootEl.classList.remove(cls));
+    };
+    const applyCbClass = (mode) => {
+      clearCbClasses();
+      const cls = MODE_TO_CLASS[mode];
+      if (cls) document.documentElement.classList.add(cls);
+    };
+    const currentCbMode = () => {
+      const rootEl = document.documentElement;
+      for (const [mode, cls] of Object.entries(MODE_TO_CLASS)) { if (rootEl.classList.contains(cls)) return mode; }
+      return 'none';
+    };
+    const setupCbSim = () => {
+      const select = document.getElementById('cb-select');
+      if (!select) return;
+      try { select.value = currentCbMode(); } catch {}
+      select.addEventListener('change', () => applyCbClass(select.value));
+    };
+
+    let copyDelegationSetup = false;
+    const setupCopyDelegation = () => {
+      if (copyDelegationSetup) return;
+      const root = document.querySelector('.palettes');
+      if (!root) return;
+      const grid = root.querySelector('.palettes__grid');
+      if (!grid) return;
+      grid.addEventListener('click', async (e) => {
+        const target = e.target.closest ? e.target.closest('.copy-btn') : null;
+        if (!target) return;
+        const card = target.closest('.palette-card');
+        if (!card) return;
+        const colors = (card.dataset.colors || '').split(',').filter(Boolean);
+        const json = JSON.stringify(colors, null, 2);
+        try {
+          await navigator.clipboard.writeText(json);
+          const old = target.innerHTML;
+          target.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
+          setTimeout(() => target.innerHTML = old, 900);
+        } catch {
+          window.prompt('Copy palette', json);
+        }
+      });
+      copyDelegationSetup = true;
+    };
+
     const bootstrap = () => {
       render();
+      setupCbSim();
+      setupCopyDelegation();
       const mo = new MutationObserver(() => render());
       mo.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
     };

app/src/layouts/ArticleLayout.astro

@@ -1,70 +0,0 @@
----
-import type { APIContext } from 'astro';
-
-interface Props {
-  title: string;
-  description?: string;
-  authors?: string[];
-  published?: string; // ISO or human-readable
-  tags?: string[];
-  image?: string; // Recommended absolute URL
-}
-
-const {
-  title,
-  description = '',
-  authors = [],
-  published,
-  tags = [],
-  image,
-} = Astro.props as Props;
-
-const url = Astro.url?.toString?.() ?? '';
-const site = (Astro.site ? String(Astro.site) : '') as string;
-const ogImage = image && image.length > 0
-  ? (image.startsWith('http') ? image : (site ? new URL(image, site).toString() : image))
-  : undefined;
-
-const jsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'Article',
-  headline: title,
-  description: description || undefined,
-  datePublished: published || undefined,
-  author: authors.map((name) => ({ '@type': 'Person', name })),
-  keywords: tags.length ? tags.join(', ') : undefined,
-  mainEntityOfPage: url || undefined,
-  image: ogImage ? [ogImage] : undefined,
-};
----
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    <title>{title}</title>
-    {description && <meta name="description" content={description} />}
-
-    <link rel="canonical" href={url} />
-
-    <meta property="og:type" content="article" />
-    <meta property="og:title" content={title} />
-    {description && <meta property="og:description" content={description} />}
-    <meta property="og:url" content={url} />
-    {ogImage && <meta property="og:image" content={ogImage} />}
-    {published && <meta property="article:published_time" content={published} />}
-    {authors.map(a => <meta property="article:author" content={a} />)}
-
-    <meta name="twitter:card" content={ogImage ? 'summary_large_image' : 'summary'} />
-    <meta name="twitter:title" content={title} />
-    {description && <meta name="twitter:description" content={description} />}
-    {ogImage && <meta name="twitter:image" content={ogImage} />}    
-
-    <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
-  </head>
-  <body>
-    <slot />
-  </body>
-</html>
-
-

app/src/pages/index.astro

@@ -55,7 +55,6 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{docTitle}</title>
     <Seo title={docTitle} description={description} authors={authors} published={published} tags={tags} image={imageAbs} />
     <script is:inline>
       (() => {