diff --git a/views/index.html b/views/index.html
index 616e4d3..b723670 100644
--- a/views/index.html
+++ b/views/index.html
@@ -15,7 +15,8 @@
}
-
+
+
@@ -184,6 +185,7 @@
methods: {
setPageTitle() {
document.title = `Gopherss (${this.unread})`;
+ setFavicon(this.unread);
},
setBusy(isBusy) {
this.isBusy = isBusy;
diff --git a/views/static/favicon.js b/views/static/favicon.js
new file mode 100644
index 0000000..2a06cd7
--- /dev/null
+++ b/views/static/favicon.js
@@ -0,0 +1,49 @@
+const link = document.querySelector('link[rel="icon"]');
+function setFavicon(count) {
+ const padding=100/16;
+ const svg = document. createElementNS("http://www.w3.org/2000/svg", "svg");
+ svg.setAttribute('viewBox', '0 0 100 100');
+ svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+ const t1 = document. createElementNS("http://www.w3.org/2000/svg", "text");
+ t1.setAttribute('y', '.9em');
+ t1.setAttribute('font-size', '90');
+ if (count == 0) {
+ t1.textContent = 'ðŸ“';
+ } else {
+ t1.textContent = '📬';
+ }
+ svg.appendChild(t1);
+
+ if (count) {
+ const t2 = document. createElementNS("http://www.w3.org/2000/svg", "text");
+ t2.setAttribute('x', 100 - padding);
+ t2.setAttribute('y', 100 - padding);
+ t2.setAttribute('font-size', '60');
+ t2.setAttribute('text-anchor', 'end');
+ t2.setAttribute('alignment-baseline', 'text-bottom');
+ t2.setAttribute('fill', 'white');
+ t2.style.font = 'sans';
+ t2.style.fontWeight = '400';
+ t2.textContent = count;
+ svg.appendChild(t2);
+
+ // measure the text
+ document.body.appendChild(svg);
+ const rect = t2.getBBox();
+ document.body.removeChild(svg);
+
+ const r1 = document. createElementNS("http://www.w3.org/2000/svg", "rect");
+ r1.setAttribute('x', rect.x);
+ r1.setAttribute('y', rect.y);
+ r1.setAttribute('width', rect.width + padding);
+ r1.setAttribute('height', rect.height + padding);
+ r1.setAttribute('rx', padding);
+ r1.setAttribute('ry', padding);
+ r1.style.fill = 'red';
+ svg.appendChild(r1);
+ svg.appendChild(t2);
+ }
+
+ link.href='data:image/svg+xml,' + svg.outerHTML.replace(/"/ig, '%22');
+}
\ No newline at end of file