fix: ci consistency and npm publish configuration

Author: nucliweb

.github/workflows/publish-cli.yml

@@ -35,6 +35,9 @@ jobs:
       - name: Run E2E tests
         run: npm run test:e2e --prefix cli
 
+      - name: Prepare snippets for publishing
+        run: cp -r snippets cli/
+
       - name: Publish to npm
         run: npm publish
         working-directory: cli

cli/package.json

@@ -3,9 +3,7 @@
   "version": "0.1.0",
   "description": "Run curated WebPerf Snippets headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes.",
   "type": "module",
-  "bin": {
-    "webperf-snippets": "./src/bin.js"
-  },
+  "bin": "./src/bin.js",
   "files": [
     "src",
     "snippets",
@@ -36,6 +34,9 @@
   ],
   "author": "Joan Leon | @nucliweb",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nucliweb/webperf-snippets.git",

pages/CLI.mdx

@@ -1,3 +1,7 @@
+---
+type: guide
+---
+
 # CLI
 
 Run curated WebPerf Snippets headlessly via Playwright. Diagnose Core Web Vitals beyond what Lighthouse exposes and gate CI on real performance budgets.

public/llms-full.txt

@@ -5713,6 +5713,9 @@ Identifies resources that block the browser from rendering the page. These resou
       durationMs: Math.round(r.duration),
       sizeBytes: r.size,
     })),
+    issues: blockingResources.length > 0
+      ? [{ severity: "error", message: `${blockingResources.length} render-blocking resource(s) delay rendering until ${Math.round(lastBlockingEnd)}ms` }]
+      : [],
   };
 })();
 ```
@@ -5794,10 +5797,14 @@ Analyzes all scripts loaded on the page, separating them into first-party (your
   const firstMetrics = calcMetrics(firstParty);
   const thirdMetrics = calcMetrics(thirdParty);
   const totalScripts = scripts.length;
-  const thirdPartyPct = totalScripts > 0 ? ((thirdParty.length / totalScripts) * 100).toFixed(0) : 0;
+  const thirdPartyPct =
+    totalScripts > 0 ? ((thirdParty.length / totalScripts) * 100).toFixed(0) : 0;
 
   // Display results
-  console.group("%c📊 Script Analysis: First vs Third Party", "font-weight: bold; font-size: 14px;");
+  console.group(
+    "%c📊 Script Analysis: First vs Third Party",
+    "font-weight: bold; font-size: 14px;",
+  );
 
   // Overall summary
   console.log("");
@@ -5812,7 +5819,10 @@ Analyzes all scripts loaded on the page, separating them into first-party (your
 
   // First Party Section
   console.log("");
-  console.group(`%c🏠 First-Party Scripts (${firstParty.length})`, "color: #22c55e; font-weight: bold;");
+  console.group(
+    `%c🏠 First-Party Scripts (${firstParty.length})`,
+    "color: #22c55e; font-weight: bold;",
+  );
 
   if (firstParty.length === 0) {
     console.log("No first-party scripts found.");
@@ -5836,13 +5846,13 @@ Analyzes all scripts loaded on the page, separating them into first-party (your
 
   // Third Party Section
   console.log("");
-  console.group(`%c🌐 Third-Party Scripts (${thirdParty.length})`, "color: #ef4444; font-weight: bold;");
+  console.group(
+    `%c🌐 Third-Party Scripts (${thirdParty.length})`,
+    "color: #ef4444; font-weight: bold;",
+  );
 
   if (thirdParty.length === 0) {
-    console.log(
-      "%c✅ No third-party scripts found!",
-      "color: #22c55e; font-weight: bold;"
-    );
+    console.log("%c✅ No third-party scripts found!", "color: #22c55e; font-weight: bold;");
   } else {
     console.log(`   Total size: ${formatBytes(thirdMetrics.totalSize)}`);
     console.log(`   Render-blocking: ${thirdMetrics.blocking}`);
@@ -5863,7 +5873,9 @@ Analyzes all scripts loaded on the page, separating them into first-party (your
       .sort((a, b) => b[1].size - a[1].size)
       .forEach(([host, data]) => {
         const blockingMark = data.blocking > 0 ? " ⚠️" : "";
-        console.log(`      ${host}: ${data.count} script(s), ${formatBytes(data.size)}${blockingMark}`);
+        console.log(
+          `      ${host}: ${data.count} script(s), ${formatBytes(data.size)}${blockingMark}`,
+        );
       });
 
     console.log("");
@@ -5887,23 +5899,38 @@ Analyzes all scripts loaded on the page, separating them into first-party (your
 
     if (thirdMetrics.blocking > 0) {
       console.log("");
-      console.log("%c⚠️ Render-blocking third-party scripts:", "font-weight: bold; color: #ef4444;");
+      console.log(
+        "%c⚠️ Render-blocking third-party scripts:",
+        "font-weight: bold; color: #ef4444;",
+      );
       console.log("   • Load with 'async' or 'defer' attribute");
       console.log("   • Consider lazy-loading after user interaction");
-      console.log('%c   <script src="..." async></script>', "font-family: monospace; color: #22c55e;");
+      console.log(
+        '%c   <script src="..." async></script>',
+        "font-family: monospace; color: #22c55e;",
+      );
     }
 
     if (thirdMetrics.hosts.length > 3) {
       console.log("");
-      console.log(`%c⚠️ ${thirdMetrics.hosts.length} different third-party hosts:`, "font-weight: bold; color: #f59e0b;");
+      console.log(
+        `%c⚠️ ${thirdMetrics.hosts.length} different third-party hosts:`,
+        "font-weight: bold; color: #f59e0b;",
+      );
       console.log("   • Each host requires DNS lookup + connection");
       console.log("   • Use <link rel='preconnect'> for critical hosts");
-      console.log('%c   <link rel="preconnect" href="https://web.dev">', "font-family: monospace; color: #22c55e;");
+      console.log(
+        '%c   <link rel="preconnect" href="https://web.dev">',
+        "font-family: monospace; color: #22c55e;",
+      );
     }
 
     if (thirdMetrics.totalSize > 100 * 1024) {
       console.log("");
-      console.log(`%c⚠️ Third-party scripts total ${formatBytes(thirdMetrics.totalSize)}:`, "font-weight: bold; color: #f59e0b;");
+      console.log(
+        `%c⚠️ Third-party scripts total ${formatBytes(thirdMetrics.totalSize)}:`,
+        "font-weight: bold; color: #f59e0b;",
+      );
       console.log("   • Audit necessity of each script");
       console.log("   • Consider self-hosting critical scripts");
       console.log("   • Look for lighter alternatives");
@@ -5934,11 +5961,39 @@ Analyzes all scripts loaded on the page, separating them into first-party (your
       thirdPartyBlockingCount: thirdMetrics.blocking,
       thirdPartyHostCount: thirdMetrics.hosts.length,
     },
-    items: scripts.map(s => ({ shortName: s.shortName, host: s.host, firstParty: s.firstParty, transferBytes: s.transferSize, durationMs: Math.round(s.duration), renderBlocking: s.renderBlocking })),
+    items: scripts.map((s) => ({
+      shortName: s.shortName,
+      host: s.host,
+      firstParty: s.firstParty,
+      transferBytes: s.transferSize,
+      durationMs: Math.round(s.duration),
+      renderBlocking: s.renderBlocking,
+    })),
     issues: [
-      ...(thirdMetrics.blocking > 0 ? [{ severity: "error", message: `${thirdMetrics.blocking} render-blocking third-party script(s)` }] : []),
-      ...(thirdMetrics.hosts.length > 3 ? [{ severity: "warning", message: `${thirdMetrics.hosts.length} different third-party hosts require separate DNS lookups` }] : []),
-      ...(thirdMetrics.totalSize > 100 * 1024 ? [{ severity: "warning", message: `Third-party scripts total ${Math.round(thirdMetrics.totalSize / 1024)} KB` }] : []),
+      ...(thirdMetrics.blocking > 0
+        ? [
+            {
+              severity: "error",
+              message: `${thirdMetrics.blocking} render-blocking third-party script(s)`,
+            },
+          ]
+        : []),
+      ...(thirdMetrics.hosts.length > 3
+        ? [
+            {
+              severity: "warning",
+              message: `${thirdMetrics.hosts.length} different third-party hosts require separate DNS lookups`,
+            },
+          ]
+        : []),
+      ...(thirdMetrics.totalSize > 100 * 1024
+        ? [
+            {
+              severity: "warning",
+              message: `Third-party scripts total ${Math.round(thirdMetrics.totalSize / 1024)} KB`,
+            },
+          ]
+        : []),
     ],
   };
 })();
@@ -6566,6 +6621,7 @@ Analyzes font loading strategy by comparing preloaded fonts, loaded fonts, and f
       usedNotPreloadedCount: usedNotPreloaded.length,
     },
     items: uniqueLoadedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, display: f.display })),
+  usedFonts: usedFonts.map(f => ({ family: f.family, weight: f.weight, style: f.style, elements: f.elements })),
     issues: [
       ...preloadedNotUsed.map(f => ({ severity: "warning", message: `Preloaded but not used above fold: ${f.name}` })),
       ...usedNotPreloaded.map(f => ({ severity: "warning", message: `Used above fold but not preloaded: ${f.family} (${f.weight})` })),