From 31288f3d2b9df7f1e7b31abd5a59be516086eb15 Mon Sep 17 00:00:00 2001 From: fraxken Date: Sat, 2 Dec 2023 16:22:02 +0100 Subject: [PATCH] chore: improve maintainers & start implementing popup --- public/common/utils.js | 26 +- public/components/package/header/header.js | 4 +- .../package/pannels/overview/overview.css | 39 ++- .../package/pannels/overview/overview.js | 28 ++- public/components/popup/popup.css | 34 +++ public/components/popup/popup.js | 82 +++++++ public/components/views/home/home.css | 80 +----- public/components/views/home/home.js | 67 +---- .../views/home/maintainers/maintainers.css | 228 ++++++++++++++++++ .../views/home/maintainers/maintainers.js | 172 +++++++++++++ public/main.css | 13 +- public/main.js | 2 + views/index.html | 50 +++- workspaces/vis-network/src/dataset.js | 21 +- workspaces/vis-network/test/dataset.test.js | 4 +- 15 files changed, 674 insertions(+), 176 deletions(-) create mode 100644 public/components/popup/popup.css create mode 100644 public/components/popup/popup.js create mode 100644 public/components/views/home/maintainers/maintainers.css create mode 100644 public/components/views/home/maintainers/maintainers.js diff --git a/public/common/utils.js b/public/common/utils.js index 6e345ff4..a73c6a82 100644 --- a/public/common/utils.js +++ b/public/common/utils.js @@ -253,10 +253,28 @@ export function copyToClipboard(str) { } } -export function hideOnClickOutside(element, blacklistElements = []) { +export function hideOnClickOutside( + element, + options = {} +) { + const { + reverse = false, + blacklist = [], + hiddenTarget = element, + callback = () => void 0 + } = options; + const outsideClickListener = (event) => { - if (!element.contains(event.target) && !blacklistElements.includes(event.target)) { - element.classList.add("hidden"); + if (!element.contains(event.target) && !blacklist.includes(event.target)) { + if (hiddenTarget) { + if (reverse) { + hiddenTarget.classList.remove("show"); + } + else { + hiddenTarget.classList.add("hidden"); + } + } + callback(); removeClickListener(); } }; @@ -266,4 +284,6 @@ export function hideOnClickOutside(element, blacklistElements = []) { }; document.addEventListener("click", outsideClickListener); + + return outsideClickListener; } diff --git a/public/components/package/header/header.js b/public/components/package/header/header.js index 9dc00a38..acf91deb 100644 --- a/public/components/package/header/header.js +++ b/public/components/package/header/header.js @@ -52,7 +52,9 @@ export class PackageHeader { else { menu.classList.add("hidden"); } - utils.hideOnClickOutside(menu, [menuDomElement]); + utils.hideOnClickOutside(menu, { + blacklist: [menuDomElement] + }); }); // Description diff --git a/public/components/package/pannels/overview/overview.css b/public/components/package/pannels/overview/overview.css index f215c1ad..5d53adb2 100644 --- a/public/components/package/pannels/overview/overview.css +++ b/public/components/package/pannels/overview/overview.css @@ -1,19 +1,46 @@ div.package-maintainers { display: flex; - flex-wrap: wrap; + flex-direction: column; margin: 10px 0; } div.package-maintainers>div { - flex-basis: 56px; - height: 56px; - margin-right: 6px; + display: flex; + height: 40px; margin-bottom: 6px; box-sizing: border-box; border-radius: 4px; overflow: hidden; + background: linear-gradient(to right, rgb(43 68 137) 0%, rgba(255, 255, 255, 0) 100%); +} + +div.package-maintainers>div:hover { + background: linear-gradient(to right, rgb(43, 87, 137) 0%, rgba(255, 255, 255, 0) 100%); + cursor: pointer; + color: yellow; } -div.package-maintainers>div img { - width: 56px; +div.package-maintainers>div>img { + width: 40px; + margin-right: 6px; +} + +div.package-maintainers>div>p { + flex-grow: 1; + display: flex; + align-items: center; + font-family: "mononoki"; +} + +div.package-maintainers>div>span { + margin-left: 6px; + display: flex; + align-items: center; + font-family: "mononoki"; + min-width: 76px; + padding-right: 10px; + justify-content: flex-end; + background-color: #236f5c2e; + border-radius: 20px; + color: #ecf5da; } diff --git a/public/components/package/pannels/overview/overview.js b/public/components/package/pannels/overview/overview.js index ca48c97b..41fb049f 100644 --- a/public/components/package/pannels/overview/overview.js +++ b/public/components/package/pannels/overview/overview.js @@ -3,6 +3,7 @@ import prettyBytes from "pretty-bytes"; // Import Internal Dependencies import * as utils from "../../../../common/utils.js"; +import { PopupMaintainer } from "../../../views/home/maintainers/maintainers.js"; // CONSTANTS const kEnGBDateFormat = Intl.DateTimeFormat("en-GB", { @@ -122,8 +123,31 @@ export class Overview { const fragment = document.createDocumentFragment(); for (const author of metadata.maintainers) { - const img = utils.createAvatarImageElement(author.email); - fragment.appendChild(utils.createDOMElement("div", { childs: [img] })); + const divElement = utils.createDOMElement("div", { + childs: [ + utils.createAvatarImageElement(author.email), + utils.createDOMElement("p", { + text: author.name + }), + "version" in author ? + utils.createDOMElement("span", { text: `v${author.version}` }) : + null + ] + }); + + divElement.addEventListener("click", () => { + const result = this.package.nsn.secureDataSet.getAuthorByEmail(author.email); + if (result === null) { + return; + } + const [name, data] = result; + + window.popup.open( + new PopupMaintainer(name, data, this.package.nsn).render() + ); + }); + + fragment.appendChild(divElement); } return fragment; diff --git a/public/components/popup/popup.css b/public/components/popup/popup.css new file mode 100644 index 00000000..82c20598 --- /dev/null +++ b/public/components/popup/popup.css @@ -0,0 +1,34 @@ +/** TODO: ANIMATE ? **/ +section#popup--background { + width: 100%; + height: 100%; + overflow: hidden; + position: fixed; + left: 0; + top: 0; + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + /* pointer-events: none; */ + background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgb(30 35 65) 100%); + + visibility: hidden; + opacity: 0; + transition: opacity 0.35s ease-in, visibility 0ms ease-in 0.35s; +} + +section#popup--background.show { + visibility: visible; + opacity: 1; + transition: opacity 0.35s ease-in, visibility 0ms ease-in 0ms; +} + +section#popup--background>.popup { + pointer-events: all !important; + background: #f5f4f4; + border-radius: 4px; + box-shadow: 5px 5px 15px rgb(23 27 129 / 41%); + border-left: 2px solid #ffffff; + border-top: 2px solid #FFF; +} diff --git a/public/components/popup/popup.js b/public/components/popup/popup.js new file mode 100644 index 00000000..d31be8cc --- /dev/null +++ b/public/components/popup/popup.js @@ -0,0 +1,82 @@ +// Import Internal Dependencies +import * as utils from "../../common/utils"; + +export class Popup { + constructor() { + this.state = "closed"; + this.dom = { + background: document.getElementById("popup--background"), + popup: document.querySelector(".popup") + }; + + this.listener = null; + this.templateName = null; + } + + /** + * @param {!PopupTemplate} htmlElement + * @returns {void} + */ + open(template) { + if (!(template instanceof PopupTemplate)) { + throw new Error("You must provide a PopupTemplate"); + } + if (this.state === "open") { + return; + } + + this.templateName = template.name; + this.dom.popup.appendChild(template.HTMLElement); + // TODO: apply additional css customization + + this.dom.background.classList.add("show"); + this.state = "open"; + setTimeout(() => this.#closeOnClickOutside(), 1); + } + + #closeOnClickOutside() { + this.listener = utils.hideOnClickOutside( + this.dom.popup, + { + reverse: true, + hiddenTarget: null, + callback: () => { + this.listener = null; + this.close(); + } + } + ); + } + + #cleanupClickOutside() { + if (this.listener !== null) { + document.removeEventListener("click", this.listener); + } + } + + close() { + if (this.state === "closed") { + return; + } + + this.dom.popup.innerHTML = ""; + this.templateName = null; + this.#cleanupClickOutside(); + this.dom.background.classList.remove("show"); + this.state = "closed"; + } +} + +export class PopupTemplate { + /** + * @param {!string} name + * @param {!HTMLElement} HTMLElement + */ + constructor( + name, + HTMLElement + ) { + this.name = name; + this.HTMLElement = HTMLElement; + } +} diff --git a/public/components/views/home/home.css b/public/components/views/home/home.css index 7dddb4ed..734b610b 100644 --- a/public/components/views/home/home.css +++ b/public/components/views/home/home.css @@ -1,3 +1,5 @@ +@import url("./maintainers/maintainers.css"); + #home--view { z-index: 10; flex-direction: column; @@ -351,81 +353,3 @@ /** * OVERVIEW END */ - -/** - * MAINTAINERS BEGIN - */ -.home--maintainers { - display: flex; - flex-wrap: wrap; - margin-left: -10px; - margin-top: -10px; -} - -.home--maintainers>.person { - height: 50px; - flex-basis: 300px; - background: linear-gradient(to bottom, rgba(252, 252, 252, 1) 0%, rgba(232, 232, 232, 1) 100%); - display: flex; - position: relative; - box-sizing: border-box; - border-radius: 4px; - overflow: hidden; - margin-left: 10px; - margin-top: 10px; - box-shadow: 2px 2px 6px 0px #00000012; - border: 1px solid #bfbfbf; - color: #546884; - flex-grow: 1; -} - -.home--maintainers>.person.url:hover { - border-color: var(--secondary-darker); - cursor: pointer; -} - -.home--maintainers>.person>img { - width: 50px; -} - -.home--maintainers>.person>i { - margin-right: 10px; - display: flex; - align-items: center; - color: #1976D2; -} - -.home--maintainers>.person>.whois { - display: flex; - flex-direction: column; - justify-content: center; - margin-left: 10px; - font-size: 13px; - font-family: "mononoki"; - flex-grow: 1; - margin-right: 10px; -} - -.home--maintainers>.person>.whois>span { - color: var(--secondary-darker); - font-size: 12px; - margin-top: 5px; -} - -.home--maintainers>.person>div.packagescount { - display: flex; - align-items: center; - font-family: "mononoki"; - font-size: 14px; - margin-right: 10px; - flex-basis: 40px; - flex-shrink: 0; -} - -.home--maintainers>.person>div.packagescount>i { - margin-right: 4px; -} - -/** - * MAINTAINERS END - */ diff --git a/public/components/views/home/home.js b/public/components/views/home/home.js index 805b8592..77d643ab 100644 --- a/public/components/views/home/home.js +++ b/public/components/views/home/home.js @@ -8,6 +8,9 @@ import { Gauge } from "../../gauge/gauge.js"; import { createExpandableSpan } from "../../expandable/expandable.js"; import { fetchScorecardData, getScoreColor, getScorecardLink } from "../../../common/scorecard.js"; +// Import Components +import { Maintainers } from "./maintainers/maintainers.js"; + // CONSTANTS const kFlagsToWatch = new Set([ "hasBannedFile", @@ -189,7 +192,7 @@ export class HomeView { } if (fragment.children.length === 0) { - document.querySelector(".home--to--watch").style.display = "none"; + document.getElementById("homewatch").style.display = "none"; } else { if (hideItems) { @@ -283,65 +286,7 @@ export class HomeView { } generateMaintainers() { - const fragment = document.createDocumentFragment(); - - const createWhois = (name, email) => { - const childs = [ - utils.createDOMElement("p", { text: name }) - ]; - if (typeof email === "string") { - childs.push(utils.createDOMElement("span", { text: email })); - } - - return utils.createDOMElement("div", { - className: "whois", childs - }); - }; - - const authors = [...this.secureDataSet.authors.entries()] - .sort((left, right) => right[1].count - left[1].count); - const maxAuthors = 8; - const hideItems = authors.length > maxAuthors; - - for (let id = 0; id < authors.length; id++) { - const [name, data] = authors[id]; - if (typeof name === "undefined") { - continue; - } - const { count, email, url = null } = data; - - const hasURL = typeof url === "string"; - const person = utils.createDOMElement("div", { - className: "person", - childs: [ - utils.createAvatarImageElement(email), - createWhois(name, email), - hasURL ? utils.createDOMElement("i", { className: "icon-link" }) : null, - utils.createDOMElement("div", { - className: "packagescount", - childs: [ - utils.createDOMElement("i", { className: "icon-cube" }), - utils.createDOMElement("p", { text: count }) - ] - }) - ] - }); - if (hideItems && id >= maxAuthors) { - person.classList.add("hidden"); - } - - if (hasURL) { - person.classList.add("url"); - person.addEventListener("click", () => window.open(url, "_blank")); - } - - fragment.appendChild(person); - } - if (hideItems) { - fragment.appendChild(createExpandableSpan(maxAuthors)); - } - - document.getElementById("authors-count").innerHTML = authors.length; - document.querySelector(".home--maintainers").appendChild(fragment); + new Maintainers(this.secureDataSet, this.nsn) + .render(); } } diff --git a/public/components/views/home/maintainers/maintainers.css b/public/components/views/home/maintainers/maintainers.css new file mode 100644 index 00000000..53a327f1 --- /dev/null +++ b/public/components/views/home/maintainers/maintainers.css @@ -0,0 +1,228 @@ +.home--maintainers { + display: flex; + flex-wrap: wrap; + margin-left: -10px; + margin-top: -10px; +} + +.home--maintainers>.person { + height: 65px; + flex-basis: 330px; + background: linear-gradient(to bottom, rgb(255 255 255) 0%, rgb(245 252 255) 100%); + display: flex; + position: relative; + box-sizing: border-box; + border-radius: 4px; + overflow: hidden; + margin-left: 10px; + margin-top: 10px; + box-shadow: 1px 1px 4px 0px #271e792b; + color: #546884; + flex-grow: 1; +} + +.home--maintainers>.person:hover { + border-color: var(--secondary-darker); + cursor: pointer; +} + +.home--maintainers>.person>img { + width: 65px; + flex-shrink: 0; +} + +.home--maintainers>.person>i { + margin-right: 10px; + display: flex; + align-items: center; + color: #1976D2; + font-size: 18px; +} + +.home--maintainers>.person>.whois { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 10px; + font-size: 15px; + font-family: "mononoki"; + flex-grow: 1; + margin-right: 10px; +} + +.home--maintainers>.person>.whois>span { + color: var(--secondary-darker); + font-size: 14px; + margin-top: 5px; + font-family: monospace; +} + +.home--maintainers>.person>div.packagescount { + display: flex; + align-items: center; + font-family: "mononoki"; + font-size: 18px; + margin-right: 15px; + flex-basis: 40px; + flex-shrink: 0; +} + +.home--maintainers>.person>div.packagescount>i { + margin-right: 4px; +} + +/** + * POPUP + **/ +.maintainers--popup { + display: flex; + flex-direction: column; + width: 500px; + margin: 5px; +} + +.maintainers--popup>.header { + height: 80px; + display: flex; + flex-shrink: 0; + margin-bottom: 10px; + border-radius: 4px; + overflow: hidden; + margin-right: 25px; +} + +.maintainers--popup>.header>.avatar { + width: 80px; + overflow: hidden; + border-radius: 4px; + overflow: hidden; + flex-shrink: 0; + border-radius: 8px; + box-sizing: border-box; + box-shadow: 2px 2px 6px 0px #00000012; +} + +.maintainers--popup>.header>.avatar>img { + width: 80px; +} + +.maintainers--popup>.header>.informations { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: center; + font-family: "mononoki"; + margin: 0 10px; +} + +.maintainers--popup>.header>.informations>p.name { + color: #546884; +} + +.maintainers--popup>.header>.informations>p.email { + color: var(--secondary-darker); + margin-top: 10px; + font-family: monospace; +} + +.maintainers--popup>.header>.icons { + display: flex; + align-items: center; +} + +.maintainers--popup>.header>.icons>i { + height: 40px; + width: 40px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--secondary-darker); + border-radius: 100%; + color: #FFF; + box-shadow: 2px 2px 6px 0px #00000012; +} + +.maintainers--popup>.header>.icons>i:hover { + cursor: pointer; + background-color: var(--primary); +} + +.maintainers--popup>.header>.icons>i+i { + margin-left: 10px; +} + +.maintainers--popup>.separator { + height: 2px; + background: #d3d3d387; + margin: 0 10px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + +.maintainers--popup>.separator>p { + background: #f5f4f4; + padding: 0 10px; + font-family: "roboto"; + font-weight: bold; + letter-spacing: 1.2px; + color: #255471; +} + +.maintainers--popup>ul { + display: flex; + flex-direction: column; + flex-grow: 1; + overflow-y: auto; + overflow-x: hidden; + max-height: 240px; + margin-top: 20px; + margin-bottom: 10px; +} + +.maintainers--popup>ul li { + height: 36px; + padding: 0 10px; + display: flex; + align-items: center; + background: linear-gradient(to right, rgb(221 229 251) 0%, rgba(255, 255, 255, 0) 100%); + border-left: 2px solid #4480da; + color: #234c99; + border-radius: 4px; + font-family: "mononoki"; + flex-shrink: 0; + font-size: 15px; +} + +.maintainers--popup>ul li>p{ + color: #234c99; +} + +.maintainers--popup>ul li>span{ + color: #2470b3; + margin-left: 10px; +} + +.maintainers--popup>ul li>i{ + margin-left: auto; + margin-right: 13px; + background: #4ab968; + color: #FFF; + border-radius: 100%; + width: 26px; + height: 26px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 2px 2px 6px 0px #00000012; +} +.maintainers--popup>ul li>i:hover { + background: #4ab8b9; + cursor: pointer; +} + +.maintainers--popup>ul li+li { + margin-top: 5px; +} diff --git a/public/components/views/home/maintainers/maintainers.js b/public/components/views/home/maintainers/maintainers.js new file mode 100644 index 00000000..23ed32ed --- /dev/null +++ b/public/components/views/home/maintainers/maintainers.js @@ -0,0 +1,172 @@ +// Import Internal Dependencies +import * as utils from "../../../../common/utils.js"; +import { createExpandableSpan } from "../../../expandable/expandable.js"; +import { PopupTemplate } from "../../../popup/popup.js"; + +export class Maintainers { + static whois(name, email) { + const childs = [ + utils.createDOMElement("p", { text: name }) + ]; + if (typeof email === "string") { + childs.push(utils.createDOMElement("span", { text: email })); + } + + return utils.createDOMElement("div", { + className: "whois", childs + }); + } + + constructor(secureDataSet, nsn, options = {}) { + const { maximumMaintainers = 5 } = options; + + this.secureDataSet = secureDataSet; + this.nsn = nsn; + this.maximumMaintainers = maximumMaintainers; + } + + render() { + const authors = [...this.secureDataSet.authors.entries()] + .sort((left, right) => right[1].packages.size - left[1].packages.size); + + document.getElementById("authors-count").innerHTML = authors.length; + document.querySelector(".home--maintainers") + .appendChild(this.generate(authors)); + } + + generate(authors) { + const fragment = document.createDocumentFragment(); + const hideItems = authors.length > this.maximumMaintainers; + + for (let id = 0; id < authors.length; id++) { + const [name, data] = authors[id]; + if (typeof name === "undefined") { + continue; + } + const { packages, email, url = null } = data; + + const hasURL = typeof url === "string"; + const person = utils.createDOMElement("div", { + className: "person", + childs: [ + utils.createAvatarImageElement(email), + Maintainers.whois(name, email), + hasURL ? utils.createDOMElement("i", { className: "icon-link" }) : null, + utils.createDOMElement("div", { + className: "packagescount", + childs: [ + utils.createDOMElement("i", { className: "icon-cube" }), + utils.createDOMElement("p", { text: packages.size }) + ] + }) + ] + }); + if (hideItems && id >= this.maximumMaintainers) { + person.classList.add("hidden"); + } + person.addEventListener("click", () => { + window.popup.open( + new PopupMaintainer(name, data, this.nsn).render() + ); + }); + + fragment.appendChild(person); + } + if (hideItems) { + fragment.appendChild(createExpandableSpan(this.maximumMaintainers)); + } + + return fragment; + } +} + +export class PopupMaintainer { + constructor(name, data, nsn) { + this.name = name; + this.data = data; + this.nsn = nsn; + } + + render() { + const { email, url = null } = this.data; + + const templateElement = document.getElementById("maintainers-popup-template"); + /** @type {HTMLElement} */ + const clone = templateElement.content.cloneNode(true); + + clone.querySelector(".avatar").appendChild( + utils.createAvatarImageElement(email) + ); + clone.querySelector(".name").textContent = this.name; + const emailElement = clone.querySelector(".email"); + + if (typeof email === "string") { + emailElement.textContent = email; + } + else { + emailElement.style.display = "none"; + } + + const linkElement = clone.querySelector(".icon-link"); + if (typeof url === "string") { + linkElement.addEventListener("click", () => window.open(url, "_blank")); + } + else { + linkElement.style.display = "none"; + } + + const focusGlobElement = clone.querySelector(".icon-globe-alt-outline"); + focusGlobElement.addEventListener("click", () => { + window.popup.close(); + window.navigation.setNavByName("network--view"); + }); + + this.generatePackagesList(clone); + + return new PopupTemplate( + "maintainer", + clone + ); + } + + /** + * @param {!HTMLElement} clone + */ + generatePackagesList(clone) { + const fragment = document.createDocumentFragment(); + + for (const spec of this.data.packages) { + const { name, version } = this.parseNpmSpec(spec); + + const iconNetwork = utils.createDOMElement("i", { + className: "icon-right-open-big" + }); + iconNetwork.addEventListener("click", () => { + window.popup.close(); + window.navigation.setNavByName("network--view"); + setTimeout(() => this.nsn.focusNodeByName(name), 25); + }); + + fragment.appendChild( + utils.createDOMElement("li", { + childs: [ + utils.createDOMElement("p", { text: name }), + utils.createDOMElement("span", { text: `v${version}` }), + iconNetwork + ] + }) + ); + } + + clone.querySelector(".maintainers--packages") + .appendChild(fragment); + } + + parseNpmSpec(spec) { + const parts = spec.split("@"); + + return spec.startsWith("@") ? + { name: `@${parts[1]}`, version: parts[2] } : + { name: parts[0], version: parts[1] }; + } +} diff --git a/public/main.css b/public/main.css index afb7921d..f0101666 100644 --- a/public/main.css +++ b/public/main.css @@ -5,6 +5,7 @@ @import url("./font/roboto/roboto.css"); @import url("./font/mononoki/mononoki.css"); +@import url("./components/popup/popup.css"); @import url("./components/file-box/file-box.css"); @import url("./components/expandable/expandable.css"); @import url("./components/navigation/navigation.css"); @@ -29,12 +30,12 @@ body { overflow: hidden; } -main>section.content ::-webkit-scrollbar { +::-webkit-scrollbar { width: 8px; border-radius: 4px; } -main>section.content ::-webkit-scrollbar-track-piece { +::-webkit-scrollbar-track-piece { /* Fond */ background: transparent none; border: solid 4px transparent; @@ -42,13 +43,13 @@ main>section.content ::-webkit-scrollbar-track-piece { margin: 4px; } -main ::-webkit-scrollbar-track-piece:horizontal { +::-webkit-scrollbar-track-piece:horizontal { /* Fond pour la barre du bas */ border-right-width: 4px; border-bottom-width: 8px; } -main>section.content ::-webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { /* Barre */ border: solid 0 transparent; border-right-width: 4px; @@ -59,7 +60,7 @@ main>section.content ::-webkit-scrollbar-thumb { inset 0 0 0 6px #3f27c7; } -main>section.content ::-webkit-scrollbar-thumb:horizontal { +::-webkit-scrollbar-thumb:horizontal { /* Barre du bas */ border-right-width: 0; border-bottom-width: 4px; @@ -90,5 +91,5 @@ main>section.content .view { } .hidden { - display: none; + display: none !important; } diff --git a/public/main.js b/public/main.js index 16aad954..bd4e1d63 100644 --- a/public/main.js +++ b/public/main.js @@ -6,12 +6,14 @@ import { PackageInfo } from "./components/package/package.js"; import { ViewNavigation } from "./components/navigation/navigation.js"; import { Wiki } from "./components/wiki/wiki.js"; import { SearchBar } from "./components/searchbar/searchbar.js"; +import { Popup } from "./components/popup/popup.js"; // Import Views Components import { Settings } from "./components/views/settings/settings.js"; import { HomeView } from "./components/views/home/home.js"; document.addEventListener("DOMContentLoaded", async() => { + window.popup = new Popup(); window.settings = await new Settings().fetchUserConfig(); window.navigation = new ViewNavigation(); window.wiki = new Wiki(); diff --git a/views/index.html b/views/index.html index 565ed5c0..0e0fdf2d 100644 --- a/views/index.html +++ b/views/index.html @@ -90,23 +90,11 @@
-
+

Packages in the dependency tree requiring greater attention

-
-
- -

Authors

- 0 -
-
-
-
-
- -
@@ -124,6 +112,18 @@
+
+
+
+
+ +

Authors

+ 0 +
+
+
+
+
@@ -275,6 +275,10 @@

Shortcuts

+
+
+
+
@@ -295,6 +299,26 @@

Shortcuts

+ +