AverageMarcus/gopherss
1
0
Fork 0
Code Pull Requests Releases Activity

Merge branch 'master' of https://git.cluster.fun/AverageMarcus/gopherss

Browse Source
This commit is contained in:
Marcus Noble 2021-03-03 19:55:17 +00:00
commit 761b4f05fd
2 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
views/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gopherss</title> <title>Gopherss</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22></text><text text-anchor=%22end%22 y=%221.9em%22 x=%221.9em%22 font-size=%2250%22>10</text></svg>">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<!-- <link rel="apple-touch-icon" href="static/icon.png"> --> <!-- <link rel="apple-touch-icon" href="static/icon.png"> -->
@ -16,6 +17,7 @@
</script> </script>
<script src="/static/feed-item.js" defer></script> <script src="/static/feed-item.js" defer></script>
<script src="/static/favicon.js"></script>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script> <script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
@ -184,6 +186,7 @@
methods: { methods: {
setPageTitle() { setPageTitle() {
document.title = `Gopherss (${this.unread})`; document.title = `Gopherss (${this.unread})`;
setFavicon(this.unread);
}, },
setBusy(isBusy) { setBusy(isBusy) {
this.isBusy = isBusy; this.isBusy = isBusy;

49
views/static/favicon.js Normal file
View File

@ -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');
}