Skip to content

Commit 6aac935

Browse files
committed
delta2
1 parent 3b22481 commit 6aac935

1,679 files changed

Lines changed: 12272 additions & 332 deletions

File tree

Some content is hidden

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

.eslintrc.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ module.exports = {
22
"env": {
33
"browser": true,
44
"commonjs": true,
5-
"es2021": true,
5+
"es2022": true,
66
"node": true
77
},
88
"extends": [
99
],
1010
"parserOptions": {
11-
"ecmaVersion": 12
11+
"ecmaVersion": 13
1212
},
1313
"plugins": [
1414
],

CHANGELOG.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# stack-analyze-delta
2+
3+
this project is oriented to casual public and demostration the new generation tools and exclusive tools know as delta tools
4+
5+
## 1.0.0
6+
7+
fisrt delta version for stack-analyze npm 1.1.0
8+
9+
### generation tools
10+
- tech-stack from npm version (1.0.4 - 1.0.5)
11+
- hardware-information from npm version 1.1.0
12+
13+
### delta tools
14+
- cdnjs services
15+
- lyrics finder
16+
17+
### visual tecnologies
18+
1. vue js (js framework for spa)
19+
2. bulma (framework css)
20+
21+
## 2.0.0
22+
23+
this version uses a framework of css and web components that was developed especially for version 2.
24+
25+
change bulma and vue in plain css and web components for its easy migration and better js knowledge there will also be the same version for the previous technologies.
26+
27+
### generation tool
28+
- password generator from npm version 1.2.0
29+
30+
### delta tool
31+
- digimon card

app/app.js

Lines changed: 0 additions & 39 deletions
This file was deleted.

app/cdn-services/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>cdnjs services</title>
7+
<link rel="stylesheet" href="../css/styles.css">
8+
<link rel="stylesheet" href="main.css">
9+
</head>
10+
11+
<body>
12+
<delta-navbar></delta-navbar>
13+
<main>
14+
<form id="search-form" class="form glass">
15+
<fieldset class="input-field">
16+
<input id="search-tech" class="input-field-text" type="search" placeholder="search a js or css tech">
17+
</fieldset>
18+
<fieldset class="input-field">
19+
<button id="btn" class="btn" type="submit">
20+
search tech
21+
</button>
22+
</fieldset>
23+
</form>
24+
<section class="container glass">
25+
<table class="table">
26+
<thead class="table-head">
27+
<tr>
28+
<th>#</th>
29+
<th>tech name</th>
30+
<th>version</th>
31+
<th>copy link</th>
32+
</tr>
33+
</thead>
34+
<tbody id="tech-list" class="table-body"></tbody>
35+
</table>
36+
</section>
37+
</main>
38+
<script src="renderer.js"></script>
39+
</body>
40+
41+
</html>

app/cdn-services/main.css

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.btn-container {
2+
text-align: center;
3+
}
4+
5+
.btn-copy {
6+
all: unset;
7+
cursor: pointer;
8+
height: 2rem;
9+
font-size: 2em;
10+
}
11+
12+
.container {
13+
overflow-y: auto;
14+
height: 50vh;
15+
margin-top: 10px;
16+
margin-inline: auto;
17+
width: 80vw;
18+
}
19+
20+
.table {
21+
table-layout: fixed;
22+
width: 100%;
23+
}
24+
25+
.table-head {
26+
background-color: var(--dark);
27+
box-shadow: inset 0px -1px 0px #eee,
28+
0px 5px 5px -5px rgba(0, 0, 0, .1);
29+
position: sticky;
30+
top: 0;
31+
padding-bottom: 10px;
32+
}
33+
34+
.table-body tr:nth-child(even) {
35+
background-color: var(--dark);
36+
}
37+
38+
td, th {
39+
text-overflow: ellipsis;
40+
padding: 6px;
41+
}

app/cdn-services/renderer.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
// module
2+
const { ipcRenderer } = require('electron');
3+
const axios = require('axios');
4+
const alertMsg = require('../components/ui/alert');
5+
6+
// DOM element
7+
const techList = document.getElementById('tech-list');
8+
const searchForm = document.getElementById('search-form');
9+
const searchInput = document.getElementById('search-tech');
10+
11+
// init ajax function
12+
const libraryList = async () => {
13+
// clear before results
14+
techList.innerHTML = '';
15+
16+
try {
17+
const { data } = await axios.get('https://api.cdnjs.com/libraries', {
18+
params: {
19+
search: searchInput.value,
20+
fields: 'version'
21+
}
22+
});
23+
24+
data.results.forEach((library, i) => {
25+
26+
// copy link button
27+
const linkButton = document.createElement('button');
28+
linkButton.classList.add('btn-copy');
29+
linkButton.textContent = '📋';
30+
31+
// click event
32+
linkButton.addEventListener('click', async () => {
33+
await navigator.clipboard.writeText(library.latest);
34+
alertMsg('Copied', 'alert-info');
35+
});
36+
37+
// row and field elements
38+
const techRow = document.createElement('tr');
39+
40+
const numberField = document.createElement('td');
41+
numberField.textContent = i + 1;
42+
43+
const nameField = document.createElement('td');
44+
nameField.textContent = library.name;
45+
46+
const versionField = document.createElement('td');
47+
versionField.textContent = library.version;
48+
49+
const copyLinkField = document.createElement('td');
50+
copyLinkField.classList.add('btn-container');
51+
copyLinkField.appendChild(linkButton);
52+
53+
// append fields
54+
techRow.append(numberField, nameField, versionField, copyLinkField);
55+
56+
techList.append(techRow);
57+
});
58+
} catch(err) {
59+
alertMsg(err.message, 'alert-danger');
60+
}
61+
};
62+
63+
// event key
64+
searchForm.addEventListener('submit', e => {
65+
e.preventDefault();
66+
67+
searchInput.value !== ''
68+
? libraryList()
69+
: alertMsg('this field is required', 'alert-info');
70+
71+
searchForm.reset();
72+
});
73+
74+
ipcRenderer.on('clear-results', () => {
75+
techList.innerHTML = '';
76+
});
77+
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
const { bios } = require('systeminformation');
2+
3+
class BiosInfo extends HTMLElement {
4+
constructor() {
5+
super();
6+
}
7+
8+
async connectedCallback() {
9+
// shadow root
10+
const shadowRoot = this.attachShadow({ mode: 'closed' });
11+
12+
// styles
13+
const styles = document.createElement('style');
14+
15+
styles.textContent = `
16+
.card {
17+
background-color: rgba(255, 0, 255, 0.18);
18+
box-shadow: 0 8px 32px 0 rgba( 255, 255, 255, 0.27 );
19+
backdrop-filter: blur(20px);
20+
border: 1px solid rgba( 255, 255, 255, 0.18 );
21+
border-radius: 20px;
22+
width: 80%;
23+
max-width: 100%;
24+
}
25+
26+
.card-title {
27+
display: block;
28+
font-weight: bold;
29+
padding-block: 5px;
30+
text-align: center;
31+
text-transform: capitalize;
32+
}
33+
34+
.list {
35+
list-style: none;
36+
}
37+
`;
38+
39+
// card
40+
const card = document.createElement('section');
41+
card.classList.add('card');
42+
43+
// card title
44+
const cardTitle = document.createElement('strong');
45+
cardTitle.textContent = 'bios';
46+
cardTitle.classList.add('card-title');
47+
48+
// list
49+
const list = document.createElement('ul');
50+
list.classList.add('list');
51+
52+
try {
53+
const {
54+
releaseDate,
55+
vendor,
56+
revision,
57+
version
58+
} = await bios();
59+
60+
const infoList = [
61+
{ name: 'release date', type: releaseDate },
62+
{ name: 'vendor', type: vendor },
63+
{ name: 'revision', type: revision },
64+
{ name: 'version', type: version },
65+
];
66+
67+
infoList.forEach(({name, type}) => {
68+
const item = document.createElement('li');
69+
item.textContent = `${name}: ${type}`;
70+
71+
list.append(item);
72+
});
73+
74+
card.append(cardTitle, list);
75+
76+
shadowRoot.append(styles, card);
77+
} catch (err) {
78+
shadowRoot.textContent = err.message;
79+
}
80+
}
81+
}
82+
83+
customElements.define('bios-info', BiosInfo);

0 commit comments

Comments
 (0)