Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Danktuary/wc-discord-message
Web components to easily build and display fake Discord messages on your webpages.
https://github.com/Danktuary/wc-discord-message
discord hacktoberfest stencil web-components
Last synced: 5 days ago
JSON representation
Web components to easily build and display fake Discord messages on your webpages.
- Host: GitHub
- URL: https://github.com/Danktuary/wc-discord-message
- Owner: Danktuary
- License: mit
- Created: 2020-01-05T19:49:36.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-17T10:35:50.000Z (over 3 years ago)
- Last Synced: 2024-10-01T17:45:48.271Z (about 1 month ago)
- Topics: discord, hacktoberfest, stencil, web-components
- Language: TypeScript
- Homepage: https://wc-discord-message.netlify.com/
- Size: 118 KB
- Stars: 34
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-stenciljs - wc-discord-message
README
# WC Discord Message
Web components to easily build and display fake Discord messages on your webpages.
If you use Vue in your project, you should use [vue-discord-message](https://vue-discord-message.netlify.app/).
If you use React in your project, you should use [react-discord-message](https://github.com/Danktuary/react-discord-message).
## Features
* Design modeled after [Discord](https://discordapp.com/) itself
* Comfy and compact mode support
* Dark and light themes support
* Set the message author's username, avatar (use defaults or provide your own), role color, and "bot" tag status
* Display fake user, role, and channel mentions
* Complete embed support
* Simple syntax!
## Preview
```html
Hey guys, I'm new here! Glad to be able to join you all!
Hi, I'm new here too!
Hey, User and Dawn. Welcome to our server! Be sure to read through the rules. You can ping Support if you need help.
Hello everyone! How's it going?
Thank you Sanctuary!
I'm doing well, Twelve. What about yourself?
!8ball How am I doing today?
Yes.
```
Check out the [live demo](https://wc-discord-message.netlify.app/) for further examples.
## Installation
### Package managers
If you're using a package manager, you can install it like normal.
```bash
yarn add wc-discord-message
# or npm install wc-discord-message
```
Import it and call the necessary functions in your app entry file.
```js
import { applyPolyfills, defineCustomElements } from 'wc-discord-message/loader'
applyPolyfills().then(() => defineCustomElements(window))
```
And then use it in your HTML templates, JSX, etc.
```js
export default class App {
render() {
return (
Hey guys, I'm new here! Glad to be able to join you all!
Hi, I'm new here too!
)
}
}
```
Refer 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:
```js
// main.js
Vue.config.ignoredElements.push(/^discord-/) // for more precise matching: /^discord-(messages?|mention|embed(-fields?)?)$/
```
### Browser build
If you're want to use the browser build, you can pull it in via unpkg.
```html
```
And then use it anywhere in your HTML.
```html
Hey, User and Dawn. Welcome to our server!
```
## Upgrading to v2
CSS 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.
## Usage
The syntax is kept fairly simple. Here's a basic example of a regular conversation:
```html
Hey guys, I'm new here! Glad to be able to join you all!
Hi, I'm new here too!
Hey, User and Dawn. Welcome to our server!
```
## Notes
### Default font
By 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.
```css
/* index.css */
.discord-messages {
font-family: 'Your Font', sans-serif;
}
```
### Avatar shortcuts
The current avatar shortcut strings available are "blue" (default), "gray", "green", "orange", and "red". These shortcuts map to the following image links:
```json
{
"blue": "https://cdn.discordapp.com/attachments/654503812593090602/665721745466195978/blue.png",
"gray": "https://cdn.discordapp.com/attachments/654503812593090602/665721746569166849/gray.png",
"green": "https://cdn.discordapp.com/attachments/654503812593090602/665721748431306753/green.png",
"orange": "https://cdn.discordapp.com/attachments/654503812593090602/665721750201434138/orange.png",
"red": "https://cdn.discordapp.com/attachments/654503812593090602/665721752277483540/red.png"
}
```
If you want to add to or override the shortcuts, you can set them via `window.$discordMessage.avatars`.
```js
window.$discordMessage = {
avatars: {
'default': 'green'
jojo: 'https://i.imgur.com/BOlehTj.jpg',
djs: require('./assets/discord-avatar-djs.png'),
},
}
```
### Profile shortcuts
Sometimes 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`.
```js
window.$discordMessage = {
profiles: {
sanc: {
author: 'Sanctuary',
avatar: 'https://i.imgur.com/0TeacfY.png',
},
rinon: {
author: 'Rinon',
avatar: 'https://i.imgur.com/axQ9wJl.png',
bot: true,
roleColor: '#ee82ee',
},
},
}
```
And then in your HTML:
```html
Welcome to our server, Sanctuary!
Hey, glad to be here!
```
### Components notes
Below 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.
#### DiscordMessages component
This is a wrapper for any child `` component. It must be used in order for messages to display properly.
#### DiscordMention component
If the default slot is left empty, the mention will be rendered as `'User'`, `'Role'`, or `'channel`', depending on the `type` prop given.
#### DiscordEmbed component
An 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.
To ensure the embed gets displayed correctly inside your message, be sure to give it the proper `slot` attribute.
```html
Hi, I'm part of the normal message content.
Hi, I'm part of the embed message content.
```
#### EmbedFields component
A wrapper for any child `` 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.
```html
Hi, I'm part of the embed message content.
```
#### EmbedField component
At 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.
```html
Hi, I'm part of the embed message content.
Field content.
Field content.
```