|
| 1 | +<h1 style="text-align: center">Discord Markdown badge</h1> |
| 2 | + |
| 3 | +A customizable badge that shows your Discord account, a server invite, or a bot account. |
| 4 | + |
| 5 | +| [User account](#user-account) | [Server invite](#server-invite) | [Bot account](#bot-account) | |
| 6 | +|:-:|:-:|:-:| |
| 7 | +|  | [](https://discord.gg/zkspfFwqDg) |  | |
| 8 | + |
| 9 | +## Set up |
| 10 | + |
| 11 | +The set up process will vary depending on the use: |
| 12 | + |
| 13 | +## Download! |
| 14 | +🚀 Install --> [Releases]() |
| 15 | + |
| 16 | +### User account  |
| 17 | + |
| 18 | +1. Join the [Discord server](https://discord.gg/zkspfFwqDg) (required, as that's where the bot gets your presence information from) |
| 19 | +2. Your shield will become available at `https://dcbadge.vercel.app/api/shield/USERID` |
| 20 | +<br>(replace `USERID` with [your Discord user ID](https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-)) |
| 21 | + |
| 22 | +To embed it in the readme, insert it like this: |
| 23 | +<br>`` |
| 24 | + |
| 25 | +### Server invite [](https://discord.gg/zkspfFwqDg) |
| 26 | + |
| 27 | +1. Create an invite for your server; make sure to disable expiration! |
| 28 | +2. Your shield will become available at `https://dcbadge.vercel.app/api/server/INVITEID` |
| 29 | +<br>(replace `INVITEID` with the invite id (`https://discord.gg/INVITEID`) |
| 30 | + |
| 31 | +To embed it in the readme, insert it like this: |
| 32 | +<br>`[](https://discord.gg/INVITEID)` |
| 33 | + |
| 34 | +### Bot account  |
| 35 | + |
| 36 | +1. DM me () your bot's invite link |
| 37 | +2. Wait for me to read the DM (it might take some time as it's a manual process) |
| 38 | +3. Your shield will become available at `https://dcbadge.vercel.app/api/shield/BOTID?bot=true` |
| 39 | +<br>(replace `BOTID` with [your Discord bot's user ID](https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-)) |
| 40 | + |
| 41 | +To embed it in the readme, insert it like this: |
| 42 | +<br>`` |
| 43 | + |
| 44 | +## Styling |
| 45 | + |
| 46 | +You can chain parameters by connecting them with `&` (e.g. `?style=flat&theme=clean&compact=true`). |
| 47 | + |
| 48 | +### `style` |
| 49 | + |
| 50 | +This uses [shields.io](https://shields.io) to generate the badge, so you can choose one of the styles from there by appending `?style=` to the url. |
| 51 | + |
| 52 | +| Badge | Style | Query | |
| 53 | +| :----------------------------------------------------------------------------------------------------------- | :------------ | :------------------- | |
| 54 | +|  | flat | `?style=flat` | |
| 55 | +|  | flat-square | `?style=flat-square` | |
| 56 | +|  | for-the-badge | None (default) | |
| 57 | +|  | plastic | `?style=plastic` | |
| 58 | +|  | social | `?style=social` | |
| 59 | + |
| 60 | +### `theme` |
| 61 | + |
| 62 | +You can also use the `theme` query option to change the colors of the shield |
| 63 | + |
| 64 | +In the following themes the green color gets replaced by the color corresponding to your presence (green, yellow, red, and grey, for online, idle, do not disturb, and offline, respectively) |
| 65 | +| Badge | Theme | Query | |
| 66 | +| :------------------------------------------------------------------------------------------------------------ | :--------------- | :------------------------ | |
| 67 | +|  | Default | None (default) | |
| 68 | +|  | Default inverted | `?theme=default-inverted` | |
| 69 | +|  | Clean | `?theme=clean` | |
| 70 | +|  | Clean inverted | `?theme=clean-inverted` | |
| 71 | +|  | Discord | `?theme=discord` | |
| 72 | +|  | Discord inverted | `?theme=discord-inverted` | |
| 73 | +|  | Full presence | `?theme=full-presence` | |
| 74 | +|  | Gray | `?theme=gray` | |
| 75 | +|  | Blurple | `?theme=blurple` | |
| 76 | + |
| 77 | +Note: the `theme` option will not work with the social `style`. |
| 78 | + |
| 79 | +### `compact` |
| 80 | + |
| 81 | +Makes the badge more compact, but loses the online status text/server member count |
| 82 | + |
| 83 | +| Badge | Query | |
| 84 | +| :-------------------------------------------------------------------------------------------------- | :-------------- | |
| 85 | +|  | `?compact=true` | |
| 86 | + |
| 87 | +### `logoColor` |
| 88 | + |
| 89 | +You can pass a color for the logo (the examples below use `&theme=default-inverted` to make the change more evident) |
| 90 | + |
| 91 | +| Badge | Query | Description | |
| 92 | +| :-------------------------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------------------------ | |
| 93 | +|  | `?logoColor=presence` | Changes the color of the logo according to the presence | |
| 94 | +|  | `?logoColor=pink` | Supported colors [here](https://shields.io/#colors) | |
| 95 | +|  | `?logoColor=ff6b6b` | Any hex code, without the `#` | |
| 96 | + |
| 97 | +## I've added this to my GitHub bio and it doesn't work! |
| 98 | + |
| 99 | +This **won't** work in bios, only in profile readmes (and any other part of GitHub that supports markdown). |
| 100 | +[Here](https://mansik16.medium.com/adding-a-readme-to-your-github-profile-2ec88bfedeb)'s some info on what a profile readme is and how to set it up. |
| 101 | + |
| 102 | +For any questions feel free to contact me ( , [[email protected]](mailto:[email protected])) |
| 103 | + |
| 104 | +## HTML |
| 105 | + |
| 106 | +The API returns an SVG image, so you can embed it in your html just like you would with any other svg. |
| 107 | + |
| 108 | +```html |
| 109 | +<img src="https://dcbadge.vercel.app/api/shield/USERID" /> |
| 110 | +``` |
0 commit comments