Skip to content

Commit

Permalink
fix: images & links ref
Browse files Browse the repository at this point in the history
  • Loading branch information
HunteRoi committed Jun 17, 2022
1 parent 385297d commit 703c6cd
Show file tree
Hide file tree
Showing 29 changed files with 100 additions and 225 deletions.
12 changes: 6 additions & 6 deletions docs/discord/messages/faire-des-annonces-et-autre.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Rien de plus simple : il suffit d'écrire `#` suivi du nom du canal. Tu peux mê
<DiscordMessages>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
<DiscordMention type='channel'>informations</DiscordMention>
</DiscordMessage>
Expand All @@ -38,20 +38,20 @@ Pour créer un hyper-lien vers un utilisateur ou même un rôle, c'est une synta
<DiscordMessages>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
highlight
>
<DiscordMention type='user'>HunteRoi</DiscordMention> (utilisateur)
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
<DiscordMention type='user'>EverKill</DiscordMention> (utilisateur)
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
<DiscordMention type='role'>Modérateur</DiscordMention> (rôle)
</DiscordMessage>
Expand All @@ -68,14 +68,14 @@ Discord possède également 2 rôles spéciaux : "here" et "everyone". Le premie
<DiscordMessages>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
highlight
>
<DiscordMention type='user'>everyone</DiscordMention> (rôle spécial)
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
highlight
>
<DiscordMention type='role'>here</DiscordMention> (rôle spécial)
Expand Down
4 changes: 2 additions & 2 deletions docs/discord/messages/go-live.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@ Nous te proposons de consulter directement le tutoriel réalisé par Discord pou

<RocketList>
<li>
<a href='https://support.discordapp.com/hc/fr/articles/360040816151-Share-your-screen-with-Go-Live-Screen-Share'>
<a href='https://support.discord.com/hc/en-us/articles/360040816151-Go-Live-and-Screen-Share'>
Go Live FAQ
</a>
<FlagEmoji name='discord/flag_gb.svg' />
</li>
<li>
<a href='https://support.discordapp.com/hc/fr/articles/360030714312-Go-Live-FAQ'>
<a href='https://support.discord.com/hc/fr/articles/360040816151-Go-Live-et-Partage-d-%C3%89cran'>
Go Live FAQ
</a>
<FlagEmoji name='discord/flag_fr.svg' />
Expand Down
22 changes: 11 additions & 11 deletions docs/discord/messages/le-markdown.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,66 +13,66 @@ import {
Discord permet de mettre son texte en forme à l'aide de [la syntaxe Markdown](https://www.markdownguide.org/).

:::note
Si tu veux en apprendre plus sur Discord, nous t'invitons à consulter [leurs tutoriels](https://support.discordapp.com/hc/fr/categories/115000217151).
Si tu veux en apprendre plus sur Discord, nous t'invitons à consulter [leurs tutoriels](https://support.discord.com/hc/fr/categories/115000217151).
:::

Tu trouveras ci-dessous un récapitulatif des différents symboles utilisables dans Discord afin de mettre en forme tes messages! 😉

<DiscordMessages>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en <i>italique</i> si tu entoures ton texte du symbole *
ou du symbole _ comme ceci: *italique* ou _italique_.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en <b>gras</b> si tu entoures ton texte 2x du symbole *
comme ceci: **gras**.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en{' '}
<span style={{ textDecoration: 'line-through' }}>barré</span> si tu
entoures ton texte 2x du symbole ~ comme ceci: ~~barré~~.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en <u>souligné</u> si tu entoures ton texte 2x du symbole
_ comme ceci: __souligné__.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en <span className='spoiler'>caché</span> si tu entoures
ton texte 2x du symbole | comme ceci: ||souligné||.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en <blockquote>citation</blockquote> si tu commences ton
message avec le symbole > comme ceci:
<br /> > citation.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en <code>code</code> si tu entoures ton texte avec le
symbole ` comme ceci: `code`.
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire en
<code className='multiline'>code multiline</code>
Expand All @@ -81,7 +81,7 @@ Tu trouveras ci-dessous un récapitulatif des différents symboles utilisables d
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux également ajouter une langue pour ton code en écrivant ainsi:
<br />
Expand All @@ -97,7 +97,7 @@ Tu trouveras ci-dessous un récapitulatif des différents symboles utilisables d
</DiscordMessage>
<DiscordMessage
author='HunteRoi'
avatar='https://media.discordapp.net/attachments/622823610905657375/955445785871392828/5407f1edadb857875b233270a1567ee3.png'
avatar='/wiki/img/discord/hunteroi.png'
>
Tu peux écrire une date sous forme de "timestamp" (exemple:{' '}
<samp>21 March 2022 00:00</samp>) en écrivant ta date de cette manière:
Expand Down
134 changes: 17 additions & 117 deletions docs/discord/plus-loin/les-embeds.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
sidebar_position: 3
sidebar_position: 2
title: Les intégrations
---

import Image from '../../../src/components/Image';
import RocketList from '../../../src/components/RocketList';

Tu l'as sans doute remarqué quand tu postes un lien sur Discord, ou alors quand tu envoies un message contenant une image mais l'entité `message` est composée d'[énormément de choses décrites dans la documentation](https://discordapp.com/developers/docs/resources/channel#message-object). Retenons de cette liste quelques éléments importants :
Tu l'as sans doute remarqué quand tu postes un lien sur Discord, ou alors quand tu envoies un message contenant une image mais l'entité `message` est composée d'[énormément de choses décrites dans la documentation](https://discord.com/developers/docs/resources/channel#message-object). Retenons de cette liste quelques éléments importants :

<RocketList>
<li>un identifiant</li>
Expand All @@ -24,25 +24,25 @@ Tu l'as sans doute remarqué quand tu postes un lien sur Discord, ou alors quand

> Du verbe anglais "to embed" qui signifie "intégrer", un embed est une intégration visuelle sur un site web, une application, un IRC, etc. Tu l'utilises dans la vie de tous les jours quand, par exemple, tu partages un lien YouTube ou une page du journal de ton école sur Twitter, Facebook ou autre!
Une intégration (un embed), c'est également une entité générée par Discord et qui permet de mettre en avant des ressources de manière plus interactive. En effet, lorsque tu postes un lien YouTube par exemple, une intégration est automatiquement créé afin de pouvoir jouer la vidéo YouTube _depuis l'application Discord_ (sans ouvrir ton navigateur). Elle est _intégrée_ à Discord. Voici la page de la documentation officielle : https://discordapp.com/developers/docs/resources/channel#embed-object.
Une intégration (un embed), c'est également une entité générée par Discord et qui permet de mettre en avant des ressources de manière plus interactive. En effet, lorsque tu postes un lien YouTube par exemple, une intégration est automatiquement créé afin de pouvoir jouer la vidéo YouTube _depuis l'application Discord_ (sans ouvrir ton navigateur). Elle est _intégrée_ à Discord. Voici la page de la documentation officielle : https://discord.com/developers/docs/resources/channel#embed-object.

## Les limitations

:::note
Comme toute entité, une intégration est également soumise à des limites. Ces dernières [sont décrites dans la documentation en ligne](https://discordapp.com/developers/docs/resources/channel#embed-limits).
Comme toute entité, une intégration est également soumise à des limites. Ces dernières [sont décrites dans la documentation en ligne](https://discord.com/developers/docs/resources/channel#embed-limits).
:::

Outre les limitations de contenu, Discord bloque l'utilisation de certains champs.

<Image
src='https://images-ext-1.discordapp.net/external/7PBH4eRp1AItUJtYBvtDIbhZ7w9te_Z_aCTKOGN1BaI/https/i.imgur.com/5KeHUgW.png'
src='https://i.imgur.com/5KeHUgW.png'
alt="Protected embed's fields"
/>

Ces bloquages permettent ainsi à Discord de s'assurer le monopole sur la création de certaines intégrations spécifiques, par exemple celles comprenant des vidéos:

<Image
src='https://cdn.discordapp.com/attachments/497053863707148302/497098013903159316/embed-properties2.png'
src='/img/discord/embed-properties2.png'
alt='YouTube embedded in Discord'
/>

Expand All @@ -51,123 +51,23 @@ Ces bloquages permettent ainsi à Discord de s'assurer le monopole sur la créat
Une intégration soit formée de beaucoup d'éléments. Il est donc important de comprendre sa structure JSON afin de comprendre à quel élément affiché correspond chaque paire clé-valeur.

<Image
src='https://media.discordapp.net/attachments/497053863707148302/497098157839351808/embed-structure.png'
src='/img/discord/embed-properties.png'
alt='Embed Structure'
/>

Voici une image et sa légende, expliquant ainsi la structure visuelle d'une intégration Discord :

<Image
src='https://media.discordapp.net/attachments/497053863707148302/497098326987243535/embed-full-structure.png'
alt='Explained Embed Structure'
/>

<ol>
<li>
<span>
<samp>author</samp>, le champ "auteur" composé de:
</span>
<ul>
<li>
<samp>name</samp>, le nom de l'auteur
</li>
<li>
<samp>url</samp>, l'URL à ouvrir en cas de clic
</li>
<li>
<samp>icon_url</samp>, l'URL de l'icône
</li>
</ul>
</li>
<li>
<span>
<samp>thumbnail</samp>, le champ "image" affiché comme vignette en
haut à droite composé de:
</span>
<ul>
<li>
<samp>url</samp>, le lien vers cette image (automatiquement
redimensionnée)
</li>
</ul>
</li>
<li>
<span>deux champs étroitement liés:</span>
<ul>
<li>
<samp>title</samp>, le titre
</li>
<li>
<samp>url</samp>, l'URL à ouvrir en cas de clic sur le titre
</li>
</ul>
</li>
<li>
<samp>description</samp>, le contenu de l'intégration
</li>
<li>
<span>
<samp>fields</samp>, le contenu le plus intéressants : les champs.
Ils sont tous composés ainsi:
</span>
<ul>
<li>
<samp>name</samp>, le nom du champ
</li>
<li>
<samp>value</samp>, le contenu du champ
</li>
<li>
<samp>inline</samp>, un booléen qui le contenu doit être aligné
quand c'est possible (comme les champs 4 et 5)
</li>
</ul>
</li>
<li>
<span>
<samp>image</samp>, le champ "image" affiché en dessous des champs
de l'intégration et composé de:
</span>
<ul>
<li>
<samp>url</samp>, le lien vers cette image (automatiquement
redimensionnée)
</li>
</ul>
</li>
<li>
<span>le bas de page étroitement liés à 2 paires:</span>
<ul>
<li>
<span>
<samp>footer</samp>, le bas de page lui-même composé de:
</span>
<ul>
<li>
<samp>icon_url</samp>, l'URL de l'icône
</li>
<li>
<samp>text</samp>, le texte affiché à droite de l'icône
</li>
</ul>
</li>
<li>
<samp>timestamp</samp>, l'horodatage en format ISO8601
</li>
</ul>
</li>
<li>le code couleur en base 16</li>
</ol>
Nous conseillons fortement de se rendre sur le [Discord Embed Builder](https://autocode.com/tools/discord/embed-builder/) et de jouer avec les différents champs afin de comprendre leur fonctionnement.

:::tip
Si tu as ton code couleur en hexadécimal, nous te conseillons d'utiliser `parseInt` du langage JavaScript pour le mettre en base 10 avant de l'utiliser dans ton intégration.
Tu peux te rendre sur [color-hex](https://www.color-hex.com/) et choisir une couleur depuis leur site web!
Ajoute ensuite `0x` devant le code hexadécimal. C'est une notation qui change la chaîne de caractères écrite en un code hexadécimal 😁

Tu peux aussi utiliser la fonction `parseInt` et la méthode `.toString(16)` de JavaScript:
```js
> parseInt("995b52", 16)
> 10050386
```
const hexadecimalBase = 16;

Tu peux également utiliser [Blargbot](https://blargbot.xyz) et [son système de sous-tag](https://blargbot.xyz/tags#base) afin de transformer ton nombre dans la base de ton choix :

<Image src='/img/discord/base-math.png' alt="Blargbot's {base} subtag" />
const decimalNumber = parseInt('a49d33', hexadecimalBase); // 10788147
decimalNumber.toString(hexadecimalBase); // 'a49d33'
decimalNumber === 0xa49d33; // true
decimalNumber === 10788147; // true
```
:::
14 changes: 4 additions & 10 deletions docs/discord/plus-loin/les-identifiants.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Discord est construit autour de plusieurs entités :
</li>
</RocketList>

Chacune de ces entités est identifiée par un nombre unique appelé "[Snowflake](https://discordapp.com/developers/docs/reference#snowflakes)". Pour récupérer l'ID d'une entité, il faut en général faire un clic droit sur celle-ci et sélectionner "Copier l'id" (sur le client Discord).
Chacune de ces entités est identifiée par un nombre unique appelé "[Snowflake](https://discord.com/developers/docs/reference#snowflakes)". Pour récupérer l'ID d'une entité, il faut en général faire un clic droit sur celle-ci et sélectionner "Copier l'id" (sur le client Discord).

Ces identifiants sont très utiles, étant donné qu'ils référencent des entités de manière unique.
Ils permettent donc de réaliser des hyper-liens de manière globale à travers Discord (référencer un canal écrit d'une guilde dans une autre, taguer une personne dans un canal auquel elle n'a pas accès, etc.).
Expand All @@ -34,7 +34,7 @@ Pour aller plus loin dans cette documentation, il est important d'activer le **M
3. Descendre dans les paramètres Avancés et cocher le Mode développeur.

<Image
src='https://cdn.discordapp.com/attachments/497053573541134365/497086300935946251/mode-dev.gif'
src='https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46in28yuz0kkl9h85cie.gif'
alt='Enable Dev Mode'
/>

Expand All @@ -55,19 +55,13 @@ Le contenu de ce tableau [est décrit dans la documentation en ligne](https://di
| Emoji personnalisé | Taper l'emoji dans un canal, préfixé du caractère `\` (exemple: `\:trollface:`) puis l'envoyer dans le chat. Le parser de Discord fera ainsi apparaître non pas l'emoji mais son identifiant : `<:trollface:501010468433952770>` | `<:_:ID:>` ou `<a:_:ID:>` s'il s'agit d'un emoji animé | <Image src="/img/discord/emoji-mention.png" alt="Emoji Mention" /> |
| Webhook | Il n'est possible de récupérer l'ID d'un webhook\* qu'à travers l'interface Discord elle-même (dans la liste des webhooks, qui se trouve dans les paramètres du serveur). | | |

Il est possible de créer un lien spécifique avec l'identifiants d'une guilde, d'un canal et d'un message : `https://discordapp.com/channels/GUILD_ID/CHANNEL_ID/MESSAGE_ID`. Ce lien permet ainsi de "sauter" sur le message référencé dans le canal de la guilde.
Il est possible de créer un lien spécifique avec l'identifiants d'une guilde, d'un canal et d'un message : `https://discord.com/channels/GUILD_ID/CHANNEL_ID/MESSAGE_ID`. Ce lien permet ainsi de "sauter" sur le message référencé dans le canal de la guilde.
Très utile quand on veut retrouver des choses qui sont très haut dans une conversation.

<!--
<video autoPlay loop>
<source src="https://i.gyazo.com/0e0608f4cc9a7488840c916f66469bbc.mp4" type="video/mp4"/>
</video>
-->

<Image src='/img/discord/message-jump.gif' alt='Message Jump GIF' />

:::tip
Il est possible de créer rapidement un tel lien en cliquant sur le message et en appuyant sur "Copier le lien du message".
:::

\*Le lien d'un webhook correspondre au modèle suivant : `https://discordapp.com/api/webhooks/WEBHOOK_ID/WEBHOOK_TOKEN`. Plus d'infos à la page suivante! 😉
\*Le lien d'un webhook correspondre au modèle suivant : `https://discord.com/api/webhooks/WEBHOOK_ID/WEBHOOK_TOKEN`. Plus d'infos à la page suivante! 😉
Loading

0 comments on commit 703c6cd

Please sign in to comment.