refactor: split Hero into HeroArticle + HeroPaper with shared heroUtils

- Extract shared logic (normalizeAuthors, slugify, stripHtml, link icons)
into heroUtils.ts
- HeroArticle.astro: article template with banner, flex-row meta bar, PDF
access control - self-contained CSS, no external overrides
- HeroPaper.astro: paper template with centered inline meta, external link
pills with auto-detected icons - self-contained CSS, zero !important
- index.astro conditionally renders the right component based on template
- Remove ~90 lines of :global([data-template="paper"]) CSS overrides from
_layout.css (hero/meta rules only; content-grid rules kept)
- Delete old monolithic Hero.astro (843 lines, 24 :global overrides,
13 !important)

Made-with: Cursor

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

@@ -1,21 +1,12 @@
 ---
 import HtmlEmbed from "./HtmlEmbed.astro";
-
-interface Props {
-  title: string; // may contain HTML (e.g., <br/>)
-  titleRaw?: string; // plain title for slug/PDF (optional)
-  description?: string;
-  authors?: Array<
-    string | { name: string; url?: string; affiliationIndices?: number[] }
-  >;
-  affiliations?: Array<{ id: number; name: string; url?: string }>;
-  affiliation?: string; // legacy single affiliation
-  published?: string;
-  doi?: string;
-  pdfProOnly?: boolean; // Gate PDF download to Pro users only
-  showPdf?: boolean; // Show or hide PDF section in metadata
-  links?: Array<{ label: string; url: string; icon?: string }>;
-}
+import {
+  type HeroProps,
+  type Author,
+  normalizeAuthors,
+  stripHtml,
+  slugify,
+} from "./heroUtils";
 
 const {
   title,
@@ -28,95 +19,25 @@ const {
   doi,
   pdfProOnly = false,
   showPdf = true,
-  links = [],
-} = Astro.props as Props;
-
-type Author = { name: string; url?: string; affiliationIndices?: number[] };
-
-function normalizeAuthors(
-  input: Array<
-    | string
-    | {
-        name?: string;
-        url?: string;
-        link?: string;
-        affiliationIndices?: number[];
-      }
-  >,
-): Author[] {
-  return (Array.isArray(input) ? input : [])
-    .map((a) => {
-      if (typeof a === "string") {
-        return { name: a } as Author;
-      }
-      const name = (a?.name ?? "").toString();
-      const url = (a?.url ?? a?.link) as string | undefined;
-      const affiliationIndices = Array.isArray((a as any)?.affiliationIndices)
-        ? (a as any).affiliationIndices
-        : undefined;
-      return { name, url, affiliationIndices } as Author;
-    })
-    .filter((a) => a.name && a.name.trim().length > 0);
-}
+} = Astro.props as HeroProps;
 
 const normalizedAuthors: Author[] = normalizeAuthors(authors as any);
 
-// Determine if affiliation superscripts should be shown (only when there are multiple distinct affiliations referenced by authors)
 const authorAffiliationIndexSet = new Set<number>();
 for (const author of normalizedAuthors) {
   const indices = Array.isArray(author.affiliationIndices)
     ? author.affiliationIndices
     : [];
   for (const idx of indices) {
-    if (typeof idx === "number") {
-      authorAffiliationIndexSet.add(idx);
-    }
+    if (typeof idx === "number") authorAffiliationIndexSet.add(idx);
   }
 }
 const shouldShowAffiliationSupers = authorAffiliationIndexSet.size > 1;
 const hasMultipleAffiliations =
   Array.isArray(affiliations) && affiliations.length > 1;
 
-function stripHtml(text: string): string {
-  return String(text || "").replace(/<[^>]*>/g, "");
-}
-
-function slugify(text: string): string {
-  return (
-    String(text || "")
-      .normalize("NFKD")
-      .replace(/\p{Diacritic}+/gu, "")
-      .toLowerCase()
-      .replace(/[^a-z0-9]+/g, "-")
-      .replace(/^-+|-+$/g, "")
-      .slice(0, 120) || "article"
-  );
-}
-
 const pdfBase = titleRaw ? stripHtml(titleRaw) : stripHtml(title);
 const pdfFilename = `${slugify(pdfBase)}.pdf`;
-
-const LINK_ICONS: Record<string, string> = {
-  github: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z"/></svg>`,
-  paper: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`,
-  arxiv: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`,
-  code: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
-  demo: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>`,
-  data: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
-  dataset: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
-  model: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>`,
-  video: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
-  blog: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>`,
-};
-
-function getLinkIcon(label: string, icon?: string): string | null {
-  if (icon && LINK_ICONS[icon.toLowerCase()]) return LINK_ICONS[icon.toLowerCase()];
-  const key = label.toLowerCase().trim();
-  for (const [keyword, svg] of Object.entries(LINK_ICONS)) {
-    if (key === keyword || key.includes(keyword)) return svg;
-  }
-  return null;
-}
 ---
 
 <section class="hero">
@@ -265,57 +186,29 @@ function getLinkIcon(label: string, icon?: string): string | null {
       </div>
     )}
   </div>
-  {links && links.length > 0 && (
-    <nav class="hero-links" aria-label="External links">
-      {links.map((link) => {
-        const iconSvg = getLinkIcon(link.label, link.icon);
-        return (
-          <a href={link.url} class="hero-link" target="_blank" rel="noopener noreferrer">
-            {iconSvg && <span class="hero-link-icon" set:html={iconSvg} />}
-            {link.label}
-          </a>
-        );
-      })}
-    </nav>
-  )}
 </header>
 
 {showPdf && (
   <script is:inline>
     // PDF access control for Pro users only
-    
-    // ⚙️ Configuration for local development
-    const LOCAL_IS_PRO = true; // Set to true to test Pro access locally
-    
+    const LOCAL_IS_PRO = true;
     const FALLBACK_TIMEOUT_MS = 3000;
-    const MAX_RETRY_ATTEMPTS = 100; // Maximum 1s of retries (100 * 10ms)
+    const MAX_RETRY_ATTEMPTS = 100;
     let userPlanChecked = false;
     let initialized = false;
 
-    /**
-     * Check if user has Pro access
-     * Isolated logic for Pro user verification
-     * Expected plan structure: { user: "pro", org: "enterprise" }
-     */
     function isProUser(plan) {
       if (!plan) return false;
       return plan.user === "pro";
     }
 
-    /**
-     * Update UI based on user's Pro status
-     */
     function updatePdfAccess(isPro, pdfProOnly) {
       const loadingEl = document.querySelector(".pdf-loading");
       const proOnlyEl = document.querySelector(".pdf-pro-only");
       const lockedEl = document.querySelector(".pdf-locked");
       const proOnlyLabel = document.querySelector(".pro-only-label");
       const proBadgeWrapper = document.querySelector(".pro-badge-wrapper");
-      
-      // Hide loading state
       if (loadingEl) loadingEl.style.display = "none";
-      
-      // 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";
@@ -323,8 +216,6 @@ function getLinkIcon(label: string, icon?: string): string | null {
         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";
@@ -338,46 +229,22 @@ function getLinkIcon(label: string, icon?: string): string | null {
       }
     }
 
-    /**
-     * Handle user plan response
-     */
     function handleUserPlan(plan, pdfProOnly) {
       userPlanChecked = true;
-      const isPro = isProUser(plan);
-      updatePdfAccess(isPro, pdfProOnly);
-      
-    
+      updatePdfAccess(isProUser(plan), pdfProOnly);
     }
 
-    /**
-     * Fallback behavior when no parent window responds
-     * Uses LOCAL_IS_PRO configuration for local development
-     */
     function handleFallback(pdfProOnly) {
-      if (LOCAL_IS_PRO) {
-        handleUserPlan({ user: "pro" }, pdfProOnly);
-      } else {
-        handleUserPlan({ user: "free" }, pdfProOnly);
-      }
+      handleUserPlan(LOCAL_IS_PRO ? { user: "pro" } : { user: "free" }, pdfProOnly);
     }
 
-    /**
-     * Initialize PDF access control
-     */
     function initPdfAccess(retryCount = 0) {
-      // Prevent multiple initializations
       if (initialized) return;
-      
-      // Check if PDF Pro gating is enabled
       const pdfContainer = document.querySelector("#pdf-download-container");
-      
       if (!pdfContainer) {
-        // Retry with limit to avoid infinite loop
         if (retryCount < MAX_RETRY_ATTEMPTS) {
           setTimeout(() => initPdfAccess(retryCount + 1), 10);
         } else {
-          console.warn("[PDF Access] Container not found after max retries");
-          // Try one more time after a longer delay as fallback
           setTimeout(() => {
             const container = document.querySelector("#pdf-download-container");
             if (container && !initialized) {
@@ -389,50 +256,27 @@ function getLinkIcon(label: string, icon?: string): string | null {
         }
         return;
       }
-      
       initialized = true;
       const pdfProOnly = pdfContainer.getAttribute("data-pdf-pro-only") === "true";
-
-      // If PDF Pro gating is disabled, show the download button immediately
       if (!pdfProOnly) {
         updatePdfAccess(true, pdfProOnly);
       } else {
-        // Listen for messages from parent window (Hugging Face Spaces)
-        // Use a named function to avoid duplicate listeners
-        const messageHandler = (event) => {
-          if (event.data.type === "USER_PLAN") {
-            handleUserPlan(event.data.plan, pdfProOnly);
-          }
-        };
-        
-        window.addEventListener("message", messageHandler);
-
-        // Request user plan on page load
+        window.addEventListener("message", (event) => {
+          if (event.data.type === "USER_PLAN") handleUserPlan(event.data.plan, pdfProOnly);
+        });
         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(pdfProOnly);
-            }
-          }, FALLBACK_TIMEOUT_MS);
+          setTimeout(() => { if (!userPlanChecked) handleFallback(pdfProOnly); }, FALLBACK_TIMEOUT_MS);
         } else {
-          // Not in iframe (local development), use fallback immediately
           handleFallback(pdfProOnly);
         }
       }
     }
 
-    // Initialize when DOM is ready
     (function() {
       if (document.readyState === "loading") {
-        document.addEventListener("DOMContentLoaded", () => {
-          setTimeout(() => initPdfAccess(), 0);
-        });
+        document.addEventListener("DOMContentLoaded", () => setTimeout(() => initPdfAccess(), 0));
       } else {
-        // DOM already loaded, but wait a bit for Astro to render
         setTimeout(() => initPdfAccess(), 0);
       }
     })();
@@ -440,7 +284,6 @@ function getLinkIcon(label: string, icon?: string): string | null {
 )}
 
 <style>
-  /* Hero (full-width) */
   .hero {
     width: 100%;
     padding: 64px 16px 16px;
@@ -480,15 +323,11 @@ function getLinkIcon(label: string, icon?: string): string | null {
   }
 
   @media (max-width: 768px) {
-    .hero-banner {
-      aspect-ratio: auto;
-    }
-    .hero-desc {
-      max-width: 90%;
-    }
+    .hero-banner { aspect-ratio: auto; }
+    .hero-desc { max-width: 90%; }
   }
 
-  /* Meta (byline-like header) */
+  /* Meta bar */
   .meta {
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
@@ -503,8 +342,9 @@ function getLinkIcon(label: string, icon?: string): string | null {
     margin: 0 auto;
     padding: 0 var(--content-padding-x);
     gap: 8px;
+    flex-wrap: wrap;
+    row-gap: 12px;
   }
-  /* Subtle underline for links in meta; keep buttons without underline */
   .meta-container a:not(.button) {
     color: var(--primary-color);
     text-decoration: underline;
@@ -546,7 +386,7 @@ function getLinkIcon(label: string, icon?: string): string | null {
   }
   .authors li {
     white-space: nowrap;
-    padding:0;
+    padding: 0;
   }
   .affiliations {
     margin: 0;
@@ -556,15 +396,8 @@ function getLinkIcon(label: string, icon?: string): string | null {
     margin: 0;
   }
 
-  header.meta .meta-container {
-    flex-wrap: wrap;
-    row-gap: 12px;
-  }
-
   @media (max-width: 768px) {
-    .meta-container-cell:nth-child(even) {
-      text-align: right;
-    }
+    .meta-container-cell:nth-child(even) { text-align: right; }
     .meta-container-cell:last-child:nth-child(odd) {
       flex-grow: 0;
       flex-basis: auto;
@@ -574,27 +407,20 @@ function getLinkIcon(label: string, icon?: string): string | null {
   }
 
   @media print {
-    .meta-container-cell--pdf {
-      display: none !important;
-    }
+    .meta-container-cell--pdf { display: none !important; }
   }
 
-  /* PDF access control styles */
+  /* PDF styles */
   .pdf-header-wrapper {
     display: flex;
     align-items: center;
     gap: 6px;
     line-height: 1;
   }
-
-  .pdf-header-wrapper h3 {
-    line-height: 1;
-  }
-
+  .pdf-header-wrapper h3 { line-height: 1; }
   #pdf-download-container {
     min-height: calc(var(--button-padding-y) * 2 + var(--button-font-size) + 2px);
   }
-
   .pdf-loading {
     color: var(--muted-color);
     font-size: var(--button-font-size);
@@ -607,30 +433,20 @@ function getLinkIcon(label: string, icon?: string): string | null {
     height: calc(var(--button-padding-y) * 2 + var(--button-font-size) + 2px);
     vertical-align: top;
   }
-
-  .pdf-pro-only {
-    margin: 0;
-    line-height: 0;
-  }
-  
-  .pdf-pro-only .button {
-    margin: 0;
-  }
-
+  .pdf-pro-only { margin: 0; line-height: 0; }
+  .pdf-pro-only .button { 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;
     border: 1px solid rgba(0, 0, 0, 0.025);
@@ -644,14 +460,11 @@ function getLinkIcon(label: string, icon?: string): string | null {
     letter-spacing: 0.025em;
     text-transform: uppercase;
   }
-
-  /* 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.15);
   }
-
   .pro-only-label {
     display: inline-flex;
     flex-direction: row;
@@ -662,13 +475,7 @@ function getLinkIcon(label: string, icon?: string): string | null {
     font-weight: 400;
     line-height: 1;
   }
-
-  .pro-only-dash {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-  }
-
+  .pro-only-dash { display: inline-flex; align-items: center; line-height: 1; }
   .pro-only-icon {
     width: 11px;
     height: 11px;
@@ -676,24 +483,15 @@ function getLinkIcon(label: string, icon?: string): string | null {
     display: inline-flex;
     align-items: center;
   }
-
-  .pro-only-text {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-  }
-
-  .pdf-locked {
-    display: block;
-  }
-
+  .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%);
+    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);
@@ -705,24 +503,9 @@ function getLinkIcon(label: string, icon?: string): string | null {
     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 */
+  .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; }
 
   @media (max-width: 768px) {
     .meta-container-cell--pdf {
@@ -731,113 +514,4 @@ function getLinkIcon(label: string, icon?: string): string | null {
       align-items: flex-end;
     }
   }
-
-  /* Hero external links (paper template) */
-  .hero-links {
-    display: none;
-  }
-
-  /* Paper template overrides (must be scoped to win over default styles) */
-  :global([data-template="paper"]) .hero {
-    padding: 80px 16px 0;
-  }
-  :global([data-template="paper"]) .hero-title {
-    font-size: clamp(34px, 5vw, 54px);
-    font-weight: 800;
-    line-height: 1.12;
-    letter-spacing: -0.02em;
-    max-width: 860px;
-    margin: 0 auto 20px;
-  }
-  :global([data-template="paper"]) .hero-banner {
-    display: none;
-  }
-  :global([data-template="paper"]) .hero-desc {
-    max-width: 680px;
-    margin: 0 auto;
-    font-size: 1.15em;
-    font-style: normal;
-    line-height: 1.6;
-    color: var(--muted-color);
-  }
-  :global([data-template="paper"]) .meta {
-    border-top: none;
-    border-bottom: none;
-    padding: 24px 0 0;
-  }
-  :global([data-template="paper"]) .meta-container {
-    display: block !important;
-    text-align: center;
-    max-width: 860px;
-  }
-  :global([data-template="paper"]) .meta-container-cell {
-    display: inline !important;
-    max-width: none !important;
-    gap: 0 !important;
-    flex-direction: unset !important;
-  }
-  :global([data-template="paper"]) .meta-container-cell h3 {
-    display: none !important;
-  }
-  :global([data-template="paper"]) .meta-container-cell + .meta-container-cell::before {
-    content: " · ";
-    color: var(--muted-color);
-    font-weight: 400;
-  }
-  :global([data-template="paper"]) .authors,
-  :global([data-template="paper"]) .authors li,
-  :global([data-template="paper"]) .meta-container-cell--affiliations .affiliations,
-  :global([data-template="paper"]) .meta-container-cell--affiliations .affiliations li,
-  :global([data-template="paper"]) .meta-container-cell p {
-    display: inline !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    list-style: none !important;
-  }
-  :global([data-template="paper"]) .meta-container-cell--affiliations .affiliations,
-  :global([data-template="paper"]) .meta-container-cell--affiliations p,
-  :global([data-template="paper"]) .meta-container-cell--published p {
-    color: var(--muted-color);
-  }
-  :global([data-template="paper"]) .meta-container-cell--doi {
-    display: none !important;
-  }
-  :global([data-template="paper"]) .meta-container-cell--pdf {
-    display: none !important;
-  }
-  :global([data-template="paper"]) .hero-links {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 20px;
-    padding: 0 var(--content-padding-x);
-  }
-  :global([data-template="paper"]) .hero-link {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 6px 16px;
-    font-size: 0.85em;
-    font-weight: 500;
-    color: var(--text-color);
-    background: var(--surface-bg);
-    border: 1px solid var(--border-color);
-    border-radius: 20px;
-    text-decoration: none;
-    transition: border-color 0.15s, background 0.15s;
-  }
-  :global([data-template="paper"]) .hero-link-icon {
-    display: inline-flex;
-    align-items: center;
-    line-height: 0;
-  }
-  :global([data-template="paper"]) .hero-link-icon :global(svg) {
-    width: 14px;
-    height: 14px;
-  }
-  :global([data-template="paper"]) .hero-link:hover {
-    border-color: var(--primary-color);
-    background: var(--hover-bg, var(--surface-bg));
-  }
 </style>

app/src/components/HeroPaper.astro

@@ -0,0 +1,209 @@
+---
+import {
+  type HeroProps,
+  type Author,
+  normalizeAuthors,
+  getLinkIcon,
+} from "./heroUtils";
+
+const {
+  title,
+  description,
+  authors = [],
+  affiliations = [],
+  affiliation,
+  published,
+  links = [],
+} = Astro.props as HeroProps;
+
+const normalizedAuthors: Author[] = normalizeAuthors(authors as any);
+
+const authorAffiliationIndexSet = new Set<number>();
+for (const author of normalizedAuthors) {
+  const indices = Array.isArray(author.affiliationIndices)
+    ? author.affiliationIndices
+    : [];
+  for (const idx of indices) {
+    if (typeof idx === "number") authorAffiliationIndexSet.add(idx);
+  }
+}
+const shouldShowAffiliationSupers = authorAffiliationIndexSet.size > 1;
+
+// Resolve affiliations: prefer array, fallback to legacy string
+const resolvedAffiliations =
+  Array.isArray(affiliations) && affiliations.length > 0
+    ? affiliations
+    : affiliation
+      ? [{ id: 1, name: affiliation }]
+      : [];
+---
+
+<section class="hero-paper">
+  <h1 class="hero-paper__title" set:html={title} />
+  {description && <p class="hero-paper__desc">{description}</p>}
+</section>
+
+<script is:inline>
+  (() => {
+    const el = document.querySelector(".hero-paper__title");
+    if (!el) return;
+    const len = (el.textContent || "").length;
+    if (len > 100) el.dataset.titleSize = "sm";
+    else if (len > 60) el.dataset.titleSize = "md";
+  })();
+</script>
+
+<header class="hero-paper-meta" aria-label="Article meta information">
+  <div class="hero-paper-meta__inner">
+    {normalizedAuthors.length > 0 && (
+      <span class="hero-paper-meta__segment">
+        {normalizedAuthors.map((a, i) => (
+          <>
+            {a.url ? <a href={a.url}>{a.name}</a> : <span>{a.name}</span>}
+            {shouldShowAffiliationSupers &&
+              Array.isArray(a.affiliationIndices) &&
+              a.affiliationIndices.length > 0 && (
+                <sup>{a.affiliationIndices.join(",")}</sup>
+              )}
+            {i < normalizedAuthors.length - 1 && <span set:html=",&nbsp;" />}
+          </>
+        ))}
+      </span>
+    )}
+    {resolvedAffiliations.length > 0 && (
+      <span class="hero-paper-meta__segment hero-paper-meta__segment--muted">
+        {resolvedAffiliations.map((af, i) => (
+          <>
+            {af.url ? (
+              <a href={af.url} target="_blank" rel="noopener noreferrer">{af.name}</a>
+            ) : (
+              <span>{af.name}</span>
+            )}
+            {i < resolvedAffiliations.length - 1 && <span set:html=",&nbsp;" />}
+          </>
+        ))}
+      </span>
+    )}
+    {published && (
+      <span class="hero-paper-meta__segment hero-paper-meta__segment--muted">
+        {published}
+      </span>
+    )}
+  </div>
+
+  {links && links.length > 0 && (
+    <nav class="hero-paper-links" aria-label="External links">
+      {links.map((link) => {
+        const iconSvg = getLinkIcon(link.label, link.icon);
+        return (
+          <a href={link.url} class="hero-paper-link" target="_blank" rel="noopener noreferrer">
+            {iconSvg && <span class="hero-paper-link__icon" set:html={iconSvg} />}
+            {link.label}
+          </a>
+        );
+      })}
+    </nav>
+  )}
+</header>
+
+<style>
+  /* Hero section */
+  .hero-paper {
+    width: 100%;
+    padding: 80px 16px 0;
+    text-align: center;
+  }
+  .hero-paper__title {
+    font-size: clamp(34px, 5vw, 54px);
+    font-weight: 800;
+    line-height: 1.12;
+    letter-spacing: -0.02em;
+    max-width: 860px;
+    margin: 0 auto 20px;
+    text-wrap: balance;
+  }
+  .hero-paper__title[data-title-size="md"] {
+    font-size: clamp(28px, 4vw, 44px);
+  }
+  .hero-paper__title[data-title-size="sm"] {
+    font-size: clamp(24px, 3.2vw, 38px);
+  }
+  .hero-paper__desc {
+    max-width: 680px;
+    margin: 0 auto;
+    font-size: 1.15em;
+    line-height: 1.6;
+    color: var(--muted-color);
+  }
+
+  /* Meta section - inline centered */
+  .hero-paper-meta {
+    padding: 24px 0 0;
+    font-size: 0.9rem;
+    text-align: center;
+  }
+  .hero-paper-meta__inner {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 0 var(--content-padding-x);
+  }
+  .hero-paper-meta__segment {
+    display: inline;
+  }
+  .hero-paper-meta__segment + .hero-paper-meta__segment::before {
+    content: " · ";
+    color: var(--muted-color);
+    font-weight: 400;
+  }
+  .hero-paper-meta__segment--muted,
+  .hero-paper-meta__segment--muted a {
+    color: var(--muted-color);
+  }
+  .hero-paper-meta__segment a {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    text-decoration-thickness: 0.06em;
+    text-decoration-color: var(--link-underline);
+    transition: text-decoration-color 0.15s ease-in-out;
+  }
+  .hero-paper-meta__segment a:hover {
+    text-decoration-color: var(--link-underline-hover);
+  }
+
+  /* External links */
+  .hero-paper-links {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 20px;
+    padding: 0 var(--content-padding-x);
+  }
+  .hero-paper-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 16px;
+    font-size: 0.85em;
+    font-weight: 500;
+    color: var(--text-color);
+    background: var(--surface-bg);
+    border: 1px solid var(--border-color);
+    border-radius: 20px;
+    text-decoration: none;
+    transition: border-color 0.15s, background 0.15s;
+  }
+  .hero-paper-link:hover {
+    border-color: var(--primary-color);
+    background: var(--hover-bg, var(--surface-bg));
+  }
+  .hero-paper-link__icon {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+  }
+  .hero-paper-link__icon :global(svg) {
+    width: 14px;
+    height: 14px;
+  }
+</style>

app/src/components/heroUtils.ts

@@ -0,0 +1,86 @@
+export type Author = {
+  name: string;
+  url?: string;
+  affiliationIndices?: number[];
+};
+
+export interface HeroProps {
+  title: string;
+  titleRaw?: string;
+  description?: string;
+  authors?: Array<
+    string | { name: string; url?: string; affiliationIndices?: number[] }
+  >;
+  affiliations?: Array<{ id: number; name: string; url?: string }>;
+  affiliation?: string;
+  published?: string;
+  doi?: string;
+  pdfProOnly?: boolean;
+  showPdf?: boolean;
+  links?: Array<{ label: string; url: string; icon?: string }>;
+}
+
+export function normalizeAuthors(
+  input: Array<
+    | string
+    | {
+        name?: string;
+        url?: string;
+        link?: string;
+        affiliationIndices?: number[];
+      }
+  >,
+): Author[] {
+  return (Array.isArray(input) ? input : [])
+    .map((a) => {
+      if (typeof a === "string") {
+        return { name: a } as Author;
+      }
+      const name = (a?.name ?? "").toString();
+      const url = (a?.url ?? a?.link) as string | undefined;
+      const affiliationIndices = Array.isArray((a as any)?.affiliationIndices)
+        ? (a as any).affiliationIndices
+        : undefined;
+      return { name, url, affiliationIndices } as Author;
+    })
+    .filter((a) => a.name && a.name.trim().length > 0);
+}
+
+export function stripHtml(text: string): string {
+  return String(text || "").replace(/<[^>]*>/g, "");
+}
+
+export function slugify(text: string): string {
+  return (
+    String(text || "")
+      .normalize("NFKD")
+      .replace(/\p{Diacritic}+/gu, "")
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 120) || "article"
+  );
+}
+
+export const LINK_ICONS: Record<string, string> = {
+  github: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12Z"/></svg>`,
+  paper: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`,
+  arxiv: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`,
+  code: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
+  demo: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>`,
+  data: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
+  dataset: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>`,
+  model: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>`,
+  video: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>`,
+  blog: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>`,
+};
+
+export function getLinkIcon(label: string, icon?: string): string | null {
+  if (icon && LINK_ICONS[icon.toLowerCase()])
+    return LINK_ICONS[icon.toLowerCase()];
+  const key = label.toLowerCase().trim();
+  for (const [keyword, svg] of Object.entries(LINK_ICONS)) {
+    if (key === keyword || key.includes(keyword)) return svg;
+  }
+  return null;
+}

app/src/pages/index.astro

@@ -1,7 +1,8 @@
 ---
 import * as ArticleMod from "../content/article.mdx";
 
-import Hero from "../components/Hero.astro";
+import HeroArticle from "../components/HeroArticle.astro";
+import HeroPaper from "../components/HeroPaper.astro";
 import Footer from "../components/Footer.astro";
 import ThemeToggle from "../components/ThemeToggle.astro";
 import Seo from "../components/Seo.astro";
@@ -334,19 +335,32 @@ const links: Array<{ label: string; url: string; icon?: string }> =
   </head>
   <body>
     <ThemeToggle />
-    <Hero
-      title={docTitleHtml}
-      titleRaw={docTitle}
-      description={subtitle || description}
-      authors={normalizedAuthors as any}
-      affiliations={normalizedAffiliations as any}
-      affiliation={articleFM?.affiliation}
-      published={articleFM?.published}
-      doi={doi}
-      pdfProOnly={articleFM?.pdfProOnly}
-      showPdf={template === "paper" ? false : articleFM?.showPdf}
-      links={links}
-    />
+    {template === "paper" ? (
+      <HeroPaper
+        title={docTitleHtml}
+        titleRaw={docTitle}
+        description={subtitle || description}
+        authors={normalizedAuthors as any}
+        affiliations={normalizedAffiliations as any}
+        affiliation={articleFM?.affiliation}
+        published={articleFM?.published}
+        links={links}
+      />
+    ) : (
+      <HeroArticle
+        title={docTitleHtml}
+        titleRaw={docTitle}
+        description={subtitle || description}
+        authors={normalizedAuthors as any}
+        affiliations={normalizedAffiliations as any}
+        affiliation={articleFM?.affiliation}
+        published={articleFM?.published}
+        doi={doi}
+        pdfProOnly={articleFM?.pdfProOnly}
+        showPdf={articleFM?.showPdf}
+        links={links}
+      />
+    )}
 
     {template === "paper" && (
       <div class="paper-hero-banner">

app/src/styles/_layout.css

@@ -259,98 +259,6 @@
 /* Reference: academic project pages like diffusion-cot.github.io               */
 /* ============================================================================ */
 
-/* ---- Hero: hide inline banner, large title, venue-style subtitle ---- */
-
-[data-template="paper"] .hero {
-  padding: 80px 16px 0;
-}
-
-[data-template="paper"] .hero-title {
-  font-size: clamp(34px, 5vw, 54px);
-  font-weight: 800;
-  line-height: 1.12;
-  letter-spacing: -0.02em;
-  max-width: 860px;
-  margin: 0 auto 20px;
-}
-
-[data-template="paper"] .hero-banner {
-  display: none;
-}
-
-[data-template="paper"] .hero-desc {
-  max-width: 680px;
-  margin: 0 auto;
-  font-size: 1.15em;
-  font-style: normal;
-  line-height: 1.6;
-  color: var(--muted-color);
-}
-
-/* ---- Meta bar: centered academic author/affiliation block ---- */
-
-[data-template="paper"] .meta {
-  border-top: none;
-  border-bottom: none;
-  padding: 24px 0 0;
-}
-
-[data-template="paper"] .meta-container {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: center;
-  gap: 4px 6px;
-  max-width: 860px;
-}
-
-[data-template="paper"] .meta-container-cell {
-  text-align: center;
-  max-width: none;
-  flex: 0 0 auto;
-}
-
-[data-template="paper"] .meta-container-cell h3 {
-  display: none;
-}
-
-[data-template="paper"] .meta-container-cell + .meta-container-cell::before {
-  content: "·";
-  color: var(--muted-color);
-  margin-right: 2px;
-  font-weight: 400;
-}
-
-[data-template="paper"] .authors {
-  justify-content: center;
-  gap: 0;
-  font-size: 1em;
-}
-
-[data-template="paper"] .meta-container-cell--affiliations .affiliations {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 0 20px;
-  list-style-position: inside;
-  padding-left: 0;
-  font-size: 0.92em;
-  color: var(--muted-color);
-}
-
-[data-template="paper"] .meta-container-cell--published p {
-  color: var(--muted-color);
-  font-size: 0.92em;
-}
-
-[data-template="paper"] .meta-container-cell--doi {
-  display: none;
-}
-
-[data-template="paper"] .meta-container-cell--pdf {
-  display: none;
-}
-
 /* ---- Paper hero banner: placed between meta and content in index.astro ---- */
 
 .paper-hero-banner {
@@ -376,7 +284,8 @@
 }
 
 /* When no banner, separator is directly below meta */
-[data-template="paper"] .meta + .content-grid {
+[data-template="paper"] .meta + .content-grid,
+[data-template="paper"] .hero-paper-meta + .content-grid {
   margin-top: 32px;
   border-top: 1px solid var(--border-color);
   padding-top: 40px;