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>,
);