rename figure into image

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

@@ -0,0 +1,284 @@
+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": {
+"demo/best-pratices.mdx": {
+	id: "demo/best-pratices.mdx";
+  slug: "demo/best-pratices";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/components.mdx": {
+	id: "demo/components.mdx";
+  slug: "demo/components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/debug-components.mdx": {
+	id: "demo/debug-components.mdx";
+  slug: "demo/debug-components";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/getting-started.mdx": {
+	id: "demo/getting-started.mdx";
+  slug: "demo/getting-started";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/greetings.mdx": {
+	id: "demo/greetings.mdx";
+  slug: "demo/greetings";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/import-content.mdx": {
+	id: "demo/import-content.mdx";
+  slug: "demo/import-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/introduction.mdx": {
+	id: "demo/introduction.mdx";
+  slug: "demo/introduction";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/markdown.mdx": {
+	id: "demo/markdown.mdx";
+  slug: "demo/markdown";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/vibe-coding-charts.mdx": {
+	id: "demo/vibe-coding-charts.mdx";
+  slug: "demo/vibe-coding-charts";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"demo/writing-your-content.mdx": {
+	id: "demo/writing-your-content.mdx";
+  slug: "demo/writing-your-content";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
+"your-first-chapter.mdx": {
+	id: "your-first-chapter.mdx";
+  slug: "your-first-chapter";
+  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/data": {
+	id: "data/data";
+  collection: "assets";
+  data: any
+};
+"data/font-sprite-mapping": {
+	id: "data/font-sprite-mapping";
+  collection: "assets";
+  data: any
+};
+"data/font_manifest": {
+	id: "data/font_manifest";
+  collection: "assets";
+  data: any
+};
+"data/llm_benchmarks": {
+	id: "data/llm_benchmarks";
+  collection: "assets";
+  data: any
+};
+"data/mnist-variant-model": {
+	id: "data/mnist-variant-model";
+  collection: "assets";
+  data: any
+};
+"data/typography_data": {
+	id: "data/typography_data";
+  collection: "assets";
+  data: any
+};
+};
+
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/src/components/{Figure.astro → Image.astro}

@@ -1,6 +1,6 @@
 ---
 // @ts-ignore - types provided by Astro at runtime
-import { Image } from "astro:assets";
+import { Image as AstroImage } from "astro:assets";
 
 interface Props {
   /** Source image imported via astro:assets */
@@ -25,7 +25,7 @@ interface Props {
   linkTarget?: string;
   /** Optional rel for the link (default: noopener noreferrer when linkHref provided) */
   linkRel?: string;
-  /** Any additional attributes should be forwarded to the underlying <Image> */
+  /** Any additional attributes should be forwarded to the underlying <AstroImage> */
   [key: string]: any;
 }
 
@@ -71,7 +71,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
                 target={resolvedTarget}
                 rel={resolvedRel}
               >
-                <Image
+                <AstroImage
                   {...imgProps}
                   data-zoomable={dataZoomable}
                   data-downloadable={dataDownloadable}
@@ -80,7 +80,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
                 />
               </a>
             ) : (
-              <Image
+              <AstroImage
                 {...imgProps}
                 data-zoomable={dataZoomable}
                 data-downloadable={dataDownloadable}
@@ -108,10 +108,10 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
             target={resolvedTarget}
             rel={resolvedRel}
           >
-            <Image {...imgProps} data-zoomable={dataZoomable} />
+            <AstroImage {...imgProps} data-zoomable={dataZoomable} />
           </a>
         ) : (
-          <Image {...imgProps} data-zoomable={dataZoomable} />
+          <AstroImage {...imgProps} data-zoomable={dataZoomable} />
         )}
         <figcaption>
           {hasCaptionSlot ? (
@@ -130,7 +130,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
             target={resolvedTarget}
             rel={resolvedRel}
           >
-            <Image
+            <AstroImage
               {...imgProps}
               data-zoomable={dataZoomable}
               data-downloadable={dataDownloadable}
@@ -139,7 +139,7 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
             />
           </a>
         ) : (
-          <Image
+          <AstroImage
             {...imgProps}
             data-zoomable={dataZoomable}
             data-downloadable={dataDownloadable}
@@ -165,10 +165,10 @@ const resolvedRel = hasLink ? linkRel || "noopener noreferrer" : undefined;
         target={resolvedTarget}
         rel={resolvedRel}
       >
-        <Image {...imgProps} data-zoomable={dataZoomable} />
+        <AstroImage {...imgProps} data-zoomable={dataZoomable} />
       </a>
     ) : (
-      <Image {...imgProps} data-zoomable={dataZoomable} />
+      <AstroImage {...imgProps} data-zoomable={dataZoomable} />
     )
   }
 </div>

app/src/components/{MultiFigure.astro → MultiImage.astro}

@@ -1,6 +1,6 @@
 ---
 // @ts-ignore - types provided by Astro at runtime
-import Figure from "./Figure.astro";
+import Image from "./Image.astro";
 
 interface ImageItem {
     /** Source image imported via astro:assets */
@@ -83,7 +83,7 @@ const gridColumns = getGridColumns();
                 >
                     {images.map((image, index) => (
                         <div class="multi-image-item">
-                            <Figure
+                            <Image
                                 src={image.src}
                                 alt={image.alt}
                                 zoomable={image.zoomable ?? zoomable}
@@ -121,7 +121,7 @@ const gridColumns = getGridColumns();
             >
                 {images.map((image, index) => (
                     <div class="multi-image-item">
-                        <Figure
+                        <Image
                             src={image.src}
                             alt={image.alt}
                             zoomable={image.zoomable ?? zoomable}

app/src/components/Reference.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+    /** ID unique pour la référence */
+    id: string;
+    /** Légende HTML pour la référence */
+    caption: string;
+}
+
+const { id, caption } = Astro.props as Props;
+---
+
+<div class="reference-wrapper" id={id}>
+    <figure class="reference">
+        <div class="reference__content">
+            <slot />
+        </div>
+        <figcaption class="reference__caption" set:html={caption} />
+    </figure>
+</div>
+
+<style>
+    .reference-wrapper {
+        margin: var(--block-spacing-y) 0;
+    }
+
+    .reference {
+        margin: 0;
+    }
+
+    .reference__content {
+        /* Le contenu peut être n'importe quoi */
+    }
+
+    .reference__caption {
+        text-align: left;
+        font-size: 0.9rem;
+        color: var(--muted-color);
+        margin-top: 6px;
+        background: var(--page-bg);
+        position: relative;
+        z-index: var(--z-elevated);
+        display: block;
+        width: 100%;
+    }
+</style>

app/src/content/chapters/demo/best-pratices.mdx

@@ -1,7 +1,7 @@
 
 import visualPoster from '../../assets/image/visual-vocabulary-poster.png';
 import Note from '../../../components/Note.astro';
-import Figure from '../../../components/Figure.astro';
+import Image from '../../../components/Image.astro';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
 import Sidenote from '../../../components/Sidenote.astro';
 
@@ -44,7 +44,7 @@ Favor **concise captions** and callouts that clarify what to look at and why it
 
 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
+<Image
   src={visualPoster}
   alt="Visual Vocabulary: choosing the right chart by task"
   linkHref="https://raw.githubusercontent.com/Financial-Times/chart-doctor/refs/heads/main/visual-vocabulary/poster.png"

app/src/content/chapters/demo/components.mdx

@@ -1,4 +1,4 @@
-import { Image } from 'astro:assets';
+import { Image as AstroImage } from 'astro:assets';
 import placeholder from '../../assets/image/placeholder.png';
 import audioDemo from '../../assets/audio/audio-example.wav';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
@@ -7,9 +7,10 @@ import Wide from '../../../components/Wide.astro';
 import Note from '../../../components/Note.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Accordion from '../../../components/Accordion.astro';
-import Figure from '../../../components/Figure.astro';
-import SubFigures from '../../../components/MultiFigure.astro';
+import Image from '../../../components/Image.astro';
+import MultiImage from '../../../components/MultiImage.astro';
 import Quote from '../../../components/Quote.astro';
+import Reference from '../../../components/Reference.astro';
 
 ## Components
 
@@ -20,13 +21,13 @@ import Quote from '../../../components/Quote.astro';
 To use any component in your MDX file, add the import statement at the top:
 
 ```mdx
-import Figure from '../components/Figure.astro';
-import SubFigures from '../components/MultiFigure.astro';
+import Image from '../components/Image.astro';
+import MultiImage from '../components/MultiImage.astro';
 import Note from '../components/Note.astro';
 
 # Your content
 
-<Figure src={myImage} alt="Description" />
+<Image src={myImage} alt="Description" />
 <Note>This is a note</Note>
 ```
 
@@ -34,13 +35,13 @@ Here are the components that are available:
 
 
 <div className="feature-grid">
-  <a href="#figure" className="feature-card">
-    <strong>Figure</strong>
+  <a href="#image" className="feature-card">
+    <strong>Image</strong>
     <span>Optimized images</span>
   </a>
-  <a href="#subfigures" className="feature-card">
-    <strong>SubFigures</strong>
-    <span>Multi-panel figures</span>
+  <a href="#multiimage" className="feature-card">
+    <strong>MultiImage</strong>
+    <span>Multi-panel images</span>
   </a>
   <a href="#placement" className="feature-card">
     <strong>Placement</strong>
@@ -62,18 +63,22 @@ Here are the components that are available:
     <strong>HtmlEmbed</strong>
     <span>External content</span>
   </a>
+  <a href="#reference" className="feature-card">
+    <strong>Reference</strong>
+    <span>Flexible content wrapper</span>
+  </a>
   <a href="#iframe" className="feature-card">
     <strong>Iframe</strong>
     <span>Web embeds</span>
   </a>
 </div>
 
-### Figure
+### Image
 
-**Figures** automatically generate 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**.
+**Images** automatically generate 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**.
 
 
-<Figure
+<Image
   src={placeholder}
   zoomable
   downloadable
@@ -94,12 +99,12 @@ Here are the components that are available:
 
 <Accordion title="Code example">
 ```mdx
-import Figure from '../../../components/Figure.astro'
+import Image from '../../../components/Image.astro'
 import myImage from './assets/image/placeholder.jpg'
 
-<Figure src={myImage} alt="Optimized figure with caption" />
+<Image src={myImage} alt="Optimized image with caption" />
 
-<Figure
+<Image
   src={myImage}
   layout="fixed"
   zoomable
@@ -111,11 +116,11 @@ import myImage from './assets/image/placeholder.jpg'
 ```
 </Accordion>
 
-### SubFigures
+### MultiImage
 
-**Display multiple figures** in a grid layout with customizable columns and captions. Perfect for **multi-panel figures**, **comparisons**, and **step-by-step visualizations** — just like LaTeX's `subfigure` environment.
+**Display multiple images** in a grid layout with customizable columns and captions. Perfect for **multi-panel images**, **comparisons**, and **step-by-step visualizations** — just like LaTeX's `subfigure` environment.
 
-<SubFigures
+<MultiImage
   images={[
     { src: placeholder, alt: "Image 1", caption: "First image with caption" },
     { src: placeholder, alt: "Image 2", caption: "Second image" },
@@ -130,7 +135,7 @@ import myImage from './assets/image/placeholder.jpg'
 ```mdx
 import placeholder from '../assets/image/placeholder.png';
 
-<SubFigures
+<MultiImage
   images={[
     { src: placeholder, alt: "Panel A", caption: "(a) First panel" },
     { src: placeholder, alt: "Panel B", caption: "(b) Second panel" },
@@ -143,8 +148,15 @@ import placeholder from '../assets/image/placeholder.png';
 ```
 </Accordion>
 
-**Layout options:** `2-column`, `3-column`, `4-column`, `auto`  
-**Features:** Individual subcaptions (a), (b), (c), zoom functionality, responsive design
+| Prop                   | Required | Type                                                                  | Description                                                                                                         
+|------------------------|----------|-----------------------------------------------------------------------|-------------------------------------------------------
+| `images`               | Yes      | `ImageItem[]`                                                         | Array of image objects with `src`, `alt`, and optional `caption`, `id`, `zoomable`, `downloadable` properties                                                                             
+| `layout`               | No       | `"2-column" \| "3-column" \| "4-column" \| "auto"`                    | Grid layout for the images (default: "3-column")                                                                                               
+| `caption`              | No       | `string`                                                               | Global caption for the entire multi-image figure                                                                                          
+| `zoomable`             | No       | `boolean`                                                              | Enable zoom functionality on all images (can be overridden per image)                                                                                               
+| `downloadable`         | No       | `boolean`                                                              | Show download buttons on all images (can be overridden per image)                                                                                               
+| `class`                | No       | `string`                                                               | Additional CSS classes to apply to the wrapper                                                                                          
+| `id`                   | No       | `string`                                                               | Global ID for the multi-image figure (for deep-linking and cross-references)                                                                                          
 
 ### Placement
 
@@ -201,6 +213,53 @@ import FullWidth from '../../../components/FullWidth.astro'
 </Accordion>
 
 
+### Reference
+
+The **Reference** component provides a flexible wrapper for any content with an ID and HTML caption. It's perfect for creating **numbered references**, **cross-references**, or **any content that needs to be referenced** throughout your article.
+
+<Note emoji="💡" variant="info">
+  **Note:** The `Image` and `HtmlEmbed` components also support the same `id` and `caption` props for consistent referencing across your article.
+</Note>
+
+<Reference id="example-reference" caption="<strong>Figure 1:</strong> Example reference with HTML caption and <em>styling</em>">
+  you content here...
+</Reference>
+
+| Prop     | Required | Type   | Description                    |
+|----------|----------|--------|--------------------------------|
+| `id`     | Yes      | string | Unique identifier for the reference (used for deep-linking) |
+| `caption`| Yes      | string | HTML caption displayed below the content (supports HTML tags) |
+
+<Accordion title="Code example">
+```mdx
+import Reference from '../../../components/Reference.astro'
+
+<Reference id="my-reference" caption="<strong>Reference 1:</strong> This is a <em>flexible</em> content wrapper">
+  <p>Any content can go here...</p>
+  <img src={myImage} alt="Description" />
+  <div>Even complex HTML structures!</div>
+</Reference>
+
+<Reference id="another-ref" caption="<strong>Table 1:</strong> Data comparison with <a href='#'>source link</a>">
+  <table>
+    <thead>
+      <tr><th>Column 1</th><th>Column 2</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Data 1</td><td>Data 2</td></tr>
+    </tbody>
+  </table>
+</Reference>
+```
+</Accordion>
+
+**Use cases:**
+- **Numbered figures** with custom content
+- **Cross-references** that can be linked to from anywhere in the article
+- **Flexible content blocks** that need consistent styling and captioning
+- **Tables, charts, or any content** that requires an ID and description
+
+
 ### Accordion
 
 Can be used like this `<Accordion>some content</Accordion>`. You can pass any children content.
@@ -276,7 +335,7 @@ Small contextual callout for tips, caveats, or emphasis.
 | `title`  | No       | string                       | Short title displayed in header     |
 | `emoji`  | No       | string                       | Emoji displayed before the title    |
 | `class`  | No       | string                       | Extra classes for custom styling    |
-| `variant`| No       | 'info' | 'success' | 'danger' | Visual intent of the note          |
+| `variant`| No       | 'neutral' | 'info' | 'success' | 'danger' | Visual intent of the note          |
 
 <Accordion title="Code example">
 ```mdx

app/src/content/chapters/demo/debug-components.mdx

@@ -1,6 +1,6 @@
 import Accordion from '../../../components/Accordion.astro';
 import HtmlEmbed from '../../../components/HtmlEmbed.astro';
-import Figure from '../../../components/Figure.astro';
+import Image from '../../../components/Image.astro';
 import Wide from '../../../components/Wide.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Note from '../../../components/Note.astro';

app/src/content/chapters/demo/import-content.mdx

@@ -21,7 +21,7 @@ node index.mjs
 
 - `\label{eq:name}` → Interactive equations
 - `\ref{eq:name}` → Clickable links
-- `\includegraphics{}` → `<Figure>` components
+- `\includegraphics{}` → `<Image>` components
 - Bibliography integration
 
 ### Prerequisites

app/src/content/chapters/demo/markdown.mdx

@@ -6,7 +6,7 @@ import Wide from '../../../components/Wide.astro';
 import Note from '../../../components/Note.astro';
 import FullWidth from '../../../components/FullWidth.astro';
 import Accordion from '../../../components/Accordion.astro';
-import Figure from '../../../components/Figure.astro';
+import Image from '../../../components/Image.astro';
 
 ## Markdown
 
@@ -284,6 +284,7 @@ The **citation keys** come from `app/src/content/bibliography.bib`.
 
 In research articles, you may have to make references to anything. They are basically html anchors. They can be used internally in the article or externally in other articles.
 
+
 1. **Title**<br/>
   Each title is automatically generated with a slugged version  from the citation key. ( slugged title from the citation key )
   like for example, the id `#mermaid-diagrams` is generated from the `Mermaid diagrams` title.
@@ -293,6 +294,10 @@ In research articles, you may have to make references to anything. They are basi
   You can make a link to an image or a chart by adding an ID on it.<br/>`<HtmlEmbed id="neural-network-mnist-like"/>` then you can link to it with a link like `<a href="#neural-network-mnist-like">Fig 1</a>`.
   <br/><br/>**Example** [Chart 1](#neural-network-mnist-like) or [Fig 1](#placeholder-image)
 
+<Note emoji="💡" variant="info">
+  **Available with:** `Reference`, `Image`, and `HtmlEmbed` components all support the `id` prop for creating referenceable anchors.
+</Note>
+
 <Accordion title="Code example">
 ```mdx
   #### Mermaid diagrams
@@ -301,7 +306,7 @@ In research articles, you may have to make references to anything. They are basi
   <HtmlEmbed id="neural-network-mnist-like"/>
   [Chart 1](#neural-network-mnist-like)
 
-  <Figure id="placeholder-image" src="..."/>
+  <Image id="placeholder-image" src="..."/>
   [Fig 1](#placeholder-image)
 ```
 </Accordion>
@@ -400,19 +405,23 @@ Next section begins here.
 
 ### Table
 
-Use pipe tables like `| Column |` with header separator `| --- |`.
+Use pipe tables like `| Column |` with header separator `| --- |`. You can control alignment with `:---` (left), `:---:` (center), and `---:` (right).
 
-| Method | Score |
-|---|---|
-| A | 0.78 |
-| B | 0.86 |
+| Model | Accuracy | F1-Score | Training Time | Status |
+|:---|:---:|:---:|---:|:---:|
+| **BERT-base** | 0.89 | 0.89 | 2.5h | ✅ |
+| **RoBERTa-large** | 0.92 | 0.92 | 4.2h | ✅ |
+| **DeBERTa-v3** | 0.94 | 0.94 | 5.8h | ✅ |
+| **GPT-3.5-turbo** | 0.91 | 0.91 | 0.1h | ✅ |
 
 <Accordion title="Code example">
 ```mdx
-| Method | Score |
-| --- | --- |
-| A | 0.78 |
-| B | 0.86 |
+| Model | Accuracy | F1-Score | Training Time | Status |
+|:---|:---:|:---:|---:|:---:|
+| **BERT-base** | 0.89 | 0.89 | 2.5h | ✅ |
+| **RoBERTa-large** | 0.92 | 0.92 | 4.2h | ✅ |
+| **DeBERTa-v3** | 0.94 | 0.94 | 5.8h | ✅ |
+| **GPT-3.5-turbo** | 0.91 | 0.91 | 0.1h | ✅ |
 ```
 </Accordion>
 

app/src/content/chapters/demo/writing-your-content.mdx

@@ -1,5 +1,5 @@
 {/* IMPORTS */}
-import { Image } from 'astro:assets';
+import { Image as AstroImage } from 'astro:assets';
 import placeholder from '../../assets/image/placeholder.png';
 import Sidenote from '../../../components/Sidenote.astro';
 import Wide from '../../../components/Wide.astro';
@@ -87,7 +87,7 @@ Your story. Write your content here.
 <small className="muted">**Content** in app/src/content/article.mdx</small>
 ```mdx
 import placeholder from '../../assets/image/placeholder.png'
-import Figure from '../../../components/Figure.astro'
+import Image from '../../../components/Image.astro'
 import Sidenote from '../../../components/Sidenote.astro'
 
 This paragraph is written in Markdown.
@@ -95,7 +95,7 @@ This paragraph is written in Markdown.
 <Sidenote>
   A short callout inserted via a component.
 </Sidenote>
-<Figure src={placeholder} alt="Sample image with optimization" />
+<Image src={placeholder} alt="Sample image with optimization" />
 
 This paragraph is also written in Markdown. 
 ```

app/src/styles/components/_table.css

@@ -8,7 +8,6 @@
 .content-grid main td {
   border-bottom: 1px solid var(--border-color);
   padding: 6px 8px;
-  text-align: left;
   font-size: 15px;
   white-space: nowrap;
   /* prevent squashing; allow horizontal scroll instead */
@@ -17,11 +16,6 @@
   vertical-align: top;
 }
 
-.content-grid main th:last-child,
-.content-grid main td:last-child {
-  text-align: right;
-}
-
 .content-grid main thead th {
   border-bottom: 1px solid var(--border-color);
 }