\ No newline at end of file
diff --git a/app/src/fragments/bar.html b/app/src/fragments/bar.html
new file mode 100644
index 0000000000000000000000000000000000000000..381be0b01b507e5dcce85ef50986e477f47531fa
--- /dev/null
+++ b/app/src/fragments/bar.html
@@ -0,0 +1,22 @@
+
\ No newline at end of file
diff --git a/app/src/fragments/heatmap.html b/app/src/fragments/heatmap.html
new file mode 100644
index 0000000000000000000000000000000000000000..55f9331941ac9b975e0caf054f1e6fdc00ae04be
--- /dev/null
+++ b/app/src/fragments/heatmap.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/fragments/line.html b/app/src/fragments/line.html
new file mode 100644
index 0000000000000000000000000000000000000000..83f354cdbd97d0adedbd380f910bbb2d45728001
--- /dev/null
+++ b/app/src/fragments/line.html
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/layouts/ArticleLayout.astro b/app/src/layouts/ArticleLayout.astro
new file mode 100644
index 0000000000000000000000000000000000000000..84f1b1731c361a37c939da42a41b422f520b83e9
--- /dev/null
+++ b/app/src/layouts/ArticleLayout.astro
@@ -0,0 +1,70 @@
+---
+import type { APIContext } from 'astro';
+
+interface Props {
+ title: string;
+ description?: string;
+ authors?: string[];
+ published?: string; // ISO ou lisible
+ tags?: string[];
+ image?: string; // URL absolue recommandée
+}
+
+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,
+};
+---
+
+
+
+
+
+ {title}
+ {description && }
+
+
+
+
+
+ {description && }
+
+ {ogImage && }
+ {published && }
+ {authors.map(a => )}
+
+
+
+ {description && }
+ {ogImage && }
+
+
+
+
+
+
+
+
+
diff --git a/app/src/pages/article.mdx b/app/src/pages/article.mdx
new file mode 100644
index 0000000000000000000000000000000000000000..8c7ba4ced5f117f33530c7fa778e98666fe04101
--- /dev/null
+++ b/app/src/pages/article.mdx
@@ -0,0 +1,195 @@
+---
+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"
+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";
+
+
+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.
+
+## Features
+
+- Math via KaTeX (remark-math/rehype-katex)
+- Citations and footnotes
+- Responsive images with `astro:assets`
+- Anchored headings and a generated table of contents
+- Dark/light theme toggle
+- HTML fragments for self-contained visualizations (e.g., Plotly)
+
+## Getting Started
+
+Installation:
+
+```bash
+npm install
+npm run dev
+```
+
+Build for production:
+
+```bash
+npm run build
+```
+
+Deployment: serve the `dist/` directory on any static host. A Docker/Nginx setup is included and works well on Spaces or similar environments.
+
+Large assets: 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
+
+Author content in MDX. Below are minimal examples for the core elements.
+
+### Math
+
+Inline example: $x^2 + y^2 = z^2$.
+
+Block (scaled dot-product attention):
+
+$$
+\mathrm{Attention}(Q, K, V) = \mathrm{softmax}\!\left(\frac{QK^{\top}}{\sqrt{d_k}}\right) V
+$$
+
+```mdx
+Inline: $x^2 + y^2 = z^2$
+
+Block:
+$$
+\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
+$$
+```
+
+### Images
+
+Responsive image using `astro:assets`:
+
+
+
+```mdx
+import { Image } from 'astro:assets'
+import myImage from '../assets/images/placeholder.png'
+
+
+```
+
+### Citations and notes
+
+A short citation [@example2023]. A footnote[^note].
+
+[^note]: Example footnote.
+
+```mdx
+As shown in [@example2023]. A footnote[^note].
+
+[^note]: Example footnote.
+```
+
+### Interactive fragments
+
+Plotly example (line):
+
+
+
+
+
+```mdx
+import HtmlFragment from '../components/HtmlFragment.astro'
+
+
+```
+
+### Asides
+
+
+
+```mdx
+import Aside from '../components/Aside.astro'
+
+
+```
+
+### Minimal table
+
+| Method | Score |
+|---|---|
+| A | 0.78 |
+| B | 0.86 |
+
+```mdx
+| Method | Score |
+| --- | --- |
+| A | 0.78 |
+| B | 0.86 |
+```
+
+### Audio
+
+
+
+```mdx
+import audioDemo from '../assets/audio/audio-example.wav'
+
+
+```
+
+## Advanced Customization
+
+- 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 ``.
+
+## Best Practices
+
+- Keep sections short and focused.
+- Prefer vector or optimized images; use `astro:assets` for responsive delivery.
+- Annotate figures and code minimally but clearly.
+- Use math sparingly; explain notation on first use.
+
+### Choosing 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.
+
+
+
+
+ Visual Vocabulary: a handy reference to select chart types by purpose (comparison, distribution, part-to-whole, correlation, and more).
+
+
+
+
+## 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.
+
diff --git a/app/src/pages/index.astro b/app/src/pages/index.astro
index 630c04ecb4e8af91a765ba6639bdeb28e23bea96..9d97f89511c86eb70b45bca9393bb6101b4e9b41 100644
--- a/app/src/pages/index.astro
+++ b/app/src/pages/index.astro
@@ -1,157 +1,194 @@
---
-import { Image } from 'astro:assets';
-import banner from "../assets/images/banner.png";
-import HtmlFragment from "../components/HtmlFragment.astro";
-const title = 'The Distill Blog Template (Astro)';
+import Article, { frontmatter as articleFM } from './article.mdx';
+import Meta from '../components/Meta.astro';
+import HtmlFragment from '../components/HtmlFragment.astro';
+import Footer from '../components/Footer.astro';
+import ThemeToggle from '../components/ThemeToggle.astro';
+import SeoHead from '../components/SeoHead.astro';
+import ogDefault from '../assets/images/visual-vocabulary-poster.png';
+import '../styles/global.scss';
+const docTitle = articleFM?.title ?? 'Untitled article';
+// Autoriser un retour à la ligne dans le titre via "\n" ou sauts de ligne YAML
+const docTitleHtml = (articleFM?.title ?? 'Untitled article')
+ .replace(/\\n/g, ' ')
+ .replace(/\n/g, ' ');
+const description = articleFM?.description ?? '';
+const authors = articleFM?.authors ?? [];
+const published = articleFM?.published ?? undefined;
+const tags = articleFM?.tags ?? [];
+// Prefer ogImage from frontmatter if provided
+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));
---
-
- {title}
+ {docTitle}
+
+
-
-
-
-
-
-
-
-
The Distill Template: Craft Beautiful Blogs
-
-
-
-
-
-
-
-
-
-
It's nice to have a cute interactive banner!
-
-
-
-
-
-
-
-
-
Welcome to the Distill Blog Template! This framework is based on the distill.pub design and has been adapted to make it easy for you to create beautiful, interactive technical blogs.
-
-
This template includes support for mathematics, interactive visualizations, citations, footnotes, and more.
-
-
Getting Started with the Template
-
Installation and Setup
- npm install\nnpm run dev
-
-
Mathematical Equations
-
You can include inline math using x^2 + y^2 = z^2.