fix reponsiveness on chart

app/.astro/astro/content.d.ts

@@ -0,0 +1,231 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+			components: import('astro').MDXInstance<{}>['components'];
+		}>;
+	}
+}
+
+declare module 'astro:content' {
+	interface RenderResult {
+		Content: import('astro/runtime/server/index.js').AstroComponentFactory;
+		headings: import('astro').MarkdownHeading[];
+		remarkPluginFrontmatter: Record<string, any>;
+	}
+	interface Render {
+		'.md': Promise<RenderResult>;
+	}
+
+	export interface RenderedContent {
+		html: string;
+		metadata?: {
+			imagePaths: Array<string>;
+			[key: string]: unknown;
+		};
+	}
+}
+
+declare module 'astro:content' {
+	type Flatten<T> = T extends { [K: string]: infer U } ? U : never;
+
+	export type CollectionKey = keyof AnyEntryMap;
+	export type CollectionEntry<C extends CollectionKey> = Flatten<AnyEntryMap[C]>;
+
+	export type ContentCollectionKey = keyof ContentEntryMap;
+	export type DataCollectionKey = keyof DataEntryMap;
+
+	type AllValuesOf<T> = T extends any ? T[keyof T] : never;
+	type ValidContentEntrySlug<C extends keyof ContentEntryMap> = AllValuesOf<
+		ContentEntryMap[C]
+	>['slug'];
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getEntryBySlug<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		// Note that this has to accept a regular string too, for SSR
+		entrySlug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** @deprecated Use `getEntry` instead. */
+	export function getDataEntryById<C extends keyof DataEntryMap, E extends keyof DataEntryMap[C]>(
+		collection: C,
+		entryId: E,
+	): Promise<CollectionEntry<C>>;
+
+	export function getCollection<C extends keyof AnyEntryMap, E extends CollectionEntry<C>>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => entry is E,
+	): Promise<E[]>;
+	export function getCollection<C extends keyof AnyEntryMap>(
+		collection: C,
+		filter?: (entry: CollectionEntry<C>) => unknown,
+	): Promise<CollectionEntry<C>[]>;
+
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(entry: {
+		collection: C;
+		slug: E;
+	}): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(entry: {
+		collection: C;
+		id: E;
+	}): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof ContentEntryMap,
+		E extends ValidContentEntrySlug<C> | (string & {}),
+	>(
+		collection: C,
+		slug: E,
+	): E extends ValidContentEntrySlug<C>
+		? Promise<CollectionEntry<C>>
+		: Promise<CollectionEntry<C> | undefined>;
+	export function getEntry<
+		C extends keyof DataEntryMap,
+		E extends keyof DataEntryMap[C] | (string & {}),
+	>(
+		collection: C,
+		id: E,
+	): E extends keyof DataEntryMap[C]
+		? Promise<DataEntryMap[C][E]>
+		: Promise<CollectionEntry<C> | undefined>;
+
+	/** Resolve an array of entry references from the same collection */
+	export function getEntries<C extends keyof ContentEntryMap>(
+		entries: {
+			collection: C;
+			slug: ValidContentEntrySlug<C>;
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+	export function getEntries<C extends keyof DataEntryMap>(
+		entries: {
+			collection: C;
+			id: keyof DataEntryMap[C];
+		}[],
+	): Promise<CollectionEntry<C>[]>;
+
+	export function render<C extends keyof AnyEntryMap>(
+		entry: AnyEntryMap[C][string],
+	): Promise<RenderResult>;
+
+	export function reference<C extends keyof AnyEntryMap>(
+		collection: C,
+	): import('astro/zod').ZodEffects<
+		import('astro/zod').ZodString,
+		C extends keyof ContentEntryMap
+			? {
+					collection: C;
+					slug: ValidContentEntrySlug<C>;
+				}
+			: {
+					collection: C;
+					id: keyof DataEntryMap[C];
+				}
+	>;
+	// Allow generic `string` to avoid excessive type errors in the config
+	// if `dev` is not running to update as you edit.
+	// Invalid collection names will be caught at build time.
+	export function reference<C extends string>(
+		collection: C,
+	): import('astro/zod').ZodEffects<import('astro/zod').ZodString, never>;
+
+	type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T;
+	type InferEntrySchema<C extends keyof AnyEntryMap> = import('astro/zod').infer<
+		ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+	>;
+
+	type ContentEntryMap = {
+		"chapters": {
+"best-pratices.mdx": {
+	id: "best-pratices.mdx";
+  slug: "best-pratices";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"components.mdx": {
+	id: "components.mdx";
+  slug: "components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"debug-components.mdx": {
+	id: "debug-components.mdx";
+  slug: "debug-components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"getting-started.mdx": {
+	id: "getting-started.mdx";
+  slug: "getting-started";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"introduction.mdx": {
+	id: "introduction.mdx";
+  slug: "introduction";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"markdown.mdx": {
+	id: "markdown.mdx";
+  slug: "markdown";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"writing-your-content.mdx": {
+	id: "writing-your-content.mdx";
+  slug: "writing-your-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+};
+"embeds": {
+"vibe-code-d3-embeds-directives.md": {
+	id: "vibe-code-d3-embeds-directives.md";
+  slug: "vibe-code-d3-embeds-directives";
+  body: string;
+  collection: "embeds";
+  data: any
+} & { render(): Render[".md"] };
+};
+
+	};
+
+	type DataEntryMap = {
+		"assets": {
+"data/mnist-variant-model": {
+	id: "data/mnist-variant-model";
+  collection: "assets";
+  data: any
+};
+};
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/scripts/export-pdf.mjs

@@ -124,8 +124,8 @@ async function waitForD3(page, timeoutMs = 20000) {
   await page.evaluate(async (timeout) => {
     const start = Date.now();
     const isReady = () => {
-      // Prioritize hero banner if present
-      const hero = document.querySelector('.hero .d3-galaxy') || document.querySelector('.d3-galaxy');
+      // Prioritize hero banner if present (generic container)
+      const hero = document.querySelector('.hero-banner');
       if (hero) {
         return !!hero.querySelector('svg circle, svg path, svg rect, svg g');
       }
@@ -274,6 +274,8 @@ async function main() {
           }
           function fixSvg(svg){
             if (!svg) return;
+            // Do not alter hero banner SVG sizing; it may rely on explicit width/height
+            try { if (svg.closest && svg.closest('.hero-banner')) return; } catch {}
             if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; }
             try { svg.removeAttribute('width'); } catch {}
             try { svg.removeAttribute('height'); } catch {}
@@ -320,15 +322,14 @@ async function main() {
         // - Ensure an SVG background (CSS background on svg element)
         const cssHandle = await page.addStyleTag({ content: `
           .hero .points { mix-blend-mode: normal !important; }
-          .d3-galaxy svg { background: var(--surface-bg); }
         ` });
-        const thumbPath = resolve(cwd, 'dist', 'thumb.jpg');
+        const thumbPath = resolve(cwd, 'dist', 'thumb.auto.jpg');
         await page.screenshot({ path: thumbPath, type: 'jpeg', quality: 85, fullPage: false });
         // Also emit PNG for compatibility if needed
-        const thumbPngPath = resolve(cwd, 'dist', 'thumb.png');
+        const thumbPngPath = resolve(cwd, 'dist', 'thumb.auto.png');
         await page.screenshot({ path: thumbPngPath, type: 'png', fullPage: false });
-        const publicThumb = resolve(cwd, 'public', 'thumb.jpg');
-        const publicThumbPng = resolve(cwd, 'public', 'thumb.png');
+        const publicThumb = resolve(cwd, 'public', 'thumb.auto.jpg');
+        const publicThumbPng = resolve(cwd, 'public', 'thumb.auto.png');
         try { await fs.copyFile(thumbPath, publicThumb); } catch {}
         try { await fs.copyFile(thumbPngPath, publicThumbPng); } catch {}
         // Remove temporary style so PDF is unaffected
@@ -371,6 +372,8 @@ async function main() {
             }
             function fixSvg(svg){
               if (!svg) return;
+              // Do not alter hero banner SVG sizing; it may rely on explicit width/height
+              try { if (svg.closest && svg.closest('.hero-banner')) return; } catch {}
               if (isSmallSvg(svg)) { lockSmallSvgSize(svg); return; }
               try { svg.removeAttribute('width'); } catch {}
               try { svg.removeAttribute('height'); } catch {}
@@ -423,8 +426,9 @@ async function main() {
 
           /* Banner centering & visibility */
           .hero .points { mix-blend-mode: normal !important; }
-          .d3-galaxy { width: 100% !important; height: 300px; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
-          .d3-galaxy svg { width: 100% !important; height: auto !important; }
+          /* Do NOT force a fixed height to avoid clipping in PDF */
+          .hero-banner { width: 100% !important; max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
+          .hero-banner svg { width: 100% !important; height: auto !important; }
         ` });
       } catch {}
       await page.pdf({

app/src/content/chapters/components.mdx

@@ -249,13 +249,6 @@ For researchers who want to stay in **Python** while targeting **D3**, the [d3bl
 | `align`     | No       | Aligns the title/description text. One of `left` (default), `center`, `right`.                  
 | `id`        | No       | Adds an `id` to the outer figure for deep-linking and cross-references.                        
 
-<Note emoji="💡" variant="info">
-You can refer to a chart by giving it a name and pointing to it with a link.
--> `<a href="#neural-network-mnist-like">like his</a>`
--> `<HtmlEmbed id="neural-network-mnist-like"/>`
-Live example: <a href="#neural-network-mnist-like">Fig 1</a>
-</Note>
-
 <Accordion title="Code example">
 ```mdx
 import HtmlEmbed from '../components/HtmlEmbed.astro'

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

@@ -71,6 +71,17 @@
   }
   /* Improved line color via CSS */
   .d3-line-example .lines path.improved { stroke: var(--primary-color); }
+
+  /* Responsive: stack controls on small screens */
+  @media (max-width: 640px) {
+    .d3-line-example .d3-line__controls {
+      flex-wrap: wrap;
+    }
+    .d3-line-example .d3-line__controls label {
+      flex: 1 1 100% !important;
+      width: 100%;
+    }
+  }
 </style>
 <script>
   (() => {

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

@@ -232,6 +232,29 @@
 
       const overlay = gHover.append('rect').attr('fill', 'transparent').style('cursor', 'crosshair');
 
+      // Responsive layout for controls and inline legend
+      function applyResponsiveLayout(containerWidth) {
+        const isNarrow = containerWidth <= 600;
+        if (isNarrow) {
+          controls.style.flexWrap = 'wrap';
+          controls.style.alignItems = 'flex-start';
+          controls.style.justifyContent = 'flex-start';
+          legendInline.style.flexWrap = 'wrap';
+          legendInline.style.rowGap = '4px';
+          labelMetric.style.marginLeft = '0';
+          labelMetric.style.flexBasis = '100%';
+          labelMetric.style.width = '100%';
+        } else {
+          controls.style.flexWrap = 'nowrap';
+          controls.style.alignItems = 'center';
+          controls.style.justifyContent = 'space-between';
+          legendInline.style.flexWrap = 'nowrap';
+          labelMetric.style.marginLeft = 'auto';
+          labelMetric.style.flexBasis = 'auto';
+          labelMetric.style.width = 'auto';
+        }
+      }
+
       function updateScales() {
         const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
         const axisColor = isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.25)';
@@ -242,6 +265,9 @@
         height = Math.max(260, Math.round(width / 3));
         svg.attr('width', width).attr('height', height);
 
+        // Update controls layout for current width
+        applyResponsiveLayout(width);
+
         const innerWidth = width - margin.left - margin.right;
         const innerHeight = height - margin.top - margin.bottom;
         gRoot.attr('transform', `translate(${margin.left},${margin.top})`);
@@ -275,6 +301,12 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
+        const isNarrow = width <= 600;
+        const formatK = (v) => {
+          const vv = Math.round(v);
+          if (isNarrow && Math.abs(vv) >= 1000) return `${Math.round(vv / 1000)}K`;
+          return d3.format('d')(vv);
+        };
         if (isRankStrictFlag) {
           const [dx0, dx1] = xScale.domain();
           const start = Math.ceil(dx0 / 1000) * 1000;
@@ -282,9 +314,12 @@
           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'));
+          xAxis = xAxis.tickValues(xTicks).tickFormat(formatK);
         } else {
           xAxis = xAxis.ticks(8);
+          if (isNarrow) {
+            xAxis = xAxis.tickFormat((v) => (Math.abs(v) >= 1000 ? `${Math.round(v / 1000)}K` : d3.format('d')(Math.round(v))));
+          }
         }
         const yAxis = d3.axisLeft(yScale)
           .tickValues(yTicks)

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

@@ -93,7 +93,8 @@
       const CAPTION_GAP = 24;   // espace entre titre et donut
       const GAP_X = 20;         // espace entre colonnes
       const GAP_Y = 12;         // espace entre lignes
-      const LEGEND_HEIGHT = 62; // hauteur de la légende
+      const LEGEND_HEIGHT_DESKTOP = 62; // hauteur de la légende sur desktop
+      const LEGEND_HEIGHT_MOBILE = 84;  // hauteur de la légende sur mobile
       const TOP_OFFSET = 4;     // décalage vertical supplémentaire pour aérer le haut
       const updateSize = () => {
         width = container.clientWidth || 800;
@@ -102,8 +103,7 @@
         return { innerWidth: width - margin.left - margin.right };
       };
 
-      function renderLegend(categories, colorOf, width, x, legendY){
-        const legendHeight = LEGEND_HEIGHT;
+      function renderLegend(categories, colorOf, width, x, legendY, legendHeight){
         gLegend.attr('x', x).attr('y', legendY).attr('width', width).attr('height', legendHeight);
         const root = gLegend.selectAll('div').data([0]).join('xhtml:div');
         root
@@ -172,7 +172,8 @@
 
         // Positionner la légende sous les graphiques, calée sur la grille centrée
         const legendY = TOP_OFFSET + plotsHeight + 4;
-        renderLegend(categories, colorOf, gridWidth, xOffset, legendY);
+        const legendHeight = innerWidth <= 600 ? LEGEND_HEIGHT_MOBILE : LEGEND_HEIGHT_DESKTOP;
+        renderLegend(categories, colorOf, gridWidth, xOffset, legendY, legendHeight);
 
         const captions = new Map(METRICS.map(m => [m.key, `${m.title}`]));
 
@@ -230,7 +231,7 @@
         });
 
         // Définir la hauteur totale du SVG après avoir placé les éléments
-        const totalHeight = Math.ceil(margin.top + TOP_OFFSET + plotsHeight + 4 + LEGEND_HEIGHT + margin.bottom);
+        const totalHeight = Math.ceil(margin.top + TOP_OFFSET + plotsHeight + 4 + legendHeight + margin.bottom);
         svg.attr('height', totalHeight);
       }
 

app/src/content/embeds/filters-quad.html

@@ -162,6 +162,18 @@
         // Axes
         gAxes.selectAll('*').remove();
         let xAxis = d3.axisBottom(xScale).tickSizeOuter(0); xAxis = xAxis.ticks(8);
+        const isMobile = (typeof window !== 'undefined' && window.matchMedia) ? window.matchMedia('(max-width: 980px)').matches : false;
+        if (isMobile) {
+          const fmtK = (v) => {
+            const abs = Math.abs(v);
+            if (abs >= 1000) {
+              const n = v / 1000;
+              return (Math.round(n) === n ? n : d3.format('.1f')(n)) + 'K';
+            }
+            return d3.format('d')(v);
+          };
+          xAxis = xAxis.tickFormat(fmtK);
+        }
         const yAxis = d3.axisLeft(yScale).tickValues(yTicks).tickSizeOuter(0).tickFormat(isRankStrictFlag ? d3.format('d') : d3.format('.2f'));
         gAxes.append('g').attr('transform', `translate(0,${innerHeight})`).call(xAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });
         gAxes.append('g').call(yAxis).call(g=>{ g.selectAll('path, line').attr('stroke',axisColor); g.selectAll('text').attr('fill',tickColor).style('font-size','11px'); });