| 21 | } |
| 22 | |
| 23 | function useWickedFavIcon() { |
| 24 | const letters = [...'/USES!💩']; |
| 25 | const [index, setIndex] = useState(0); |
| 26 | const canvasRef = useRef(0); |
| 27 | useInterval(() => { |
| 28 | setIndex(index >= letters.length - 1 ? 0 : index + 1); |
| 29 | const letter = letters[index]; |
| 30 | const canvas = canvasRef.current; |
| 31 | const ctx = canvas.getContext('2d'); |
| 32 | ctx.fillStyle = '#203447'; |
| 33 | ctx.fillRect(0, 0, canvas.width, canvas.height); |
| 34 | ctx.fillStyle = '#ffc600'; |
| 35 | ctx.font = `310px monospace`; |
| 36 | ctx.fillText(letter, 10, canvas.height - 10); |
| 37 | const data = canvas.toDataURL('image/png'); |
| 38 | |
| 39 | const link = document.querySelector("link[rel*='icon']"); |
| 40 | link.type = 'image/x-icon'; |
| 41 | link.href = data; |
| 42 | }, 350); |
| 43 | return { letter: letters[index], index, canvasRef }; |
| 44 | } |
| 45 | |
| 46 | export default function FavIcon() { |
| 47 | const { /* letter, index, */ canvasRef } = useWickedFavIcon(); |