|
| 1 | +# Discord Message Components |
| 2 | + |
| 3 | +Components to easily build and display fake Discord messages on your webpages. Currently available for [Vue 3](https://github.com/Danktuary/discord-message-components/tree/main/packages/vue) and [React](https://github.com/Danktuary/discord-message-components/tree/main/packages/react). Vue 2 and Web Components support coming soon. |
| 4 | + |
| 5 | +## Features |
| 6 | + |
| 7 | +- Design modeled after [Discord](https://discordapp.com/) itself |
| 8 | +- Cozy and compact modes |
| 9 | +- Dark and light themes |
| 10 | +- Components for buttons, embeds, markdown, mentions, reactions, replies, and slash commands |
| 11 | +- Simple syntax! |
| 12 | + |
| 13 | +## Storybook |
| 14 | + |
| 15 | +Publishing soon! |
| 16 | + |
| 17 | +## Docs |
| 18 | + |
| 19 | +Coming soon! |
| 20 | + |
| 21 | +## Installation and usage |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +### Vue |
| 26 | + |
| 27 | +Refer to [`@discord-message-components/vue`'s README](https://github.com/Danktuary/discord-message-components/packages/vue#readme) for full notes and examples. |
| 28 | + |
| 29 | +```sh |
| 30 | +yarn add @discord-message-components/vue |
| 31 | +# or npm install @discord-message-components/vue |
| 32 | +``` |
| 33 | + |
| 34 | +```js |
| 35 | +import { createApp } from 'vue' |
| 36 | +import { install as DiscordMessageComponents } from '@discord-message-components/vue' |
| 37 | +import App from './App.vue' |
| 38 | +import '@discord-message-components/vue/styles' |
| 39 | + |
| 40 | +const app = createApp(App) |
| 41 | + |
| 42 | +// Only necessary if you want to provide plugin options |
| 43 | +app.use(DiscordMessageComponents, { /*...*/ }) |
| 44 | + |
| 45 | +app.mount('#app') |
| 46 | +``` |
| 47 | + |
| 48 | +```html |
| 49 | +<template> |
| 50 | + <DiscordMessages> |
| 51 | + <DiscordMessage> |
| 52 | + Hello, World! |
| 53 | + </DiscordMessage> |
| 54 | + </DiscordMessages> |
| 55 | +</template> |
| 56 | + |
| 57 | +<script setup> |
| 58 | +import { DiscordMessage, DiscordMessages } from '@discord-message-components/vue' |
| 59 | +</script> |
| 60 | +``` |
| 61 | + |
| 62 | +### React |
| 63 | + |
| 64 | +Refer to [`@discord-message-components/react`'s README](https://github.com/Danktuary/discord-message-components/packages/react#readme) for full notes and examples. |
| 65 | + |
| 66 | +```sh |
| 67 | +yarn add @discord-message-components/react |
| 68 | +# or npm install @discord-message-components/react |
| 69 | +``` |
| 70 | + |
| 71 | +```js |
| 72 | +import React from 'react' |
| 73 | +import { DiscordMessage, DiscordMessages } from '@discord-message-components/react' |
| 74 | +import '@discord-message-components/react/styles' |
| 75 | + |
| 76 | +export default function App() { |
| 77 | + return ( |
| 78 | + <DiscordMessages> |
| 79 | + <DiscordMessage> |
| 80 | + Hello, World! |
| 81 | + </DiscordMessage> |
| 82 | + </DiscordMessages> |
| 83 | + ) |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +## General notes |
| 88 | + |
| 89 | +There are a few clear differences between these packages and actual Discord. These packages aren't meant to be a pixel-perfect mock of Discord. Some of these differences would be: |
| 90 | + |
| 91 | +- These packages use the [Roboto](https://fonts.google.com/specimen/Roboto) font, which is not Discord's default font. You can override this with `.discord-messages { font-family: ... }` in your CSS. |
| 92 | +- Certain icons (such as the ephemeral message icon, verified bot tag icon, etc.) are not included. This may change in the future, but will use free SVG icons as opposed to ones identical to Discord's. |
| 93 | + |
| 94 | +These packages were made to help developers improve their websites (such as guides, bot dashboards, etc.) by replacing images with code. I do not own any assets used in these packages and do not intend to infringe on any of Discord's copyright. Please contact me if there are any issues in this regard. |
0 commit comments