update doc

app/astro.config.mjs

@@ -8,7 +8,7 @@ import remarkFootnotes from 'remark-footnotes';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeCitation from 'rehype-citation';
-import rehypeCodeCopyAndLabel from './plugins/rehype/code-copy-and-label.mjs';
+import rehypeCodeCopy from './plugins/rehype/code-copy.mjs';
 import rehypeReferencesAndFootnotes from './plugins/rehype/post-citation.mjs';
 import remarkIgnoreCitationsInCode from './plugins/remark/ignore-citations-in-code.mjs';
 import rehypeRestoreAtInCode from './plugins/rehype/restore-at-in-code.mjs';
@@ -56,7 +56,7 @@ export default defineConfig({
       }],
       rehypeReferencesAndFootnotes,
       rehypeRestoreAtInCode,
-      rehypeCodeCopyAndLabel,
+      rehypeCodeCopy,
       rehypeWrapTables
     ]
   }

app/plugins/rehype/{code-copy-and-label.mjs → code-copy.mjs}

@@ -1,46 +1,14 @@
-// Minimal rehype plugin to wrap code blocks with a copy button and a language label
+// Minimal rehype plugin to wrap code blocks with a copy button
 // Exported as a standalone module to keep astro.config.mjs lean
-export default function rehypeCodeCopyAndLabel() {
+export default function rehypeCodeCopy() {
   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
+        // Find code child
         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 lower = String(lang).toLowerCase();
-        const toExt = (s) => {
-          switch (String(s).toLowerCase()) {
-            case 'typescript': case 'ts': return 'ts';
-            case 'tsx': return 'tsx';
-            case 'javascript': case 'js': case 'node': return 'js';
-            case 'jsx': return 'jsx';
-            case 'python': case 'py': return 'py';
-            case 'bash': case 'shell': case 'sh': return 'sh';
-            case 'markdown': case 'md': return 'md';
-            case 'yaml': case 'yml': return 'yml';
-            case 'html': return 'html';
-            case 'css': return 'css';
-            case 'json': return 'json';
-            default: return lower || '';
-          }
-        };
-        const ext = toExt(lower);
         // 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');
@@ -85,16 +53,11 @@ export default function rehypeCodeCopyAndLabel() {
             node.__forceSingle = true;
           }
         }
-        // Ensure CSS-only label works: set data-language on <code> and <pre>, and wrapper
-        code.properties = code.properties || {};
-        if (ext) code.properties['data-language'] = ext;
-        node.properties = node.properties || {};
-        if (ext) node.properties['data-language'] = ext;
         // 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': ext },
+          properties: { className: ['code-card'].concat((isSingleLine || node.__forceSingle) ? ['no-copy'] : []) },
           children: (isSingleLine || node.__forceSingle) ? [ node ] : [
             {
               type: 'element',
@@ -127,3 +90,5 @@ export default function rehypeCodeCopyAndLabel() {
 }
 
 
+
+

app/src/content/article.mdx

@@ -1,8 +1,8 @@
 ---
 title: "Bringing paper to life:\n A modern template for\n scientific writing
 "
-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."
+subtitle: "Ready‑to‑publish workflow so you can focus on ideas rather than infrastructure."
+description: "Ready‑to‑publish workflow so you can focus on ideas rather than infrastructure."
 authors:
   - name: "Thibaud Frere"
     url: "https://huggingface.co/tfrere"

app/src/content/chapters/introduction.mdx

@@ -1,9 +1,10 @@
 import Sidenote from "../../components/Sidenote.astro";
 
 <Sidenote>
-  Welcome to this **single‑page** research article template. It helps you publish **clear**, **modern**, and **interactive** technical writing with **minimal setup**. Grounded in up to date good practices in web dev, it favors interactive explanations, clear notation, and inspectable examples over static snapshots.
+  Welcome to this single‑page **research article template**. It helps you publish **clear**, **modern**, and **interactive technical writing** with **minimal setup**.
+  
+  Grounded in up to date good practices in web dev, it favors **interactive explanations**, **clear notation**, and **inspectable examples** over static snapshots.
 
-  It offers a **ready‑to‑publish**, **all‑in‑one** workflow so you can focus on **ideas** rather than **infrastructure**.
   <Fragment slot="aside">
     Reading time: 20–25 minutes.
   </Fragment>
@@ -26,7 +27,7 @@ import Sidenote from "../../components/Sidenote.astro";
   <span className="tag">Dataviz color palettes</span>
   <span className="tag">Optimized images</span>
   <span className="tag">Lightweight bundle</span>
-  <span className="tag">SEO-friendly</span>
+  <span className="tag">SEO friendly</span>
   <span className="tag">Automatic build</span>
   <span className="tag">Automatic PDF export</span>
   <span className="tag">Dark theme</span>
@@ -38,26 +39,23 @@ import Sidenote from "../../components/Sidenote.astro";
 </Sidenote>
 
 ## Introduction
-The web enables what static PDFs can’t: **interactive diagrams**, **progressive notation**, and **exploratory views** that reveal how ideas behave. This template makes **interactive artifacts**—figures, math, code and **inspectable experiments**—first‑class alongside prose, so readers **build intuition** rather than skim results.
-
-If you write technical blogs or research notes, you’ll benefit from a **ready‑to‑publish workflow** with clear notation, optimized media, and **automatic builds**.
+The web offers what static PDFs can’t: **interactive diagrams**, **progressive notation**, and **exploratory views** that show how ideas behave. This template treats **interactive artifacts**—figures, math, code, and inspectable experiments—as **first‑class** alongside prose, helping readers **build intuition** instead of skimming results.
 
 ### Who is this for
 
-For people who publish web‑native, interactive writing with minimal setup:
-
-- Researchers/engineers with live figures.
-- Educators crafting explorable explanations.
+Ideal for anyone creating **web‑native** and **interactive** content with **minimal setup**:
 
-Not a CMS or a multi‑page blog—this is a focused, single‑page, MDX‑first workflow.
+- For **scientists** writing modern web‑native papers
+- For **educators** building explorable lessons.
 
+This is not a CMS or a multi‑page blog—it's a **focused**, **single‑page**, **MDX‑first** workflow.
 
 ### Inspired by Distill
 
 <Sidenote>
-This project draws strong inspiration from [**Distill**](https://distill.pub) (2016–2021), which championed clear, web‑native scholarship and set a high standard for interactive scientific communication.
+This project draws strong inspiration from [**Distill**](https://distill.pub) (2016–2021), which championed **clear**, **web‑native** scholarship and set a **high standard** for **interactive scientific communication**.
 
-To give you a sense of what inspired this template, here is a short, curated list of well‑designed and often interactive works from Distill:
+To give you a sense of what inspired this template, here is a short, curated list of **well‑designed** and often **interactive** works from Distill:
 
 - [Growing Neural Cellular Automata](https://distill.pub/2020/growing-ca/)
 - [Activation Atlas](https://distill.pub/2019/activation-atlas/)

app/src/pages/index.astro

@@ -186,7 +186,7 @@ const licence = (articleFM as any)?.licence ?? (articleFM as any)?.license ?? (a
     </script>
 
     <script>
-      // Delegate copy clicks for code blocks injected by rehypeCodeCopyAndLabel
+      // Delegate copy clicks for code blocks injected by rehypeCodeCopy
       document.addEventListener('click', async (e) => {
         const target = e.target instanceof Element ? e.target : null;
         const btn = target ? target.closest('.code-copy') : null;

app/src/styles/components/_code.css

@@ -174,9 +174,7 @@ section.content-grid pre code {
 } */
 
 /* Fallback if Shiki uses data-lang instead of data-language */
-.astro-code[data-lang]::after { content: attr(data-lang); }
-
-/* Normalize to extensions for common languages */
+/* .astro-code[data-lang]::after { content: attr(data-lang); }
 .astro-code[data-language="typescript"]::after { content: "ts"; }
 .astro-code[data-language="tsx"]::after { content: "tsx"; }
 .astro-code[data-language="javascript"]::after,
@@ -191,7 +189,7 @@ section.content-grid pre code {
 .astro-code[data-language="yml"]::after { content: "yml"; }
 .astro-code[data-language="html"]::after { content: "html"; }
 .astro-code[data-language="css"]::after { content: "css"; }
-.astro-code[data-language="json"]::after { content: "json"; }
+.astro-code[data-language="json"]::after { content: "json"; } */
 
 /* In Accordions, keep same bottom-right placement */
 .accordion .astro-code::after { right: 0; bottom: 0; }

app/src/styles/components/_tag.css

@@ -4,10 +4,10 @@
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 16px;
+  padding: 8px 12px;
   font-size: 12px;
   line-height: 1;
-  border-radius: 100px;
+  border-radius: var(--button-radius);
   background: var(--surface-bg);
   border: 1px solid var(--border-color);
   color: var(--text-color);