update

CLAUDE.md

@@ -0,0 +1,3 @@
+# Project Working Notes (CLAUDE)
+
+This document summarizes recent implementation details and conventions. Written in English per your preference for written content and code comments.

README.md

@@ -9,10 +9,3 @@ header: mini
 app_port: 8080
 thumbnail: https://huggingface.co/spaces/tfrere/research-paper-template/thumb.jpg
 ---
-
-TO DO : 
-
-- rename le titre ?
-- Vérifier la biliographie comment elle marche
-
-- deploy

app/astro.config.mjs

@@ -10,6 +10,116 @@ import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeCitation from 'rehype-citation';
 // Built-in Shiki (dual themes) — no rehype-pretty-code
 
+// Minimal rehype plugin to wrap code blocks with a copy button and a language label
+function rehypeCodeCopyAndLabel() {
+  return (tree) => {
+    // Walk the tree; lightweight visitor to find <pre><code>
+    const visit = (node, parent) => {
+      if (!node || typeof node !== 'object') return;
+      const children = Array.isArray(node.children) ? node.children : [];
+      if (node.tagName === 'pre' && children.some(c => c.tagName === 'code')) {
+        // Find code child and guess language
+        const code = children.find(c => c.tagName === 'code');
+        const collectClasses = (val) => Array.isArray(val) ? val.map(String) : (typeof val === 'string' ? String(val).split(/\s+/) : []);
+        const fromClass = (names) => {
+          const hit = names.find((n) => /^language-/.test(String(n)));
+          return hit ? String(hit).replace(/^language-/, '') : '';
+        };
+        const codeClasses = collectClasses(code?.properties?.className);
+        const preClasses = collectClasses(node?.properties?.className);
+        const candidates = [
+          code?.properties?.['data-language'],
+          fromClass(codeClasses),
+          node?.properties?.['data-language'],
+          fromClass(preClasses),
+        ];
+        let lang = candidates.find(Boolean) || '';
+        const displayLang = lang ? String(lang).toUpperCase() : '';
+        // Determine if single-line block: prefer Shiki lines, then text content
+        const countLinesFromShiki = () => {
+          const isLineEl = (el) => el && el.type === 'element' && el.tagName === 'span' && Array.isArray(el.properties?.className) && el.properties.className.includes('line');
+          const hasNonWhitespaceText = (node) => {
+            if (!node) return false;
+            if (node.type === 'text') return /\S/.test(String(node.value || ''));
+            const kids = Array.isArray(node.children) ? node.children : [];
+            return kids.some(hasNonWhitespaceText);
+          };
+          const collectLines = (node, acc) => {
+            if (!node || typeof node !== 'object') return;
+            if (isLineEl(node)) acc.push(node);
+            const kids = Array.isArray(node.children) ? node.children : [];
+            kids.forEach((k) => collectLines(k, acc));
+          };
+          const lines = [];
+          collectLines(code, lines);
+          const nonEmpty = lines.filter((ln) => hasNonWhitespaceText(ln)).length;
+          return nonEmpty || 0;
+        };
+        const countLinesFromText = () => {
+          // Parse raw text content of the <code> node including nested spans
+          const extractText = (node) => {
+            if (!node) return '';
+            if (node.type === 'text') return String(node.value || '');
+            const kids = Array.isArray(node.children) ? node.children : [];
+            return kids.map(extractText).join('');
+          };
+          const raw = extractText(code);
+          if (!raw || !/\S/.test(raw)) return 0;
+          return raw.split('\n').filter(line => /\S/.test(line)).length;
+        };
+        const lines = countLinesFromShiki() || countLinesFromText();
+        const isSingleLine = lines <= 1;
+        // Also treat code blocks shorter than a threshold as single-line (defensive)
+        if (!isSingleLine) {
+          const approxChars = (() => {
+            const extract = (n) => Array.isArray(n?.children) ? n.children.map(extract).join('') : (n?.type === 'text' ? String(n.value||'') : '');
+            return extract(code).length;
+          })();
+          if (approxChars < 6) {
+            // e.g., "npm i" alone
+            // downgrade to single-line behavior
+            node.__forceSingle = true;
+          }
+        }
+        // Ensure CSS-only label works: set data-language on the <code> element
+        code.properties = code.properties || {};
+        if (displayLang) code.properties['data-language'] = displayLang;
+        // Replace <pre> with wrapper div.code-card containing button + pre
+        const wrapper = {
+          type: 'element',
+          tagName: 'div',
+          properties: { className: ['code-card'].concat((isSingleLine || node.__forceSingle) ? ['no-copy'] : []), 'data-language': displayLang },
+          children: (isSingleLine || node.__forceSingle) ? [ node ] : [
+            {
+              type: 'element',
+              tagName: 'button',
+              properties: { className: ['code-copy', 'button--ghost'], type: 'button', 'aria-label': 'Copy code' },
+              children: [
+                {
+                  type: 'element',
+                  tagName: 'svg',
+                  properties: { viewBox: '0 0 24 24', 'aria-hidden': 'true', focusable: 'false' },
+                  children: [
+                    { type: 'element', tagName: 'path', properties: { d: 'M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z' }, children: [] }
+                  ]
+                }
+              ]
+            },
+            node
+          ]
+        };
+        if (parent && Array.isArray(parent.children)) {
+          const idx = parent.children.indexOf(node);
+          if (idx !== -1) parent.children[idx] = wrapper;
+        }
+        return; // don't visit nested
+      }
+      children.forEach((c) => visit(c, node));
+    };
+    visit(tree, null);
+  };
+}
+
 export default defineConfig({
   output: 'static',
   integrations: [
@@ -45,7 +155,8 @@ export default defineConfig({
       [rehypeCitation, {
         bibliography: 'src/content/bibliography.bib',
         linkCitations: true
-      }]
+      }],
+      rehypeCodeCopyAndLabel
     ]
   }
 });

app/src/components/Header.astro

@@ -1,17 +0,0 @@
----
-import HtmlFragment from "./HtmlFragment.astro";
-
-interface Props {
-  title: string;
-  description?: string;
-}
-const { title, description } = Astro.props as Props;
----
-<section class="hero">
-  <h1 class="hero-title"  set:html={title}></h1>
-  <div class="hero-banner">
-    <HtmlFragment src="banner.html" />
-    {description && <p class="hero-desc">{description}</p>}
-  </div>
-</section>
-

app/src/components/{Meta.astro → Hero.astro}

@@ -1,11 +1,21 @@
 ---
+import HtmlEmbed from "./HtmlEmbed.astro";
+
 interface Props {
-  title: string;
+  title: string; // may contain HTML (e.g., <br/>)
+  titleRaw?: string; // plain title for slug/PDF (optional)
+  description?: string;
   authors?: string[];
   affiliation?: string;
   published?: string;
 }
-const { title, authors = [], affiliation, published } = Astro.props as Props;
+
+const { title, titleRaw, description, authors = [], affiliation, published } = Astro.props as Props;
+
+function stripHtml(text: string): string {
+  return String(text || '').replace(/<[^>]*>/g, '');
+}
+
 function slugify(text: string): string {
   return String(text || '')
     .normalize('NFKD')
@@ -15,8 +25,18 @@ function slugify(text: string): string {
     .replace(/^-+|-+$/g, '')
     .slice(0, 120) || 'article';
 }
-const pdfFilename = `${slugify(title)}.pdf`;
+
+const pdfBase = titleRaw ? titleRaw : stripHtml(title);
+const pdfFilename = `${slugify(pdfBase)}.pdf`;
 ---
+<section class="hero">
+  <h1 class="hero-title" set:html={title}></h1>
+  <div class="hero-banner">
+    <HtmlEmbed src="banner.html" frameless />
+    {description && <p class="hero-desc">{description}</p>}
+  </div>
+</section>
+
 <header class="meta">
   <div class="meta-container">
     {authors.length > 0 && (
@@ -64,5 +84,21 @@ const pdfFilename = `${slugify(title)}.pdf`;
       document.addEventListener('DOMContentLoaded', ready, { once: true });
     } else { ready(); }
   })();
-  </script>
+</script>
+
+<style>
+  /* Hero (full-bleed) */
+  .hero { width: 100%; padding: 48px 16px 16px; text-align: center; }
+  .hero-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.1; margin: 0 0 8px; max-width: 60%; margin: auto; }
+  .hero-banner { max-width: 980px; margin: 0 auto; }
+  .hero-desc { color: var(--muted-color); font-style: italic; margin: 0 0 16px 0; }
+
+  /* Meta (byline-like header) */
+  .meta { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 1rem 0; font-size: 0.9rem; line-height: 1.8em; }
+  .meta-container { max-width: 720px; display: flex; flex-direction: row; justify-content: space-between; margin: 0 auto; gap: 8px; }
+  .meta-container-cell { display: flex; flex-direction: column; gap: 8px; }
+  .meta-container-cell h3 { margin: 0; font-size: 12px; font-weight: 400; color: var(--muted-color); text-transform: uppercase; letter-spacing: .02em; }
+  .meta-container-cell p { margin: 0; }
+</style>
+
 

app/src/components/{HtmlFragment.astro → HtmlEmbed.astro}

@@ -1,9 +1,9 @@
 ---
-interface Props { src: string }
-const { src } = Astro.props as Props;
+interface Props { src: string; title?: string; desc?: string; frameless?: boolean }
+const { src, title, desc, frameless = false } = Astro.props as Props;
 
 // Load all .html fragments under src/content/fragments/** as strings (dev & build)
-const fragments = import.meta.glob('../content/fragments/**/*.html', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
+const fragments = (import.meta as any).glob('../content/fragments/**/*.html', { query: '?raw', import: 'default', eager: true }) as Record<string, string>;
 
 function resolveFragment(requested: string): string | null {
   // Allow both "banner.html" and "fragments/banner.html"
@@ -20,7 +20,13 @@ const html = resolveFragment(src);
 const mountId = `frag-${Math.random().toString(36).slice(2)}`;
 ---
 { html ? (
-  <div id={mountId} set:html={html} />
+  <figure class="html-embed">
+    {title && <figcaption class="html-embed__title">{title}</figcaption>}
+    <div class={`html-embed__card${frameless ? ' is-frameless' : ''}`}>
+      <div id={mountId} set:html={html} />
+    </div>
+    {desc && <figcaption class="html-embed__desc" set:html={desc}></figcaption>}
+  </figure>
  ) : (
   <div><!-- Fragment not found: {src} --></div>
  ) }
@@ -46,14 +52,48 @@ const mountId = `frag-${Math.random().toString(36).slice(2)}`;
           // run inline
           (0, eval)(old.text || '');
         } catch (e) {
-          console.error('HtmlFragment inline script error:', e);
+          console.error('HtmlEmbed inline script error:', e);
         }
       }
     });
   };
   // Ensure execution when ready: run now if Plotly or D3 is present, or when document is ready; otherwise wait for 'load'
+  // @ts-expect-error: Plotly/d3 are attached globally at runtime via fragments
   if (window.Plotly || window.d3 || document.readyState === 'complete') execute();
   else window.addEventListener('load', execute, { once: true });
   </script>
 
+<style>
+  .html-embed { margin: 12px 0; }
+  .html-embed__title { 
+    text-align: left; 
+    font-weight: 600; 
+    font-size: 0.95rem; 
+    color: var(--text-color);
+    margin: 0 0 6px 0;
+  }
+  .html-embed__card {
+    background: var(--code-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    padding: 8px;
+  }
+  .html-embed__card.is-frameless {
+    background: transparent;
+    border-color: transparent;
+  }
+  .html-embed__desc { 
+    text-align: left; 
+    font-size: 0.9rem; 
+    color: var(--muted-color); 
+    margin: 6px 0 0 0; 
+  }
+  @media (prefers-color-scheme: dark) {
+    [data-theme="dark"] .html-embed__card:not(.is-frameless) { background: #12151b; border-color: rgba(255,255,255,.15); }
+  }
+  @media print {
+    .html-embed, .html-embed__card { break-inside: avoid; page-break-inside: avoid; }
+  }
+</style>
+
 

app/src/components/MermaidDemo.astro

@@ -1,11 +0,0 @@
----
-export interface Props {
-  code?: string;
-}
-const { code = `graph TD\n    A[Start] --> B{Is it working?}\n    B -- Yes --> C[Great!]\n    B -- No --> D[Fix it]\n    D --> B` } = Astro.props;
----
-
-<pre class="mermaid">{code}</pre>
-
-
-<style>.mermaid { max-width: 100%; }</style>

app/src/content/article.mdx

@@ -1,21 +1,21 @@
 ---
-title: "Bringing paper to life:\n A modern template for scientific writing
+title: "Bringing paper to life:\n A modern template for\n scientific writing
 "
-subtitle: "Markdown-first research article template with math, citations, and interactive figures."
-description: "A modern, MDX-first research article template with math, citations, and interactive figures."
+subtitle: "A modern, MDX-first research article template with math, citations and interactive figures."
+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"
+published: "Aug 28, 2025"
 tags:
   - research
   - template
 ogImage: "/thumb.jpg"
 ---
 
-import HtmlFragment from "../components/HtmlFragment.astro";
+import HtmlEmbed from "../components/HtmlEmbed.astro";
 import Wide from "../components/Wide.astro";
 import FullBleed from "../components/FullBleed.astro";
 import { Image } from 'astro:assets';
@@ -64,6 +64,7 @@ import GettingStarted from "./chapters/getting-started.mdx";
   <span className="tag">Optimized images</span>
   <span className="tag">Automatic PDF export</span>
   <span className="tag">Dataviz color palettes</span>
+  <span className="tag">Embed gradio apps</span>
 </div>
 <Fragment slot="aside">
     If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!

app/src/content/chapters/available-blocks.mdx

@@ -1,7 +1,7 @@
 import { Image } from 'astro:assets';
 import placeholder from '../../assets/images/placeholder.png';
 import audioDemo from '../../assets/audio/audio-example.wav';
-import HtmlFragment from '../../components/HtmlFragment.astro';
+import HtmlEmbed from '../../components/HtmlEmbed.astro';
 import Aside from '../../components/Aside.astro';
 import Wide from '../../components/Wide.astro';
 import FullBleed from '../../components/FullBleed.astro';
@@ -50,10 +50,15 @@ $$
 $$
 ```
 
-### Images
+### Image
 
 **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**.
 
+Props (optional)
+- `data-zoomable`: adds a zoomable lightbox.
+- `loading="lazy"`: lazy loads the image.
+- `figcaption`: adds a caption and credit.
+
 **Optional:** Zoomable (Medium-like lightbox): add `data-zoomable` to opt-in. Only images with this attribute will open full-screen on click.
 
 **Optional:** Lazy loading: add `loading="lazy"` to opt-in.
@@ -91,7 +96,7 @@ import myImage from '../assets/images/placeholder.jpg'
 ```
 
 
-### Code blocks
+### Code
 
 Use fenced code blocks with a language for syntax highlighting.
 
@@ -112,30 +117,85 @@ greet("Astro")
 ```
 ````
 
-### Mermaid diagrams
+### Mermaid diagram
 
 Native mermaid diagrams are supported. You can use the <a target="_blank" href="https://mermaid.live/edit#pako:eNpVjUFPg0AQhf_KZk6a0AYsCywHE0u1lyZ66EnoYQMDSyy7ZFlSK_DfXWiMOqd58773ZoBcFQgxlGd1yQXXhhx3mSR2ntJE6LozDe9OZLV6HPdoSKMkXkeyvdsr0gnVtrWs7m_8doZIMhxmDIkRtfyYblay5F8ljmSXHnhrVHv66xwvaiTPaf0mbP1_R2i0qZe05HHJVznXJOF6QcCBStcFxEb36ECDuuGzhGF2MzACG8wgtmuBJe_PJoNMTjbWcvmuVPOT1KqvBNj6c2dV3xbc4K7mlea_CMoCdaJ6aSCm3lIB8QCfED94dM2o77ssjFzK3MiBq2WCNWUeiza-H26YvU8OfC0_3XVII9eLQuYFIaVBGEzfyTJ22g"> live editor</a> to create your diagram and copy the code to your article.
 
+
 ```mermaid
-graph TD
-  A[Start] --> B{Is it working?}
-  B -- Yes --> C[Great!]
-  B -- No --> D[Fix it]
-  D --> B
+erDiagram
+  DATASET ||--o{ SAMPLE : contains
+  RUN }o--o{ SAMPLE : uses
+  RUN ||--|| MODEL : trains
+  RUN ||--o{ METRIC : logs
+
+  DATASET {
+    string id
+    string name
+  }
+
+  SAMPLE {
+    string id
+    string uri
+  }
+
+  MODEL {
+    string id
+    string framework
+  }
+
+  RUN {
+    string id
+    date startedAt
+  }
+
+  METRIC {
+    string name
+    float value
+  }
 ```
 
 <small className="muted">Example</small>
 ````mdx
 ```mermaid
-graph TD
-  A[Start] --> B{Is it working?}
-  B -- Yes --> C[Great!]
-  B -- No --> D[Fix it]
-  D --> B
+erDiagram
+  DATASET ||--o{ SAMPLE : contains
+  RUN }o--o{ SAMPLE : uses
+  RUN ||--|| MODEL : trains
+  RUN ||--o{ METRIC : logs
+
+  DATASET {
+    string id
+    string name
+  }
+
+  SAMPLE {
+    string id
+    string uri
+  }
+
+  MODEL {
+    string id
+    string framework
+  }
+
+  RUN {
+    string id
+    date startedAt
+  }
+
+  METRIC {
+    string name
+    float value
+  }
 ```
 ````
 
-### Citations and notes
+### Citation and footnote
+
+**Citations** use the `@` syntax (e.g., `[@vaswani2017attention]` or `@vaswani2017attention` in narrative form) and are **automatically** collected to render the **bibliography** at the end of the article. The citation keys come from `app/src/content/bibliography.bib`.
+
+**Footnotes** use an identifier like `[^f1]` and a definition anywhere in the document, e.g., `[^f1]: Your explanation`. They are **numbered** and **listed automatically** at the end of the article.
 
 Here are a few variations using the same bibliography:
 
@@ -186,10 +246,6 @@ Accessible accordion based on `details/summary`. You can pass any children conte
   </ul>
 </Accordion>
 
-<Accordion title="Closed by default">
-  <p>This one stays collapsed until the user clicks the summary.</p>
-</Accordion>
-
 <Accordion title="Accordion with code example">
 ```ts
 function greet(name: string) {
@@ -208,23 +264,6 @@ import Accordion from '../components/Accordion.astro'
   <p>Free content with <strong>markdown</strong> and MDX components.</p>
 </Accordion>
 
-<Accordion title="Another accordion">
-  <ul>
-    <li>Item A</li>
-    <li>Item B</li>
-  </ul>
-</Accordion>
-
-<Accordion title="Accordion with code example">
-```ts
-function greet(name: string) {
-  console.log(`Hello, ${name}`);
-}
-
-greet("Astro");
-```
-</Accordion>
-
 <Accordion title="Accordion with code example">
 ```ts
 function greet(name: string) {
@@ -265,53 +304,46 @@ import audioDemo from '../assets/audio/audio-example.wav'
 
 
 
-### Embeds
-
 
-#### Html Fragments
+### HtmlEmbed
 
-The main purpose of the ```HtmlFragment``` component is to **embed** a **Plotly** or **D3.js** chart in your article. **Libraries** are already imported in the template.
+The main purpose of the ```HtmlEmbed``` component is to **embed** a **Plotly** or **D3.js** chart in your article. **Libraries** are already imported in the template.
 
 They exist in the `app/src/content/fragments` folder.
 
-Plotly and D3 are already supported by the template. For researchers who want to stay in **Python** while targeting **D3**, the [d3blocks](https://github.com/d3blocks/d3blocks) library lets you create interactive D3 charts with only a few lines of code. In **2025**, **D3** often provides more flexibility and a more web‑native rendering than **Plotly** for custom visualizations.
-
-Here are some examples of the two **libraries** in the template:
+For researchers who want to stay in **Python** while targeting **D3**, the [d3blocks](https://github.com/d3blocks/d3blocks) library lets you create interactive D3 charts with only a few lines of code. In **2025**, **D3** often provides more flexibility and a more web‑native rendering than **Plotly** for custom visualizations.
 
-<small class="muted">D3 version</small>
-  <div className="plot-card">
-    <HtmlFragment src="d3-line.html" />
-</div>
-<caption className="caption">D3 Line chart — simple time series example.</caption>
-
-  <div className="plot-card">
-    <HtmlFragment src="d3-bar.html" />
-</div>
-<caption className="caption">D3 Bar chart — categorical distribution example.</caption>
-
---- 
+Here are some examples of the two **libraries** in the template
 
-<small class="muted">Plotly version</small>
+Props (optional)
+- `title`: short title displayed above the card.
+- `desc`: short description displayed below the card. Supports inline HTML (e.g., links).
+- `frameless`: removes the card background and border for seamless embeds.
 
-<div className="plot-card">
-  <HtmlFragment src="line.html" />
-</div>
-<caption className="caption">Plotly Line chart — interactive time series with hover and zoom.</caption>
+<HtmlEmbed src="d3-line.html" title="D3 Line" desc="Simple time series" />
+---
+<HtmlEmbed
+src="d3-bar.html"
+title="Memory usage with recomputation"
+desc={`Memory usage with recomputation — <a href="https://huggingface.co/spaces/nanotron/ultrascale-playbook?section=activation_recomputation" target="_blank">from the ultrascale playbook</a>`}
+/>
+---
+<HtmlEmbed src="line.html" title="Plotly Line" desc="Interactive time series" />
 
 <small className="muted">Example</small>
 ```mdx
-import HtmlFragment from '../components/HtmlFragment.astro'
+import HtmlEmbed from '../components/HtmlEmbed.astro'
 
-<HtmlFragment src="line.html" />
+<HtmlEmbed src="line.html" title="Plotly Line" desc="Interactive time series" />
 ```
 
-#### Iframes
+### Iframes
 
 You can embed external content in your article using **iframes**. For example, **TrackIO or github code embeds** can be used this way.
 
 <iframe frameborder="0" scrolling="no" style="width:100%; height:292px;" allow="clipboard-write" src="https://emgithub.com/iframe.html?target=https%3A%2F%2Fgithub.com%2Fhuggingface%2Fpicotron%2Fblob%2F1004ae37b87887cde597c9060fb067faa060bafe%2Fsetup.py&style=default&type=code&showBorder=on&showLineNumbers=on"></iframe>
 
-<iframe className="plot-card" src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="660" frameborder="0"></iframe>
+<iframe className="html-embed__card" src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="660" frameborder="0"></iframe>
 
 
 <small className="muted">Example</small>
@@ -320,15 +352,15 @@ You can embed external content in your article using **iframes**. For example, *
 <iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="600" frameborder="0"></iframe>
 ```
 
-#### Gradio
+### Gradio
 
 You can also embed **gradio** apps.
 
-<gradio-app theme_mode="light" space="hebrew-llm-leaderboard/leaderboard"></gradio-app>
+<gradio-app theme_mode="light" space="gradio/hello_world"></gradio-app>
 
 
 
 <small className="muted">Example</small>
 ```mdx
-<gradio-app theme_mode="light" space="hebrew-llm-leaderboard/leaderboard"></gradio-app>
+<gradio-app theme_mode="light" space="gradio/hello_world"></gradio-app>
 ```

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

@@ -41,7 +41,7 @@ A palette encodes **meaning** (categories, magnitudes, oppositions), preserves *
 
 <Aside>
 <div className="">
-  <HtmlFragment src="palettes.html" />
+  <HtmlEmbed src="palettes.html" />
 </div>
 <Fragment slot="aside">
   You can choose a color from the palette to update palettes and copy them to your clipboard.

app/src/content/chapters/getting-started.mdx

@@ -39,12 +39,10 @@ The recommended way is to **duplicate this Space on Hugging Face** rather than c
 
 1. Open the template Space: **[🤗 science-blog-template](https://huggingface.co/spaces/tfrere/science-blog-template)** and click "Duplicate this Space".
 2. Give it a name, choose visibility, and keep the SDK as **Docker** (this project includes a `Dockerfile`).
-3. A new Space repository will be created under your account.
-
-Then push your changes to your new Space repo:
+3. Then push your changes to your new Space repo. **Every push automatically triggers a build and deploy** on Spaces.
 
 ```bash
-git clone https://huggingface.co/spaces/<your-username>/<your-space>
+git clone git@hf.co:spaces/<your-username>/<your-space>.git
 cd <your-space>
 # Make edits locally, then:
 git add .
@@ -52,8 +50,3 @@ git commit -m "Update content"
 git push
 ```
 
-**Every push automatically triggers a build and deploy** on Spaces.
-
-Notes for Docker Spaces:
-- This project exposes port `8080` via Nginx; the Space front matter includes `app_port: 8080` so the service can be probed correctly.
-- No extra configuration is required; the `Dockerfile` builds the Astro site and serves it.

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

@@ -4,7 +4,7 @@ import placeholder from '../../assets/images/placeholder.png';
 import Aside from '../../components/Aside.astro';
 import Wide from '../../components/Wide.astro';
 import FullBleed from '../../components/FullBleed.astro';
-import HtmlFragment from '../../components/HtmlFragment.astro';
+import HtmlEmbed from '../../components/HtmlEmbed.astro';
 import audioDemo from '../../assets/audio/audio-example.wav';
 
 ## Writing Your Content
@@ -62,7 +62,7 @@ import Aside from '../components/Aside.astro'
 
 # Mixing Markdown and components
 
-This paragraph is written in Markdown.
+This paragraph is written in Markdown. 
 
 <Aside>A short callout inserted via a component.</Aside>
 
@@ -106,7 +106,7 @@ Use the **color picker** below to see how the primary color affects the theme.
 #### Brand color
 
 <Aside>
-  <HtmlFragment src="color-picker.html" />
+  <HtmlEmbed frameless src="color-picker.html" />
   <Fragment slot="aside">
     You can use the color picker to select the right color.
     
@@ -119,7 +119,7 @@ Use the **color picker** below to see how the primary color affects the theme.
 
 Here is a suggestion of **color palettes** for your **data visualizations** that align with your **brand identity**. These palettes are generated from your `--primary-color`.
 
-<HtmlFragment src="palettes.html" />
+<HtmlEmbed frameless src="palettes.html" />
 
 
 ### Placement

app/src/content/fragments/palettes.html

@@ -1,18 +1,20 @@
 <div class="palettes" style="width:100%; margin: 10px 0;">
   <style>
     .palettes .palettes__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
-    .palettes .palette-card { position: relative; display: grid; grid-template-columns: 260px 1fr auto; align-items: center; gap: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
+    .palettes .palette-card { position: relative; display: grid; grid-template-columns: 260px 1fr auto; align-items: stretch; gap: 14px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-bg); padding: 12px; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
     /* removed circular badge */
-    .palettes .palette-card__swatches { display: flex; gap: 0; margin: 0; height: 40px; overflow: hidden; border-radius: 8px; }
-    .palettes .palette-card__swatches .sw { flex: 1 1 0; height: 100%; min-width: 0; border: none; }
+    .palettes .palette-card__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0;  }
+    .palettes .palette-card__swatches .sw { width: 100%; min-width: 0; min-height: 0; border-radius: 8px; border: 1px solid var(--border-color); }
     .palettes .palette-card__content { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; min-width: 0; padding-left: 12px; border-left: 1px solid var(--border-color); }
     .palettes .palette-card__actions { display: flex; align-items: center; justify-content: flex-end; justify-self: end; }
-    .palettes .copy-btn { margin: 0; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--surface-bg); color: var(--text-color)!important; font-size: 12px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
-    .palettes .copy-btn:hover { background: var(--primary-color); color: var(--on-primary)!important; border-color: transparent; }
-    .palettes .copy-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
+    .palettes .palette-card__actions { align-self: stretch; }
+    /* .palettes .copy-btn { margin: 0; padding: 0 10px; height: 100%; border-radius: 8px; } */
+    /* .palettes .copy-btn:hover { background: var(--primary-color); color: var(--on-primary)!important; border-color: transparent; }
+    .palettes .copy-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } */
+    .palettes .copy-btn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
     @media (max-width: 640px) {
       .palettes .palette-card { grid-template-columns: 1fr; align-items: stretch; gap: 10px; }
-      .palettes .palette-card__swatches { height: 36px; border-radius: 8px; }
+      .palettes .palette-card__swatches { grid-template-columns: repeat(6, minmax(0, 1fr));  }
       .palettes .palette-card__content { border-left: none; padding-left: 0; }
       .palettes .palette-card__actions { justify-self: start; }
     }
@@ -162,10 +164,18 @@
         const title = document.createElement('div'); title.className = 'palette-card__title'; title.style.textAlign = 'left'; title.style.fontWeight = '800'; title.style.fontSize = '15px'; title.textContent = c.title;
         const desc = document.createElement('div'); desc.className = 'palette-card__desc'; desc.style.textAlign = 'left'; desc.style.color = 'var(--muted-color)'; desc.style.lineHeight = '1.5'; desc.style.fontSize = '12px'; desc.innerHTML = c.desc;
         const actions = document.createElement('div'); actions.className = 'palette-card__actions';
-        const btn = document.createElement('button'); btn.className = 'copy-btn'; btn.textContent = 'Copy';
+        const btn = document.createElement('button'); btn.className = 'copy-btn button--ghost';
+        btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 1H4c-1.1 0-2 .9-2 2v12h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>';
         btn.addEventListener('click', async () => {
           const json = JSON.stringify(colors, null, 2);
-          try { await navigator.clipboard.writeText(json); const old = btn.textContent; btn.textContent = 'Copied!'; setTimeout(() => btn.textContent = old, 900); } catch { window.prompt('Copy palette', json); }
+          try {
+            await navigator.clipboard.writeText(json);
+            const old = btn.innerHTML;
+            btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
+            setTimeout(() => btn.innerHTML = old, 900);
+          } catch {
+            window.prompt('Copy palette', json);
+          }
         });
 
         content.appendChild(title); content.appendChild(desc);

app/src/env.d.ts

@@ -1 +1,9 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="vite/client" />
+
+declare module '*.png?url' {
+  const src: string;
+  export default src;
+}
+
+// (Global window typings for Plotly/D3 are intentionally omitted; components handle typing inline.)

app/src/pages/index.astro

@@ -1,13 +1,15 @@
 ---
-import Article, { frontmatter as articleFM } from '../content/article.mdx';
-import Meta from '../components/Meta.astro';
+import * as ArticleMod from '../content/article.mdx';
+import Hero from '../components/Hero.astro';
 import Footer from '../components/Footer.astro';
-import Header from '../components/Header.astro';
 import ThemeToggle from '../components/ThemeToggle.astro';
-import SeoHead from '../components/SeoHead.astro';
-import ogDefault from '../assets/images/visual-vocabulary-poster.png';
+import Seo from '../components/Seo.astro';
+// @ts-ignore Astro asset import typed via env.d.ts
+import ogDefaultUrl from '../assets/images/visual-vocabulary-poster.png?url';
 import 'katex/dist/katex.min.css';
 import '../styles/global.css';
+const articleFM = (ArticleMod as any).frontmatter ?? {};
+const Article = (ArticleMod as any).default;
 const docTitle = articleFM?.title ?? 'Untitled article';
 // Allow explicit line breaks in the title via "\n" or YAML newlines
 const docTitleHtml = (articleFM?.title ?? 'Untitled article')
@@ -20,9 +22,9 @@ 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')
+const imageAbs: string = fmOg && fmOg.startsWith('http')
   ? fmOg
-  : (Astro.site ? new URL((fmOg ?? ogDefault.src), Astro.site).toString() : (fmOg ?? ogDefault.src));
+  : (Astro.site ? new URL((fmOg ?? ogDefaultUrl), Astro.site).toString() : (fmOg ?? ogDefaultUrl));
 
 // ---- Build citation text & BibTeX from frontmatter ----
 const rawTitle = articleFM?.title ?? 'Untitled article';
@@ -54,7 +56,7 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
     <meta charset="utf-8" />
     <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} />
+    <Seo title={docTitle} description={description} authors={authors} published={published} tags={tags} image={imageAbs} />
     <script is:inline>
       (() => {
         try {
@@ -73,12 +75,7 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
   </head>
   <body>
     <ThemeToggle />
-    <Header title={docTitleHtml} description={subtitle}>
-    </Header>
-
-    <section class="article-header">
-      <Meta title={docTitle} authors={articleFM?.authors} affiliation={articleFM?.affiliation} published={articleFM?.published} />
-    </section>
+    <Hero title={docTitleHtml} titleRaw={docTitle} description={subtitle} authors={articleFM?.authors} affiliation={articleFM?.affiliation} published={articleFM?.published} />
 
     <section class="content-grid">
       <aside class="toc">
@@ -105,14 +102,19 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
     <script>
       // Initialize zoom on img[data-zoomable]; wait for script & content; close on scroll like Medium
       (() => {
+        /** @type {any} */
         let zoomInstance = null;
 
+        /** @param {() => void} cb */
         const ensureMediumZoomReady = (cb) => {
+          // @ts-ignore mediumZoom injected globally by external script
           if (window.mediumZoom) return cb();
+          // @ts-ignore mediumZoom injected globally by external script
           const retry = () => (window.mediumZoom ? cb() : setTimeout(retry, 30));
           retry();
         };
 
+        /** @returns {HTMLElement[]} */
         const collectTargets = () => Array.from(document.querySelectorAll('section.content-grid main img[data-zoomable]'));
 
         const initOrUpdateZoom = () => {
@@ -122,11 +124,13 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
           if (!targets.length) return;
 
           if (!zoomInstance) {
+            // @ts-ignore medium-zoom injected globally by external script
             zoomInstance = window.mediumZoom(targets, { background, margin: 24, scrollOffset: 0 });
 
             let onScrollLike;
             const attachCloseOnScroll = () => {
               if (onScrollLike) return;
+              // @ts-ignore medium-zoom instance has close()
               onScrollLike = () => { zoomInstance && zoomInstance.close(); };
               window.addEventListener('wheel', onScrollLike, { passive: true });
               window.addEventListener('touchmove', onScrollLike, { passive: true });
@@ -139,16 +143,21 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
               window.removeEventListener('scroll', onScrollLike);
               onScrollLike = null;
             };
+            // @ts-ignore medium-zoom instance has on()
             zoomInstance.on('open', attachCloseOnScroll);
+            // @ts-ignore medium-zoom instance has on()
             zoomInstance.on('close', detachCloseOnScroll);
 
             const themeObserver = new MutationObserver(() => {
               const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+              // @ts-ignore medium-zoom instance has update()
               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 {
+            // @ts-ignore medium-zoom instance has attach()/update()
             zoomInstance.attach(targets);
+            // @ts-ignore medium-zoom instance has update()
             zoomInstance.update({ background });
           }
         };
@@ -191,6 +200,28 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
       } else { setExternalTargets(); }
     </script>
 
+    <script>
+      // Delegate copy clicks for code blocks injected by rehypeCodeCopyAndLabel
+      document.addEventListener('click', async (e) => {
+        const target = e.target instanceof Element ? e.target : null;
+        const btn = target ? target.closest('.code-copy') : null;
+        if (!btn) return;
+        const card = btn.closest('.code-card');
+        const pre = card && card.querySelector('pre');
+        if (!pre) return;
+        const text = pre.textContent || '';
+        try {
+          await navigator.clipboard.writeText(text.trim());
+          const old = btn.innerHTML;
+          btn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z"/></svg>';
+          setTimeout(() => (btn.innerHTML = old), 1200);
+        } catch {
+          btn.textContent = 'Error';
+          setTimeout(() => (btn.textContent = 'Copy'), 1200);
+        }
+      });
+    </script>
+
     <script>
       // Build TOC from article headings (h2/h3/h4) and render into the sticky aside
       const buildTOC = () => {
@@ -303,42 +334,7 @@ const bibtex = `@misc{${bibKey},\n  title={${titleFlat}},\n  author={${authorsBi
       } 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>
+    <!-- Removed JS fallback for language chips; labels handled by CSS/Shiki -->
   </body>
 </html>
 

app/src/styles/_base.css

@@ -66,10 +66,7 @@ html { font-size: 14px; line-height: 1.6; }
   margin: var(--spacing-4) 0;
 }
 
-.content-grid main pre:not(.astro-code) { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; overflow: auto; }
-
 /* Rely on Shiki's own token spans; no class remap */
-.content-grid main code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 /* Placeholder block (discreet centered text) */
 .placeholder-block {
   display: grid;
@@ -95,29 +92,6 @@ html { font-size: 14px; line-height: 1.6; }
   background: var(--surface-bg);
 }
 
-/* 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;
-}
 
 .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; }
@@ -141,7 +115,6 @@ html { font-size: 14px; line-height: 1.6; }
 /* ============================================================================ */
 img,
 picture {
-  width: 100%;
   max-width: 100%;
   height: auto;
   display: block;
@@ -189,6 +162,11 @@ button, .button {
   display: inline-block;
   transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
 }
+/* Icon-only buttons: equal X/Y padding */
+button:has(> svg:only-child),
+.button:has(> svg:only-child) {
+  padding: 8px !important;
+}
 button:hover, .button:hover {
   filter: brightness(96%);
 }
@@ -203,6 +181,18 @@ button:disabled, .button:disabled {
   cursor: not-allowed;
 }
 
+/* Ghost/Muted button: subtle outline, primary color text/border */
+.button--ghost {
+  background: transparent !important;
+  color: var(--primary-color) !important;
+  border-color: var(--primary-color) !important;
+}
+.button--ghost:hover {
+  color: var(--primary-color-hover) !important;
+  border-color: var(--primary-color-hover) !important;
+  filter: none;
+}
+
 .button-group .button {
   margin: 5px;
 }
@@ -250,7 +240,8 @@ button:disabled, .button:disabled {
   .hero-banner,
   .d3-galaxy,
   .d3-galaxy svg,
-  .plot-card,
+  .html-embed__card,
+  .html-embed__card,
   .js-plotly-plot,
   figure,
   pre,

app/src/styles/components/_code.css

@@ -12,11 +12,11 @@ code {
 
 /* Sync Shiki variables with current theme */
 /* Standard wrapper look for code blocks */
-.astro-code { border: 1px solid var(--border-color); border-radius: 6px; padding: var(--spacing-3); font-size: 14px; --code-gutter-width: 2.5em; }
+.astro-code { border: 1px solid var(--border-color); border-radius: 6px; padding: 0; font-size: 14px; --code-gutter-width: 2.5em; }
 
 /* Prevent code blocks from breaking layout on small screens */
 .astro-code { overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
-section.content-grid pre { overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; padding: var(--spacing-3); }
+section.content-grid pre { overflow-x: auto; width: 100%; max-width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; padding: 0; }
 section.content-grid pre code { display: inline-block; min-width: 100%; }
 
 /* Wrap long lines on mobile to avoid overflow (URLs, etc.) */
@@ -43,25 +43,40 @@ html[data-theme='light'] .astro-code {
 }
 
 /* Line numbers for Shiki-rendered code blocks */
-.astro-code code { counter-reset: astro-code-line; display: block; background: none; border: none; }
-.astro-code .line { display: inline-block; position: relative; padding-left: calc(var(--code-gutter-width) + var(--spacing-3)); min-height: 1.25em; }
-.astro-code .line::before { counter-increment: astro-code-line; content: counter(astro-code-line); position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--code-gutter-width)); text-align: right; color: var(--muted-color); opacity: .75; user-select: none; padding-right: var(--spacing-3); border-right: 1px solid var(--border-color); }
+.astro-code code { counter-reset: astro-code-line; display: block; background: none; border: none;  }
+.astro-code .line { display: inline-block; position: relative; padding-left: calc(var(--code-gutter-width) + var(--spacing-1)); min-height: 1.25em; }
+.astro-code .line::before { counter-increment: astro-code-line; content: counter(astro-code-line); position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--code-gutter-width)); text-align: right; color: var(--muted-color); opacity: .30; user-select: none; padding-right: var(--spacing-2); border-right: 1px solid var(--border-color); }
 .astro-code .line:empty::after { content: "\00a0"; }
 /* Hide trailing empty line added by parsers */
 .astro-code code > .line:last-child:empty { display: none; }
 
-/* JS fallback chip */
-.astro-code.has-lang-chip { position: relative; padding-top: 22px; }
-.astro-code .code-lang-chip {
+/* (Removed JS fallback chip: label handled via CSS in _base.css) */
+
+/* Rehype-injected wrapper for non-Shiki pre blocks */
+.code-card { position: relative; }
+.code-card .code-copy {
+  position: absolute; top: 6px; right: 6px; z-index: 3; padding: 6px 12px;
+}
+.code-card .code-copy svg { width: 16px; height: 16px; display: block; fill: currentColor; }
+.code-card pre { margin: 0; margin-bottom: var(--spacing-1);}
+
+/* Discreet filetype/language label shown under the Copy button */
+.code-card::after {
+  content: attr(data-language);
   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;
+  top: 8px; /* default, aligns with copy button */
+  right: 8px;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  color: var(--muted-color);
+  pointer-events: none;
+  z-index: 2;
 }
 
+/* When no copy button (single-line), keep the label in the top-right corner */
+.code-card.no-copy::after { top: 8px; right: 8px; }
+
 
 
 /* Overrides inside Accordion: remove padding and border on code containers */

app/src/styles/components/_poltly.css

@@ -1,9 +1,8 @@
 /* ============================================================================ */
 /* Plotly – fragments & controls */
 /* ============================================================================ */
-.plot-card { background: var(--code-bg); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; margin: 8px 0; }
-.plot-card svg text { fill: var(--text-color) !important; }
-.plot-card label { color: var(--text-color) !important; }
+.html-embed__card svg text { fill: var(--text-color) !important; }
+.html-embed__card label { color: var(--text-color) !important; }
 .plotly-graph-div { width: 100% !important; min-height: 320px; }
 @media (max-width: 768px) { .plotly-graph-div { min-height: 260px; } }
 [id^="plot-"] { display: flex; flex-direction: column; align-items: center; gap: 15px; }
@@ -20,26 +19,26 @@
 /* ---------------------------------------------------------------------------- */
 /* Dark mode overrides for Plotly readability */
 /* ---------------------------------------------------------------------------- */
-[data-theme="dark"] .plot-card .xaxislayer-above text,
-[data-theme="dark"] .plot-card .yaxislayer-above text,
-[data-theme="dark"] .plot-card .infolayer text,
-[data-theme="dark"] .plot-card .legend text,
-[data-theme="dark"] .plot-card .annotation text,
-[data-theme="dark"] .plot-card .colorbar text,
-[data-theme="dark"] .plot-card .hoverlayer text { fill: #fff !important; }
+[data-theme="dark"] .html-embed__card .xaxislayer-above text,
+[data-theme="dark"] .html-embed__card .yaxislayer-above text,
+[data-theme="dark"] .html-embed__card .infolayer text,
+[data-theme="dark"] .html-embed__card .legend text,
+[data-theme="dark"] .html-embed__card .annotation text,
+[data-theme="dark"] .html-embed__card .colorbar text,
+[data-theme="dark"] .html-embed__card .hoverlayer text { fill: #fff !important; }
 
-[data-theme="dark"] .plot-card .xaxislayer-above path,
-[data-theme="dark"] .plot-card .yaxislayer-above path,
-[data-theme="dark"] .plot-card .xlines-above,
-[data-theme="dark"] .plot-card .ylines-above { stroke: rgba(255,255,255,.35) !important; }
+[data-theme="dark"] .html-embed__card .xaxislayer-above path,
+[data-theme="dark"] .html-embed__card .yaxislayer-above path,
+[data-theme="dark"] .html-embed__card .xlines-above,
+[data-theme="dark"] .html-embed__card .ylines-above { stroke: rgba(255,255,255,.35) !important; }
 
-[data-theme="dark"] .plot-card .gridlayer path { stroke: rgba(255,255,255,.15) !important; }
+[data-theme="dark"] .html-embed__card .gridlayer path { stroke: rgba(255,255,255,.15) !important; }
 
 /* Legend and hover backgrounds */
-[data-theme="dark"] .plot-card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
-[data-theme="dark"] .plot-card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; }
+[data-theme="dark"] .html-embed__card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
+[data-theme="dark"] .html-embed__card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; }
 
 /* Colorbar background (keep gradient intact) */
-[data-theme="dark"] .plot-card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
+[data-theme="dark"] .html-embed__card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
 
 

app/src/styles/global.css

@@ -8,7 +8,7 @@
 /* Dark-mode form tweak */
 [data-theme="dark"] .plotly_input_container > select { background-color: #1a1f27; border-color: var(--border-color); color: var(--text-color); }
 
-[data-theme="dark"] .plot-card { background: #12151b; border-color: rgba(255,255,255,.15); }
+[data-theme="dark"] .html-embed__card:not(.is-frameless) { background: #12151b; border-color: rgba(255,255,255,.15); }
 [data-theme="dark"] .right-aside .aside-card { background: #12151b; border-color: rgba(255,255,255,.15); }
 [data-theme="dark"] .content-grid main pre { background: #12151b; border-color: rgba(255,255,255,.15); }
 [data-theme="dark"] .toc nav { border-left-color: rgba(255,255,255,.15); }
@@ -20,51 +20,6 @@
 img[data-zoomable] { cursor: zoom-in; }
 .medium-zoom--opened img[data-zoomable] { cursor: zoom-out; }
 
-/* ============================================================================ */
-/* Hero (full-bleed) */
-/* ============================================================================ */
-.hero { width: 100%; padding: 48px 16px 16px; text-align: center; }
-.hero-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.1; margin: 0 0 8px; 
-
-    max-width: 60%;
-    margin: auto;}
-.hero-banner { max-width: 980px; margin: 0 auto; }
-.hero-desc { color: var(--muted-color); font-style: italic; margin: 0 0 16px 0; }
-
-/* ============================================================================ */
-/* Meta (byline-like header) */
-/* ============================================================================ */
-  
-.meta {
-    border-top: 1px solid var(--border-color);
-    border-bottom: 1px solid var(--border-color);
-    padding: 1rem 0;
-    font-size: 0.9rem;
-    line-height: 1.8em;
-  }
-  .meta-container {
-    max-width: 720px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 0 auto;
-    gap: 8px;
-  }
-  .meta-container-cell {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  .meta-container-cell h3 {
-    margin: 0;
-    font-size: 12px;
-    font-weight: 400;
-    color: var(--muted-color);
-    text-transform: uppercase;
-    letter-spacing: .02em;
-  }
-  .meta-container-cell p { margin: 0; }
-
 /* ============================================================================ */
 /* Theme Toggle button (moved from component) */
 /* ============================================================================ */