Dr. Luvstruk

if you ever wanted to :awoo: in chosts, you're in luck: now you can!

i ported the @mutant standard emoji set by @dzuk to cohost with a userscript + a website!

features:

• it supports the full mutant standard emoji set
• it supports all variations, and has a picker for them
• you can make emojis in the default size or bigger
• it's fully accessible (automatically sets alt text & title based on emoji metadata, eg alt="paw hand (tan fur colour)" title="paw hand (tan fur colour)")
• it supports cohost posts as well as comments, and autodetects comment sections
• you can even use it in other places that support markdown/HTML
• everyone can see them, even if they do not have the script installed
• it has a nice UI for picking emojis

you can use it at https://mutant.us.to (no userscript required), and install the userscript (what is that?/how do i install that?) from there, and you can open the emoji picker by pressing CTRL+. (and Control+. on macOS) or the icon next to the old emoji button! and the source code is available on github (but it is a bit messy lol)

EDIT: i forgot to add an update URL, so if you installed it before i edited this in: reinstall the userscript you will get updates now (and there will be a few)

EDIT 2: i released a new update with a bunch of features! https://cohost.org/lexi/post/474136-b-style-font-size

a few technical details for nerds:

turns out that writing an emoji picker as an userscript is pretty hard! the svelte code (which is completely reactive, making the whole code a lot simpler) is already pretty big:

and i initially tried to make that HTML structure with js, but turns out that writing a DOM that big with js only is awful, so i knew i had to use some form of html to js compiler, and if im already going down that path i can embed a whole framework. and turns out that that is surprisingly easy! i used svelte, which gives you an index.html, and a CSS as well as a JS build file. so i wrote a small compiler that targets a svelte app into an existing react app in an userscript. it essentially boils down to a bundler, and a CSS to JS compiler (which creates a <style> tag and injects that) and a simple custom svelte loader, which makes an element in the react app and hooks svelte into that. and i bundled in the GM_fetch library, because if you want to make a cross-origin request from an userscript you need to use XMLHttpRequest otherwise and i am Not doing that. also, window.onload is called twice for some reason so i made a small check to see if its already running. idk why it does that, but it works lol

also, if you inspect the source code on mutant.us.to, you'll notice that it's just an iframe, which may seem dumb, but it has a reason: future-proofing. the emojis are hosted on github pages, and that wont go down super easily, but i wanted a domain that won't go down if i forget to renew it which is easy to remember (not like the gh pages one), so i use afraid.org which is super reliable, but that doesn't support CNAME entries, so i host an iframe on my server so that even if that goes down, the emojis themselves still work, and it just redirects to github pages. should be pretty futureproof!