discord components
v3.6.0
Componentes da web para criar e exibir facilmente mensagens discordadas falsas em suas páginas da web
Pacote principal
Reagir ligações
Índice
Componentes da mensagem Discord para criar e exibir facilmente mensagens discordadas falsas em sua página da web.
Esta é uma adaptação de WC-Discord-Message do Danktuary
O código -fonte e a documentação deste pacote foram atualizados para a versão 4.x deste pacote. Para descobrir como atualizar de v3.x para v4.x, consulte o guia de atualização
A sintaxe é mantida bastante simples. Aqui está um exemplo básico de uma conversa regular:
< 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 =" Favna "
avatar =" https://github.com/favna.png "
roleColor =" #ff0000 "
>
Hey, < discord-mention > User </ discord-mention > and
< discord-mention > Dawn </ discord-mention > . Welcome to our server!
</ discord-message >
</ discord-messages > Importante
Para obter mais exemplos de como usar componentes, consulte os exemplos de Stackblitz vinculados abaixo. Escolha a estrutura que você está usando e clique no botão "Abrir no Stackblitz" para ver o código e como ele renderiza no navegador.
Esta biblioteca pode usar a fonte Discord se você a carregar no seu projeto. Você pode fazer isso incluindo o CSS abaixo:
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Book.woff' ) format ( 'woff' );
font-weight : 400 ;
}
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Medium.woff' ) format ( 'woff' );
font-weight : 500 ;
}
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Semibold.woff' ) format ( 'woff' );
font-weight : 600 ;
}
@font-face {
font-family : 'Whitney' ;
src : url ( 'https://cdn.skyra.pw/whitney-font/v2/Bold.woff' ) format ( 'woff' );
font-weight : 700 ;
} Você precisa importar o CUSTOM_ELEMENTS_SCHEMA de @angular/core e adicioná -lo à matriz schemas do seu módulo ou decorador de componentes para o módulo ou componente usando elementos personalizados. Isso é para garantir que o Angular saiba que os elementos personalizados são usados neste módulo ou componente.
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } Atualmente, o React é a única biblioteca entre as bibliotecas "grandes" para o desenvolvimento de front -end que ainda não suportam totalmente elementos / webcomponentes personalizados (consulte esta página de documentação do React para obter mais informações). Por esse motivo, enviamos o pacote @skyra/discord-components-react .
Esperamos sinceramente que essa situação melhore no futuro, mas ninguém sabe quais são seus planos.
Create React App não é mais a maneira recomendada de começar com um aplicativo React, de acordo com a própria documentação do React. Recomendamos muito o uso do Vite.
Todos os componentes do React renderizarão apenas o cliente, eles são incluídos com o 'use client'; Cabeçalho que o NextJS espera apenas para os componentes de RSE. Isso ocorre porque atualmente não existe uma boa maneira de renderizar webcomponentes no servidor. Quando @lit-labs/nextJs adiciona suporte ao diretório de aplicativos, podemos revisitar essa limitação.
Ao usar o diretório de aplicativos, não podemos fazer os perfis funcionando. Estamos abertos a sugestões sobre como corrigir isso, idealmente por meio de uma solicitação de tração para [https://github.com/skyra-project/discord-componnts-implementations/tree/main/templates/nextjs-ts].
Ao usar o Vue 3 com o Vite, você precisa configurar o Vite para reconhecer os componentes personalizados. Você pode fazer isso com o código a seguir em seu vite.config.ts :
import vue from '@vitejs/plugin-vue' ;
import { defineConfig } from 'vite' ;
export default defineConfig ( {
plugins : [
vue ( {
template : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} )
]
} ) ; Ao usar o Nuxt 3, você precisa configurar o Vite para reconhecer os componentes personalizados. Você pode fazer isso com o código a seguir em seu nuxt.config.ts :
export default defineNuxtConfig ( {
devtools : { enabled : true } ,
vue : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} ) ; Como é possível usar integrações diferentes em um projeto Astro, você também pode fazer referência aos outros exemplos aqui. A demonstração ao vivo vinculada abaixo usa a integração LIT para Astro, bem como a integração do React for Astro.
Observe que, embora seja inteiramente possível usar essa biblioteca sem uma estrutura, você ainda precisará de um parceiro como o Vite. Isso ocorre porque esta biblioteca expõe os módulos ES que precisam ser agrupados em um formato que o navegador possa suportar. A demonstração ao vivo abaixo usa o Vite.
Esta biblioteca usa um objeto personalizado na window do navegador para configuração. Em circunstâncias normais, simplesmente importando o pacote (com import @skyra/discord-components-core ), os aumentos do módulo também devem ser carregados. Se, por qualquer motivo, isso não acontecer, você poderá defini -los manualmente. Você pode fazer isso com o seguinte snippet de código:
import type { DiscordMessageOptions } from '@skyra/discord-components-core' ;
declare global {
// eslint-disable-next-line no-var
var $discordMessage : DiscordMessageOptions | undefined ;
}As cordas de atalho de avatar atuais disponíveis são "azuis" (padrão), "cinza", "verde", "laranja" e "vermelho". Esses atalhos são mapeados para os seguintes links de imagem:
{
"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 "
} Se você deseja adicionar ou substituir os atalhos, setConfig defini import { setConfig } from '@skyra/discord-components-core' los via globalThis.$discordMessage.avatars
globalThis . $discordMessage = {
avatars : {
default : 'blue' ,
skyra : 'https://github.com/NM-EEA-Y.png' ,
djs : require ( './assets/discord-avatar-djs.png' ) // You can use require syntax as well
}
} ; import { setConfig } from '@skyra/discord-components-core' ;
setConfig ( {
avatars : {
default : 'blue' ,
skyra : 'https://github.com/NM-EEA-Y.png' ,
djs : require ( './assets/discord-avatar-djs.png' ) // You can use require syntax as well
}
} ) ; Às vezes, você deseja usar os mesmos dados de mensagem em várias mensagens. Você setConfig import { setConfig } from '@skyra/discord-components-core' isso fornecendo um objeto de perfis em globalThis.$discordMessage.profiles
globalThis . $discordMessage = {
profiles : {
skyra : {
author : 'Skyra' ,
avatar : 'https://github.com/NM-EEA-Y.png' ,
bot : true ,
verified : true ,
roleColor : '#1e88e5'
} ,
favna : {
author : 'Favna' ,
avatar : 'https://github.com/favna.png' ,
roleColor : '#ff0000'
}
}
} ; import { setConfig } from '@skyra/discord-components-core' ;
setConfig ( {
profiles : {
skyra : {
author : 'Skyra' ,
avatar : 'https://github.com/NM-EEA-Y.png' ,
bot : true ,
verified : true ,
roleColor : '#1e88e5'
} ,
favna : {
author : 'Favna' ,
avatar : 'https://github.com/favna.png' ,
roleColor : '#ff0000'
}
}
} ) ;E então em seu código:
< discord-messages >
< discord-message profile = "skyra" >
Welcome to our server, < discord-mention > Favna </ discord-mention > !
</ discord-message >
< discord-message profile = "favna" > Hey, glad to be here! </ discord-message >
</ discord-messages > Cada um dos componentes aceita as propriedades HTML padrão para o estilo de passagem, como class para a passagem de classes CSS (JSS / CSS / SCSS etc.) ou style para passar no estilo embutido.
Você também pode passar por suas próprias tags HTML personalizadas, por exemplo, defina um data-testid para poder navegar para o componente em seus testes de unidade / testes de ponta a ponta
Abaixo estão as notas para alguns componentes específicos.
Este é um invólucro para qualquer componente da criança <discord-message> . Ele deve ser usado para que as mensagens sejam exibidas corretamente.
Se o slot padrão for deixado vazio, a menção será renderizada como 'User' , 'Role' ou 'channel ', dependendo do suporte type fornecido.
Se você deseja personalizar a cor de uma mencionação do tipo de role , poderá passar a cor como um código hexadecimal na propriedade style . Por exemplo:
< discord-message >
< discord-mention type =" role " style =" --discord-mention-color: #70f0b4; "
> Green </ discord-mention
>
< discord-mention type =" role " style =" --discord-mention-color: #ff0000; "
> Red </ discord-mention
>
</ discord-message > Uma incorporação que pode ser anexada ao final de suas mensagens. O slot padrão é usado para a descrição do embutido. O slot footer é usado para o texto do rodapé.
Para garantir que a incorporação seja exibida corretamente dentro de sua mensagem, certifique -se de fornecer o atributo slot adequado.
< discord-message >
Hi, I'm part of the normal message content.
< discord-embed slot =" embeds " color =" #ff0000 " >
Hi, I'm part of the embed message content.
</ discord-embed >
</ discord-message > Um invólucro para qualquer criança com componentes <discord-embed-fields> . Deve ser usado para que os campos sejam exibidos corretamente. Para garantir que os campos de incorporação sejam exibidos corretamente dentro da sua incorporação, certifique -se de fornecer o atributo slot adequado.
< 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 > Pelo menos 2 campos consecutivos precisam ser marcados como embutidos para que eles sejam realmente exibidos um ao lado do outro. A quantidade máxima de campos em linha é 3 e cai para 2 se uma miniatura incorporada for usada.
< discord-message >
< discord-embed slot =" embeds " >
Hi, I'm part of the embed message content.
< discord-embed-fields slot =" fields " >
< discord-embed-field fieldTitle =" Inline field " inline >
Field content.
</ discord-embed-field >
< discord-embed-field fieldTitle =" Inline field " inline >
Field content.
</ discord-embed-field >
</ discord-embed-fields >
</ discord-embed >
</ discord-message > Uma conversa normal
Modo compacto
Com uma incorporação
Uma conversa normal
Modo compacto
Com uma incorporação
Certifique -se de ler o guia contribuinte antes de fazer uma solicitação de tração.
Obrigado a todas as pessoas que já contribuíram para os componentes da discórdia!
