update

README.md

@@ -1,5 +1,5 @@
 ---
-title: 'The science article template'
+title: 'Research article template'
 emoji: 📝
 colorFrom: blue
 colorTo: indigo

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

@@ -0,0 +1,169 @@
+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 = {
+		
+	};
+
+	type DataEntryMap = {
+		"fragments": Record<string, {
+  id: string;
+  collection: "fragments";
+  data: any;
+}>;
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/scripts/export-pdf.mjs

@@ -2,7 +2,7 @@
 import { spawn } from 'node:child_process';
 import { setTimeout as delay } from 'node:timers/promises';
 import { chromium } from 'playwright';
-import { resolve, basename } from 'node:path';
+import { resolve } from 'node:path';
 import { promises as fs } from 'node:fs';
 import process from 'node:process';
 
@@ -180,26 +180,12 @@ async function main() {
       });
       console.log(`✅ PDF generated: ${outPath}`);
 
-      // Compatibility copy into dist/article.pdf (for servers that only serve dist)
-      const distCompatPath = resolve(cwd, 'dist', 'article.pdf');
-      try {
-        if (basename(outPath) !== 'article.pdf') {
-          await fs.copyFile(outPath, distCompatPath);
-          console.log(`✅ PDF copied (dist compat): ${distCompatPath}`);
-        }
-      } catch (e) {
-        console.warn('Unable to copy PDF to dist/article.pdf:', e?.message || e);
-      }
-
-      // Also copy into public under 2 names: slug.pdf and article.pdf (compat)
+      // Copy into public only under the slugified name
       const publicSlugPath = resolve(cwd, 'public', `${outFileBase}.pdf`);
-      const publicCompatPath = resolve(cwd, 'public', 'article.pdf');
       try {
         await fs.mkdir(resolve(cwd, 'public'), { recursive: true });
         await fs.copyFile(outPath, publicSlugPath);
-        await fs.copyFile(outPath, publicCompatPath);
         console.log(`✅ PDF copied to: ${publicSlugPath}`);
-        console.log(`✅ PDF copied (compat): ${publicCompatPath}`);
       } catch (e) {
         console.warn('Unable to copy PDF to public/:', e?.message || e);
       }

app/src/components/Header.astro

@@ -1,4 +1,6 @@
 ---
+import HtmlFragment from "./HtmlFragment.astro";
+
 interface Props {
   title: string;
   description?: string;
@@ -6,11 +8,10 @@ interface Props {
 const { title, description } = Astro.props as Props;
 ---
 <section class="hero">
-  <h1 class="hero-title">{title}</h1>
+  <h1 class="hero-title"  set:html={title}></h1>
   <div class="hero-banner">
-    <slot name="banner" />
+    <HtmlFragment src="banner.html" />
     {description && <p class="hero-desc">{description}</p>}
   </div>
 </section>
 
-

app/src/content/article.mdx

@@ -1,6 +1,7 @@
 ---
 title: "From Idea to Interactive:\n A Modern Template for Scientific Writing
 "
+subtitle: "It's nice to have a cute interactive banner"
 description: "A modern, MDX-first research article template with math, citations, and interactive figures."
 authors:
   - "John Doe"
@@ -40,7 +41,7 @@ import visualPoster from "../assets/images/visual-vocabulary-poster.png";
 
 This template is inspired by [**Distill**](https://distill.pub); we aim to preserve the best of it while modernizing the stack. Their work is highly inspiring.
 
-## Features
+#### Features
 
 <div className="tag-list">
   <span className="tag">Markdown based</span>
@@ -94,7 +95,7 @@ The easiest way to get online is to clone [this Hugging Face Space](https://hugg
 
 ### Large files (Git LFS)
 
-Track binaries (e.g., `.png`, `.wav`) with Git LFS to keep the repository lean. This project is preconfigured to store such files via LFS.
+**Track binaries** (e.g., `.png`, `.wav`) with **Git LFS** to keep the repository lean. This project is preconfigured to store such files via **LFS**.
 
 
 ## Writing Your Content
@@ -103,15 +104,16 @@ Track binaries (e.g., `.png`, `.wav`) with Git LFS to keep the repository lean.
 
 Your article lives in two places:
 
-- `app/src/content/` — where you can find the article.mdx and bibliography.bib.
+- `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 initial skeleton of an article looks like this:
+The **initial skeleton** of an article looks like this:
 
 ```mdx
 {/* HEADER */}
 ---
-title: "The science template:\nCraft Beautiful Blogs"
+title: "This is the main title"
+subtitle: "This will be displayed just below the banner"
 description: "A modern, MDX-first research article template with math, citations, and interactive figures."
 authors:
   - "John Doe"
@@ -139,7 +141,7 @@ This is a short paragraph written in Markdown. Below is an example image:
 
 
 
-**Available blocs**:
+**Available blocks**:
 
 <div className="tag-list">
   <a className="tag" href="#math">Math</a>
@@ -177,7 +179,7 @@ $$
 
 ### Images
 
-Responsive images automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control lazy loading/decoding for better performance.
+**Responsive images** automatically generate an optimized `srcset` and `sizes` so the browser downloads the most appropriate file for the current viewport and DPR. You can also request multiple output formats (e.g., **AVIF**, **WebP**, fallback **PNG/JPEG**) and control **lazy loading/decoding** for better **performance**.
 
 **Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
 
@@ -209,7 +211,7 @@ import myImage from '../assets/images/placeholder.jpg'
   <Image src={myImage} data-zoomable alt="Example with caption and credit" loading="lazy" />
   <figcaption>
     Optimized image with a descriptive caption.
-    <span className="image-credit">Crédit: Photo by <a href="https://example.com">Author</a></span>
+    <span className="image-credit">Credit: Photo by <a href="https://example.com">Author</a></span>
   </figcaption>
 </figure>
 ```
@@ -243,11 +245,11 @@ greet("Astro")
 
 Here are a few variations using the same bibliography:
 
-1) In-text citation with brackets: [@example2023].
+1) **In-text citation** with brackets: [@example2023].
 
-2) Narrative citation: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
+2) **Narrative citation**: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
 
-3) Multiple citations and a footnote together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
+3) **Multiple citations** and a **footnote** together: see [@vaswani2017attention; @example2023] for related work. Also note this footnote[^f1].
 
 [^f1]: Footnote attached to the sentence above.
 
@@ -265,9 +267,9 @@ Here are a few variations using the same bibliography:
 ### Asides
 
 <Aside>
-  This paragraph presents a key idea concisely.
+  This paragraph presents a **key idea** concisely.
   <Fragment slot="aside">
-    Side note for brief context or a definition.
+    **Side note** for brief context or a definition.
   </Fragment>
   </Aside>
 
@@ -348,7 +350,7 @@ import audioDemo from '../assets/audio/audio-example.wav'
 
 #### Html Fragments
 
-The main purpose of the ```HtmlFragment``` component is to embed a plotly or d3 chart in your article. Libraries are already imported in the template.
+The main purpose of the ```HtmlFragment``` component is to embed a **Plotly** or **D3.js** chart in your article. Libraries are already imported in the template.
 
 <div className="plot-card">
   <HtmlFragment src="line.html" />
@@ -362,7 +364,7 @@ import HtmlFragment from '../components/HtmlFragment.astro'
 
 #### Iframes
 
-You can embed external content in your article using **iframes**. For example, TrackIO—a lightweight dashboard to monitor machine learning experiments—can be used this way. The example below opens a demo project and displays a couple of metrics. You can customize the query parameters (`project`, `metrics`, `sidebar`, etc.) to fit your needs.
+You can embed external content in your article using **iframes**. For example, **TrackIO**—a lightweight dashboard to monitor machine learning experiments—can be used this way. The example below opens a demo project and displays a couple of metrics. You can customize the **query parameters** (`project`, `metrics`, `sidebar`, etc.) to fit your needs.
 
 <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="600" frameborder="0"></iframe>
 
@@ -407,14 +409,14 @@ Choosing colors well is critical: a **palette** encodes **meaning** (categories,
 
 ### Use the right chart
 
-Picking the right visualization depends on your goal (compare values, show distribution, part-to-whole, trends, relationships, etc.). The Visual Vocabulary poster below provides a concise mapping from analytical task to chart types.
+Picking the right visualization depends on your goal (compare values, show distribution, part-to-whole, trends, relationships, etc.). The Visual Vocabulary poster below provides a concise mapping from **analytical task** to **chart types**.
 
 <figure>
-  <a href="https://ft-interactive.github.io/visual-vocabulary/" target="_blank" rel="noopener noreferrer">
+  <a href={visualPoster.src} target="_blank" rel="noopener noreferrer">
     <Image src={visualPoster} alt="Visual Vocabulary: choosing the right chart by task" />
   </a>
   <figcaption>
-    Visual Vocabulary: a handy reference to select chart types by purpose (comparison, distribution, part-to-whole, correlation, and more).
+    A handy reference to select chart types by purpose. Click to enlarge.
     — <a href="https://ft-interactive.github.io/visual-vocabulary/" target="_blank" rel="noopener noreferrer">Website</a>
   </figcaption>
 </figure>
@@ -422,5 +424,5 @@ Picking the right visualization depends on your goal (compare values, show distr
 
 ## Conclusions
 
-This template provides a practical baseline for writing and sharing technical articles with math, citations, and interactive figures. Start simple, iterate on structure and style, and keep content maintainable for future readers and collaborators.
+This template provides a **practical baseline** for writing and sharing technical articles with **math**, **citations**, and **interactive figures**. **Start simple**, **iterate** on structure and style, and keep content **maintainable** for future readers and collaborators.
 

app/src/pages/index.astro

@@ -3,6 +3,7 @@ import Article, { frontmatter as articleFM } from '../content/article.mdx';
 import Meta from '../components/Meta.astro';
 import HtmlFragment from '../components/HtmlFragment.astro';
 import Footer from '../components/Footer.astro';
+import Header from '../components/Header.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
 import SeoHead from '../components/SeoHead.astro';
 import ogDefault from '../assets/images/visual-vocabulary-poster.png';
@@ -13,6 +14,7 @@ const docTitle = articleFM?.title ?? 'Untitled article';
 const docTitleHtml = (articleFM?.title ?? 'Untitled article')
   .replace(/\\n/g, '<br/>')
   .replace(/\n/g, '<br/>');
+const subtitle = articleFM?.subtitle ?? '';
 const description = articleFM?.description ?? '';
 const authors = articleFM?.authors ?? [];
 const published = articleFM?.published ?? undefined;
@@ -71,13 +73,8 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
   </head>
   <body>
     <ThemeToggle />
-    <section class="hero">
-      <h1 class="hero-title" set:html={docTitleHtml}></h1>
-      <div class="hero-banner">
-        <HtmlFragment src="banner.html" />
-        <p class="hero-desc">It's nice to have a cute interactive banner!</p>
-      </div>
-    </section>
+    <Header title={docTitleHtml} description={subtitle}>
+    </Header>
 
     <section class="article-header">
       <Meta title={docTitle} authors={articleFM?.authors} affiliation={articleFM?.affiliation} published={articleFM?.published} />

app/src/styles/_base.scss

@@ -186,7 +186,7 @@ figcaption { text-align: center; font-size: 0.9rem; color: var(--muted-color); m
 .image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
 
 // ============================================================================
-// Buttons (minimal, épuré)
+// Buttons (minimal, clean)
 // ============================================================================
 .meta .meta-container-cell button {
   appearance: none;

app/src/styles/_layout.scss

@@ -22,9 +22,9 @@ main > nav:first-of-type { display: none; }
 
 // Mobile TOC accordion
 .toc-mobile { display: none; margin: 8px 0 16px; }
-.toc-mobile > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--surface-bg); color: var(--text-color); font-weight: 600; }
+.toc-mobile > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); font-weight: 600; }
 .toc-mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
-.toc-mobile nav { border-left: none; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border-color); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background: var(--surface-bg); }
+.toc-mobile nav { border-left: none; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border-color); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
 .toc-mobile nav ul { margin: 0 0 6px; padding-left: 1em; }
 .toc-mobile nav li { list-style: none; margin: .25em 0; }
 .toc-mobile nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }

app/src/styles/components/_code.scss

@@ -9,7 +9,7 @@ section.content-grid pre { overflow-x: auto; width: 100%; max-width: 100%; box-s
 section.content-grid pre code { display: inline-block; min-width: 100%; }
 
 /* Wrap long lines on mobile to avoid overflow (URLs, etc.) */
-@media (max-width: 700px) {
+@media (max-width: 1100px) {
   .astro-code,
   section.content-grid pre { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
   section.content-grid pre code { white-space: pre-wrap; display: block; min-width: 0; }

app/src/styles/components/_footer.scss

@@ -1,7 +1,7 @@
 .distill-footer { contain: layout style; font-size: 0.8em; line-height: 1.7em; margin-top: 60px; margin-bottom: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.5); }
 .footer-inner { max-width: 1280px; margin: 0 auto; padding: 60px 16px 48px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
 
-// Utiliser la grille parent (3 colonnes comme .content-grid)
+// Use the parent grid (3 columns like .content-grid)
 .citation-block,
 .references-block { display: contents; }
 .citation-block > h3,

fragments/plotly/banner.py

@@ -2,62 +2,62 @@ import plotly.graph_objects as go
 import numpy as np
 import pandas as pd
 
-# Paramètres de la scène (mêmes ranges que l'intégration Astro)
-cx, cy = 1.5, 0.5                 # centre
-a, b = 1.3, 0.45                  # étendue max en x/y (ellipse pour l'anisotropie)
-
-# Paramètres de la galaxie en spirale
-num_points = 3000                 # plus de dots
-num_arms = 3                      # nombre de bras spiraux
-num_turns = 2.1                   # nombre de tours par bras
-angle_jitter = 0.12               # écart angulaire pour évaser les bras
-pos_noise = 0.015                 # bruit de position global
-
-# Génération des points sur des bras spiraux (spirale d'Archimède)
-t = np.random.rand(num_points) * (2 * np.pi * num_turns)  # progression le long du bras
+# Scene parameters (same ranges as the Astro integration)
+cx, cy = 1.5, 0.5                 # center
+a, b = 1.3, 0.45                  # max extent in x/y (ellipse for anisotropy)
+
+# Spiral galaxy parameters
+num_points = 3000                 # more dots
+num_arms = 3                      # number of spiral arms
+num_turns = 2.1                   # number of turns per arm
+angle_jitter = 0.12               # angular jitter to fan out the arms
+pos_noise = 0.015                 # global position noise
+
+# Generate points along spiral arms (Archimedean spiral)
+t = np.random.rand(num_points) * (2 * np.pi * num_turns)  # progression along the arm
 arm_indices = np.random.randint(0, num_arms, size=num_points)
 arm_offsets = arm_indices * (2 * np.pi / num_arms)
 
 theta = t + arm_offsets + np.random.randn(num_points) * angle_jitter
 
-# Rayon normalisé (0->centre, 1->bord). Puissance <1 pour densifier le centre
+# Normalized radius (0->center, 1->edge). Power <1 to densify the core
 r_norm = (t / (2 * np.pi * num_turns)) ** 0.9
 
-# Bruit radial/lateral qui augmente légèrement avec le rayon
+# Radial/lateral noise that slightly increases with radius
 noise_x = pos_noise * (0.8 + 0.6 * r_norm) * np.random.randn(num_points)
 noise_y = pos_noise * (0.8 + 0.6 * r_norm) * np.random.randn(num_points)
 
-# Projection elliptique
+# Elliptic projection
 x_spiral = cx + a * r_norm * np.cos(theta) + noise_x
 y_spiral = cy + b * r_norm * np.sin(theta) + noise_y
 
-# Bulbe central (points supplémentaires très proches du centre)
+# Central bulge (additional points very close to the core)
 bulge_points = int(0.18 * num_points)
 phi_b = 2 * np.pi * np.random.rand(bulge_points)
-r_b = (np.random.rand(bulge_points) ** 2.2) * 0.22  # bulbe compact
+r_b = (np.random.rand(bulge_points) ** 2.2) * 0.22  # compact bulge
 noise_x_b = (pos_noise * 0.6) * np.random.randn(bulge_points)
 noise_y_b = (pos_noise * 0.6) * np.random.randn(bulge_points)
 x_bulge = cx + a * r_b * np.cos(phi_b) + noise_x_b
 y_bulge = cy + b * r_b * np.sin(phi_b) + noise_y_b
 
-# Concaténation
+# Concatenation
 x = np.concatenate([x_spiral, x_bulge])
 y = np.concatenate([y_spiral, y_bulge])
 
-# Intensité centrale (pour tailles/couleurs). 1 au centre, ~0 au bord
+# Central intensity (for sizes/colors). 1 at center, ~0 at edge
 z_spiral = 1 - r_norm
-z_bulge = 1 - (r_b / max(r_b.max(), 1e-6))  # bulbe très lumineux
+z_bulge = 1 - (r_b / max(r_b.max(), 1e-6))  # very bright bulge
 z_raw = np.concatenate([z_spiral, z_bulge])
 
-# Tailles: conserver l'échelle 5..10 pour cohérence
+# Sizes: keep the 5..10 scale for consistency
 sizes = (z_raw + 1) * 5
 
-# Suppression du filtre intermédiaire: on garde tous les points posés, on filtrera à la toute fin
+# Remove intermediate filtering: keep all placed points, filter at the very end
 
 df = pd.DataFrame({
     "x": x,
     "y": y,
-    "z": sizes,  # réutilisé pour size+color comme avant
+    "z": sizes,  # reused for size+color as before
 })
 
 def get_label(z):
@@ -70,10 +70,10 @@ def get_label(z):
     else:
         return "biiig dot"
 
-# Labels basés sur l'intensité centrale
+# Labels based on central intensity
 df["label"] = pd.Series(z_raw).apply(get_label)
 
-# Ordonnancement pour le rendu: petits d'abord, gros ensuite (au-dessus)
+# Rendering order: small points first, big ones after (on top)
 df = df.sort_values(by="z", ascending=True).reset_index(drop=True)
 
 fig = go.Figure()

fragments/plotly/line.py

@@ -120,11 +120,11 @@ fig.update_layout(
     ),
 )
 
-# Écrit le fragment de manière robuste à côté de ce fichier, dans src/fragments/line.html
+# Write the fragment next to this file into src/fragments/line.html (robust path)
 output_path = os.path.join(os.path.dirname(__file__), "fragments", "line.html")
 os.makedirs(os.path.dirname(output_path), exist_ok=True)
 
-# Injecte un petit script post-rendu pour arrondir les coins de la boîte de hover
+# Inject a small post-render script to round the hover box corners
 post_script = """
 (function(){
   function attach(gd){

fragments/plotly/pyproject.toml

@@ -1,7 +1,7 @@
 [tool.poetry]
 name = "blogpost-fine-tasks-python"
 version = "0.1.0"
-description = "Scripts de génération de fragments Plotly et conversions HTML/Markdown pour le blogpost."
+description = "Plotly fragment generation scripts and HTML/Markdown conversions for the blogpost."
 package-mode = false
 
 [tool.poetry.dependencies]