update

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

@@ -0,0 +1,164 @@
+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 = {
+		
+	};
+
+	type AnyEntryMap = ContentEntryMap & DataEntryMap;
+
+	export type ContentConfig = never;
+}

app/src/pages/article.mdx

@@ -1,5 +1,5 @@
 ---
-title: "The science Template:\nCraft Beautiful Blogs"
+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"
@@ -29,12 +29,19 @@ In this guide, you’ll learn how to install the template, write content (math,
 
 ## 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)
+<div className="tag-list">
+  <span className="tag">Markdown based</span>
+  <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">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>
+</div>
 
 ## Getting Started
 
@@ -182,7 +189,7 @@ import audioDemo from '../assets/audio/audio-example.wav'
 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" />
+  <Image src={visualPoster} alt="Visual Vocabulary: choosing the right chart by task" data-zoomable />
   <figcaption>
     Visual Vocabulary: a handy reference to select chart types by purpose (comparison, distribution, part-to-whole, correlation, and more).
   </figcaption>

app/src/pages/index.astro

@@ -6,6 +6,7 @@ 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 'katex/dist/katex.min.css';
 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
@@ -28,7 +29,7 @@ const imageAbs = fmOg && fmOg.startsWith('http')
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{docTitle}</title>
     <SeoHead title={docTitle} description={description} authors={authors} published={published} tags={tags} image={imageAbs} />
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" crossorigin="anonymous" />
+    
     <script src="https://cdn.plot.ly/plotly-3.0.0.min.js" charset="utf-8"></script>
   </head>
   <body>
@@ -71,47 +72,69 @@ const imageAbs = fmOg && fmOg.startsWith('http')
     <!-- Medium-like image zoom (lightbox) -->
     <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist/medium-zoom.min.js"></script>
     <script>
-      // Init zoom on data-zoomable images, close on scroll/move like Medium
-      const initMediumZoom = () => {
-        if (!window.mediumZoom) return;
-        const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-        const background = isDark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)';
-        const zoom = window.mediumZoom('section.content-grid main img[data-zoomable]', {
-          background,
-          margin: 24,
-          scrollOffset: 0
-        });
-
-        let onMove;
-        const attachCloseOnMove = () => {
-          if (onMove) return;
-          onMove = () => { zoom.close(); };
-          window.addEventListener('mousemove', onMove, { passive: true });
-          window.addEventListener('wheel', onMove, { passive: true });
-          window.addEventListener('touchmove', onMove, { passive: true });
-        };
-        const detachCloseOnMove = () => {
-          if (!onMove) return;
-          window.removeEventListener('mousemove', onMove);
-          window.removeEventListener('wheel', onMove);
-          window.removeEventListener('touchmove', onMove);
-          onMove = null;
+      // Init zoom sur img[data-zoomable] avec attente du script & contenu; close on scroll like Medium
+      (() => {
+        let zoomInstance = null;
+
+        const ensureMediumZoomReady = (cb) => {
+          if (window.mediumZoom) return cb();
+          const retry = () => (window.mediumZoom ? cb() : setTimeout(retry, 30));
+          retry();
         };
 
-        zoom.on('open', attachCloseOnMove);
-        zoom.on('close', detachCloseOnMove);
+        const collectTargets = () => Array.from(document.querySelectorAll('section.content-grid main img[data-zoomable]'));
+
+        const initOrUpdateZoom = () => {
+          const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+          const background = isDark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)';
+          const targets = collectTargets();
+          if (!targets.length) return;
+
+          if (!zoomInstance) {
+            zoomInstance = window.mediumZoom(targets, { background, margin: 24, scrollOffset: 0 });
+
+            let onScrollLike;
+            const attachCloseOnScroll = () => {
+              if (onScrollLike) return;
+              onScrollLike = () => { zoomInstance && zoomInstance.close(); };
+              window.addEventListener('wheel', onScrollLike, { passive: true });
+              window.addEventListener('touchmove', onScrollLike, { passive: true });
+              window.addEventListener('scroll', onScrollLike, { passive: true });
+            };
+            const detachCloseOnScroll = () => {
+              if (!onScrollLike) return;
+              window.removeEventListener('wheel', onScrollLike);
+              window.removeEventListener('touchmove', onScrollLike);
+              window.removeEventListener('scroll', onScrollLike);
+              onScrollLike = null;
+            };
+            zoomInstance.on('open', attachCloseOnScroll);
+            zoomInstance.on('close', detachCloseOnScroll);
+
+            const themeObserver = new MutationObserver(() => {
+              const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+              zoomInstance && zoomInstance.update({ background: dark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)' });
+            });
+            themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+          } else {
+            zoomInstance.attach(targets);
+            zoomInstance.update({ background });
+          }
+        };
 
-        // React to theme toggle
-        const observer = new MutationObserver(() => {
-          const dark = document.documentElement.getAttribute('data-theme') === 'dark';
-          zoom.update({ background: dark ? 'rgba(0,0,0,.9)' : 'rgba(0,0,0,.85)' });
+        const bootstrap = () => ensureMediumZoomReady(() => {
+          initOrUpdateZoom();
+          setTimeout(initOrUpdateZoom, 0);
+          const main = document.querySelector('section.content-grid main');
+          if (main) {
+            const mo = new MutationObserver(() => initOrUpdateZoom());
+            mo.observe(main, { childList: true, subtree: true });
+          }
         });
-        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
-      };
 
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', initMediumZoom, { once: true });
-      } else { initMediumZoom(); }
+        if (document.readyState === 'complete') bootstrap();
+        else window.addEventListener('load', bootstrap, { once: true });
+      })();
     </script>
     <script>
       // Open external links in a new tab; keep internal anchors in-page

app/src/styles/global.scss

@@ -137,6 +137,26 @@ html { font-size: 14px; line-height: 1.6; }
 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)
 // ============================================================================