jdan-emojiexploder.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
97
98
99
100
/** @jsxImportSource npm:hono@3/jsx */
import { codepoints } from "https://esm.town/v/jdan/codepoints";
import { emojiByCodepoints } from "https://esm.town/v/jdan/emojiByCodepoints";
import { nameOfCodepoint } from "https://esm.town/v/jdan/nameOfUnicode";
import { Hono } from "npm:hono";
const app = new Hono();
app.get("/", async (c) => {
return c.html(
<div>
<h1>Emoji exploder</h1>
<div>Enter an emoji and see what it's composed of</div>
<form action="/emoji" method="get">
<input type="text" name="emoji" /> <input type="submit" />
</form>
<div>Some cool examples</div>
<ul>
<li>
πŸ˜Άβ€πŸŒ«οΈ –{" "}
<a href="https://jdan-emojiexploder.web.val.run/emoji?emoji=%F0%9F%98%B6%E2%80%8D%F0%9F%8C%AB%EF%B8%8F">
face in clouds
</a>
</li>
<li>
πŸ‘©πŸΌβ€πŸ€β€πŸ‘¨πŸΏ –{" "}
<a href="https://jdan-emojiexploder.web.val.run/emoji?emoji=%F0%9F%91%A9%F0%9F%8F%BC%E2%80%8D%F0%9F%A4%9D%E2%80%8D%F0%9F%91%A8%F0%9F%8F%BF">
Woman and Man Holding Hands: Light Skin Tone, Medium Skin Tone
</a>
</li>
<li>
🏴󠁧󠁒󠁷󠁬󠁳󠁿 –{" "}
<a href="https://jdan-emojiexploder.web.val.run/emoji?emoji=%F0%9F%8F%B4%F3%A0%81%A7%F3%A0%81%A2%F3%A0%81%B7%F3%A0%81%AC%F3%A0%81%B3%F3%A0%81%BF">
flag: Wales
</a>
</li>
<li>
πŸ‘©πŸ»β€β€οΈβ€πŸ’‹β€πŸ‘©πŸ½ –{" "}
<a href="https://jdan-emojiexploder.web.val.run/emoji?emoji=%F0%9F%91%A9%F0%9F%8F%BB%E2%80%8D%E2%9D%A4%EF%B8%8F%E2%80%8D%F0%9F%92%8B%E2%80%8D%F0%9F%91%A9%F0%9F%8F%BD">
Kiss: Woman, Light Skin Tone, Woman, Medium Skin Tone
</a>
</li>
<li>
↔️ –{" "}
<a href="https://jdan-emojiexploder.web.val.run/emoji?emoji=%E2%86%94%EF%B8%8F">
left-right arrow
</a>
</li>
<li>
πŸ‡΅πŸ‡Έ –{" "}
<a href="https://jdan-emojiexploder.web.val.run/emoji?emoji=%F0%9F%87%B5%F0%9F%87%B8">
flag: Palestinian Territories
</a>
</li>
</ul>
<a href="https://www.val.town/v/jdan/emojiExploder">Fork on Val Town</a>
</div>,
);
});
app.get("/emoji", async (c) => {
const emoji = c.req.query("emoji");
const emojiCodepoints = codepoints(emoji);
const byCodepoints = await emojiByCodepoints;
const parts = await Promise.all(emojiCodepoints.map(async (cp) => {
const name = await nameOfCodepoint(cp);
return (
<li>
{cp} {String.fromCodePoint(parseInt(cp, 16))} {name}
</li>
);
}));
return c.html(
<div>
<form action="/emoji" method="get">
<input type="text" name="emoji" /> <input type="submit" />
</form>
<h1>{emoji}</h1>
<div>
Description: <strong>{byCodepoints[emojiCodepoints.join("-")]?.description}</strong>
</div>
<div>
Codepoints: <strong>{emojiCodepoints.length}</strong>
</div>
<div>{codepoints(emoji).join("-")}</div>
<ol>
{parts}
</ol>
<a href="https://www.val.town/v/jdan/emojiExploder">Fork on Val Town</a>
</div>,
);
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Comments
3
stevekrouse avatar

I would send a PR but my version comments out a line of code that works on your version https://www.val.town/v/stevekrouse/emojiExploder#L91

jdan avatar

Any tips for me to fix it to make it PR-able? You are correct that my blob storage is load-bearing!

stevekrouse avatar
stevekrouse…(Edited …)

Two ideas that basically amount to the same thing:

  1. Instead of getting it from your blob storage, make it a fetch that gets it from a public source like I do here https://www.val.town/v/stevekrouse/zwjEmoji#L6

  2. If there is no public endpoint, expose an endpoint that let's people get only that route from your blob storage and then use that url to get the data in your function so it's accessible to others

v34
June 15, 2024