discord components
v3.6.0
Componentes web para construir y mostrar fácilmente mensajes falsos de discordia en sus páginas web
Paquete central
Reaccionar las uniones
Tabla de contenido
Los componentes del mensaje Discord para construir y mostrar fácilmente mensajes de discordia falsos en su página web.
Esta es una adaptación de WC-Discord-Message de Danktuary
El código fuente y la documentación de este paquete se han actualizado para la versión 4.x de este paquete. Para averiguar cómo actualizar de v3.x a v4.x, consulte la guía de actualización
La sintaxis se mantiene bastante simple. Aquí hay un ejemplo básico de una conversación 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 obtener más ejemplos sobre cómo usar componentes, consulte los ejemplos de StackBlitz vinculados a continuación. Elija el marco que está utilizando y haga clic en el botón "Abrir en Stackblitz" para ver el código y cómo se presenta en el navegador.
Esta biblioteca puede usar la fuente Discord si la carga en su proyecto. Puede hacerlo incluyendo el CSS a continuación:
@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 ;
} Debe importar el CUSTOM_ELEMENTS_SCHEMA de @angular/core y agregarlo a la matriz schemas de su módulo o decorador de componentes para el módulo o componente utilizando elementos personalizados. Esto es para garantizar que Angular sabe que se utilizan elementos personalizados en este módulo o componente.
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } React es actualmente la única biblioteca entre las "grandes" bibliotecas para el desarrollo de frontend que aún no admite elementos / componentes web personalizados (consulte esta página de documentación de reacción para obtener más información). Por esta razón, enviamos el paquete @skyra/discord-components-react .
Esperamos sinceramente que esta situación mejore en el futuro, pero nadie sabe cuáles son sus planes.
Crear aplicación React ya no es la forma recomendada de comenzar con una aplicación React según la propia documentación de React. Recomendamos muy firmemente usar Vite en su lugar.
Todos los componentes React solo renderizarán en el cliente, se agrupan con el 'use client'; Encabezado que NEXTJS espera componentes solo de CSR. Esto se debe a que actualmente no hay una buena manera de representar los componentes web en el servidor. Cuando @lit-labs/nextjs agrega soporte para el directorio de aplicaciones podemos volver a visitar esta limitación.
Al usar el directorio de aplicaciones, no podemos hacer que los perfiles funcionen. Estamos abiertos a sugerencias sobre cómo solucionar esto, idealmente a través de una solicitud de extracción a [https://github.com/skyra-project/discord-components-implementations/tree/main/templates/nextjs-ts].
Al usar Vue 3 con Vite, debe configurar Vite para reconocer los componentes personalizados. Puede hacerlo con el siguiente código en su 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-' )
}
}
} )
]
} ) ; Cuando use Nuxt 3, debe configurar Vite para reconocer los componentes personalizados. Puede hacerlo con el siguiente código en su nuxt.config.ts :
export default defineNuxtConfig ( {
devtools : { enabled : true } ,
vue : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} ) ; Debido a que es posible usar diferentes integraciones en un proyecto Astro, también puede hacer referencia a los otros ejemplos aquí. La demostración en vivo vinculada a continuación utiliza la integración LIT para Astro, así como la integración React para Astro.
Tenga en cuenta que si bien es completamente posible usar esta biblioteca sin un marco, aún necesitará un Bundler como Vite. Esto se debe a que esta biblioteca expone los módulos ES que deben estar agrupados en un formato que el navegador puede admitir. La demostración en vivo a continuación usa Vite.
Esta biblioteca utiliza un objeto personalizado en la window del navegador para la configuración. En circunstancias normales simplemente importando el paquete (con import @skyra/discord-components-core ), los aumentos del módulo también deben cargarse. Si por alguna razón esto no sucede, entonces puede definirlos manualmente usted mismo. Puede hacerlo con el siguiente fragmento de código:
import type { DiscordMessageOptions } from '@skyra/discord-components-core' ;
declare global {
// eslint-disable-next-line no-var
var $discordMessage : DiscordMessageOptions | undefined ;
}Las cadenas de acceso directo de avatar actual disponibles son "azules" (predeterminados), "gris", "verde", "naranja" y "rojo". Estos atajos se mapean a los siguientes enlaces de imagen:
{
"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 "
} Si desea agregar o anular los atajos, puede configurarlos a través de globalThis.$discordMessage.avatars o utilizando la función setConfig ( import { setConfig } from '@skyra/discord-components-core' ).
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
}
} ) ; A veces querrá usar los mismos datos de mensajes en múltiples mensajes. Puede hacerlo proporcionando un objeto de perfiles en globalThis.$discordMessage.profiles o utilizando la función setConfig ( import { setConfig } from '@skyra/discord-components-core' ).
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'
}
}
} ) ;Y luego en tu 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 uno de los componentes acepta las propiedades HTML estándar para el estilo de aprobación, como class para pasar las clases de CSS (JSS / CSS / SCSS, etc.) o style para pasar el estilo en línea.
También puede pasar sus propias etiquetas HTML personalizadas, por ejemplo, establecer un data-testid para poder navegar al componente en sus pruebas unitarias / pruebas de extremo a extremo
A continuación hay notas para algunos componentes específicos.
Este es un envoltorio para cualquier componente infantil <discord-message> . Debe usarse para que los mensajes se muestren correctamente.
Si la ranura predeterminada se deja vacía, la mención se representará como 'User' , 'Role' o 'channel ', dependiendo del type de accesorio dado.
Si desea personalizar el color de una mención de tipo de role , puede pasar el color como código hexadecimal en la propiedad style . Por ejemplo:
< 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 > Una incrustación que se puede adjuntar al final de sus mensajes. La ranura predeterminada se usa para la descripción de la incrustación. La ranura footer se usa para el texto del pie de página.
Para asegurarse de que la inserción se muestre correctamente dentro de su mensaje, asegúrese de darle el atributo slot adecuado.
< 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 > Un envoltorio para cualquier componente infantil <discord-embed-fields> . Debe usarse para que los campos se muestren correctamente. Para asegurarse de que los campos de incrustación se muestren correctamente dentro de su incrustación, asegúrese de darle el atributo slot adecuado.
< 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 > Al menos 2 campos consecutivos deben marcarse como en línea para que realmente se muestren uno al lado del otro. La cantidad máxima de campos en línea es 3, y cae a 2 si se usa una miniatura de incrustación.
< 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 > Una conversación normal
Modo compacto
Con una incrustación
Una conversación normal
Modo compacto
Con una incrustación
Asegúrese de leer la guía contribuyente antes de hacer una solicitud de extracción.
¡Gracias a todas las personas que ya contribuyeron a los componentes de Discord!
