add grettings | hf-user component | update responsiveImage

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

@@ -180,6 +180,13 @@ declare module 'astro:content' {
   collection: "chapters";
   data: any
 } & { render(): Render[".mdx"] };
+"greetings.mdx": {
+	id: "greetings.mdx";
+  slug: "greetings";
+  body: string;
+  collection: "chapters";
+  data: any
+} & { render(): Render[".mdx"] };
 "introduction.mdx": {
 	id: "introduction.mdx";
   slug: "introduction";

app/src/components/HfUser.astro

@@ -0,0 +1,98 @@
+---
+interface Props {
+  username: string;
+  name?: string;
+  url?: string;
+  avatarUrl?: string;
+}
+
+const { username, name, url, avatarUrl } = Astro.props as Props;
+const profileUrl = url ?? `https://huggingface.co/${encodeURIComponent(username)}`;
+const displayName = name ?? username;
+const imgSrc = avatarUrl ?? `https://huggingface.co/api/users/${encodeURIComponent(username)}/avatar`;
+---
+<div class="hf-user">
+  <div class="hf-user__left">
+    <img
+      class="hf-user__avatar"
+      src={imgSrc}
+      alt={`${displayName} avatar`}
+      width="44"
+      height="44"
+      loading="lazy"
+      decoding="async"
+      referrerpolicy="no-referrer"
+    />
+    <span class="hf-user__text">
+      <a class="hf-user__name" href={profileUrl} target="_blank" rel="noopener noreferrer">{displayName}</a>
+      <span class="hf-user__row">
+        <a class="hf-user__username" href={profileUrl} target="_blank" rel="noopener noreferrer">@{username}</a>
+      </span>
+    </span>
+  </div>
+</div>
+
+<style>
+  .hf-user {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 10px 10px 12px;
+    border-radius: 12px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: none;
+  }
+  .hf-user__left {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    color: inherit;
+  }
+  .hf-user__avatar {
+    display: block;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    object-fit: cover;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) inset;
+  }
+  .hf-user__text {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.1;
+  }
+  .hf-user__row {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+  .hf-user__name {
+    font-size: 14px;
+    font-weight: 700;
+  }
+  .hf-user__username {
+    font-size: 12px;
+    color: var(--muted-color);
+    text-decoration: underline!important;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 0.06em;
+    text-decoration-color: var(--link-underline);
+  }
+
+  .hf-user a {
+    color: inherit;
+    text-decoration: none;
+    border-bottom: none;
+  } 
+</style>
+
+<style is:global>
+  .hf-user-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+</style>
+

app/src/components/ResponsiveImage.astro

@@ -19,29 +19,50 @@ interface Props {
   downloadName?: string;
   /** Optional explicit source URL to download instead of currentSrc */
   downloadSrc?: string;
+  /** Optional link that wraps the image (not the caption) */
+  linkHref?: string;
+  /** Optional target for the link (default: _blank when linkHref provided) */
+  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> */
   [key: string]: any;
 }
 
-const { caption, figureClass, zoomable, downloadable, downloadName, downloadSrc, ...imgProps } = Astro.props as Props;
+const { caption, figureClass, zoomable, downloadable, downloadName, downloadSrc, linkHref, linkTarget, linkRel, ...imgProps } = Astro.props as Props;
 const hasCaptionSlot = Astro.slots.has('caption');
 const hasCaption = hasCaptionSlot || (typeof caption === 'string' && caption.length > 0);
 const uid = `ri_${Math.random().toString(36).slice(2)}`;
 const dataZoomable = (zoomable === true || (imgProps as any)['data-zoomable']) ? '1' : undefined;
 const dataDownloadable = (downloadable === true || (imgProps as any)['data-downloadable']) ? '1' : undefined;
+const hasLink = typeof linkHref === 'string' && linkHref.length > 0;
+const resolvedTarget = hasLink ? (linkTarget || '_blank') : undefined;
+const resolvedRel = hasLink ? (linkRel || 'noopener noreferrer') : undefined;
 ---
 <div class="ri-root" data-ri-root={uid}>
   {hasCaption ? (
     <figure class={(figureClass || '') + (dataDownloadable ? ' has-dl-btn' : '')}>
       {dataDownloadable ? (
         <span class="img-dl-wrap">
-          <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+          {hasLink ? (
+            <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
+              <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+            </a>
+          ) : (
+            <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+          )}
           <button type="button" class="button button--ghost img-dl-btn" aria-label="Download image" title={downloadName ? `Download ${downloadName}` : 'Download image'}>
             <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>
           </button>
         </span>
       ) : (
-        <Image {...imgProps} data-zoomable={dataZoomable} />
+        hasLink ? (
+          <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
+            <Image {...imgProps} data-zoomable={dataZoomable} />
+          </a>
+        ) : (
+          <Image {...imgProps} data-zoomable={dataZoomable} />
+        )
       )}
       <figcaption>
         {hasCaptionSlot ? (
@@ -54,13 +75,25 @@ const dataDownloadable = (downloadable === true || (imgProps as any)['data-downl
   ) : (
     dataDownloadable ? (
       <span class="img-dl-wrap">
-        <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+        {hasLink ? (
+          <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
+            <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+          </a>
+        ) : (
+          <Image {...imgProps} data-zoomable={dataZoomable} data-downloadable={dataDownloadable} data-download-name={downloadName} data-download-src={downloadSrc} />
+        )}
         <button type="button" class="button button--ghost img-dl-btn" aria-label="Download image" title={downloadName ? `Download ${downloadName}` : 'Download image'}>
           <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 16c-.26 0-.52-.11-.71-.29l-5-5a1 1 0 0 1 1.42-1.42L11 12.59V4a1 1 0 1 1 2 0v8.59l3.29-3.3a1 1 0 1 1 1.42 1.42l-5 5c-.19.18-.45.29-.71.29zM5 20a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2H5z"/></svg>
         </button>
       </span>
     ) : (
-      <Image {...imgProps} data-zoomable={dataZoomable} />
+      hasLink ? (
+        <a class="ri-link" href={linkHref} target={resolvedTarget} rel={resolvedRel}>
+          <Image {...imgProps} data-zoomable={dataZoomable} />
+        </a>
+      ) : (
+        <Image {...imgProps} data-zoomable={dataZoomable} />
+      )
     )
   )}
 </div>

app/src/content/article.mdx

@@ -28,6 +28,7 @@ import AvailableBlocks from "./chapters/markdown.mdx";
 import GettingStarted from "./chapters/getting-started.mdx";
 import Markdown from "./chapters/markdown.mdx";
 import Components from "./chapters/components.mdx";
+import Greetings from "./chapters/greetings.mdx";
 
 <Introduction />
 
@@ -41,3 +42,6 @@ import Components from "./chapters/components.mdx";
 
 <BestPractices />
 
+<Greetings />
+
+

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

@@ -56,10 +56,9 @@ A palette encodes **meaning** (categories, magnitudes, oppositions), preserves *
 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**.
 
 
-  <a href={"https://raw.githubusercontent.com/Financial-Times/chart-doctor/refs/heads/main/visual-vocabulary/poster.png"} target="_blank" rel="noopener noreferrer">
 <ResponsiveImage
   src={visualPoster}
   alt="Visual Vocabulary: choosing the right chart by task"
-  caption={'A handy reference to select chart types by purpose — click to enlarge.'}
+  linkHref="https://raw.githubusercontent.com/Financial-Times/chart-doctor/refs/heads/main/visual-vocabulary/poster.png"
+  caption={'Credits <a href="https://www.ft.com/" target="_blank" rel="noopener noreferrer">Financial-Times/chart-doctor</a> <br/>A handy reference to select chart types by purpose — click to enlarge.'}
 />
-</a>

app/src/content/chapters/greetings.mdx

@@ -0,0 +1,28 @@
+## Greetings
+
+### Inspiration
+
+This project stands in the direct continuity of [Distill](https://distill.pub/) (2016–2021). Our goal is to carry that spirit forward and push it even further: accessible scientific writing, high‑quality interactive explanations, and reproducible, production‑ready demos.
+
+<div className="tag-list">
+  <span className="tag">Astro.js</span>
+  <span className="tag">MDX</span>
+  <span className="tag">D3.js</span>
+  <span className="tag">Plotly.js</span>
+</div>
+
+### Feedback
+
+Huge thanks to the following people for their precious feedbacks!
+
+import HfUser from '../../components/HfUser.astro';
+
+<div className="hf-user-list">
+  <HfUser username="lvwerra" name="Leandro von Werra" />
+  <HfUser username="clefourrier" name="Clémentine Fourrier" />
+  <HfUser username="hynky" name="Hynek Kydlíček" />
+  <HfUser username="lusxvr" name="Luis Wiedmann" />
+  <HfUser username="molbap" name="Pablo Montalvo-Leroux" />
+  <HfUser username="lewtun" name="Lewis Tunstall" />
+  <HfUser username="guipenedo" name="Guilherme Penedo" />
+</div>

app/src/pages/index.astro

@@ -208,71 +208,6 @@ const licence = (articleFM as any)?.licence ?? (articleFM as any)?.license ?? (a
       });
     </script>
 
-    <script is:inline>
-      // Minimal HF viewer badge: detect if signed in and Pro status (client-side only)
-      (async () => {
-        const showBadge = (text) => {
-          try {
-            const el = document.createElement('div');
-            el.id = 'hf-viewer-status';
-            el.style.position = 'fixed';
-            el.style.top = '0.75rem';
-            el.style.right = '0.75rem';
-            el.style.zIndex = '9999';
-            el.style.fontFamily = 'system-ui, -apple-system, Segoe UI, Roboto, sans-serif';
-            el.style.fontSize = '12px';
-            el.style.lineHeight = '1.2';
-            el.style.background = 'rgba(0, 0, 0, 0.6)';
-            el.style.color = '#fff';
-            el.style.padding = '6px 8px';
-            el.style.borderRadius = '6px';
-            el.textContent = text;
-            document.body.appendChild(el);
-          } catch {}
-        };
-        try {
-          const isHFHost = (() => {
-            try {
-              const h = location.hostname;
-              return (
-                h === 'huggingface.co' ||
-                h.endsWith('.huggingface.co') ||
-                h === 'hf.space' ||
-                h.endsWith('.hf.space')
-              );
-            } catch { return false; }
-          })();
-
-          if (!isHFHost) {
-            showBadge('HF: status only on huggingface.co/Spaces');
-            return;
-          }
-
-          const res = await fetch('https://huggingface.co/api/whoami-v2', { credentials: 'include' });
-          if (!res.ok) {
-            showBadge('HF: not logged in');
-            return;
-          }
-          const data = await res.json();
-          const username = data?.name || data?.username || data?.user || '';
-          let isPro = (data && (data.is_pro ?? data.isPro));
-          if ((isPro === undefined || isPro === null) && username) {
-            try {
-              const r2 = await fetch(`https://huggingface.co/api/users/${encodeURIComponent(username)}`, { credentials: 'include' });
-              if (r2.ok) {
-                const u = await r2.json();
-                isPro = u?.is_pro ?? u?.isPro ?? false;
-              }
-            } catch {}
-          }
-          showBadge(`HF: ${username || 'signed in'}${isPro ? ' (Pro)' : ''}`);
-        } catch {
-          // On error (CORS, network, blocked 3rd-party cookies), still show a fallback badge
-          showBadge('HF: status unavailable');
-        }
-      })();
-    </script>
-
     
   </body>
 </html>