Skip to content

Commit 66e71d0

Browse files
fraxkenfraxken
authored
refactor: group css & js in public/components (#294)
1 parent c3c2edc commit 66e71d0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1140
-1154
lines changed

‎.eslintignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
11
test/fixtures
2-
public/js

‎.eslintrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,11 @@
33
"parserOptions": {
44
"sourceType": "module",
55
"requireConfigFile": false
6+
},
7+
"rules": {
8+
"func-style": "off",
9+
"no-invalid-this": "off",
10+
"no-inner-declarations": "off",
11+
"no-case-declarations": "off"
612
}
713
}

‎esbuild.config.js‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ const kNodeModulesDir = path.join(__dirname, "node_modules");
1717

1818
await esbuild.build({
1919
entryPoints: [
20-
path.join(kPublicDir, "js", "master.js"),
21-
path.join(kPublicDir, "css", "style.css"),
20+
path.join(kPublicDir, "main.js"),
21+
path.join(kPublicDir, "main.css"),
2222
path.join(kNodeModulesDir, "highlight.js", "styles", "github.css"),
2323
...getBuildConfiguration().entryPoints
2424
],
@@ -38,17 +38,10 @@ await esbuild.build({
3838
outdir: kOutDir
3939
});
4040

41+
const imagesFiles = await fs.readdir(kImagesDir);
42+
4143
await Promise.all([
42-
...[
43-
"github-mark.png",
44-
"github-black.png",
45-
"npm-icon.svg",
46-
"node.png",
47-
"snyk.png",
48-
"sonatype.png",
49-
"avatar-default.png",
50-
"scorecard.png",
51-
"ext-link.svg"
52-
].map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
44+
...imagesFiles
45+
.map((name) => fs.copyFile(path.join(kImagesDir, name), path.join(kOutDir, name))),
5346
fs.copyFile(path.join(kPublicDir, "favicon.ico"), path.join(kOutDir, "favicon.ico"))
5447
]);

public/js/scorecard.js renamed to public/common/scorecard.js

File renamed without changes.

public/js/utils.js renamed to public/common/utils.js

Lines changed: 29 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
/* eslint-disable no-invalid-this */
12
// Import static
23
import avatarURL from "../img/avatar-default.png";
34

5+
// Import Internal Dependencies
6+
import { createExpandableSpan } from "../components/expandable/expandable";
7+
48
window.activeLegendElement = null;
59

610
function getVCSRepositoryPath(url) {
@@ -15,7 +19,8 @@ function getVCSRepositoryPath(url) {
1519
1,
1620
repo.pathname.includes(".git") ? -4 : repo.pathname.length
1721
);
18-
} catch {
22+
}
23+
catch {
1924
return null;
2025
}
2126
}
@@ -29,7 +34,8 @@ function getVCSRepositoryPlatform(url) {
2934
const repo = new URL(url);
3035

3136
return repo.host;
32-
} catch {
37+
}
38+
catch {
3339
return null;
3440
}
3541
}
@@ -113,14 +119,6 @@ export function createLink(href, text = null) {
113119
return createDOMElement("a", { text, attributes });
114120
}
115121

116-
export function createTooltip(text, description) {
117-
const spanElement = createDOMElement("span", { text: description });
118-
119-
return createDOMElement("div", {
120-
classList: ["tooltip"], text, childs: [spanElement]
121-
});
122-
}
123-
124122
export function parseRepositoryUrl(repository = {}, defaultValue = null) {
125123
if (typeof repository !== "object" || !("url" in repository)) {
126124
return defaultValue;
@@ -160,6 +158,7 @@ export function createAvatarImageElement(email = null) {
160158
imageElement.src = `${avatarURL}`;
161159
};
162160
}
161+
163162
return imageElement;
164163
}
165164

@@ -179,48 +178,6 @@ export function createAvatar(name, desc) {
179178
return divEl;
180179
}
181180

182-
export function createFileBox(options = {}) {
183-
const { title, fileName, childs = [], titleHref = "#", fileHref = null, severity = null } = options;
184-
185-
const defaultHrefProperties = { target: "_blank", rel: "noopener noreferrer" };
186-
const fileDomElement = fileHref === null ?
187-
createDOMElement("p", { text: fileName }) :
188-
createDOMElement("a", { text: fileName, attributes: { href: fileHref, ...defaultHrefProperties } });
189-
190-
const boxHeader = createDOMElement("div", {
191-
classList: ["box-header"],
192-
childs: [
193-
...(severity === null ? [] : [
194-
createDOMElement("span", { classList: [severity], text: severity.charAt(0).toUpperCase() })
195-
]),
196-
titleHref === null ?
197-
createDOMElement("p", { text: title, className: "box-title" }) :
198-
createDOMElement("a", {
199-
text: title,
200-
className: "box-title",
201-
attributes: {
202-
href: titleHref, ...defaultHrefProperties
203-
}
204-
}),
205-
createDOMElement("p", {
206-
className: "box-file",
207-
childs: [
208-
createDOMElement("i", { classList: ["icon-docs"] }),
209-
fileDomElement
210-
]
211-
})
212-
]
213-
});
214-
215-
return createDOMElement("div", {
216-
classList: ["box-file-info"],
217-
childs: [
218-
boxHeader,
219-
...childs.filter((element) => element !== null)
220-
]
221-
});
222-
}
223-
224181
export function createLiField(title, value, options = {}) {
225182
const { isLink = false } = options;
226183

@@ -240,42 +197,6 @@ export function createLiField(title, value, options = {}) {
240197
return liElement;
241198
}
242199

243-
export function createExpandableSpan(hideItemsLength, onclick = () => void 0) {
244-
const span = createDOMElement("span", {
245-
classList: ["expandable"],
246-
attributes: { "data-value": "closed" },
247-
childs: [
248-
createDOMElement("i", { className: "icon-plus-squared-alt" }),
249-
createDOMElement("p", { text: "show more" })
250-
]
251-
});
252-
span.addEventListener("click", function itemListClickAction() {
253-
const isClosed = this.getAttribute("data-value") === "closed";
254-
{
255-
const innerI = this.querySelector("i");
256-
innerI.classList.remove(isClosed ? "icon-plus-squared-alt" : "icon-minus-squared-alt");
257-
innerI.classList.add(isClosed ? "icon-minus-squared-alt" : "icon-plus-squared-alt");
258-
}
259-
this.querySelector("p").textContent = isClosed ? "show less" : "show more";
260-
this.setAttribute("data-value", isClosed ? "opened" : "closed");
261-
262-
for (let id = 0; id < this.parentNode.childNodes.length; id++) {
263-
const node = this.parentNode.childNodes[id];
264-
if (node !== this) {
265-
if (isClosed) {
266-
node.classList.remove("hidden");
267-
}
268-
else if (id >= hideItemsLength) {
269-
node.classList.add("hidden");
270-
}
271-
}
272-
}
273-
onclick(this);
274-
});
275-
276-
return span;
277-
}
278-
279200
export function createItemsList(node, items = [], options = {}) {
280201
const { onclick = null, hideItems = false, hideItemsLength = 5 } = options;
281202

@@ -313,36 +234,36 @@ export function createItemsList(node, items = [], options = {}) {
313234
}
314235

315236
export function copyToClipboard(str) {
316-
const el = document.createElement('textarea'); // Create a <textarea> element
317-
el.value = str; // Set its value to the string that you want copied
318-
el.setAttribute('readonly', ''); // Make it readonly to be tamper-proof
319-
el.style.position = 'absolute';
320-
el.style.left = '-9999px'; // Move outside the screen to make it invisible
321-
document.body.appendChild(el); // Append the <textarea> element to the HTML document
237+
const el = document.createElement("textarea");
238+
el.value = str;
239+
el.setAttribute("readonly", "");
240+
el.style.position = "absolute";
241+
el.style.left = "-9999px";
242+
document.body.appendChild(el);
322243
const selected =
323-
document.getSelection().rangeCount > 0 // Check if there is any content selected previously
324-
? document.getSelection().getRangeAt(0) // Store selection if found
325-
: false; // Mark as false to know no selection existed before
326-
el.select(); // Select the <textarea> content
327-
document.execCommand('copy'); // Copy - only works as a result of a user action (e.g. click events)
328-
document.body.removeChild(el); // Remove the <textarea> element
329-
if (selected) { // If a selection existed before copying
330-
document.getSelection().removeAllRanges(); // Unselect everything on the HTML document
331-
document.getSelection().addRange(selected); // Restore the original selection
244+
document.getSelection().rangeCount > 0
245+
? document.getSelection().getRangeAt(0)
246+
: false;
247+
el.select();
248+
document.execCommand("copy");
249+
document.body.removeChild(el);
250+
if (selected) {
251+
document.getSelection().removeAllRanges();
252+
document.getSelection().addRange(selected);
332253
}
333-
};
254+
}
334255

335256
export function hideOnClickOutside(element, blacklistElements = []) {
336257
const outsideClickListener = (event) => {
337258
if (!element.contains(event.target) && !blacklistElements.includes(event.target)) {
338259
element.classList.add("hidden");
339260
removeClickListener();
340261
}
341-
}
262+
};
342263

343264
const removeClickListener = () => {
344-
document.removeEventListener('click', outsideClickListener);
345-
}
265+
document.removeEventListener("click", outsideClickListener);
266+
};
346267

347-
document.addEventListener('click', outsideClickListener);
268+
document.addEventListener("click", outsideClickListener);
348269
}

public/css/components/package/bundlephobia.css renamed to public/components/bundlephobia/bundlephobia.css

File renamed without changes.

public/js/components/package/bundlephobia.js renamed to public/components/bundlephobia/bundlephobia.js

File renamed without changes.

‎public/components/expandable/expandable.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
span.expandable {
2+
display: flex;
3+
align-items: center !important;
4+
justify-content: center !important;
5+
height: 35px;
6+
font-size: 13px;
7+
font-family: "mononoki";
8+
background: none;
9+
color: #00B0FF;
10+
text-shadow: 1px 1px 1px rgba(20, 20, 20, 0.5);
11+
transition: all 0.2s linear;
12+
margin-top: 5px;
13+
}
14+
15+
span.expandable[data-value="opened"] {
16+
color: #F44336 !important;
17+
}
18+
19+
span.expandable:hover {
20+
cursor: pointer;
21+
}
22+
23+
span.expandable i {
24+
margin-right: 4px;
25+
margin-top: 1px;
26+
}
27+
28+
/**
29+
* CUSTOM CSS
30+
*/
31+
.package-scripts>.expandable {
32+
margin-top: 10px;
33+
}
34+
35+
.home--body .expandable {
36+
text-shadow: none;
37+
font-size: 15px;
38+
color: var(--secondary-darker);
39+
flex-grow: 1;
40+
flex-basis: 100%;
41+
margin-top: 10px;
42+
}

‎public/components/expandable/expandable.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Import Internal Dependencies
2+
import { createDOMElement } from "../../common/utils";
3+
4+
export function createExpandableSpan(
5+
hideItemsLength,
6+
onclick = () => void 0
7+
) {
8+
const span = createDOMElement("span", {
9+
classList: ["expandable"],
10+
attributes: { "data-value": "closed" },
11+
childs: [
12+
createDOMElement("i", { className: "icon-plus-squared-alt" }),
13+
createDOMElement("p", { text: "show more" })
14+
]
15+
});
16+
span.addEventListener("click", function itemListClickAction() {
17+
const isClosed = this.getAttribute("data-value") === "closed";
18+
{
19+
const innerI = this.querySelector("i");
20+
innerI.classList.remove(isClosed ? "icon-plus-squared-alt" : "icon-minus-squared-alt");
21+
innerI.classList.add(isClosed ? "icon-minus-squared-alt" : "icon-plus-squared-alt");
22+
}
23+
this.querySelector("p").textContent = isClosed ? "show less" : "show more";
24+
this.setAttribute("data-value", isClosed ? "opened" : "closed");
25+
26+
for (let id = 0; id < this.parentNode.childNodes.length; id++) {
27+
const node = this.parentNode.childNodes[id];
28+
if (node !== this) {
29+
if (isClosed) {
30+
node.classList.remove("hidden");
31+
}
32+
else if (id >= hideItemsLength) {
33+
node.classList.add("hidden");
34+
}
35+
}
36+
}
37+
onclick(this);
38+
});
39+
40+
return span;
41+
}

0 commit comments

Comments
 (0)