Conversation
Le plugin ne se limitera plus aux images Open Graph : il va aussi porter l'aperçu des liens dans Discord. Le nom du dossier, celui du plugin, les logs et le dossier de cache suivent.
Zallom
changed the title
Discord permet maintenant à un site de remplacer la carte Open Graph par une mise en page construite avec ses propres composants, via un payload `discord:component-embed` posé dans le <head> (discord/discord-api-docs#8606). La passe tourne après la génération des images : elle relit le HTML déjà écrit, donc elle récupère l'image OG de la page sans dupliquer la logique de nommage. Chaque carte porte la couleur du site, le titre et la description de la page, son image, et une rangée de boutons vers la documentation, le support et l'invitation du bot, dans la langue de la page.
Sur une page de hub, reprendre le gabarit générique ne dit rien de ce qu'on y trouve. Le blog liste ses deux derniers articles et le glossaire trois articles à la une, chacun avec sa vignette ; l'accueil de la documentation pointe vers l'installation, les fonctionnalités, les commandes et les dysfonctionnements. Les titres de ces entrées sont lus dans les pages cibles, donc ils sont déjà traduits. Les deux hubs qui listent des entrées se passent de la grande image en tête : les vignettes suffisent, et la carte reste lisible.
Deux acteurs écrivaient la balise : react-helmet la posait depuis `themeConfig.image`, le plugin la réécrivait ensuite dans le HTML. Le crawler lisait la bonne valeur, le DOM affichait l'ancienne après hydratation. On retire donc la valeur par défaut du thème. Le plugin devient seul responsable, sauf pour les articles de blog qui gardent l'image de leur frontmatter. Les pages sans carte dédiée reçoivent celle de l'accueil, ce qui supprime au passage la dernière dépendance à une image externe.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Discord documents a way for a site to replace its Open Graph card with a layout built from Discord components: discord/discord-api-docs#8606.
The
og-imagesplugin becomessocial-previewand now handles both: the OG image and the Discord card. When a link to the site is pasted into Discord, the card carries the site's accent color, the page title and description, its image, and buttons to the documentation, the support server and the bot invite, in the language of the page.Hub pages get their own card: the blog lists its two latest posts, the glossary three featured articles, and the documentation home points to the entry pages. 95 pages per locale, 475 cards in total. Open Graph tags stay in place and serve as the fallback.
Along the way,
themeConfig.imageis removed: react-helmet and the plugin were both writingog:image, so there is now a single writer per page.Before merging
Discord's crawler must be able to get through. Tested in production:
Discordbot/2.0gets a 200 on both pages and images.