stevekrouse-valwriter_output.web.val.run
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
/** @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>
{`
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;
}
`}
</style>
</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(`&lt;link rel=&quot;icon&quot; href=&quot;https://fav.farm/${emoji}&quot; /&gt;`)} 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(`&lt;link rel=&quot;icon&quot; href=&quot;data:image/svg+xml,&lt;svg xmlns=&apos;http://www.w3.org/2000/svg&apos; width=&apos;48&apos; height=&apos;48&apos; viewBox=&apos;0 0 16 16&apos;&gt;&lt;text x=&apos;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(`a {\n cursor: url('https://fav.farm/πŸ–•') 15 0, auto;\n}`)} 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>
{`
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
alert('Copied to clipboard: ' + text);
}
`}
</script>
</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,
{
"Content-Type": "image/svg+xml",
}
);
});
export default app.fetch;
Only the latest version can be previewed
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
Nobody has commented on this val yet: be the first!
v16
July 15, 2024