refactor: group css & js in public/components

.eslintignore

@@ -1,2 +1 @@
 test/fixtures
-public/js

.eslintrc

@@ -3,5 +3,11 @@
     "parserOptions": {
         "sourceType": "module",
         "requireConfigFile": false
+    },
+    "rules": {
+      "func-style": "off",
+      "no-invalid-this": "off",
+      "no-inner-declarations": "off",
+      "no-case-declarations": "off"
     }
 }

esbuild.config.js

@@ -17,8 +17,8 @@ const kNodeModulesDir = path.join(__dirname, "node_modules");
 
 await esbuild.build({
   entryPoints: [
-    path.join(kPublicDir, "js", "master.js"),
-    path.join(kPublicDir, "css", "style.css"),
+    path.join(kPublicDir, "main.js"),
+    path.join(kPublicDir, "main.css"),
     path.join(kNodeModulesDir, "highlight.js", "styles", "github.css"),
     ...getBuildConfiguration().entryPoints
   ],
@@ -38,17 +38,10 @@ await esbuild.build({
   outdir: kOutDir
 });
 
+const imagesFiles = await fs.readdir(kImagesDir);
+
 await Promise.all([
-  ...[
-    "github-mark.png",
-    "github-black.png",
-    "npm-icon.svg",
-    "node.png",
-    "snyk.png",
-    "sonatype.png",
-    "avatar-default.png",
-    "scorecard.png",
-    "ext-link.svg"
-  ].map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
+  ...imagesFiles
+    .map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
   fs.copyFile(path.join(kPublicDir, "favicon.ico"), path.join(kOutDir, "favicon.ico"))
 ]);

public/js/utils.js → public/common/utils.js

@@ -1,6 +1,10 @@
+/* eslint-disable no-invalid-this */
 // Import static
 import avatarURL from "../img/avatar-default.png";
 
+// Import Internal Dependencies
+import { createExpandableSpan } from "../components/expandable/expandable";
+
 window.activeLegendElement = null;
 
 function getVCSRepositoryPath(url) {
@@ -15,7 +19,8 @@ function getVCSRepositoryPath(url) {
       1,
       repo.pathname.includes(".git") ? -4 : repo.pathname.length
     );
-  } catch {
+  }
+  catch {
     return null;
   }
 }
@@ -29,7 +34,8 @@ function getVCSRepositoryPlatform(url) {
     const repo = new URL(url);
 
     return repo.host;
-  } catch {
+  }
+  catch {
     return null;
   }
 }
@@ -113,14 +119,6 @@ export function createLink(href, text = null) {
   return createDOMElement("a", { text, attributes });
 }
 
-export function createTooltip(text, description) {
-  const spanElement = createDOMElement("span", { text: description });
-
-  return createDOMElement("div", {
-    classList: ["tooltip"], text, childs: [spanElement]
-  });
-}
-
 export function parseRepositoryUrl(repository = {}, defaultValue = null) {
   if (typeof repository !== "object" || !("url" in repository)) {
     return defaultValue;
@@ -160,6 +158,7 @@ export function createAvatarImageElement(email = null) {
       imageElement.src = `${avatarURL}`;
     };
   }
+
   return imageElement;
 }
 
@@ -179,48 +178,6 @@ export function createAvatar(name, desc) {
   return divEl;
 }
 
-export function createFileBox(options = {}) {
-  const { title, fileName, childs = [], titleHref = "#", fileHref = null, severity = null } = options;
-
-  const defaultHrefProperties = { target: "_blank", rel: "noopener noreferrer" };
-  const fileDomElement = fileHref === null ?
-    createDOMElement("p", { text: fileName }) :
-    createDOMElement("a", { text: fileName, attributes: { href: fileHref, ...defaultHrefProperties } });
-
-  const boxHeader = createDOMElement("div", {
-    classList: ["box-header"],
-    childs: [
-      ...(severity === null ? [] : [
-        createDOMElement("span", { classList: [severity], text: severity.charAt(0).toUpperCase() })
-      ]),
-      titleHref === null ?
-        createDOMElement("p", { text: title, className: "box-title" }) :
-        createDOMElement("a", {
-          text: title,
-          className: "box-title",
-          attributes: {
-            href: titleHref, ...defaultHrefProperties
-          }
-        }),
-      createDOMElement("p", {
-        className: "box-file",
-        childs: [
-          createDOMElement("i", { classList: ["icon-docs"] }),
-          fileDomElement
-        ]
-      })
-    ]
-  });
-
-  return createDOMElement("div", {
-    classList: ["box-file-info"],
-    childs: [
-      boxHeader,
-      ...childs.filter((element) => element !== null)
-    ]
-  });
-}
-
 export function createLiField(title, value, options = {}) {
   const { isLink = false } = options;
 
@@ -240,42 +197,6 @@ export function createLiField(title, value, options = {}) {
   return liElement;
 }
 
-export function createExpandableSpan(hideItemsLength, onclick = () => void 0) {
-  const span = createDOMElement("span", {
-    classList: ["expandable"],
-    attributes: { "data-value": "closed" },
-    childs: [
-      createDOMElement("i", { className: "icon-plus-squared-alt" }),
-      createDOMElement("p", { text: "show more" })
-    ]
-  });
-  span.addEventListener("click", function itemListClickAction() {
-    const isClosed = this.getAttribute("data-value") === "closed";
-    {
-      const innerI = this.querySelector("i");
-      innerI.classList.remove(isClosed ? "icon-plus-squared-alt" : "icon-minus-squared-alt");
-      innerI.classList.add(isClosed ? "icon-minus-squared-alt" : "icon-plus-squared-alt");
-    }
-    this.querySelector("p").textContent = isClosed ? "show less" : "show more";
-    this.setAttribute("data-value", isClosed ? "opened" : "closed");
-
-    for (let id = 0; id < this.parentNode.childNodes.length; id++) {
-      const node = this.parentNode.childNodes[id];
-      if (node !== this) {
-        if (isClosed) {
-          node.classList.remove("hidden");
-        }
-        else if (id >= hideItemsLength) {
-          node.classList.add("hidden");
-        }
-      }
-    }
-    onclick(this);
-  });
-
-  return span;
-}
-
 export function createItemsList(node, items = [], options = {}) {
   const { onclick = null, hideItems = false, hideItemsLength = 5 } = options;
 
@@ -313,36 +234,36 @@ export function createItemsList(node, items = [], options = {}) {
 }
 
 export function copyToClipboard(str) {
-  const el = document.createElement('textarea');  // Create a <textarea> element
-  el.value = str;                                 // Set its value to the string that you want copied
-  el.setAttribute('readonly', '');                // Make it readonly to be tamper-proof
-  el.style.position = 'absolute';
-  el.style.left = '-9999px';                      // Move outside the screen to make it invisible
-  document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
+  const el = document.createElement("textarea");
+  el.value = str;
+  el.setAttribute("readonly", "");
+  el.style.position = "absolute";
+  el.style.left = "-9999px";
+  document.body.appendChild(el);
   const selected =
-    document.getSelection().rangeCount > 0        // Check if there is any content selected previously
-      ? document.getSelection().getRangeAt(0)     // Store selection if found
-      : false;                                    // Mark as false to know no selection existed before
-  el.select();                                    // Select the <textarea> content
-  document.execCommand('copy');                   // Copy - only works as a result of a user action (e.g. click events)
-  document.body.removeChild(el);                  // Remove the <textarea> element
-  if (selected) {                                 // If a selection existed before copying
-    document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
-    document.getSelection().addRange(selected);   // Restore the original selection
+    document.getSelection().rangeCount > 0
+      ? document.getSelection().getRangeAt(0)
+      : false;
+  el.select();
+  document.execCommand("copy");
+  document.body.removeChild(el);
+  if (selected) {
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(selected);
   }
-};
+}
 
 export function hideOnClickOutside(element, blacklistElements = []) {
   const outsideClickListener = (event) => {
     if (!element.contains(event.target) && !blacklistElements.includes(event.target)) {
       element.classList.add("hidden");
       removeClickListener();
     }
-  }
+  };
 
   const removeClickListener = () => {
-    document.removeEventListener('click', outsideClickListener);
-  }
+    document.removeEventListener("click", outsideClickListener);
+  };
 
-  document.addEventListener('click', outsideClickListener);
+  document.addEventListener("click", outsideClickListener);
 }

public/components/expandable/expandable.css

@@ -0,0 +1,42 @@
+span.expandable {
+  display: flex;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 35px;
+  font-size: 13px;
+  font-family: "mononoki";
+  background: none;
+  color: #00B0FF;
+  text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
+  transition: all 0.2s linear;
+  margin-top: 5px;
+}
+
+span.expandable[data-value="opened"] {
+  color: #F44336 !important;
+}
+
+span.expandable:hover {
+  cursor: pointer;
+}
+
+span.expandable i {
+  margin-right: 4px;
+  margin-top: 1px;
+}
+
+/**
+ * CUSTOM CSS
+ */
+.package-scripts>.expandable {
+  margin-top: 10px;
+}
+
+.home--body .expandable {
+  text-shadow: none;
+  font-size: 15px;
+  color: var(--secondary-darker);
+  flex-grow: 1;
+  flex-basis: 100%;
+  margin-top: 10px;
+}

public/components/expandable/expandable.js

@@ -0,0 +1,41 @@
+// Import Internal Dependencies
+import { createDOMElement } from "../../common/utils";
+
+export function createExpandableSpan(
+  hideItemsLength,
+  onclick = () => void 0
+) {
+  const span = createDOMElement("span", {
+    classList: ["expandable"],
+    attributes: { "data-value": "closed" },
+    childs: [
+      createDOMElement("i", { className: "icon-plus-squared-alt" }),
+      createDOMElement("p", { text: "show more" })
+    ]
+  });
+  span.addEventListener("click", function itemListClickAction() {
+    const isClosed = this.getAttribute("data-value") === "closed";
+    {
+      const innerI = this.querySelector("i");
+      innerI.classList.remove(isClosed ? "icon-plus-squared-alt" : "icon-minus-squared-alt");
+      innerI.classList.add(isClosed ? "icon-minus-squared-alt" : "icon-plus-squared-alt");
+    }
+    this.querySelector("p").textContent = isClosed ? "show less" : "show more";
+    this.setAttribute("data-value", isClosed ? "opened" : "closed");
+
+    for (let id = 0; id < this.parentNode.childNodes.length; id++) {
+      const node = this.parentNode.childNodes[id];
+      if (node !== this) {
+        if (isClosed) {
+          node.classList.remove("hidden");
+        }
+        else if (id >= hideItemsLength) {
+          node.classList.add("hidden");
+        }
+      }
+    }
+    onclick(this);
+  });
+
+  return span;
+}