feat: favicon with number of used items

This commit is contained in:
Bruno F. Fontes 2022-11-16 19:22:31 -03:00
parent 58fe265821
commit 3d5e484364
Signed by: brunofontes
GPG Key ID: 4DAA810052CF68B6
6 changed files with 29 additions and 0 deletions

View File

BIN
public/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
public/favicon2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

25
resources/js/app.js vendored
View File

@ -20,3 +20,28 @@ import './bootstrap';
// const app = new Vue({
// el: '#app'
// });
function setFaviconNumber(number) {
var canvas = document.createElement('canvas'),
ctx,
img = document.createElement('img'),
link = document.getElementById('favicon').cloneNode(true);
if (canvas.getContext) {
canvas.height = canvas.width = 48; // set the size
ctx = canvas.getContext('2d');
img.onload = function () { // once the image has loaded
ctx.drawImage(this, 0, 0);
ctx.font = 'bold 35px "helvetica", sans-serif';
ctx.fillStyle = '#ffff66';
ctx.fillText(number, 3, 25);
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);
};
img.src = 'favicon.png';
}
};
usedItems = document.getElementById("usedItems").innerText;
setFaviconNumber(usedItems);

View File

@ -19,9 +19,12 @@
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link id="favicon" rel="icon" type="image/png" href="favicon.png" />
</head>
<body>
<div hidden id="usedItems">{{ isset($usedItems) && $usedItems > 0 ? $usedItems : '' }}</div>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Share It</title>
<link id="favicon" rel="icon" type="image/png" href="favicon.png" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">