update

.gitattributes

@@ -1,4 +1,5 @@
 app/assets/images/*.png filter=lfs diff=lfs merge=lfs -text
 app/src/assets/images/*.png filter=lfs diff=lfs merge=lfs -text
 *.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text

ASTRO_MIGRATION.md

@@ -1,272 +0,0 @@
-## Migration vers Astro (Markdown/MDX) – Spécification et guide
-
-### Objectif
-- Remplacer le template Distill par une pile moderne basée sur Markdown/MDX avec Astro, tout en conservant: front‑matter, maths, code, citations/bibliographie, table des matières, figures, sections de contenu, et composants interactifs (plots/tables).
-- Offrir une optimisation d’images de premier ordre (AVIF/WebP, `srcset`, lazy‑loading) et un déploiement statique via Nginx.
-
-### Stack cible
-- Astro 4+ (SSG, sortie statique `dist/`)
-- Markdown/MDX (contenu principal)
-- Intégrations/Plugins:
-  - `@astrojs/mdx` (MDX)
-  - `remark-math` + `rehype-katex` (maths)
-  - `rehype-slug` + `rehype-autolink-headings` (ancres H2/H3/H4)
-  - `remark-toc` (table des matières auto)
-  - `rehype-citation` (citations/bibliographie depuis BibTeX/CSL)
-  - `@astrojs/image` avec `SquooshImageService` (optimisation d’images sans dépendances natives)
-  - Surlignage code: Shiki par défaut d’Astro (fences ```lang)
-
-### Mapping Distill → Astro
-- `d-front-matter` → YAML front‑matter en tête de fichier `.md/.mdx` (titre, auteurs, dates, cover/hero, tags…)
-- `d-title` → en‑tête de page dans un layout Astro (`src/layouts/BlogLayout.astro`) utilisant les métadonnées
-- `d-byline` → bloc auteurs/affiliations dans le layout
-- `d-article` → contenu Markdown principal
-- `d-figure` → `<Image />` Astro (optimisé) + `<figure>/<figcaption>` sémantique
-- `d-toc` → `remark-toc` + `rehype-slug/autolink` (TOC ancré)
-- `d-footnote`/`d-footnote-list` → notes de bas de page Markdown standard
-- `d-math` → Math Markdown via `remark-math`/`rehype-katex` (`$...$`, `$$...$$`)
-- `d-code` (Prism) → fences Markdown + Shiki
-- `d-cite`/`d-bibliography` → `rehype-citation` (génération des références + liens), section `## References` en bas
-
-### Arborescence proposée
-```
-astro-site/
-  src/
-    assets/                  # images sources (ex: banner.png)
-    content/
-      bibliography.bib
-      posts/
-        finetasks.mdx        # migration de index.html → Markdown/MDX
-    components/
-      TOC.astro              # (optionnel) wrapper visuel autour du TOC
-      PlotlyChart.jsx        # composant interactif (client:visible)
-    layouts/
-      BlogLayout.astro
-  public/                    # assets statiques bruts si besoin
-  astro.config.mjs
-  package.json
-```
-
-### Configuration Astro (plugins)
-```js
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import image from '@astrojs/image';
-import { SquooshImageService } from '@astrojs/image/squoosh';
-
-// Remark/Rehype
-import remarkMath from 'remark-math';
-import remarkToc from 'remark-toc';
-import rehypeKatex from 'rehype-katex';
-import rehypeSlug from 'rehype-slug';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeCitation from 'rehype-citation';
-
-export default defineConfig({
-  integrations: [
-    mdx(),
-    image({ serviceEntryPoint: SquooshImageService() })
-  ],
-  markdown: {
-    remarkPlugins: [
-      [remarkToc, { heading: 'Table of contents', maxDepth: 3 }],
-      remarkMath,
-    ],
-    rehypePlugins: [
-      rehypeSlug,
-      [rehypeAutolinkHeadings, { behavior: 'wrap' }],
-      rehypeKatex,
-      // Génère les citations et la biblio (insertion en bas si "## References" existe)
-      [rehypeCitation, {
-        bibliography: 'src/content/bibliography.bib',
-        linkCitations: true,
-        // CSL optionnel: csl: 'src/content/ieee.csl'
-      }],
-    ],
-    shikiConfig: { theme: 'github-dark' },
-  },
-  build: {
-    assets: 'assets',
-  },
-  output: 'static'
-});
-```
-
-Ajouter les styles KaTeX (dans `src/layouts/BlogLayout.astro` ou global CSS):
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous" />
-```
-
-### Layout principal
-```astro
----
-// src/layouts/BlogLayout.astro
-const { title, description, authors = [], published, hero } = Astro.props;
----
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{title}</title>
-    <meta name="description" content={description} />
-  </head>
-  <body>
-    <header class="page-hero">
-      {hero && <img src={hero} alt={title} loading="eager" fetchpriority="high" />}
-      <h1>{title}</h1>
-      {published && <p class="byline">{published}</p>}
-      {authors.length > 0 && (
-        <p class="authors">{authors.map(a => a.name || a).join(', ')}</p>
-      )}
-    </header>
-    <main>
-      <slot />
-    </main>
-  </body>
-  <style>
-    .page-hero img{width:100%;height:auto;}
-    main{max-width:980px;margin:0 auto;padding:24px}
-  </style>
-</html>
-```
-
-### Exemple de page MDX (migration de `index.html`)
-```mdx
----
-layout: ../layouts/BlogLayout.astro
-title: "Scaling FineWeb to 1000+ languages: Step 1: finding signal in 100s of evaluation tasks"
-description: "Multilingual evaluation & FineTasks"
-published: "Oct 23, 2024"
-authors:
-  - name: "Hynek Kydlíček"
-  - name: "Guilherme Penedo"
-  - name: "Clémentine Fourier"
-  - name: "Nathan Habib"
-  - name: "Thomas Wolf"
-hero: "../assets/images/banner.png"
----
-
-## Table of contents
-
-<!-- Le TOC sera injecté ici par remark-toc -->
-
-![FineTasks](../assets/images/banner.png)
-
-Du texte… équations $e^{i\pi}+1=0$ et un bloc:
-
-$$
-\int_a^b f(x)\,dx
-$$
-
-Citation: [@kydlicek2024finetasksmultilingualtasks].
-
-## Results
-
-<PlotlyChart client:visible dataUrl="/data/..." />
-
-## References
-```
-
-### Composants interactifs (exemples)
-- Plotly (client‑side, hydraté quand visible):
-```jsx
-// src/components/PlotlyChart.jsx
-import { useEffect, useRef } from 'react';
-import Plotly from 'plotly.js-basic-dist-min';
-
-export default function PlotlyChart({ data, layout, config }) {
-  const ref = useRef(null);
-  useEffect(() => {
-    if (!ref.current) return;
-    Plotly.newPlot(ref.current, data || [], layout || {}, config || {responsive:true});
-    return () => { Plotly.purge(ref.current); };
-  }, [data, layout, config]);
-  return <div ref={ref} style={{width:'100%'}} />;
-}
-```
-
-- DataTables: préférer générer des tables Markdown; pour un tableau interactif, créer un composant MDX dédié et l’hydrater `client:visible`.
-
-### Optimisation d’images (Astro)
-- Utiliser `@astrojs/image` (Squoosh) ou `astro:assets` pour images locales.
-- Exemple responsive (MDX):
-```astro
----
-import { Image } from '@astrojs/image/components';
-import banner from '../assets/images/banner.png';
----
-<Image src={banner} alt="FineTasks" widths={[480,768,1080,1440]} formats={["avif","webp","png"]} sizes="(max-width: 768px) 100vw, 980px" loading="lazy" decoding="async" />
-```
-- Bonnes pratiques: dimensions explicites `width/height` (automatiques avec `Image`), `loading="lazy"` hors hero, `fetchpriority="high"` sur le hero.
-
-### Citations et bibliographie
-- Placer `src/content/bibliography.bib` (copie de `app/src/bibliography.bib`).
-- Citer en Markdown: `[@clé]` ou `[-@clé]`. Ajouter `## References` à la fin; `rehype-citation` génère la bibliographie.
-
-### Commandes/installation
-```bash
-npm create astro@latest astro-site -- --template minimal
-cd astro-site
-npm i -D @astrojs/mdx @astrojs/image remark-math rehype-katex rehype-slug rehype-autolink-headings remark-toc rehype-citation
-npm run dev
-# build
-npm run build
-```
-
-### Dockerfile (multi‑stage)
-```Dockerfile
-FROM node:20 AS build
-WORKDIR /site
-COPY astro-site/package*.json ./
-RUN npm ci
-COPY astro-site/ .
-RUN npm run build
-
-FROM nginx:alpine
-COPY --from=build /site/dist /usr/share/nginx/html
-COPY nginx.conf /etc/nginx/nginx.conf
-EXPOSE 8080
-CMD ["nginx","-g","daemon off;"]
-```
-
-### Nginx (statique, cache + SPA fallback)
-```nginx
-worker_processes auto;
-events { worker_connections 1024; }
-http {
-  include /etc/nginx/mime.types;
-  server {
-    listen 8080;
-    server_name localhost;
-    root /usr/share/nginx/html;
-    index index.html;
-
-    location /assets/ {
-      expires 30d;
-      add_header Cache-Control "public, max-age=2592000, immutable";
-    }
-    location / {
-      try_files $uri $uri/ /index.html;
-    }
-    location = /health { return 200 "ok"; add_header Content-Type text/plain; }
-  }
-}
-```
-
-### Étapes de migration depuis ce dépôt
-1) Créer `astro-site/` et installer la stack (ci‑dessus).  
-2) Copier `app/src/bibliography.bib` → `astro-site/src/content/bibliography.bib`.  
-3) Copier les images `app/assets/images/*` → `astro-site/src/assets/images/*`.  
-4) Convertir `app/src/index.html` → `astro-site/src/content/posts/finetasks.mdx` (reprendre sections H2/H3/H4, figures, équations, et remplacer les blocs Distill par Markdown/MDX).  
-5) Recréer les applets (plots/tables) via composants MDX (`PlotlyChart.jsx`, etc.).  
-6) Ajuster le layout (`BlogLayout.astro`) pour le titre, auteurs, date, hero.  
-7) Ajouter TOC, maths, citations (plugins configurés).  
-8) Vérifier le build (`npm run build`) et brancher le Docker/Nginx proposés.  
-
-### Notes
-- Pour éviter des dépendances natives (Sharp) en build Docker, on force le service image Squoosh (WASM).  
-- Si besoin de SEO/sitemap/RSS, ajouter `@astrojs/sitemap`/`@astrojs/rss`.
-- Les composants interactifs doivent être idempotents et hydratés avec `client:visible`/`client:idle`.
-
-

README.md

@@ -1,5 +1,5 @@
 ---
-title: 'Scaling FineWeb to 1000+ languages: Step 1: finding signal in 100s of evaluation tasks'
+title: 'The science article template'
 emoji: 📝
 colorFrom: blue
 colorTo: indigo

app/astro.config.mjs

@@ -7,6 +7,7 @@ import remarkFootnotes from 'remark-footnotes';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeCitation from 'rehype-citation';
+import rehypePrettyCode from 'rehype-pretty-code';
 
 export default defineConfig({
   output: 'static',
@@ -22,6 +23,14 @@ export default defineConfig({
       rehypeSlug,
       [rehypeAutolinkHeadings, { behavior: 'wrap' }],
       rehypeKatex,
+      [rehypePrettyCode, {
+        theme: {
+          light: 'github-light',
+          dark: 'github-dark'
+        },
+        keepBackground: false,
+        defaultLang: 'text'
+      }],
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
         linkCitations: true

app/src/components/Aside.astro

@@ -8,11 +8,3 @@
     <slot name="aside" />
   </aside>
 </div>
-
-<style>
-  .margin-aside { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 16px; align-items: start; margin: 12px 0; }
-  .margin-aside__aside { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; font-size: 0.9rem; color: var(--text-color); }
-  @media (max-width: 1100px) { .margin-aside { grid-template-columns: 1fr; } }
-</style>
-
-

app/src/components/Footer.astro

@@ -26,7 +26,101 @@ const { citationText, bibtex } = Astro.props as Props;
   .footer-inner { max-width: 680px; margin: 0 auto; padding: 24px 16px; }
   .citation-block h3 { margin: 0 0 8px; }
   .citation-block h4 { margin: 16px 0 8px; font-size: 14px; text-transform: uppercase; color: var(--muted-color); }
-  .citation-text, .citation-bibtex { width: 100%; min-height: 44px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-bg); padding: 8px; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: var(--text-color); }
+  .citation-text, .citation-bibtex { width: 100%; min-height: 44px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--surface-bg); padding: 8px; resize: none; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; color: var(--text-color); white-space: pre-wrap; overflow-y: hidden; line-height: 1.4; }
+  .references-block h3 { margin: 24px 0 8px; }
+  .references-block .footnotes { margin-top: 8px; }
+  .references-block .bibliography { margin-top: 8px; }
 </style>
 
 
+<script is:inline>
+  (() => {
+    const getFooter = () => document.currentScript?.closest('footer') || document.querySelector('footer.distill-footer');
+    const footer = getFooter();
+    if (!footer) return;
+    const target = footer.querySelector('.references-block');
+    if (!target) return;
+
+    const contentRoot = document.querySelector('section.content-grid main') || document.querySelector('main') || document.body;
+
+    const findFirstOutsideFooter = (selectors) => {
+      for (const sel of selectors) {
+        const el = contentRoot.querySelector(sel);
+        if (el && !footer.contains(el)) return el;
+      }
+      return null;
+    };
+
+    const ensureHeading = (text) => {
+      const exists = Array.from(target.children).some((c) => c.tagName === 'H3' && c.textContent.trim().toLowerCase() === text.toLowerCase());
+      if (!exists) {
+        const h = document.createElement('h3');
+        h.textContent = text;
+        target.appendChild(h);
+      }
+    };
+
+    const moveIntoFooter = (element, headingText) => {
+      if (!element) return false;
+      if (element.classList.contains('footnotes')) {
+        const hr = element.querySelector('hr');
+        if (hr) hr.remove();
+      }
+      // Supprimer un éventuel titre déjà inclus dans le bloc (pour éviter doublons)
+      const firstHeading = element.querySelector(':scope > h1, :scope > h2, :scope > h3');
+      if (firstHeading) {
+        const txt = (firstHeading.textContent || '').trim().toLowerCase();
+        const targetTxt = headingText.trim().toLowerCase();
+        if (txt === targetTxt || txt.includes('reference') || txt.includes('bibliograph')) {
+          firstHeading.remove();
+        }
+      }
+      ensureHeading(headingText);
+      target.appendChild(element);
+      return true;
+    };
+
+    const autoResizeTextareas = () => {
+      const areas = footer.querySelectorAll('.citation-text, .citation-bibtex');
+      areas.forEach((ta) => {
+        ta.style.height = 'auto';
+        const min = 44;
+        const next = Math.max(ta.scrollHeight, min);
+        ta.style.height = next + 'px';
+      });
+    };
+
+    const run = () => {
+      const referencesEl = findFirstOutsideFooter(['#references', '.references', '.bibliography']);
+      const footnotesEl = findFirstOutsideFooter(['.footnotes']);
+      const movedRefs = moveIntoFooter(referencesEl, 'References');
+      const movedNotes = moveIntoFooter(footnotesEl, 'Footnotes');
+      autoResizeTextareas();
+      return movedRefs || movedNotes;
+    };
+
+    // Try now; if not found yet, try again on DOM ready
+    const done = run();
+    if (!done) {
+      const onReady = () => run();
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', onReady, { once: true });
+      } else {
+        setTimeout(onReady, 0);
+      }
+    }
+
+    // Resize on window changes (e.g., fonts, layout)
+    window.addEventListener('resize', () => {
+      // throttle via rAF
+      let raf = null;
+      if (raf) cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        autoResizeTextareas();
+        raf = null;
+      });
+    }, { passive: true });
+  })();
+</script>
+
+

app/src/pages/article.mdx

@@ -2,9 +2,9 @@
 title: "The science template:\nCraft Beautiful Blogs"
 description: "A modern, MDX-first research article template with math, citations, and interactive figures."
 authors:
-  - "Hynek Kydlíček"
-  - "Guilherme Penedo"
-  - "Clémentine Fourier"
+  - "John Doe"
+  - "Alice Martin"
+  - "Robert Brown"
 affiliation: "Hugging Face"
 published: "Feb 19, 2025"
 tags:
@@ -15,17 +15,26 @@ ogImage: "https://example.com/your-og-image.png"
 
 import HtmlFragment from "../components/HtmlFragment.astro";
 import { Image } from 'astro:assets';
-import placeholder from "../assets/images/placeholder.png";
+import placeholder from "../assets/images/placeholder.jpg";
 import audioDemo from "../assets/audio/audio-example.wav";
 import Aside from "../components/Aside.astro";
 import visualPoster from "../assets/images/visual-vocabulary-poster.png";
 
 
-Welcome to this single-page research article template built with Astro and MDX. It’s designed to help you write clear, modern, and interactive technical articles with minimal setup. Whether you cover machine learning, data science, physics, or software topics, this template keeps the authoring flow simple while offering robust features out of the box.
-
-Reading time: 10–15 minutes.
-
-In this guide, you’ll learn how to install the template, write content (math, citations, images, code, asides, interactive fragments), customize styles and behavior, and follow a few best practices for publishing.
+<Aside>
+  Welcome to this single-page research article template built with Astro and MDX.
+  It’s designed to help you write clear, modern, and interactive technical articles with minimal setup.
+  Whether you cover machine learning, data science, physics, or software topics, this template keeps the authoring flow simple while offering robust features out of the box.
+  <Fragment slot="aside">
+    Reading time: 10–15 minutes.
+  </Fragment>
+  In this guide, you’ll learn how to install the template,
+  write content (math, citations, images, code, asides, interactive fragments),
+  customize styles and behavior, and follow a few best practices for publishing.
+  <Fragment slot="aside">
+    If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/science-blog-template/discussions?status=open&type=discussion">Community tab</a>!
+  </Fragment>
+</Aside>
 
 ## Features
 
@@ -34,13 +43,14 @@ In this guide, you’ll learn how to install the template, write content (math,
   <span className="tag">KaTeX math</span>
   <span className="tag">Citations & footnotes</span>
   <span className="tag">Automatic build</span>
-  <span className="tag">Auto table of content</span>
+  <span className="tag">Table of content</span>
   <span className="tag">Dark theme</span>
   <span className="tag">HTML fragments</span>
   <span className="tag">Plotly ready</span>
   <span className="tag">SEO Friendly</span>
   <span className="tag">Lightweight bundle(\<500ko)</span>
-  <span className="tag">TO DO: Zoomable images</span>
+  <span className="tag">Aside notes</span>
+  <span className="tag">Medium like zoomable images</span>
 </div>
 
 ## Getting Started
@@ -66,6 +76,52 @@ Large assets: track binaries (e.g., `.png`, `.wav`) with Git LFS to keep the rep
 
 Author content in MDX. Below are minimal examples for the core elements.
 
+### MDX: frontmatter and imports (minimal example)
+
+The initial skeleton of this article looks like this:
+
+```mdx
+---
+title: "The science template:\nCraft Beautiful Blogs"
+description: "A modern, MDX-first research article template with math, citations, and interactive figures."
+authors:
+  - "John Doe"
+  - "Alice Martin"
+  - "Robert Brown"
+affiliation: "Hugging Face"
+published: "Feb 19, 2025"
+tags:
+  - research
+  - template
+ogImage: "https://example.com/your-og-image.png"
+---
+
+import HtmlFragment from "../components/HtmlFragment.astro";
+import { Image } from 'astro:assets';
+import placeholder from "../assets/images/placeholder.png";
+import audioDemo from "../assets/audio/audio-example.wav";
+import Aside from "../components/Aside.astro";
+import visualPoster from "../assets/images/visual-vocabulary-poster.png";
+
+
+<Aside>
+  Welcome to this single-page research article template built with Astro and MDX.
+  It’s designed to help you write clear, modern, and interactive technical articles with minimal setup.
+  Whether you cover machine learning, data science, physics, or software topics, this template keeps the authoring flow simple while offering robust features out of the box.
+  <Fragment slot="aside">
+    Reading time: 10–15 minutes.
+  </Fragment>
+  In this guide, you’ll learn how to install the template,
+  write content (math, citations, images, code, asides, interactive fragments),
+  customize styles and behavior, and follow a few best practices for publishing.
+  <Fragment slot="aside">
+    If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/lvwerra/distill-blog-template/discussions?status=open&type=discussion">Community tab</a>!
+  </Fragment>
+</Aside>
+
+
+```
+
 ### Math
 
 Inline example: $x^2 + y^2 = z^2$.
@@ -87,29 +143,114 @@ $$
 
 ### Images
 
-Responsive image using `astro:assets`:
+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.
 
-<Image src={placeholder} alt="Responsive example image" />
+<figure>
+  <Image
+    src={placeholder}
+    data-zoomable
+    alt="Example with caption and credit"
+  />
+  <figcaption>
+    Optimized image with a descriptive caption.
+    <span className="image-credit">Crédit: Photo by <a href="https://example.com">Author</a></span>
+  </figcaption>
+</figure>
 
 ```mdx
 import { Image } from 'astro:assets'
-import myImage from '../assets/images/placeholder.png'
+import myImage from '../assets/images/placeholder.jpg'
+
+<Image src={myImage} alt="Responsive, optimized example image" />
+
+<figure>
+  <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>
+  </figcaption>
+</figure>
+```
+
+
+### Code blocks
+
+Use fenced code blocks with a language for syntax highlighting.
 
-<Image src={myImage} alt="Responsive example image" />
+Python block example:
+
+```python
+def greet(name: str) -> None:
+    print(f"Hello, {name}!")
+
+greet("Astro")
 ```
 
+How to write it in MDX:
+
+````mdx
+```python
+def greet(name: str) -> None:
+    print(f"Hello, {name}!")
+
+greet("Astro")
+```
+````
+
+
+### GitHub code embeds
+
+Finally, if you want to include code from GitHub you can use emgithub.com and, for example, create a collapsible widget like this:
+
+```html
+<details style="background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; margin: 1em 0;">
+  <summary style="padding: 12px; cursor: pointer; user-select: none; background: #f3f4f6; border-bottom: 1px solid #d0d7de;">
+    👉 Naive DP implementation with overlap in Picotron (Click to expand)
+  </summary>
+  <div class="code-embed-container" style="margin: 0; border-radius: 0; overflow-x: scroll; width: max-content; min-width: 100%; font-size: 8px;"></div>
+  <script 
+    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
+  </script>
+</details>
+```
+
+Which will display as follows:
+
+<details style="background: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; margin: 1em 0;">
+  <summary style="padding: 12px; cursor: pointer; user-select: none; background: #f3f4f6; border-bottom: 1px solid #d0d7de;">
+    👉 Naive DP implementation with overlap in Picotron (Click to expand)
+  </summary>
+  <div class="code-embed-container" style="margin: 0; border-radius: 0; overflow-x: scroll; width: max-content; min-width: 100%; font-size: 8px;"></div>
+  <script 
+    src="https://emgithub.com/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F0035cce0e04afd6192763b11efe50010d8ad0f71%2Fpicotron%2Fdata_parallel%2Fdata_parallel.py%23L10-L60&style=github&type=code&showBorder=off&showLineNumbers=on&showFileMeta=on&showCopy=on&showFullPath=on">
+  </script>
+</details>
+
 ### Citations and notes
 
-A short citation [@example2023]. A footnote[^note].
+Here are a few variations using the same bibliography:
+
+1) In-text citation with brackets: [@example2023].
+
+2) Narrative citation: As shown by @vaswani2017attention, transformers enable efficient sequence modeling.
 
-[^note]: Example footnote.
+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.
 
 ```mdx
-As shown in [@example2023]. A footnote[^note].
+1) In-text citation with brackets: [@example2023].
+
+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].
 
-[^note]: Example footnote.
+[^f1]: Footnote attached to the sentence above.
 ```
 
+
 ### Interactive fragments
 
 Plotly example (line):
@@ -170,12 +311,19 @@ import audioDemo from '../assets/audio/audio-example.wav'
 </audio>
 ```
 
-## Advanced Customization
+### Tracking training metrics with TrackIO
+
+TrackIO is a lightweight dashboard to monitor ML experiments. The embed below opens a demo project and shows a couple of metrics. You can customize the query parameters (`project`, `metrics`, `sidebar`) to fit your setup.
 
-- Styling: customize `src/styles/global.scss` for layout, typography, color scheme, and dark mode variables.
-- Headings/TOC: tweak the TOC builder in `src/pages/index.astro` to match your preferred levels and behavior.
-- Components: extend `components/` with bespoke MDX-friendly blocks (callouts, figures, widgets).
-- Fragments: generate self-contained HTML fragments (e.g., Plotly) and include them via `<HtmlFragment src="..." />`.
+<div style="margin-top: 8px;">
+  <iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden" width="100%" height="600" frameborder="0"></iframe>
+</div>
+
+To embed TrackIO in your own page, copy the following HTML and adjust the `src` parameters:
+
+```html
+<iframe src="https://org_name-space_name.hf.space/?project=fake-training&metrics=train_loss,train_accuracy&sidebar=hidden" width="100%" height="600" frameBorder="0"></iframe>
+```
 
 ## Best Practices
 

app/src/pages/index.astro

@@ -22,6 +22,31 @@ const fmOg = articleFM?.ogImage as string | undefined;
 const imageAbs = fmOg && fmOg.startsWith('http')
   ? fmOg
   : (Astro.site ? new URL((fmOg ?? ogDefault.src), Astro.site).toString() : (fmOg ?? ogDefault.src));
+
+// ---- Build citation text & BibTeX from frontmatter ----
+const rawTitle = articleFM?.title ?? 'Untitled article';
+const titleFlat = String(rawTitle)
+  .replace(/\\n/g, ' ')
+  .replace(/\n/g, ' ')
+  .replace(/\s+/g, ' ')
+  .trim();
+const extractYear = (val: string | undefined): number | undefined => {
+  if (!val) return undefined;
+  const d = new Date(val);
+  if (!Number.isNaN(d.getTime())) return d.getFullYear();
+  const m = String(val).match(/(19|20)\d{2}/);
+  return m ? Number(m[0]) : undefined;
+};
+
+const year = extractYear(published);
+const citationAuthorsText = authors.join(', ');
+const citationText = `${citationAuthorsText}${year ? ` (${year})` : ''}. "${titleFlat}".`;
+
+const authorsBib = authors.join(' and ');
+const keyAuthor = (authors[0] || 'article').split(/\s+/).slice(-1)[0].toLowerCase();
+const keyTitle = titleFlat.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_|_$/g, '').slice(0, 24);
+const bibKey = `${keyAuthor}${year ?? ''}_${keyTitle}`;
+const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBib}},\n  ${year ? `year={${year}}` : ''}\n}`;
 ---
 <html lang="en">
   <head>
@@ -60,14 +85,7 @@ const imageAbs = fmOg && fmOg.startsWith('http')
       </main>
     </section>
 
-    <Footer citationText='"The Distill Blog Template", 2025.' bibtex={`@misc{distill_blog_template,
-  title={The Distill Blog Template},
-  author={Some Authors et al},
-  year={2025},
-}`}
-    >
-      <div class="references"><h3>References</h3></div>
-    </Footer>
+    <Footer citationText={citationText} bibtex={bibtex} />
 
     <!-- Medium-like image zoom (lightbox) -->
     <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"></script>
@@ -212,6 +230,43 @@ const imageAbs = fmOg && fmOg.startsWith('http')
         document.addEventListener('DOMContentLoaded', buildTOC, { once: true });
       } else { buildTOC(); }
     </script>
+
+    <script>
+      // Inject visible language badges for code blocks when data-language is missing
+      const addCodeLangChips = () => {
+        const blocks = document.querySelectorAll('section.content-grid pre > code');
+        blocks.forEach(code => {
+          const pre = code.parentElement;
+          if (!pre || pre.querySelector('.code-lang-chip')) return;
+          // Try several places to detect language
+          const getLang = () => {
+            const direct = code.getAttribute('data-language') || code.dataset?.language;
+            if (direct) return direct;
+            const codeClass = (code.className || '').match(/language-([a-z0-9+\-]+)/i);
+            if (codeClass) return codeClass[1];
+            const preData = pre.getAttribute('data-language') || pre.dataset?.language;
+            if (preData) return preData;
+            const wrapper = pre.closest('.astro-code');
+            if (wrapper) {
+              const wrapData = wrapper.getAttribute('data-language') || wrapper.dataset?.language;
+              if (wrapData) return wrapData;
+              const wrapClass = (wrapper.className || '').match(/language-([a-z0-9+\-]+)/i);
+              if (wrapClass) return wrapClass[1];
+            }
+            return 'text';
+          };
+          const lang = getLang().toUpperCase();
+          const chip = document.createElement('span');
+          chip.className = 'code-lang-chip';
+          chip.textContent = lang;
+          pre.classList.add('has-lang-chip');
+          pre.appendChild(chip);
+        });
+      };
+      if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', addCodeLangChips, { once: true });
+      } else { addCodeLangChips(); }
+    </script>
   </body>
 </html>
 

app/src/styles/components/_base.scss

@@ -0,0 +1,153 @@
+// ============================================================================
+// Base / Reset
+// ============================================================================
+html { box-sizing: border-box; }
+*, *::before, *::after { box-sizing: inherit; }
+body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji; color: var(--text-color); }
+
+/* Avoid constraining <main> inside grid; scope container sizing elsewhere if needed */
+/* main { max-width: 980px; margin: 24px auto; padding: 16px; } */
+
+// ============================================================================
+// Typography (inspired by Distill)
+// ============================================================================
+html { font-size: 14px; line-height: 1.6; }
+@media (min-width: 768px) { html { font-size: 16px; } }
+@media (min-width: 1024px) { html { font-size: 17px; } }
+
+.content-grid main { color: var(--text-color); }
+.content-grid main p { margin: 0 0 var(--spacing-3); }
+
+.content-grid main h2 {
+  font-weight: 600;
+  font-size: clamp(22px, 2.6vw, 32px);
+  line-height: 1.2;
+  margin: var(--spacing-5) 0 var(--spacing-3);
+  padding-bottom: var(--spacing-2);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.content-grid main h3 {
+  font-weight: 700;
+  font-size: clamp(18px, 2.1vw, 22px);
+  line-height: 1.25;
+  margin: var(--spacing-4) 0 var(--spacing-2);
+}
+
+.content-grid main h4 {
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 14px;
+  line-height: 1.2;
+  margin: var(--spacing-3) 0 var(--spacing-2);
+}
+
+.content-grid main a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline); }
+.content-grid main a:hover { border-bottom: 1px solid var(--link-underline-hover); }
+
+/* Ne pas souligner les liens de titres dans l'article (pas le TOC) */
+.content-grid main h2 a,
+.content-grid main h3 a,
+.content-grid main h4 a { border-bottom: none; text-decoration: none; }
+.content-grid main h2 a:hover,
+.content-grid main h3 a:hover,
+.content-grid main h4 a:hover { border-bottom: none; text-decoration: none; }
+
+.content-grid main ul,
+.content-grid main ol { padding-left: 24px; margin: 0 0 var(--spacing-3); }
+.content-grid main li { margin-bottom: var(--spacing-2); }
+.content-grid main li:last-child { margin-bottom: 0; }
+
+.content-grid main blockquote {
+  border-left: 2px solid var(--border-color);
+  padding-left: var(--spacing-4);
+  font-style: italic;
+  color: var(--muted-color);
+  margin: var(--spacing-4) 0;
+}
+
+.content-grid main pre { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; overflow: auto; }
+.content-grid main code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+
+/* Pretty-code language label (visible chip at top-right) */
+.content-grid main pre:has(code[data-language]),
+.content-grid main pre:has(code[class*="language-"]) {
+  position: relative;
+  padding-top: 28px; /* space for the label */
+}
+.content-grid main pre > code[data-language]::after,
+.content-grid main pre > code[class*="language-"]::after {
+  content: attr(data-language);
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  font-size: 11px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: var(--muted-color);
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  padding: 2px 4px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* JS fallback chip */
+.content-grid main pre.has-lang-chip { position: relative; padding-top: 22px; }
+.content-grid main pre .code-lang-chip {
+  position: absolute;
+  top: 0px; right: 0px;
+  font-size: 10px; line-height: 1;
+  color: rgba(255,255,255,.5);
+  background: rgba(255,255,255,.1);
+  border: none;
+  border-radius: 0px; padding: 6px 6px 4px 4px; pointer-events: none; z-index: 1;
+}
+
+.content-grid main table { border-collapse: collapse; width: 100%; margin: 0 0 var(--spacing-4); }
+.content-grid main th, .content-grid main td { border-bottom: 1px solid var(--border-color); padding: 6px 8px; text-align: left; font-size: 15px; }
+.content-grid main thead th { border-bottom: 1px solid var(--border-color); }
+
+.content-grid main hr { border: none; border-bottom: 1px solid var(--border-color); margin: var(--spacing-5) 0; }
+
+
+
+
+// ============================================================================
+// Media / Figures
+// ============================================================================
+:where(picture, img) {
+  max-width: 100%;
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+figure { margin: 16px 0; }
+figcaption { color: var(--muted-color); font-size: 12px; }
+
+// Inline feature tags
+.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1;
+  border-radius: 999px;
+  background: var(--surface-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+}
+[data-theme="dark"] .tag { background: #1a1f27; border-color: rgba(255,255,255,.15); }
+
+
+// ============================================================================
+// Figures, captions & image credits
+// ============================================================================
+figure { margin: 12px 0; }
+figcaption { text-align: center; font-size: 0.9rem; color: var(--muted-color); margin-top: 6px; }
+.image-credit { display: block; margin-top: 4px; font-size: 12px; color: var(--muted-color); }
+.image-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

app/src/styles/components/_layout.scss

@@ -0,0 +1,33 @@
+// ============================================================================
+// Layout – 3-column grid (TOC / Article / Aside)
+// ============================================================================
+.content-grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
+.content-grid > main { max-width: 100%; margin: 0; padding: 0; }
+
+// TOC (left column)
+.toc { position: sticky; top: 24px; }
+.toc nav { border-left: 1px solid var(--border-color); padding-left: 16px; font-size: 13px; }
+.toc .title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
+
+// Hide in-article TOC (duplicated by sticky aside)
+main > nav:first-of-type { display: none; }
+
+// TOC look & feel
+.toc nav ul { margin: 0 0 6px; padding-left: 1em; }
+.toc nav li { list-style: none; margin: .25em 0; }
+.toc nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }
+.toc nav > ul > li > a { font-weight: 700; }
+.toc nav a:hover { text-decoration: underline solid var(--muted-color); }
+.toc nav a.active { text-decoration: underline; }
+
+// Right aside (notes)
+.right-aside { position: sticky; top: 24px; }
+.right-aside .aside-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-color); }
+
+// Responsive – collapse to single column
+@media (max-width: 1100px) {
+  .content-grid { grid-template-columns: 1fr; }
+  .toc { position: static; }
+  .right-aside { display: none; }
+  main > nav:first-of-type { display: block; }
+}

app/src/styles/components/_variables.scss

@@ -0,0 +1,40 @@
+// ============================================================================
+// Theme Variables (inspired by Distill)
+// ============================================================================
+:root {
+  --distill-gray: rgb(107, 114, 128);
+  --distill-gray-light: rgb(185, 185, 185);
+  --distill-gray-lighter: rgb(228, 228, 228);
+  --distill-gray-lightest: rgb(245, 245, 245);
+  --distill-blue: #007BFF;
+
+  --text-color: rgba(0,0,0,.85);
+  --muted-color: rgba(0,0,0,.6);
+  --border-color: rgba(0,0,0,.1);
+
+  /* Light surfaces & links */
+  --surface-bg: #fafafa;
+  --code-bg: #f6f8fa;
+  --link-underline: rgba(0,0,0,.4);
+  --link-underline-hover: rgba(0,0,0,.8);
+
+  --spacing-1: 8px;
+  --spacing-2: 12px;
+  --spacing-3: 16px;
+  --spacing-4: 24px;
+  --spacing-5: 32px;
+}
+// Theme tokens for dark mode
+[data-theme="dark"] {
+  --text-color: rgba(255,255,255,.9);
+  --muted-color: rgba(255,255,255,.7);
+  --border-color: rgba(255,255,255,.15);
+  --surface-bg: #12151b;
+  --code-bg: #12151b;
+  --link-underline: rgba(255,255,255,.5);
+  --link-underline-hover: rgba(255,255,255,.9);
+  color-scheme: dark;
+  background: #0f1115;
+}
+
+

app/src/styles/global.scss

@@ -1,41 +1,6 @@
-// ============================================================================
-// Theme Variables (inspired by Distill)
-// ============================================================================
-:root {
-  --distill-gray: rgb(107, 114, 128);
-  --distill-gray-light: rgb(185, 185, 185);
-  --distill-gray-lighter: rgb(228, 228, 228);
-  --distill-gray-lightest: rgb(245, 245, 245);
-  --distill-blue: #007BFF;
-
-  --text-color: rgba(0,0,0,.85);
-  --muted-color: rgba(0,0,0,.6);
-  --border-color: rgba(0,0,0,.1);
-
-  /* Light surfaces & links */
-  --surface-bg: #fafafa;
-  --code-bg: #f6f8fa;
-  --link-underline: rgba(0,0,0,.4);
-  --link-underline-hover: rgba(0,0,0,.8);
-
-  --spacing-1: 8px;
-  --spacing-2: 12px;
-  --spacing-3: 16px;
-  --spacing-4: 24px;
-  --spacing-5: 32px;
-}
-// Theme tokens for dark mode
-[data-theme="dark"] {
-  --text-color: rgba(255,255,255,.9);
-  --muted-color: rgba(255,255,255,.7);
-  --border-color: rgba(255,255,255,.15);
-  --surface-bg: #12151b;
-  --code-bg: #12151b;
-  --link-underline: rgba(255,255,255,.5);
-  --link-underline-hover: rgba(255,255,255,.9);
-  color-scheme: dark;
-  background: #0f1115;
-}
+@import "./components/variables";
+@import "./components/base";
+@import "./components/layout";
 /* Dark-mode form tweak */
 [data-theme="dark"] .plotly_input_container > select { background-color: #1a1f27; border-color: var(--border-color); color: var(--text-color); }
 
@@ -47,116 +12,34 @@
 [data-theme="dark"] .citation-text,
 [data-theme="dark"] .citation-bibtex { background: #12151b; border-color: rgba(255,255,255,.15); color: var(--text-color); }
 
-// ============================================================================
-// Base / Reset
-// ============================================================================
-html { box-sizing: border-box; }
-*, *::before, *::after { box-sizing: inherit; }
-body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji; color: var(--text-color); }
-
-/* Avoid constraining <main> inside grid; scope container sizing elsewhere if needed */
-/* main { max-width: 980px; margin: 24px auto; padding: 16px; } */
-
-// ============================================================================
-// Typography (inspired by Distill)
-// ============================================================================
-html { font-size: 14px; line-height: 1.6; }
-@media (min-width: 768px) { html { font-size: 16px; } }
-@media (min-width: 1024px) { html { font-size: 17px; } }
-
-.content-grid main { color: var(--text-color); }
-.content-grid main p { margin: 0 0 var(--spacing-3); }
-
-.content-grid main h2 {
-  font-weight: 600;
-  font-size: clamp(22px, 2.6vw, 32px);
-  line-height: 1.2;
-  margin: var(--spacing-5) 0 var(--spacing-3);
-  padding-bottom: var(--spacing-2);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.content-grid main h3 {
-  font-weight: 700;
-  font-size: clamp(18px, 2.1vw, 22px);
-  line-height: 1.25;
-  margin: var(--spacing-4) 0 var(--spacing-2);
-}
-
-.content-grid main h4 {
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 14px;
-  line-height: 1.2;
-  margin: var(--spacing-3) 0 var(--spacing-2);
-}
-
-.content-grid main a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--link-underline); }
-.content-grid main a:hover { border-bottom: 1px solid var(--link-underline-hover); }
-
-/* Ne pas souligner les liens de titres dans l'article (pas le TOC) */
-.content-grid main h2 a,
-.content-grid main h3 a,
-.content-grid main h4 a { border-bottom: none; text-decoration: none; }
-.content-grid main h2 a:hover,
-.content-grid main h3 a:hover,
-.content-grid main h4 a:hover { border-bottom: none; text-decoration: none; }
 
-.content-grid main ul,
-.content-grid main ol { padding-left: 24px; margin: 0 0 var(--spacing-3); }
-.content-grid main li { margin-bottom: var(--spacing-2); }
-.content-grid main li:last-child { margin-bottom: 0; }
+.margin-aside { position: relative; margin: 12px 0; }
 
-.content-grid main blockquote {
-  border-left: 2px solid var(--border-color);
-  padding-left: var(--spacing-4);
-  font-style: italic;
+.margin-aside__main { /* main text stays full width of the main column */ }
+.margin-aside__aside {
+  position: absolute;
+  top: 0;
+  right: -260px; /* push into the right grid column (width 260 + gap 32) */
+  width: 260px;
+  border-radius: 8px;
+  padding: 10px;
+  font-size: 0.9rem;
   color: var(--muted-color);
-  margin: var(--spacing-4) 0;
 }
-
-.content-grid main pre { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; overflow: auto; }
-.content-grid main code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
-
-.content-grid main table { border-collapse: collapse; width: 100%; margin: 0 0 var(--spacing-4); }
-.content-grid main th, .content-grid main td { border-bottom: 1px solid var(--border-color); padding: 6px 8px; text-align: left; font-size: 15px; }
-.content-grid main thead th { border-bottom: 1px solid var(--border-color); }
-
-.content-grid main hr { border: none; border-bottom: 1px solid var(--border-color); margin: var(--spacing-5) 0; }
-
-// ============================================================================
-// Media / Figures
-// ============================================================================
-:where(picture, img) {
-  max-width: 100%;
-  width: 100%;
-  height: auto;
-  display: block;
+@media (max-width: 1100px) {
+  .margin-aside__aside {
+    position: static;
+    width: auto;
+    margin-top: 8px;
+  }
 }
 
-figure { margin: 16px 0; }
-figcaption { color: var(--muted-color); font-size: 12px; }
-
-// Inline feature tags
-.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
-.tag {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  font-size: 12px;
-  line-height: 1;
-  border-radius: 999px;
-  background: var(--surface-bg);
-  border: 1px solid var(--border-color);
-  color: var(--text-color);
-}
-[data-theme="dark"] .tag { background: #1a1f27; border-color: rgba(255,255,255,.15); }
 
 /* Opt-in zoomable images */
 img[data-zoomable] { cursor: zoom-in; }
 .medium-zoom--opened img[data-zoomable] { cursor: zoom-out; }
 
+
 // ============================================================================
 // Hero (full-bleed)
 // ============================================================================
@@ -202,40 +85,6 @@ img[data-zoomable] { cursor: zoom-in; }
   }
   .meta-container-cell p { margin: 0; }
 
-// ============================================================================
-// Layout – 3-column grid (TOC / Article / Aside)
-// ============================================================================
-.content-grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
-.content-grid > main { max-width: 100%; margin: 0; padding: 0; }
-
-// TOC (left column)
-.toc { position: sticky; top: 24px; }
-.toc nav { border-left: 1px solid var(--border-color); padding-left: 16px; font-size: 13px; }
-.toc .title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
-
-// Hide in-article TOC (duplicated by sticky aside)
-main > nav:first-of-type { display: none; }
-
-// TOC look & feel
-.toc nav ul { margin: 0 0 6px; padding-left: 1em; }
-.toc nav li { list-style: none; margin: .25em 0; }
-.toc nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }
-.toc nav > ul > li > a { font-weight: 700; }
-.toc nav a:hover { text-decoration: underline solid var(--muted-color); }
-.toc nav a.active { text-decoration: underline; }
-
-// Right aside (notes)
-.right-aside { position: sticky; top: 24px; }
-.right-aside .aside-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-color); }
-
-// Responsive – collapse to single column
-@media (max-width: 1100px) {
-  .content-grid { grid-template-columns: 1fr; }
-  .toc { position: static; }
-  .right-aside { display: none; }
-  main > nav:first-of-type { display: block; }
-}
-
 // ============================================================================
 // Plotly – fragments & controls
 // ============================================================================