update

app/src/components/Hero.astro

@@ -12,6 +12,7 @@ interface Props {
   affiliation?: string; // legacy single affiliation
   published?: string;
   doi?: string;
+  pdfProOnly?: boolean; // Gate PDF download to Pro users only
 }
 
 const {
@@ -23,6 +24,7 @@ const {
   affiliation,
   published,
   doi,
+  pdfProOnly = false,
 } = Astro.props as Props;
 
 type Author = { name: string; url?: string; affiliationIndices?: number[] };
@@ -184,8 +186,22 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
       </div>
     )} -->
     <div class="meta-container-cell meta-container-cell--pdf">
-      <h3>PDF</h3>
-      <div id="pdf-download-container">
+      <div class="pdf-header-wrapper">
+        <h3>PDF</h3>
+        <span class="pro-badge-wrapper" style="display: none;">
+          <span class="pro-badge-prefix">- you are</span>
+          <span class="pro-badge">PRO</span>
+        </span>
+        <span class="pro-only-label" style="display: none;">
+          <span class="pro-only-dash">-</span>
+          <span class="pro-only-text">pro only</span>
+          <svg class="pro-only-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+            <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+          </svg>
+        </span>
+      </div>
+      <div id="pdf-download-container" data-pdf-pro-only={pdfProOnly.toString()}>
         <p class="pdf-loading">Checking access...</p>
         <p class="pdf-pro-only" style="display: none;">
           <a
@@ -196,11 +212,20 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
           >
             Download PDF
           </a>
-          <span class="pro-badge">PRO</span>
-        </p>
-        <p class="pdf-locked" style="display: none;">
-          <span class="locked-message">🔒 PDF available for Pro users only</span>
         </p>
+        <div class="pdf-locked" style="display: none;">
+          <a 
+            class="button button-locked" 
+            href="https://huggingface.co/subscribe/pro"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg class="lock-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 12 12" fill="none">
+              <path d="M6.48 1.26c0 1.55.67 2.58 1.5 3.24.86.68 1.9 1 2.58 1.07v.86A5.3 5.3 0 0 0 7.99 7.5a3.95 3.95 0 0 0-1.51 3.24h-.96c0-1.55-.67-2.58-1.5-3.24a5.3 5.3 0 0 0-2.58-1.07v-.86A5.3 5.3 0 0 0 4.01 4.5a3.95 3.95 0 0 0 1.51-3.24h.96Z" fill="currentColor"></path>
+            </svg>
+            <span class="locked-title">Subscribe to Pro</span>
+          </a>
+        </div>
       </div>
     </div>
   </div>
@@ -209,9 +234,16 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 <script>
   // PDF access control for Pro users only
   
+  // ⚙️ Configuration for local development
+  const LOCAL_IS_PRO = false; // Set to true to test Pro access locally
+  
   const FALLBACK_TIMEOUT_MS = 3000;
   let userPlanChecked = false;
 
+  // Check if PDF Pro gating is enabled
+  const pdfContainer = document.querySelector("#pdf-download-container") as HTMLElement;
+  const pdfProOnly = pdfContainer?.getAttribute("data-pdf-pro-only") === "true";
+
   /**
    * Check if user has Pro access
    * Isolated logic for Pro user verification
@@ -231,15 +263,32 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     const loadingEl = document.querySelector(".pdf-loading") as HTMLElement;
     const proOnlyEl = document.querySelector(".pdf-pro-only") as HTMLElement;
     const lockedEl = document.querySelector(".pdf-locked") as HTMLElement;
+    const proOnlyLabel = document.querySelector(".pro-only-label") as HTMLElement;
+    const proBadgeWrapper = document.querySelector(".pro-badge-wrapper") as HTMLElement;
     
     // Hide loading state
     if (loadingEl) loadingEl.style.display = "none";
     
-    // Show appropriate state
+    // If PDF Pro gating is disabled, just show the download button
+    if (!pdfProOnly) {
+      if (proOnlyEl) proOnlyEl.style.display = "block";
+      if (proOnlyLabel) proOnlyLabel.style.display = "none";
+      if (lockedEl) lockedEl.style.display = "none";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "none";
+      return;
+    }
+    
+    // Show appropriate state based on Pro status
     if (isPro) {
       if (proOnlyEl) proOnlyEl.style.display = "block";
+      if (proOnlyLabel) proOnlyLabel.style.display = "none";
+      if (lockedEl) lockedEl.style.display = "none";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "inline-flex";
     } else {
+      if (proOnlyEl) proOnlyEl.style.display = "none";
+      if (proOnlyLabel) proOnlyLabel.style.display = "inline-flex";
       if (lockedEl) lockedEl.style.display = "block";
+      if (proBadgeWrapper) proBadgeWrapper.style.display = "none";
     }
   }
 
@@ -257,38 +306,42 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
 
   /**
    * Fallback behavior when no parent window responds
-   * Change this to test different scenarios locally
+   * Uses LOCAL_IS_PRO configuration for local development
    */
   function handleFallback() {
-    // Default to Pro access in development/standalone mode
-    handleUserPlan({ user: "pro" });
-    
-    // Uncomment to test locked state:
-    // handleUserPlan({ user: "free" });
-    // handleUserPlan(null);
-  }
-
-  // Listen for messages from parent window (Hugging Face Spaces)
-  window.addEventListener("message", (event) => {
-    if (event.data.type === "USER_PLAN") {
-      handleUserPlan(event.data.plan);
+    if (LOCAL_IS_PRO) {
+      handleUserPlan({ user: "pro" });
+    } else {
+      handleUserPlan({ user: "free" });
     }
-  });
+  }
 
-  // Request user plan on page load
-  if (window.parent && window.parent !== window) {
-    // We're in an iframe, request user plan
-    window.parent.postMessage({ type: "USER_PLAN_REQUEST" }, "*");
-    
-    // Fallback if no response after timeout
-    setTimeout(() => {
-      if (!userPlanChecked) {
-        handleFallback();
-      }
-    }, FALLBACK_TIMEOUT_MS);
+  // If PDF Pro gating is disabled, show the download button immediately
+  if (!pdfProOnly) {
+    updatePdfAccess(true);
   } else {
-    // Not in iframe (local development), use fallback immediately
-    handleFallback();
+    // Listen for messages from parent window (Hugging Face Spaces)
+    window.addEventListener("message", (event) => {
+      if (event.data.type === "USER_PLAN") {
+        handleUserPlan(event.data.plan);
+      }
+    });
+
+    // Request user plan on page load
+    if (window.parent && window.parent !== window) {
+      // We're in an iframe, request user plan
+      window.parent.postMessage({ type: "USER_PLAN_REQUEST" }, "*");
+      
+      // Fallback if no response after timeout
+      setTimeout(() => {
+        if (!userPlanChecked) {
+          handleFallback();
+        }
+      }, FALLBACK_TIMEOUT_MS);
+    } else {
+      // Not in iframe (local development), use fallback immediately
+      handleFallback();
+    }
   }
 </script>
 
@@ -403,59 +456,138 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
   }
 
   /* PDF access control styles */
+  .pdf-header-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1;
+  }
+
+  .pdf-header-wrapper h3 {
+    line-height: 1;
+  }
+
   .pdf-loading {
     color: var(--muted-color);
     font-size: 0.9em;
   }
 
   .pdf-pro-only {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
+    margin: 0;
+  }
+
+  .pro-badge-wrapper {
+    display: inline-flex;
     align-items: center;
+    gap: 5px;
+    font-style: normal;
+  }
+
+  .pro-badge-prefix {
+    font-size: 0.85em;
+    opacity: 0.5;
+    font-weight: 400;
+    font-style: normal;
   }
 
   .pro-badge {
     display: inline-block;
-    transform: skewX(-12deg);
-    border: 1px solid rgba(229, 231, 235, 0.5);
+    border: 1px solid rgba(0, 0, 0, 0.025);
     background: linear-gradient(to bottom right, #f9a8d4, #86efac, #fde047);
     color: black;
-    padding: 4px 10px;
-    border-radius: 8px;
-    font-size: 0.875rem;
+    padding: 1px 5px;
+    border-radius: 3px;
+    font-size: 0.5rem;
     font-weight: 700;
+    font-style: normal;
     letter-spacing: 0.025em;
     text-transform: uppercase;
-    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.1), 
-                0 4px 6px -4px rgba(34, 197, 94, 0.1);
   }
 
   /* Dark mode pro badge */
   :global(.dark) .pro-badge,
   :global([data-theme="dark"]) .pro-badge {
     background: linear-gradient(to bottom right, #ec4899, #22c55e, #eab308);
-    border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.2), 
-                0 4px 6px -4px rgba(34, 197, 94, 0.2);
+    border-color: rgba(255, 255, 255, 0.15);
   }
 
-  .pdf-locked {
-    display: flex;
+  .pro-only-label {
+    display: inline-flex;
+    flex-direction: row;
     align-items: center;
+    gap: 5px;
+    font-size: 0.85em;
+    opacity: 0.5;
+    font-weight: 400;
+    line-height: 1;
   }
 
-  .locked-message {
-    color: var(--muted-color);
-    font-size: 0.85em;
-    display: flex;
+  .pro-only-dash {
+    display: inline-flex;
     align-items: center;
-    gap: 4px;
+    line-height: 1;
   }
 
+  .pro-only-icon {
+    width: 11px;
+    height: 11px;
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .pro-only-text {
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+  }
+
+  .pdf-locked {
+    display: block;
+  }
+
+  .button-locked {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: linear-gradient(135deg, 
+                  var(--primary-color) 0%, 
+                  oklch(from var(--primary-color) calc(l - 0.1) calc(c + 0.05) calc(h - 60)) 100%);
+    border-radius: var(--button-radius);
+    padding: var(--button-padding-y) var(--button-padding-x);
+    font-size: var(--button-font-size);
+    line-height: 1;
+    color: var(--on-primary);
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-weight: normal;
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
+  .button-locked:active {
+    transform: translateY(0);
+  }
+
+  .lock-icon {
+    font-size: 1em;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+  }
+
+  .locked-title {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Dark mode locked button - inherits from light mode variables */
+
   @media (max-width: 768px) {
-    .pdf-pro-only {
-      justify-content: flex-end;
+    .meta-container-cell--pdf {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
     }
   }
 </style>

app/src/content/article.mdx

@@ -6,9 +6,6 @@ authors:
   - name: "Thibaud Frere"
     url: "https://huggingface.co/tfrere"
     affiliations: [1]
-  - name: "Thibaud Frere2"
-    url: "https://huggingface.co/tfrere"
-    affiliations: [1]
 affiliations:
   - name: "Hugging Face"
     url: "https://huggingface.co"
@@ -21,6 +18,7 @@ tags:
   - research
   - template
 tableOfContentsAutoCollapse: true
+pdfProOnly: false
 ---
 
 import Introduction from "./chapters/demo/introduction.mdx";

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

@@ -343,71 +343,6 @@ import Quote from '../../../components/Quote.astro'
 ```
 </Accordion>
 
-### Iframes
-
-You can embed external content in your article using **iframes**. For example, **TrackIO**, **Gradio** or even **Github code embeds** can be used this way.
-
-<small className="muted">Gradio embed example</small>
-<div className="card">
-<iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
-</div>
-<div className="card">
-<iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="630" frameborder="0"></iframe>
-</div>
-<Accordion title="Code example">
-```mdx
-<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 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>
-<iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
-```
-</Accordion>
-
-
-### HtmlEmbed
-
-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/embeds` folder.
-
-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.
-
-
-<HtmlEmbed src="d3-line.html" title="This is a chart title" desc="Figure X: Some chart description<br/>Credit: <a href='https://example.com' target='_blank'>Example</a>" />
-
-| Prop        | Required | Description                                                                                      
-|-------------|----------|----------------------------------------------------------------------------------
-| `src`       | Yes      | Path to the embed file in the `embeds` folder.                                                   
-| `title`     | No       | Short title displayed above the card.                                                            
-| `desc`      | No       | Short description displayed below the card. Supports inline HTML (e.g., links).                  
-| `frameless` | No       | Removes the card background and border for seamless embeds.                                      
-| `align`     | No       | Aligns the title/description text. One of `left` (default), `center`, `right`.                  
-| `id`        | No       | Adds an `id` to the outer figure for deep-linking and cross-references.                        
-| `data`      | No       | Path (string) or array of paths (string[]) to data file(s) consumed by the embed.              
-| `config`    | No       | Optional object for embed options (e.g., `{ defaultMetric: 'average_rank' }`).                
-
-<Accordion title="Code example">
-```mdx
-import HtmlEmbed from '../../../components/HtmlEmbed.astro'
-
-<HtmlEmbed src="d3-line.html" title="This is a chart title" desc="Some chart description <br/>Credit: <a href='https://example.com' target='_blank'>Example</a>" />
-
-<HtmlEmbed
-  src="d3-line.html"
-  title="Comparison A vs B"
-  data={[ 'formatting_filters.csv', 'relevance_filters.csv' ]}
-  config={{ defaultMetric: 'average_rank' }}
-/>
-```
-</Accordion>
-
-
-#### Data
-
-If you need to link your **HTML embeds** to **data files**, there is an **`assets/data`** folder for this.
-As long as your files are there, they will be served from the **`public/data`** folder.
-You can fetch them with this address: **`[domain]/data/your-data.ext`**
-
-<Note emoji="⚠️" variant="danger"><b>Be careful</b>, unlike images, <b>data files are not optimized</b> by Astro. You need to optimize them manually.</Note>
 
 ### Glossary
 
@@ -536,25 +471,69 @@ import Stack from '../../../components/Stack.astro'
 ```
 </Accordion>
 
-**Layout options:**
-- **2-column**: Two equal-width columns
-- **3-column**: Three equal-width columns  
-- **4-column**: Four equal-width columns
-- **auto**: Responsive grid that adapts to content and screen size
 
-**Gap options:**
-- **small**: 0.5rem spacing
-- **medium**: 1rem spacing (default)
-- **large**: 1.5rem spacing
-- **custom**: Any CSS value (e.g., "2rem", "20px", "1.5em")
+### Iframes
 
-**Responsive behavior:**
-- **Mobile (≤768px)**: All layouts collapse to single column
-- **Tablet (769px-1100px)**: 3-column and 4-column layouts become 2-column
-- **Desktop (>1100px)**: Full layout as specified
+You can embed external content in your article using **iframes**. For example, **TrackIO**, **Gradio** or even **Github code embeds** can be used this way.
 
-**Use cases:**
-- **Feature comparisons** and side-by-side content
-- **Multi-column text** and documentation
-- **Responsive card layouts** and grids
-- **Flexible content organization** for varying screen sizes
+<small className="muted">Gradio embed example</small>
+<div className="card">
+<iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
+</div>
+<div className="card">
+<iframe src="https://trackio-documentation.hf.space/?project=fake-training-750735&metrics=train_loss,train_accuracy&sidebar=hidden&lang=en" width="100%" height="630" frameborder="0"></iframe>
+</div>
+<Accordion title="Code example">
+```mdx
+<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 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>
+<iframe src="https://gradio-hello-world.hf.space" width="100%" height="380" frameborder="0"></iframe>
+```
+</Accordion>
+
+
+### HtmlEmbed
+
+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/embeds` folder.
+
+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.
+
+
+<HtmlEmbed src="d3-line.html" title="This is a chart title" desc="Figure X: Some chart description<br/>Credit: <a href='https://example.com' target='_blank'>Example</a>" />
+
+| Prop        | Required | Description                                                                                      
+|-------------|----------|----------------------------------------------------------------------------------
+| `src`       | Yes      | Path to the embed file in the `embeds` folder.                                                   
+| `title`     | No       | Short title displayed above the card.                                                            
+| `desc`      | No       | Short description displayed below the card. Supports inline HTML (e.g., links).                  
+| `frameless` | No       | Removes the card background and border for seamless embeds.                                      
+| `align`     | No       | Aligns the title/description text. One of `left` (default), `center`, `right`.                  
+| `id`        | No       | Adds an `id` to the outer figure for deep-linking and cross-references.                        
+| `data`      | No       | Path (string) or array of paths (string[]) to data file(s) consumed by the embed.              
+| `config`    | No       | Optional object for embed options (e.g., `{ defaultMetric: 'average_rank' }`).                
+
+<Accordion title="Code example">
+```mdx
+import HtmlEmbed from '../../../components/HtmlEmbed.astro'
+
+<HtmlEmbed src="d3-line.html" title="This is a chart title" desc="Some chart description <br/>Credit: <a href='https://example.com' target='_blank'>Example</a>" />
+
+<HtmlEmbed
+  src="d3-line.html"
+  title="Comparison A vs B"
+  data={[ 'formatting_filters.csv', 'relevance_filters.csv' ]}
+  config={{ defaultMetric: 'average_rank' }}
+/>
+```
+</Accordion>
+
+
+#### Data
+
+If you need to link your **HTML embeds** to **data files**, there is an **`assets/data`** folder for this.
+As long as your files are there, they will be served from the **`public/data`** folder.
+You can fetch them with this address: **`[domain]/data/your-data.ext`**
+
+<Note emoji="⚠️" variant="danger"><b>Be careful</b>, unlike images, <b>data files are not optimized</b> by Astro. You need to optimize them manually.</Note>

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

@@ -58,9 +58,10 @@ affiliations:
   - name: "Example University"
     url: "https://example.edu"
 doi: 10.1234/abcd.efgh
-licence: Diagrams and text are licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">CC‑BY 4.0</a> with the source available on <a href="https://huggingface.co/spaces/stfrere/research-article-template">Hugging Face</a>, unless noted otherwise. Figures reused from other sources are excluded and marked in their captions (“Figure from …”).
+licence: Diagrams and text are licensed under <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">CC‑BY 4.0</a> with the source available on <a href="https://huggingface.co/spaces/stfrere/research-article-template">Hugging Face</a>, unless noted otherwise. Figures reused from other sources are excluded and marked in their captions ("Figure from …").
 seoThumbImage: "https://example.com/thumb.png"
 tableOfContentsAutoCollapse: true
+pdfProOnly: false
 ---
 ```
 
@@ -78,6 +79,7 @@ tableOfContentsAutoCollapse: true
 | licence | No | Rendered in footer; HTML supported | string (HTML allowed) |
 | seoThumbImage | No | Overrides default OpenGraph image | string (URL) |
 | tableOfContentsAutoCollapse | No | Controls TOC auto-collapse | boolean |
+| pdfProOnly | No | Gate PDF download to Pro users only. Shows "Subscribe to Pro" button for non-Pro users | boolean |
 </Accordion>
 
 #### **Content**

app/src/pages/index.astro

@@ -264,6 +264,7 @@ const licence =
       affiliation={articleFM?.affiliation}
       published={articleFM?.published}
       doi={doi}
+      pdfProOnly={articleFM?.pdfProOnly}
     />
 
     <section class="content-grid">

app/src/styles/_variables.css

@@ -62,8 +62,8 @@
 
   /* Button tokens */
   --button-radius: 6px;
-  --button-padding-x: 12px;
-  --button-padding-y: 8px;
+  --button-padding-x: 16px;
+  --button-padding-y: 10px;
   --button-font-size: 14px;
   --button-icon-padding: 8px;
   /* Big button */