Skip to content

Commit

Permalink
feat: discord-message-components
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsblok
itsblok committed Sep 12, 2023
1 parent a4be77c commit dd7fee5
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 2 deletions.
43 changes: 42 additions & 1 deletion docs/.vitepress/theme/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,23 @@ import Theme from 'vitepress/theme'
import Footer from './components/Footer.vue'
import './style.css'

import {
DiscordButton,
DiscordButtons,
DiscordEmbed,
DiscordEmbedField,
DiscordEmbedFields,
DiscordInteraction,
DiscordMarkdown,
DiscordMention,
DiscordMessage,
DiscordMessages,
DiscordReaction,
DiscordReactions,
install as DiscordMessageComponents,
} from '@discord-message-components/vue';
import '@discord-message-components/vue/dist/style.css';

export default {
extends: Theme,
Layout: () => {
Expand All @@ -13,6 +30,30 @@ export default {
})
},
enhanceApp({ app, router, siteData }) {
// ...
app.use(DiscordMessageComponents, {
profiles: {
user: {
author: 'Test User',
},
bot: {
author: 'Senchabot',
avatar: "https://avatars.githubusercontent.com/u/125701962",
bot: true,
},
},
});

app.component('DiscordButton', DiscordButton);
app.component('DiscordButtons', DiscordButtons);
app.component('DiscordEmbed', DiscordEmbed);
app.component('DiscordEmbedField', DiscordEmbedField);
app.component('DiscordEmbedFields', DiscordEmbedFields);
app.component('DiscordInteraction', DiscordInteraction);
app.component('DiscordMarkdown', DiscordMarkdown);
app.component('DiscordMention', DiscordMention);
app.component('DiscordMessage', DiscordMessage);
app.component('DiscordMessages', DiscordMessages);
app.component('DiscordReaction', DiscordReaction);
app.component('DiscordReactions', DiscordReactions);
}
}
32 changes: 32 additions & 0 deletions docs/MARKDOWN-EXTENSIONS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -279,6 +279,38 @@ We have custom button style
</a>
</div>

## Displaying Discord messages

We use [@discord-message-components/vue](https://github.com/Danktuary/discord-message-components/blob/main/packages/vue/README.md) to display "fake" Discord messages on pages. The reason for this is to make it easy for you to create, easy for anyone in the future to edit, and avoid having to take screenshots and using too many images on a page at once. Here's a preview of the components:

<DiscordMessages>
<DiscordMessage profile="user">
!ping
</DiscordMessage>
<DiscordMessage profile="bot">
<DiscordMention :highlight="true" profile="user" />, pong! Took 50ms
</DiscordMessage>
</DiscordMessages>

The syntax to make this display is quite simple as well:

```js
<DiscordMessages>
<DiscordMessage profile="user">
!ping
</DiscordMessage>
<DiscordMessage profile="bot" avatar="https://avatars.githubusercontent.com/u/125701962" >
<DiscordMention :highlight="true" profile="user" />, pong! Took 50ms
</DiscordMessage>
</DiscordMessages>
```

These components are made with [Vue](https://vuejs.org/), but if you aren't familiar with Vue, don't worry about it. Just understand that you'll usually only need the `profile="user"`/`profile="bot"` attribute for the `<DiscordMessage>` component. All `<DiscordMessage>` components must be children of a single `<DiscordMessages>` component for it to display properly.

Do note the casing in `<DiscordMessages>` syntax instead of `<discord-messages>`. This is due to how VuePress renders markdown and HTML inside markdown files. It doesn't recognize `<discord-messages>` as an HTML element, therefore rendering anything indented inside it as a regular code block.

These components feature messages, mentions, embeds, interactions, and more. You can read more about how to use them by checking out [@discord-message-components/vue](https://github.com/Danktuary/discord-message-components/blob/main/packages/vue/README.md).

## Advanced

This docs uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,8 @@
},
"devDependencies": {
"vitepress": "^1.0.0-rc.10"
},
"dependencies": {
"@discord-message-components/vue": "^0.2.1"
}
}
75 changes: 74 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,28 @@
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.16.tgz#180aead7f247305cce6551bea2720934e2fa2c95"
integrity sha512-+gPfKv8UWeKKeJTUxe59+OobVcrYHETCsORl61EmSkmgymguYk/X5bp7GuUIXaFsc6y++v8ZxPsLSSuujqDphA==

"@discord-message-components/core@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@discord-message-components/core/-/core-0.2.1.tgz#25ed35b3aa42eee89e6c9d4e084c747e40953aae"
integrity sha512-oPxBpq5vS7yLYvfMcHpCt1JVcGuRtnksPsJoiAmtmWDOeiO83BWfWvC1Xhvb2B6gNpg/H6+y6XuX3FhuHORJfA==
dependencies:
"@discord-message-components/markdown" "^0.2.0"
color-rgba "^2.2.3"

"@discord-message-components/markdown@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@discord-message-components/markdown/-/markdown-0.2.0.tgz#532496d28a4a5ba352bab1a4947bd8f11ea99af6"
integrity sha512-Av+Q6rUNTtYqKI0NqkcPDNoYv2U7YcWNQmAEDU1JMR7lZOoz5R/iSGV1TwAs6uoYNawDovBECiEQgIDUxKKPBg==
dependencies:
simple-markdown "^0.7.3"

"@discord-message-components/vue@^0.2.1":
version "0.2.1"
resolved "https://registry.yarnpkg.com/@discord-message-components/vue/-/vue-0.2.1.tgz#34cf53a9aecec3ce32296963c0d35c4e8199c509"
integrity sha512-BLs6JshamjKh28f9boWIDMZ/BqWqLfg9wUUGxE3PqnMaomqKgs1eeWMKff/20Ie1cBJ6vYSYCxxxQUsw97SptQ==
dependencies:
"@discord-message-components/core" "^0.2.1"

"@docsearch/css@3.5.2", "@docsearch/css@^3.5.2":
version "3.5.2"
resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.5.2.tgz#610f47b48814ca94041df969d9fcc47b91fc5aac"
Expand Down Expand Up @@ -276,6 +298,25 @@
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==

"@types/prop-types@*":
version "15.7.5"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==

"@types/react@>=16.0.0":
version "18.2.21"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9"
integrity sha512-neFKG/sBAwGxHgXiIxnbm3/AAVQ/cMRS93hvBpg8xYRbeQSPVABp9U2bRnPf0iI4+Ucdv3plSxKK+3CW2ENJxA==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/scheduler@*":
version "0.16.3"
resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==

"@types/web-bluetooth@^0.0.17":
version "0.0.17"
resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz#5c9f3c617f64a9735d7b72a7cc671e166d900c40"
Expand Down Expand Up @@ -432,7 +473,32 @@ ansi-sequence-parser@^1.1.0:
resolved "https://registry.yarnpkg.com/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz#e0aa1cdcbc8f8bb0b5bca625aac41f5f056973cf"
integrity sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==

csstype@^3.1.1:
color-name@^1.0.0:
version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==

color-parse@^1.4.2:
version "1.4.3"
resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.4.3.tgz#6dadfb49128c554c60c49d63f3d025f2c5a7ff22"
integrity sha512-BADfVl/FHkQkyo8sRBwMYBqemqsgnu7JZAwUgvBvuwwuNUZAhSvLTbsEErS5bQXzOjDR0dWzJ4vXN2Q+QoPx0A==
dependencies:
color-name "^1.0.0"

color-rgba@^2.2.3:
version "2.4.0"
resolved "https://registry.yarnpkg.com/color-rgba/-/color-rgba-2.4.0.tgz#ae85819c530262c29fc2da129fc7c8f9efc57015"
integrity sha512-Nti4qbzr/z2LbUWySr7H9dk3Rl7gZt7ihHAxlgT4Ho90EXWkjtkL1avTleu9yeGuqrt/chxTB6GKK8nZZ6V0+Q==
dependencies:
color-parse "^1.4.2"
color-space "^2.0.0"

color-space@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/color-space/-/color-space-2.0.1.tgz#da39871175baf4a5785ba519397df04b8d67e0fa"
integrity sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==

csstype@^3.0.2, csstype@^3.1.1:
version "3.1.2"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
Expand Down Expand Up @@ -545,6 +611,13 @@ shiki@^0.14.3:
vscode-oniguruma "^1.7.0"
vscode-textmate "^8.0.0"

simple-markdown@^0.7.3:
version "0.7.3"
resolved "https://registry.yarnpkg.com/simple-markdown/-/simple-markdown-0.7.3.tgz#e32150b2ec6f8287197d09869fd928747a9c5640"
integrity sha512-uGXIc13NGpqfPeFJIt/7SHHxd6HekEJYtsdoCM06mEBPL9fQH/pSD7LRM6PZ7CKchpSvxKL4tvwMamqAaNDAyg==
dependencies:
"@types/react" ">=16.0.0"

source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
Expand Down

0 comments on commit dd7fee5

Please sign in to comment.