Skip to content

Commit 425f0ef

Browse files
DanktuaryDanktuary
authored
feat: Add Vue, React, and Core packages (#1)
2 parents 9af727e + 878ec5e commit 425f0ef

File tree

101 files changed

+13192
-565
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+13192
-565
lines changed

‎.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
end_of_line = lf
6+
indent_size = 4
7+
indent_style = tab
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

‎.eslintrc.js

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,17 @@ module.exports = {
33
env: {
44
node: true,
55
},
6-
'extends': ['sora'],
6+
'extends': [
7+
'plugin:@typescript-eslint/recommended',
8+
'sora',
9+
],
10+
parser: '@typescript-eslint/parser',
711
parserOptions: {
8-
ecmaVersion: 2017,
12+
sourceType: 'module',
13+
ecmaVersion: 2020,
14+
},
15+
rules: {
16+
'no-use-before-define': 'off',
17+
'@typescript-eslint/no-use-before-define': ['error'],
918
},
1019
}

‎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.

‎lerna.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
2-
"packages": [
3-
"packages/*"
4-
],
5-
"version": "0.0.0",
6-
"npmClient": "yarn",
7-
"useWorkspaces": true,
8-
"command": {
9-
"publish": {
10-
"message": "chore(release): Publish %s"
11-
}
12-
}
2+
"packages": [
3+
"packages/*"
4+
],
5+
"version": "0.0.0",
6+
"npmClient": "yarn",
7+
"useWorkspaces": true,
8+
"command": {
9+
"publish": {
10+
"message": "chore(release): Publish %s"
11+
}
12+
}
1313
}

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010
"devDependencies": {
1111
"@commitlint/cli": "^11.0.0",
1212
"@commitlint/config-conventional": "^11.0.0",
13+
"@typescript-eslint/eslint-plugin": "^4.15.2",
14+
"@typescript-eslint/parser": "^4.15.2",
1315
"eslint": "^7.20.0",
1416
"eslint-config-sora": "^3.1.0",
1517
"husky": "^5.0.9",

‎packages/core/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎packages/core/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# @discord-message-components/core
2+
3+
The core package used across the other `@discord-message-components` packages. Used for sharing utility functions, assets, and styles.
4+
5+
## Notes
6+
7+
This package currently installs `discord-markdown` from [`danktuary/discord-markdown`](https://github.com/Danktuary/discord-markdown), a fork of [`brussell98/discord-markdown`](https://github.com/brussell98/discord-markdown). This is temporary until the package is moved into this monorepo.

‎packages/core/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "@discord-message-components/core",
3+
"version": "0.0.0",
4+
"main": "./dist/core.umd.js",
5+
"module": "./dist/core.es.js",
6+
"types": "src/index.d.ts",
7+
"files": [
8+
"dist"
9+
],
10+
"scripts": {
11+
"dev": "vite",
12+
"build": "vite build",
13+
"serve": "vite preview"
14+
},
15+
"devDependencies": {
16+
"@types/color-rgba": "^2.1.0",
17+
"rollup-plugin-copy": "^3.4.0",
18+
"vite": "^2.0.1"
19+
},
20+
"dependencies": {
21+
"color-rgba": "^2.2.3",
22+
"discord-markdown": "danktuary/discord-markdown"
23+
}
24+
}

‎packages/core/src/avatars.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"blue": "https://cdn.discordapp.com/embed/avatars/0.png",
3+
"gray": "https://cdn.discordapp.com/embed/avatars/1.png",
4+
"green": "https://cdn.discordapp.com/embed/avatars/2.png",
5+
"orange": "https://cdn.discordapp.com/embed/avatars/3.png",
6+
"red": "https://cdn.discordapp.com/embed/avatars/4.png"
7+
}

‎packages/core/src/index.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module '@discord-message-components/core'

0 commit comments

Comments
 (0)