Currently Hosted on: https://discord-user-lookup.herokuapp.com/
This is the Discord User Resolver, a web component that you can place anywhere on your HTML page to resolve a Discord UserID into their user tag.
Why? Because people change their usernames (God knows I do), and updating a stating website whenever that happens is annoying. I did this for me and now you get to enjoy it too!
To use this, all you need is 2 lines of code, that's it. First, in your <head> tag, add the following:
<script type="module" crossorigin src="https://discord-user-lookup.herokuapp.com/assets/index.js"></script>And then, anywhere on your page, add the following to display the user#discriminator output (also known as a "tag"):
<discord-user type="text" user="id:139412744439988224"></discord-user>Replace 139412744439988224 with your own Discord User ID (leave the id: there, it's important!) and you're good to go!
You can have as many as you want in the page, though loading times may vary depending on current server loads.
Is this black magic? Of course not, it's just custom web components being used efficiently!
What's in store for the future? More display styles (with/without avatars, with a tooltip, etc). Perhaps more tools such as server status/name, and such? I'm not sure yet.
This service is based on one back-end and one front-end part working together.
In the backend folder, you'll find a very small express server (yes I know there are faster solutions, I might rewrite this later) providing a static file output as well as an example html file.
The server also runs a small discord.js bot, which requires a Token to execute. See this page for information on how to create that bot and get the token.
Once the token is obtained, create a .env file and add in DISCORD_TOKEN=TheT0KenHeRe as its only line.
To start the whole thing, simply run yarn (or npm ci) then node .
Note that for this to work the server must be accessible by the front-end, which usually means it has to be hosted. For development, using localhost can suffice.
The frontend is based off solid-element, itself wrapping around solid.js. However, the true output and magic of this front-end is that anyone can simply use the javascript output file to use the custom web component generated by the build system.
In the frontend folder you'll find the source to build the front-end. The src/index.tsx is the magic here, producing the web component itself.
To produce the build output, run yarn (or npm ci) and then yarn build (or npm run build).
Then, copy over the ./dist folder content to the ./static folder in the back-end, overwriting any files there.
A real build system for this is upcoming, as this is manual and annoying.
Currently I am not accepting contributions from the general public. If you want to contribute to this, please contact me on Discord (my username is displayed on https://discord-user-lookup.herokuapp.com/ , because my readme can't support web components, oops!), or join my main server on https://discord.evie.codes/.