Skip to content

Commit f445135

Browse files
committed
chore: Update README
1 parent 91d9a56 commit f445135

File tree

1 file changed

+94
-0
lines changed

1 file changed

+94
-0
lines changed

README.md

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
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+
![@discord-message-components preview](https://i.imgur.com/ZxsfkHb.png)
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

Comments
 (0)