NodeSecure · fraxken · Oct 6, 2025 · Oct 6, 2025
diff --git a/public/common/utils.js b/public/common/utils.js
@@ -1,5 +1,4 @@
 // Import Internal Dependencies
-import avatarURL from "../img/avatar-default.png";
 import "../components/expandable/expandable.js";
 
 window.activeLegendElement = null;
@@ -108,43 +107,6 @@ export function parseRepositoryUrl(repository = {}, defaultValue = null) {
   }
 }
 
-function createImageElement(baseUrl, id = null) {
-  const imageElement = document.createElement("img");
-  if (id === null || id === "") {
-    imageElement.src = `${avatarURL}`;
-  }
-  else {
-    imageElement.src = `${baseUrl}/${id}`;
-    imageElement.onerror = () => {
-      imageElement.src = `${avatarURL}`;
-    };
-  }
-
-  return imageElement;
-}
-
-export function createAvatarImageElementForAuthor(author = {}) {
-  return author.npmAvatar
-    ? createImageElement("https://www.npmjs.com", author.npmAvatar)
-    : createImageElement("https://unavatar.io", author.email);
-}
-
-export function createAvatar(name, desc) {
-  const pElement = createDOMElement("p", {
-    classList: ["count"], text: desc.count
-  });
-  const aElement = createLink(desc.url || "#");
-  const divEl = createDOMElement("div", {
-    classList: ["avatar"], childs: [pElement, aElement]
-  });
-
-  const imgEl = createAvatarImageElementForAuthor({ email: desc.email });
-  imgEl.alt = name;
-  aElement.appendChild(imgEl);
-
-  return divEl;
-}
-
 export function createLiField(title, value, options = {}) {
   const { isLink = false } = options;
 

diff --git a/public/components/icon/icon.js b/public/components/icon/icon.js
@@ -108,7 +108,28 @@ const kIcons = {
            156.672 0 265.216-108.544t108.544-263.168q0-156.672-108.544-265.216l-37.888-36.864 109.568-109.568
            q15.36-15.36 37.888-15.36t37.888 15.36 14.336 37.888-15.36 37.888l-35.84 35.84q104.448 131.072 104.448
            300.032 0 197.632-140.288 338.944-99.328 98.304-232.448 128v65.536h212.992z"/>
-  </svg>`
+  </svg>`,
+  cube: html`
+    <svg viewBox="0 0 1024 1024" aria-hidden="true">
+      <path fill="currentColor" d="M512 930.816l365.568-199.68v-363.52l-365.568 133.12v430.080z
+       M475.136 436.224l399.36-144.384-399.36-145.408-398.336 145.408z
+       M951.296 292.864v438.272q0 20.48-10.24 37.888t-28.672 26.624l-402.432 219.136q-15.36 9.216-34.816 9.216t-34.816-9.216
+       l-402.432-219.136q-17.408-10.24-27.648-26.624t-10.24-37.888v-438.272q0-23.552 13.312-41.984t34.816-26.624l402.432-146.432
+       q12.288-5.12 24.576-5.12t25.6 5.12l402.432 146.432q21.504 8.192 34.816 26.624t13.312 41.984z"/>
+    </svg>
+    `,
+  users: html`
+    <svg viewBox="0 0 1024 1024" aria-hidden="true">
+      <path  fill="currentColor" d="M148.25 224c-26 0.75-49.5 12-66.25 32h-33.5c-25 0-48.5-12-48.5-39.75
+c0-20.25-0.75-88.25 31-88.25c5.25 0 31.25 21.25 65 21.25c11.5 0 22.5-2 33.25-5.75c-0.75 5.5-1.25 11-1.25 16.5c0 22.75
+ 7.25 45.25 20.25 64zM416 383.25c0 40.5-26.75 64.75-66.75 64.75h-218.5c-40 0-66.75-24.25-66.75-64.75c0-56.5 13.25-143.25
+ 86.5-143.25c8.5 0 39.5 34.75 89.5 34.75s81-34.75 89.5-34.75c73.25 0 86.5 86.75 86.5 143.25zM160 64c0 35.25-28.75 64-64
+ 64s-64-28.75-64-64s28.75-64 64-64s64 28.75 64 64zM336 160c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zM480
+ 216.25c0 27.75-23.5 39.75-48.5 39.75h-33.5c-16.75-20-40.25-31.25-66.25-32c13-18.75 20.25-41.25 20.25-64c0-5.5-0.5-11
+-1.25-16.5c10.75 3.75 21.75 5.75 33.25 5.75c33.75 0 59.75-21.25 65-21.25c31.75 0 31 68 31 88.25zM448 64c0 35.25-28.75
+ 64-64 64s-64-28.75-64-64s28.75-64 64-64s64 28.75 64 64z"/>
+    </svg>
+`
 };
 
 export class Icon extends LitElement {

diff --git a/public/components/npm-avatar/npm-avatar.js b/public/components/npm-avatar/npm-avatar.js
@@ -0,0 +1,30 @@
+// Import Third-party Dependencies
+import { LitElement, html } from "lit";
+import { when } from "lit/directives/when.js";
+
+// Import Internal Dependencies
+import avatarURL from "../../img/avatar-default.png";
+
+export class NpmAvatar extends LitElement {
+  static properties = {
+    imgStyle: { type: String },
+    avatar: { type: String },
+    email: { type: String }
+  };
+
+  render() {
+    return when(
+      this.avatar,
+      () => html`<img style="${this.imgStyle}"  src="https://www.npmjs.com/${this.avatar}"
+              @error=${(e) => {
+                e.currentTarget.src = avatarURL;
+              }}></img>`,
+      () => html`<img style="${this.imgStyle}" src="https://unavatar.io/${this.email}"
+               @error=${(e) => {
+                  e.currentTarget.src = avatarURL;
+                }}></img>`
+    );
+  }
+}
+
+customElements.define("npm-avatar", NpmAvatar);
diff --git a/public/components/package/pannels/overview/overview.js b/public/components/package/pannels/overview/overview.js
@@ -5,6 +5,7 @@ import prettyBytes from "pretty-bytes";
 import * as utils from "../../../../common/utils.js";
 import { PopupMaintainer } from "../../../views/home/maintainers/maintainers.js";
 import { EVENTS } from "../../../../core/events.js";
+import "../../../npm-avatar/npm-avatar.js";
 
 // CONSTANTS
 const kEnGBDateFormat = Intl.DateTimeFormat("en-GB", {
@@ -219,9 +220,13 @@ export class Overview {
     const fragment = document.createDocumentFragment();
 
     for (const author of metadata.maintainers) {
+      const authorAvatar = document.createElement("npm-avatar");
+      authorAvatar.avatar = author.npmAvatar;
+      authorAvatar.email = author.email;
+      authorAvatar.imgStyle = "width: 40px; margin-right: 6px;";
       const divElement = utils.createDOMElement("div", {
         childs: [
-          utils.createAvatarImageElementForAuthor(author),
+          authorAvatar,
           utils.createDOMElement("p", {
             text: author.name
           }),

diff --git a/public/components/views/home/home.css b/public/components/views/home/home.css
@@ -1,5 +1,3 @@
-@import url("./maintainers/maintainers.css");
-
 #home--view {
   z-index: 10;
   flex-direction: column;

diff --git a/public/components/views/home/home.html b/public/components/views/home/home.html
@@ -65,17 +65,7 @@
         <div class="content" id="home-extensions"></div>
       </div>
     </div>
-    <div class="pannel">
-      <div class="module">
-        <div class="title">
-          <i class="icon-users"></i>
-          <p>[[=z.token('home.maintainers')]]</p>
-          <span class="count" id="authors-count">0</span>
-        </div>
-        <div class="content">
-          <div class="home--maintainers"></div>
-        </div>
-      </div>
+    <div class="pannel" id="pannel-right">
       <div class="module">
         <div class="title">
           <i class="icon-vcard"></i>

diff --git a/public/components/views/home/home.js b/public/components/views/home/home.js
@@ -11,7 +11,7 @@ import { EVENTS } from "../../../core/events.js";
 import { fetchScorecardData, getScorecardLink } from "../../../common/scorecard.js";
 
 // Import Components
-import { Maintainers } from "./maintainers/maintainers.js";
+import "./maintainers/maintainers.js";
 import "./report/report.js";
 
 // CONSTANTS
@@ -332,8 +332,15 @@ export class HomeView {
   }
 
   generateMaintainers() {
-    new Maintainers(this.secureDataSet, this.nsn)
-      .render();
+    const maintainers = document.createElement("nsecure-maintainers");
+    maintainers.secureDataSet = this.secureDataSet;
+    maintainers.nsn = this.nsn;
+    maintainers.theme = this.secureDataSet.theme;
+    maintainers.options = {
+      maximumMaintainers: 5
+    };
+    const pannel = document.getElementById("pannel-right");
+    pannel.prepend(maintainers);
   }
 
   generateModuleTypes() {

diff --git a/public/components/views/home/maintainers/maintainers.css b/public/components/views/home/maintainers/maintainers.css