{"id":13559361,"url":"https://github.com/Danktuary/wc-discord-message","last_synced_at":"2025-04-03T14:31:59.439Z","repository":{"id":43913650,"uuid":"231967615","full_name":"Danktuary/wc-discord-message","owner":"Danktuary","description":"Web components to easily build and display fake Discord messages on your webpages.","archived":false,"fork":false,"pushed_at":"2021-06-17T10:35:50.000Z","size":121,"stargazers_count":34,"open_issues_count":2,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-19T19:21:25.355Z","etag":null,"topics":["discord","hacktoberfest","stencil","web-components"],"latest_commit_sha":null,"homepage":"https://wc-discord-message.netlify.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Danktuary.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-05T19:49:36.000Z","updated_at":"2024-08-21T15:49:14.000Z","dependencies_parsed_at":"2022-09-22T08:07:14.511Z","dependency_job_id":null,"html_url":"https://github.com/Danktuary/wc-discord-message","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Danktuary%2Fwc-discord-message","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Danktuary%2Fwc-discord-message/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Danktuary%2Fwc-discord-message/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Danktuary%2Fwc-discord-message/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Danktuary","download_url":"https://codeload.github.com/Danktuary/wc-discord-message/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247018557,"owners_count":20870019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["discord","hacktoberfest","stencil","web-components"],"created_at":"2024-08-01T13:00:19.933Z","updated_at":"2025-04-03T14:31:59.142Z","avatar_url":"https://github.com/Danktuary.png","language":"TypeScript","funding_links":[],"categories":["List of Awesome Components Made using StencilJS"],"sub_categories":["Component Libraries"],"readme":"# WC Discord Message\n\n![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square)\n\nWeb components to easily build and display fake Discord messages on your webpages.\n\nIf you use Vue in your project, you should use [vue-discord-message](https://vue-discord-message.netlify.app/).\nIf you use React in your project, you should use [react-discord-message](https://github.com/Danktuary/react-discord-message).\n\n## Features\n\n* Design modeled after [Discord](https://discordapp.com/) itself\n* Comfy and compact mode support\n* Dark and light themes support\n* Set the message author's username, avatar (use defaults or provide your own), role color, and \"bot\" tag status\n* Display fake user, role, and channel mentions\n* Complete embed support\n* Simple syntax!\n\n## Preview\n\n![wc-discord-message preview](https://i.imgur.com/xHL8Xyx.png)\n\n```html\n\u003cdiscord-messages\u003e\n\t\u003cdiscord-message\u003e\n\t\tHey guys, I'm new here! Glad to be able to join you all!\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Dawn\" avatar=\"red\"\u003e\n\t\tHi, I'm new here too!\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Sanctuary\" avatar=\"https://i.imgur.com/0TeacfY.png\" role-color=\"#0099ff\"\u003e\n\t\tHey, \u003cdiscord-mention\u003eUser\u003c/discord-mention\u003e and \u003cdiscord-mention\u003eDawn\u003c/discord-mention\u003e. Welcome to our server! Be sure to read through the \u003cdiscord-mention type=\"channel\"\u003erules\u003c/discord-mention\u003e. You can ping \u003cdiscord-mention type=\"role\" color=\"#70f0b4\"\u003eSupport\u003c/discord-mention\u003e if you need help.\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Twelve\" avatar=\"https://i.imgur.com/Mc0F0Hf.png\" role-color=\"#70f0b4\"\u003e\n\t\tHello everyone! How's it going?\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"User\"\u003e\n\t\tThank you \u003cdiscord-mention highlight\u003eSanctuary\u003c/discord-mention\u003e!\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Yotsuba\" avatar=\"https://i.imgur.com/amw0MGJ.png\"\u003e\n\t\tI'm doing well, \u003cdiscord-mention\u003eTwelve\u003c/discord-mention\u003e. What about yourself?\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Twelve\" avatar=\"https://i.imgur.com/Mc0F0Hf.png\" role-color=\"#70f0b4\"\u003e\n\t\t!8ball How am I doing today?\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Rinon\" avatar=\"https://i.imgur.com/axQ9wJl.png\" role-color=\"violet\" bot\u003e\n\t\tYes.\n\t\u003c/discord-message\u003e\n\u003c/discord-messages\u003e\n```\n\nCheck out the [live demo](https://wc-discord-message.netlify.app/) for further examples.\n\n## Installation\n\n### Package managers\n\nIf you're using a package manager, you can install it like normal.\n\n```bash\nyarn add wc-discord-message\n# or npm install wc-discord-message\n```\n\nImport it and call the necessary functions in your app entry file.\n\n```js\nimport { applyPolyfills, defineCustomElements } from 'wc-discord-message/loader'\n\napplyPolyfills().then(() =\u003e defineCustomElements(window))\n```\n\nAnd then use it in your HTML templates, JSX, etc.\n\n```js\nexport default class App {\n\trender() {\n\t\treturn (\n\t\t\t\u003cdiscord-messages\u003e\n\t\t\t\t\u003cdiscord-message\u003e\n\t\t\t\t\tHey guys, I'm new here! Glad to be able to join you all!\n\t\t\t\t\u003c/discord-message\u003e\n\t\t\t\t\u003cdiscord-message author=\"Dawn\" avatar=\"red\"\u003e\n\t\t\t\t\tHi, I'm new here too!\n\t\t\t\t\u003c/discord-message\u003e\n\t\t\t\u003c/discord-messages\u003e\n\t\t)\n\t}\n}\n```\n\nRefer to the [Stencil docs on framework integration](https://stenciljs.com/docs/overview) if you're using a specific framework. If you're using Vue, you can use this for the `.ignoredElements` config option:\n\n```js\n// main.js\nVue.config.ignoredElements.push(/^discord-/) // for more precise matching: /^discord-(messages?|mention|embed(-fields?)?)$/\n```\n\n### Browser build\n\nIf you're want to use the browser build, you can pull it in via unpkg.\n\n```html\n\u003cscript src=\"https://unpkg.com/wc-discord-message@^2.0.0/dist/wc-discord-message/wc-discord-message.js\"\u003e\u003c/script\u003e\n```\n\nAnd then use it anywhere in your HTML.\n\n```html\n\u003cbody\u003e\n\t\u003cdiscord-messages\u003e\n\t\t\u003cdiscord-message author=\"Sanctuary\" avatar=\"https://i.imgur.com/0TeacfY.png\" role-color=\"#0099ff\"\u003e\n\t\t\tHey, \u003cdiscord-mention\u003eUser\u003c/discord-mention\u003e and \u003cdiscord-mention\u003eDawn\u003c/discord-mention\u003e. Welcome to our server!\n\t\t\u003c/discord-message\u003e\n\t\u003c/discord-messages\u003e\n\u003c/body\u003e\n```\n\n## Upgrading to v2\n\nCSS updates and general fixes were applied. The only \"breaking\" change is that the `.discord-highlight-mention` class has been moved up from to `.discord-message.discord-message-body` to `.discord-message`, in case you're targetting it in your CSS somewhere.\n\n## Usage\n\nThe syntax is kept fairly simple. Here's a basic example of a regular conversation:\n\n```html\n\u003cdiscord-messages\u003e\n\t\u003cdiscord-message\u003e\n\t\tHey guys, I'm new here! Glad to be able to join you all!\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Dawn\" avatar=\"red\"\u003e\n\t\tHi, I'm new here too!\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message author=\"Sanctuary\" avatar=\"https://i.imgur.com/0TeacfY.png\" role-color=\"#0099ff\"\u003e\n\t\tHey, \u003cdiscord-mention\u003eUser\u003c/discord-mention\u003e and \u003cdiscord-mention\u003eDawn\u003c/discord-mention\u003e. Welcome to our server!\n\t\u003c/discord-message\u003e\n\u003c/discord-messages\u003e\n```\n\n## Notes\n\n### Default font\n\nBy default, this package uses the Google Fonts CDN to pull in the Roboto font. This isn't the same font Discord uses, so if you want to provide your own, you can override the CSS.\n\n```css\n/* index.css */\n.discord-messages {\n\tfont-family: 'Your Font', sans-serif;\n}\n```\n\n### Avatar shortcuts\n\nThe current avatar shortcut strings available are \"blue\" (default), \"gray\", \"green\", \"orange\", and \"red\". These shortcuts map to the following image links:\n\n```json\n{\n\t\"blue\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png\",\n\t\"gray\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png\",\n\t\"green\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png\",\n\t\"orange\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png\",\n\t\"red\": \"https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png\"\n}\n```\n\nIf you want to add to or override the shortcuts, you can set them via `window.$discordMessage.avatars`.\n\n```js\nwindow.$discordMessage = {\n\tavatars: {\n\t\t'default': 'green'\n\t\tjojo: 'https://i.imgur.com/BOlehTj.jpg',\n\t\tdjs: require('./assets/discord-avatar-djs.png'),\n\t},\n}\n```\n\n### Profile shortcuts\n\nSometimes you'll want to use the same message data across multiple messages. You can do so by providing an object of profiles in `window.$discordMessage.profiles`.\n\n```js\nwindow.$discordMessage = {\n\tprofiles: {\n\t\tsanc: {\n\t\t\tauthor: 'Sanctuary',\n\t\t\tavatar: 'https://i.imgur.com/0TeacfY.png',\n\t\t},\n\t\trinon: {\n\t\t\tauthor: 'Rinon',\n\t\t\tavatar: 'https://i.imgur.com/axQ9wJl.png',\n\t\t\tbot: true,\n\t\t\troleColor: '#ee82ee',\n\t\t},\n\t},\n}\n```\n\nAnd then in your HTML:\n\n```html\n\u003cdiscord-messages\u003e\n\t\u003cdiscord-message profile=\"rinon\"\u003e\n\t\tWelcome to our server, \u003cmention\u003eSanctuary\u003c/mention\u003e!\n\t\u003c/discord-message\u003e\n\t\u003cdiscord-message profile=\"sanc\"\u003e\n\t\tHey, glad to be here!\n\t\u003c/discord-message\u003e\n\u003c/discord-messages\u003e\n```\n\n### Components notes\n\nBelow are notes for a few certain components. If you want to see what props each component has, check their readme.md file in the respective [`/src/components/`](https://github.com/Danktuary/wc-discord-message/blob/master/src/components/) folder.\n\n#### DiscordMessages component\n\nThis is a wrapper for any child `\u003cdiscord-message\u003e` component. It must be used in order for messages to display properly.\n\n#### DiscordMention component\n\nIf the default slot is left empty, the mention will be rendered as `'User'`, `'Role'`, or `'channel`', depending on the `type` prop given.\n\n#### DiscordEmbed component\n\nAn embed that can be attached to the end of your messages. The default slot is used for the embed's description. The `footer` slot is used for the footer text.\n\nTo ensure the embed gets displayed correctly inside your message, be sure to give it the proper `slot` attribute.\n\n```html\n\u003cdiscord-message\u003e\n\tHi, I'm part of the normal message content.\n\t\u003cdiscord-embed slot=\"embeds\" color=\"#0099ff\"\u003e\n\t\tHi, I'm part of the embed message content.\n\t\u003c/discord-embed\u003e\n\u003c/discord-message\u003e\n```\n\n#### EmbedFields component\n\nA wrapper for any child `\u003cdiscord-embed-field\u003e` components. Must be used in order for fields to display properly. To ensure the embed fields gets displayed correctly inside your embed, be sure to give it the proper `slot` attribute.\n\n```html\n\u003cdiscord-message\u003e\n\t\u003cdiscord-embed slot=\"embeds\"\u003e\n\t\tHi, I'm part of the embed message content.\n\t\t\u003cdiscord-embed-fields slot=\"fields\"\u003e\n\t\t\t\u003c!-- Embed fields go here --\u003e\n\t\t\u003c/discord-embed-fields\u003e\n\t\u003c/discord-embed\u003e\n\u003c/discord-message\u003e\n```\n\n#### EmbedField component\n\nAt least 2 consecutive fields need to be marked as inline in order for them to actually display next to each other. The maximum amount of inline fields is 3, and drops to 2 if an embed thumbnail is used.\n\n```html\n\u003cdiscord-message\u003e\n\t\u003cdiscord-embed slot=\"embeds\"\u003e\n\t\tHi, I'm part of the embed message content.\n\t\t\u003cdiscord-embed-fields slot=\"fields\"\u003e\n\t\t\t\u003cdiscord-embed-field field-title=\"Inline field\" inline\u003e\n\t\t\t\tField content.\n\t\t\t\u003c/discord-embed-field\u003e\n\t\t\t\u003cdiscord-embed-field field-title=\"Inline field\" inline\u003e\n\t\t\t\tField content.\n\t\t\t\u003c/discord-embed-field\u003e\n\t\t\u003c/discord-embed-fields\u003e\n\t\u003c/discord-embed\u003e\n\u003c/discord-message\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDanktuary%2Fwc-discord-message","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDanktuary%2Fwc-discord-message","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDanktuary%2Fwc-discord-message/lists"}