forked from wesbos/hot-tips
-
Notifications
You must be signed in to change notification settings - Fork 0
/
render-favicon.js
50 lines (45 loc) · 1.45 KB
/
render-favicon.js
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
const colours = {
progress: '#ffc600',
live: '#38e88a',
failed: '#FF0000',
canceled: '#cacaca',
};
function getDeployStatus(text) {
console.log('Searching for status in', text);
return Object.keys(colours).find((key) => text.includes(key));
}
async function loadImage(img, src) {
return new Promise((resolve, reject) => {
img.src = '/favicon.ico';
img.onload = () => resolve(img);
img.onerror = reject;
});
}
async function favIcon() {
const deployHeader = document.querySelector('.deploy-header');
if (!deployHeader) return;
const deployStatus = getDeployStatus(deployHeader.innerText.toLowerCase());
console.log({ deployStatus });
// create a new favicon with canvas
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const SIZE = 32;
const CIRCLE_SIZE = 6;
canvas.width = SIZE;
canvas.height = SIZE;
// Draw old favicon
const favicon = document.querySelector('link[rel*="icon"]');
const oldFavicon = new Image();
await loadImage(oldFavicon, '/favicon.ico');
ctx.drawImage(oldFavicon, 0, 0, SIZE, SIZE);
// draw a circle
ctx.beginPath();
ctx.arc(SIZE - CIRCLE_SIZE, SIZE - CIRCLE_SIZE, CIRCLE_SIZE, 0, 2 * Math.PI);
console.log(deployStatus);
ctx.fillStyle = colours[deployStatus];
ctx.fill();
// create a new favicon element
favicon.setAttribute('type', 'image/png');
favicon.setAttribute('href', canvas.toDataURL('image/png'));
}
setInterval(favIcon, 1000);