import { htmlOfEmoji } from "https://esm.town/v/jdan/htmlOfEmoji";
import { emojiByCodepoints } from "https://esm.town/v/jdan/emojiByCodepoints";
import { emojiByAlias } from "https://esm.town/v/jdan/emojiByAlias";
import { emojiFlagTree } from "https://esm.town/v/jdan/emojiFlagTree";
import { detailsTree } from "https://esm.town/v/jdan/detailsTree";
import { emojiByGroup } from "https://esm.town/v/jdan/emojiByGroup";
export const emojiWeb = async (req: Request) => {
const { Hono } = await import("npm:hono");
const app = new Hono();
app.get("/", (c) => {
const toc = `<ul>
${
Object.keys(emojiByGroup).map((group) =>
`<li><a href="#${group}">${group}</a></li>`
).join("")
}
</ul>`;
const sections = Object.entries(emojiByGroup).map(
([group, emojis]) => {
return `
<h2 id="${group}">${group}</h2>
<ul>
${
emojis.map((emoji) => {
const alias = emoji.aliases[0];
return `
<li>${emoji.emoji} – :<a href="/alias/${alias}">${alias}</a>:</li>
`;
}).join("\n")
}
</ul>
`;
},
).join("\n");
return c.html(`
${toc}
${sections}
`);
});
app.get("/flags", (c) => {
return c.html(
`<style>
body { font-family: monospace }
details > details { margin-left: 24px }
details > div { margin-left: 24px; font-size: 18px }
</style>` +
detailsTree(emojiFlagTree, (emoji) => {
const alias = emoji.aliases[0];
return `<div>${emoji.emoji} – :<a href="/alias/${alias}">${alias}</a>:</div>`;
}),
);
});
app.get("/byAlias", (c) => c.json(emojiByAlias));
app.get("/byCodepoints", (c) => c.json(emojiByCodepoints));
app.get("/alias/:alias", (c) => {
const { alias } = c.req.param();
return c.html(
`<a href="/">home</a>` +
htmlOfEmoji(emojiByAlias[alias]),
);
});
app.get("/codepoints/:codepoints", (c) => {
const { codepoints } = c.req.param();
return c.html(
`<a href="/">home</a>` +
htmlOfEmoji(
emojiByCodepoints[codepoints],
),
);
});
return app.fetch(req);
};