Un carrousel LinkedIn pas comme les autres

Tu as peut-être vu passer mon post avec ce carrousel LinkedIn.

Ça t'a peut-être fait sourire ou non.

Mais au delà du contenu, il faut que tu saches que ce carrousel à l'origine c'est un site web ou plutôt des slides créées avec slidev et l'aide de GitHub Copilot.

Slidev, c'est l'outil pour les développ∙eur∙euses qui permet de faire facilement de jolies slides en markdown.

Comme derrière ce n'est rien de plus qu'un site en Vue qui tourne en local, on peut tout personnaliser la mise en page comme on a l'habitude en développement web.

Or GitHub Copilot pour développer un site web il n'est pas mauvais, et même bien meilleur que moi pour le design.

En plus si j'utilise les bons MCP Servers, il devient encore plus pertinent :

→ context7 pour qu'il ait accès à la doc de slidev

→ Chrome Dev Tools pour qu'il puisse vérifier que tout fonctionne

Mais avant d'implémenter quoique ce soit, je lui ai demandé d'aller chercher sur le web les bonnes pratiques pour créer des carrousels.

Ça lui a donné des "spécifications" pour les mises en page possibles, des formats à respecter et des consignes à mettre dans les instructions pour Copilot.

Pour le carrousel que j'avais en tête, j'avais surtout besoin d'afficher des images de posts LinkedIn fictifs.

Alors il m'a fait un modèle de page et un composant qui représentent un post LinkedIn. Comme j'étais moyennement satisfait du résultat je lui ai donné une capture d'écran d'un véritable post pour qu'il améliore le rendu.

L'export en PDF, slidev le gère nativement donc après un certain nombre d'itérations, et d'ajustements je suis arrivé à ce qu'on voit en dessous.

Le résultat, j'en suis plutôt content. Tu fais peut-être mieux avec Canvas ou d'autres logiciels mais moi j'aime bien le fait que ça soit juste du code. Ça me fait une base que je vais pouvoir réutiliser et enrichir à l'avenir.

Et pour me faciliter la réutilisation, j'ai créé un prompt qui connait les composants et mises en page disponibles et qui peut à partir d'un texte ou d'une idée générer le contenu du carrousel.

Comme quoi, même à travers un bête post LinkedIn, on peut en apprendre et en mettre en application des choses.