discord components
v3.6.0
Composants Web pour créer et afficher facilement les faux messages de discorde sur vos pages Web
Package de base
REACT RAISONS
Table des matières
Discord Message Composants pour créer et afficher facilement les faux messages de discorde sur votre page Web.
Ceci est une adaptation de WC-Discord-Message de Danktuary
Le code source et la documentation de ce package ont été mis à jour pour la version 4.x de ce package. Pour savoir comment passer de v3.x à v4.x, veuillez vous référer au guide de mise à niveau
La syntaxe est restée assez simple. Voici un exemple de base d'une conversation régulière:
< 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 > Important
Pour d'autres exemples sur la façon d'utiliser les composants, veuillez vous référer aux exemples de Stackblitz liés ci-dessous. Choisissez le framework que vous utilisez et cliquez sur le bouton "Ouvrir dans Stackblitz" pour voir le code et comment il rend dans le navigateur.
Cette bibliothèque peut utiliser la police Discord si vous le chargez dans votre projet. Vous pouvez le faire en incluant le CSS ci-dessous:
@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 ;
} Vous devez importer le CUSTOM_ELEMENTS_SCHEMA à partir de @angular/core et l'ajouter au tableau des schemas de votre module ou décorateur de composant pour le module ou le composant à l'aide d'éléments personnalisés. Il s'agit de garantir que les éléments personnalisés angulaires sont utilisés dans ce module ou composant.
import { CUSTOM_ELEMENTS_SCHEMA , Component } from '@angular/core' ;
@ Component ( {
schemas : [ CUSTOM_ELEMENTS_SCHEMA ]
} )
export class AppComponent { } React est actuellement la seule bibliothèque parmi les «grandes» bibliothèques pour le développement frontal qui ne prennent pas entièrement entièrement les éléments personnalisés / webcomponents (voir cette page de documentation React pour plus d'informations). Pour cette raison, nous expédions le colis @skyra/discord-components-react .
Nous espérons sincèrement que cette situation s'améliorera à l'avenir, mais personne ne sait quels sont leurs plans.
Créer l'application React n'est plus la façon recommandée de commencer par une application React selon la propre documentation de React. Nous recommandons très fortement d'utiliser VITE à la place.
Tous les composants React ne rendront que sur le client, ils sont regroupés avec le 'use client'; En-tête que NextJS attend pour les composants CSR uniquement. En effet, il n'y a actuellement aucun bon moyen de rendre les composants Web sur le serveur. Lorsque @ lit-Labs / NextJS ajoute la prise en charge du répertoire de l'APP, nous pouvons revisiter cette limitation.
Lorsque vous utilisez le répertoire de l'application, nous ne pouvons pas faire fonctionner les profils. Nous sommes ouverts aux suggestions sur la façon de résoudre ce problème, idéalement via une demande de traction vers [https://github.com/skyra-project/iscord-components-implementations/tree/main/templates/nextjs-ts].
Lorsque vous utilisez Vue 3 avec VITE, vous devez configurer VITE pour reconnaître les composants personnalisés. Vous pouvez le faire avec le code suivant dans votre 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-' )
}
}
} )
]
} ) ; Lorsque vous utilisez Nuxt 3, vous devez configurer VITE pour reconnaître les composants personnalisés. Vous pouvez le faire avec le code suivant dans votre nuxt.config.ts :
export default defineNuxtConfig ( {
devtools : { enabled : true } ,
vue : {
compilerOptions : {
isCustomElement : ( tag ) => tag . startsWith ( 'discord-' )
}
}
} ) ; Parce qu'il est possible d'utiliser différentes intégrations dans un projet Astro, vous pouvez également référencer les autres exemples ici. La démo en direct liée ci-dessous utilise l'intégration LMit pour Astro ainsi que l'intégration React pour Astro.
Notez que s'il est tout à fait possible d'utiliser cette bibliothèque sans cadre, vous aurez toujours besoin d'un bundler tel que Vite. En effet, cette bibliothèque expose les modules ES qui doivent être regroupés dans un format que le navigateur peut prendre en charge. La démo en direct ci-dessous utilise Vite.
Cette bibliothèque utilise un objet personnalisé sur la window du navigateur pour la configuration. Dans des circonstances normales en important simplement le package (avec import @skyra/discord-components-core ), les augmentations du module doivent également être chargées. Si, pour une raison quelconque, cela ne se produit pas, vous pouvez les définir manuellement vous-même. Vous pouvez le faire avec l'extrait de code suivant:
import type { DiscordMessageOptions } from '@skyra/discord-components-core' ;
declare global {
// eslint-disable-next-line no-var
var $discordMessage : DiscordMessageOptions | undefined ;
}Les chaînes de raccourci Avatar actuelles disponibles sont "bleues" (par défaut), "gris", "verte", "orange" et "rouge". Ces raccourcis se comparent aux liens d'image suivants:
{
"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 vous souhaitez ajouter ou remplacer les raccourcis, vous pouvez les définir via globalThis.$discordMessage.avatars ou en utilisant la fonction 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
}
} ) ; Parfois, vous voudrez utiliser les mêmes données de message sur plusieurs messages. Vous pouvez le faire en fournissant un objet de profils dans globalThis.$discordMessage.profiles ou en utilisant la fonction 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'
}
}
} ) ;Et puis dans votre code:
< 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 > Chacun des composants accepte les propriétés HTML standard pour passer le style, telles que class pour passer les classes CSS (JSS / CSS / SCSS, etc.) ou style pour passer le style en ligne.
Vous pouvez également transmettre vos propres balises HTML personnalisées, par exemple définir un data-testid pour pouvoir accéder au composant dans vos tests unitaires / tests de bout en bout
Vous trouverez ci-dessous des notes pour quelques composants spécifiques.
Ceci est un wrapper pour tout composant enfant <discord-message> . Il doit être utilisé pour que les messages s'affichent correctement.
Si la fente par défaut est laissée vide, la mention sera rendue en tant que 'User' , 'Role' ou 'channel », selon le type propulsé.
Si vous souhaitez personnaliser la couleur d'une mention de type de role , vous pouvez passer la couleur sous forme de code hexadécimal dans la propriété style . Par exemple:
< 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 > Une intégration qui peut être attachée à la fin de vos messages. La fente par défaut est utilisée pour la description de l'intégration. La fente footer est utilisée pour le texte du pied de page.
Pour vous assurer que l'intégration s'affiche correctement à l'intérieur de votre message, assurez-vous de lui donner l'attribut slot approprié.
< 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 wrapper pour tout enfant <discord-embed-fields> composants>. Doit être utilisé pour que les champs s'affichent correctement. Pour vous assurer que les champs d'intégration s'affichent correctement à l'intérieur de votre intégration, assurez-vous de lui donner l'attribut slot approprié.
< 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 > Au moins 2 champs consécutifs doivent être marqués comme en ligne pour qu'ils s'affichent réellement les uns à côté des autres. La quantité maximale de champs en ligne est de 3 et tombe à 2 si une vignette intégrée est utilisée.
< 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 > Une conversation normale
Mode compact
Avec une intégration
Une conversation normale
Mode compact
Avec une intégration
Veuillez vous assurer de lire le guide de contribution avant de faire une demande de traction.
Merci à toutes les personnes qui ont déjà contribué à Discord Composants!
