Fix wrapper-blocked navigation: artifact links resolve to static-host origin and open in new tab

index.html

@@ -75,6 +75,21 @@
       (function () {
         var listEl = document.getElementById("card-list");
 
+        // When the catalog is viewed inside the Hugging Face wrapper iframe,
+        // relative artifact links navigate the wrapper context and are
+        // blocked by Chrome's frame-navigation policy. Build artifact hrefs
+        // against the static-host origin and open in a new top-level tab so
+        // PDFs / explorer / JSON resolve as a normal browser navigation.
+        var STATIC_ORIGIN = window.location.hostname.endsWith(
+          ".static.hf.space",
+        )
+          ? window.location.origin
+          : "https://vertrule-org-research.static.hf.space";
+
+        function assetHref(relPath) {
+          return STATIC_ORIGIN + "/" + String(relPath).replace(/^\.?\//, "");
+        }
+
         function escapeHtml(s) {
           return String(s).replace(/[&<>"']/g, function (c) {
             return {
@@ -92,17 +107,23 @@
           return d.slice(0, 12) + "&hellip;";
         }
 
+        var LINK_ATTRS = ' target="_blank" rel="noopener noreferrer"';
+
         function renderCard(item) {
-          var pdfHref = "./" + item.pdf;
+          var pdfHref = assetHref(item.pdf);
           var explorerLink = item.explorer
-            ? '<a class="meta-link" href="./' +
-              escapeHtml(item.explorer) +
-              '">Explorer</a>'
+            ? '<a class="meta-link" href="' +
+              escapeHtml(assetHref(item.explorer)) +
+              '"' +
+              LINK_ATTRS +
+              ">Explorer</a>"
             : "";
           var dataLink = item.data
-            ? '<a class="meta-link" href="./' +
-              escapeHtml(item.data) +
-              '">Data (JSON)</a>'
+            ? '<a class="meta-link" href="' +
+              escapeHtml(assetHref(item.data)) +
+              '"' +
+              LINK_ATTRS +
+              ">Data (JSON)</a>"
             : "";
 
           var statusClass =
@@ -113,8 +134,10 @@
           return (
             '<article class="card">' +
             '<a class="card-link" href="' +
-            pdfHref +
-            '">' +
+            escapeHtml(pdfHref) +
+            '"' +
+            LINK_ATTRS +
+            ">" +
             '<div class="card-head">' +
             "<div>" +
             '<h2 class="card-title">' +
@@ -136,8 +159,10 @@
             "</a>" +
             '<div class="card-meta">' +
             '<a class="meta-link" href="' +
-            pdfHref +
-            '">PDF</a>' +
+            escapeHtml(pdfHref) +
+            '"' +
+            LINK_ATTRS +
+            ">PDF</a>" +
             explorerLink +
             dataLink +
             '<span class="digest" title="' +