forked from franzenzenhofer/lighthouse-script
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex-utils.mjs
119 lines (106 loc) · 3.51 KB
/
index-utils.mjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import fs from 'fs/promises';
export async function readPastRunsFile(file) {
try {
const content = await fs.readFile(file, 'utf-8');
return JSON.parse(content);
} catch (e) {
if (e.code === 'ENOENT') {
return [];
} else {
throw e;
}
}
}
export async function writePastRunsFile(file, runs) {
await fs.writeFile(file, JSON.stringify(runs, null, 2));
}
function getRelativeDate(timestamp) {
const now = new Date();
const date = new Date(convertTimestamp(timestamp));
const differenceInSeconds = (now - date) / 1000;
if (differenceInSeconds < 60) {
return 'Just now';
}
const minutes = Math.floor(differenceInSeconds / 60);
if (minutes < 60) {
return `${minutes} minutes ago`;
}
const hours = Math.floor(minutes / 60);
if (hours < 24) {
return `${hours} hours ago`;
}
const days = Math.floor(hours / 24);
if (days === 1) {
return 'Yesterday';
}
if (days < 7) {
return `${days} days ago`;
}
const weeks = Math.floor(days / 7);
if (weeks === 1) {
return 'One week ago';
}
return `${weeks} weeks ago`;
}
function convertTimestamp(timestamp) {
const datePart = timestamp.slice(0, 10);
const timePart = timestamp.slice(11).replace(/-/g, ':');
return `${datePart} ${timePart}`;
}
//this funtion is used to generate the index.html file
//it works by taking the runs array and mapping over it
export function generateIndexHTML(runs) {
const listItems = runs
.filter(run => run && run.timestamp)
.map((run, index) => {
const timestamp = run.timestamp;
const date = timestamp.slice(0, 7);
const fileName = `lighthouse-results-${timestamp}.html`;
const readableDate = new Date(convertTimestamp(timestamp)).toLocaleString();
const testsCount = run.testsCount ? `Tests: ${run.testsCount}` : '';
const uniqueDomains = run.uniqueDomains ? `Domains: ${run.uniqueDomains.join(', ')}` : '';
const errorIndicator = run.errorCount ? ` (Error(s): ${run.errorCount})` : '';
const isNew = index === 0 && Date.now() - new Date(convertTimestamp(timestamp)) < 15 * 60 * 1000;
const newEmoji = isNew ? ' 🆕 ' : '';
const newClass = isNew ? ' new-run' : '';
const relativeDate = getRelativeDate(timestamp);
return `
<li class="run${newClass}">
<a href="./${date}/${timestamp}/${fileName}">${readableDate}${errorIndicator}${newEmoji}</a>
<br>
${relativeDate}
<br>
${testsCount}
<br>
${uniqueDomains}
<br>
<button class="download-zip" data-date="${date}" data-timestamp="${timestamp}">Download Zip</button>
</li>
`;
})
.join('');
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Franz Enzenhofers Lighthouse Bulk Testing Tool</title>
<link rel="stylesheet" href="/static/styles.css">
</head>
<body>
<a href="/"><img src='/img/logo.png'></a>
<h1>Franz Enzenhofers Lighthouse Testing Tool</h1>
<pre id="console">Edit URLs or Start Tests
</pre>
<button id="edit-urls">Edit URLs</button>
<button id="rerun-tests">Start Tests</button>
<button id="reload-page" style="display:none;">
Tests are finished, reload page. <span>🔃</span>
</button>
<h2>Past Test Runs</h2>
<ul>${listItems}</ul>
<script src="/static/script.js"></script>
</body>
</html>`;
}