npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mikesol/wc-discord-message

v3.0.2

Published

Web components to easily build and display fake Discord messages on your webpages.

Downloads

8

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

mikesolmikesol

Keywords

stencilwebcomponentsdiscordmessagefakemockembed

Readme

WC Discord Message

Built With Stencil

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. If you use React in your project, you should use react-discord-message.

Features

  • Design modeled after Discord 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

wc-discord-message preview

<discord-messages>
	<discord-message>
		Hey guys, I'm new here! Glad to be able to join you all!
	</discord-message>
	<discord-message author="Dawn" avatar="red">
		Hi, I'm new here too!
	</discord-message>
	<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
		Hey, <discord-mention>User</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server! Be sure to read through the <discord-mention type="channel">rules</discord-mention>. You can ping <discord-mention type="role" color="#70f0b4">Support</discord-mention> if you need help.
	</discord-message>
	<discord-message author="Twelve" avatar="https://i.imgur.com/Mc0F0Hf.png" role-color="#70f0b4">
		Hello everyone! How's it going?
	</discord-message>
	<discord-message author="User">
		Thank you <discord-mention highlight>Sanctuary</discord-mention>!
	</discord-message>
	<discord-message author="Yotsuba" avatar="https://i.imgur.com/amw0MGJ.png">
		I'm doing well, <discord-mention>Twelve</discord-mention>. What about yourself?
	</discord-message>
	<discord-message author="Twelve" avatar="https://i.imgur.com/Mc0F0Hf.png" role-color="#70f0b4">
		!8ball How am I doing today?
	</discord-message>
	<discord-message author="Rinon" avatar="https://i.imgur.com/axQ9wJl.png" role-color="violet" bot>
		Yes.
	</discord-message>
</discord-messages>

Check out the live demo for further examples.

Installation

Package managers

If you're using a package manager, you can install it like normal.

yarn add wc-discord-message
# or npm install wc-discord-message

Import it and call the necessary functions in your app entry file.

import { applyPolyfills, defineCustomElements } from 'wc-discord-message/loader'

applyPolyfills().then(() => defineCustomElements(window))

And then use it in your HTML templates, JSX, etc.

export default class App {
	render() {
		return (
			<discord-messages>
				<discord-message>
					Hey guys, I'm new here! Glad to be able to join you all!
				</discord-message>
				<discord-message author="Dawn" avatar="red">
					Hi, I'm new here too!
				</discord-message>
			</discord-messages>
		)
	}
}

Refer to the Stencil docs on framework integration if you're using a specific framework. If you're using Vue, you can use this for the .ignoredElements config option:

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

<script src="https://unpkg.com/wc-discord-message@^2.0.0/dist/wc-discord-message/wc-discord-message.js"></script>

And then use it anywhere in your HTML.

<body>
	<discord-messages>
		<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
			Hey, <discord-mention>User</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server!
		</discord-message>
	</discord-messages>
</body>

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:

<discord-messages>
	<discord-message>
		Hey guys, I'm new here! Glad to be able to join you all!
	</discord-message>
	<discord-message author="Dawn" avatar="red">
		Hi, I'm new here too!
	</discord-message>
	<discord-message author="Sanctuary" avatar="https://i.imgur.com/0TeacfY.png" role-color="#0099ff">
		Hey, <discord-mention>User</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server!
	</discord-message>
</discord-messages>

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.

/* 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:

{
	"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.

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.

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:

<discord-messages>
	<discord-message profile="rinon">
		Welcome to our server, <mention>Sanctuary</mention>!
	</discord-message>
	<discord-message profile="sanc">
		Hey, glad to be here!
	</discord-message>
</discord-messages>

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/ folder.

DiscordMessages component

This is a wrapper for any child <discord-message> 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.

<discord-message>
	Hi, I'm part of the normal message content.
	<discord-embed slot="embeds" color="#0099ff">
		Hi, I'm part of the embed message content.
	</discord-embed>
</discord-message>

EmbedFields component

A wrapper for any child <discord-embed-field> 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.

<discord-message>
	<discord-embed slot="embeds">
		Hi, I'm part of the embed message content.
		<discord-embed-fields slot="fields">
			<!-- Embed fields go here -->
		</discord-embed-fields>
	</discord-embed>
</discord-message>

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.

<discord-message>
	<discord-embed slot="embeds">
		Hi, I'm part of the embed message content.
		<discord-embed-fields slot="fields">
			<discord-embed-field field-title="Inline field" inline>
				Field content.
			</discord-embed-field>
			<discord-embed-field field-title="Inline field" inline>
				Field content.
			</discord-embed-field>
		</discord-embed-fields>
	</discord-embed>
</discord-message>