feat: add scorecard visualizer external link

NodeSecure · Sep 13, 2023 · e085566 · e085566
1 parent 65144fa
commit e085566
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 2 deletions.
diff --git a/esbuild.config.js b/esbuild.config.js
@@ -37,7 +37,15 @@ await esbuild.build({
 });
 
 await Promise.all([
-  ...["github-mark.png", "github-black.png", "npm-icon.svg", "nodejs.png", "snyk.png", "sonatype.png", "avatar-default.png"]
-    .map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
+  ...[
+    "github-mark.png",
+    "github-black.png",
+    "npm-icon.svg",
+    "nodejs.png",
+    "snyk.png",
+    "sonatype.png",
+    "avatar-default.png",
+    "ext-link.svg"
+  ].map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
   fs.copyFile(path.join(kPublicDir, "favicon.ico"), path.join(kOutDir, "favicon.ico"))
 ]);
diff --git a/public/css/components/package-info.css b/public/css/components/package-info.css
@@ -338,6 +338,18 @@ section#package-info ul li.clickable:hover {
   font-size: 18px;
 }
 
+#pan-scorecard .score-header .visualizer a {
+  color: #cfd8dc;
+  margin-top: 6px;
+}
+
+#pan-scorecard .score-header .visualizer .logo {
+  vertical-align: sub;
+  width: 21px;
+  /* https://codepen.io/sosuke/pen/Pjoqqp */
+  filter: invert(99%) sepia(36%) saturate(748%) hue-rotate(170deg) brightness(93%) contrast(84%);
+}
+
 #pan-scorecard .check {
   display: flex;
   height: 26px;

diff --git a/public/img/ext-link.svg b/public/img/ext-link.svg
diff --git a/public/js/components/package.info.js b/public/js/components/package.info.js
@@ -10,6 +10,7 @@ import { UnpkgCodeFetcher } from "./unpkgCodeFetcher.js";
 
 const kSocketDevLink = 'https://socket.dev/npm/package/';
 const kSnykAdvisorLink = 'https://snyk.io/advisor/npm-package/';
+const kScorecardVisualizer = (repo) => `https://kooltheba.github.io/openssf-scorecard-api-visualizer/#/projects/github.com/${repo}`;
 
 export class PackageInfo {
   static DOMElementName = "package-info";
@@ -751,6 +752,7 @@ export class PackageInfo {
 
     document.getElementById('ossf-score').innerText = score;
     document.getElementById('head-score').innerText = score;
+    document.querySelector(".score-header .visualizer a").setAttribute('href', kScorecardVisualizer(repoName));
 
     const checksNodes = checksContainerElement.childNodes;
     checksNodes.forEach((check, checkKey) => {

diff --git a/views/index.html b/views/index.html
@@ -433,6 +433,9 @@ <h1><i class="icon-cog"></i>General</h1>
         <span class="score-value">
           <span id="head-score"></span>/10
         </span>
+        <span class="visualizer">
+          <a><img src="ext-link.svg" class="logo"> OpenSSF Scorecard Monitor Visualizer</a>
+        </span>
       </div>
     </div>
   </div>