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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource npm:hono@3/jsx */
import { Hono } from "npm:hono@3";
const app = new Hono();
app.get("/", (c) => {
return c.html(
<html lang="en">
<head>
<title>fav.farm</title>
<link rel="icon" href="/🚜" />
<style
dangerouslySetInnerHTML={{
__html: `
body {
font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; font-size: 20px; text-align: center;
cursor: url('/🖕?svg') 15 0, auto;
min-height: 100vh;
}
code {
background: white;
transition: all 0.2s;
--scale: 1;
--rotate: 0;
transform: scale(var(--scale)) rotate(var(--rotate));
display: inline-block;
}
code.hl {
background: #f9f9ae;
--rotate: -1deg;
--scale: 1.1;
}
p {
max-width: 600px;
margin: 0 auto;
line-height: 2;
margin-bottom: 20px;
}
p.small {
font-size: 13px;
}
`,
}}
/>
</head>
<body>
<h1>I bet you need a quick favicon</h1>
<p>
This startup returns an emoji inside an SVG<br />so you can pop that sucker into a favicon.
</p>
<p>
Use it like <a href="/💩">/💩</a>
</p>
{["💩", "🌶", "🔥", "🥰", "🖥", "👓"].map((emoji) => (
<p>
<code onClick="copyToClipboard(this)" tabIndex="0">
{`<link rel="icon" href="https://fav.farm/${emoji}" />`}
</code>
</p>
))}
<br />
<p>It works by serving up this SVG code:</p>
<p class="small">
<code onClick="copyToClipboard(this)" tabIndex="0">
{`<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 16 16'><text x='0' y='14'>😽</text></svg>" />`}
</code>
</p>
<p>You can use it with CSS Cursors too!</p>
<code style="text-align:left;" onClick="copyToClipboard(this)" tabIndex="0">
{`a {
cursor: url('https://fav.farm/🖕') 15 0, auto;
}`}
</code>
<br />
<p>
<small>
Made with 🖤 by <a href="https://twitter.com/wesbos">@wesbos</a>
</small>
</p>
<script
dangerouslySetInnerHTML={{
__html: `
function copyToClipboard(codeEl) {
navigator.clipboard.writeText(codeEl.innerText);
codeEl.classList.add('hl');
setTimeout(() => codeEl.classList.remove('hl'), 200);
}
`,
}}
/>
</body>
</html>,
);
});
app.get("/:emoji", (c) => {
const emoji = c.req.param("emoji");
return c.text(
`<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 16 16'><text x='0' y='14'>${emoji}</text></svg>`,
200,