diff --git a/src/content/blog/2024-10-05-automatisation-carousel-linkedin.md b/src/content/blog/2024-10-05-automatisation-carousel-linkedin.md new file mode 100644 index 0000000000000..71d38cdb6f6c6 --- /dev/null +++ b/src/content/blog/2024-10-05-automatisation-carousel-linkedin.md @@ -0,0 +1,324 @@ +--- +title: Automatiser la génération des carousels Linkedin +pubDate: 2024-10-05T12:00:00.000Z +description: Comment utiliser Docker, Pandoc, LaTeX pour générer des carousels pour linkedin +tags: + - Docker + - Automatisation + - LaTeX + - Pandoc +slug: 2024/10/05/automate-linkedin-carrousel +img: /assets/stock-3.jpg +img_alt: nice abstract image +lastModified: 2024-10-05T12:00:00.000Z +updateDate: 2024-10-05T12:00:00.000Z +--- + +## Je n'aime pas Canvas + +Oui, c'est un chouette outil, c'est vrai. Mais moi, je n'aime pas, à chaque fois que je veux partager un sujet, je passe du temps à copier-coller depuis mon markdown vers Canvas. +Donc, j'ai décidé de faire une "petite" automatisation. + +Voici mon nouveau process pour générer des jolis carousels sur Linkedin, sans toucher autre chose qu'un terminal (avec NeoVim quand même... mais VsCode fera l'affaire): + +- Ecrire un markdown +- Lancer un script +- Publier le PDF + +## Pré-requis + +Il faut avoir : + +- un container Engine (Docker, ou autres) +- une belle photo de vous au format carré (650x650 par exemple) +- le plus beau logo de la terre + +## Création du setup + +### TL&DR (easy) + +```bash +git clone https://github.com/EtienneDeneuve/linkedin-carousel-generator.git +cd linkedin-carousel-generator +docker build -t pandoc-custom-ubuntu -f ./Dockerfile . --progress=plain +docker run --rm -it \ + -v "$(pwd):/data" \ + pandoc-custom-ubuntu \ + "files/prez.md" -o "output/prez-ubu.pdf" \ + --pdf-engine=xelatex \ + --pdf-engine-opt=-shell-escape \ + --pdf-engine-opt=-interaction=nonstopmode \ + --template="templates/v2.tex" +# open the output/prez-ubu.pdf +``` + +### Je veux le faire moi-même + +#### Créer les dossiers pour la structure + +```bash +mkdir -p linkedin-generator/{data/fonts,files,output,templates} +``` + +Ajouter votre photos dans `data` : + +- me.png (une photo de vous) +- logo-with-decors.png (votre joli logo) + +Ajouter vos fonts personnalisées si besoin dans `data/fonts`. + +#### Image Docker + +Il faut customiser l'image pandoc `ubuntu` pour ajouter des modules LaTeX complémentaire : + +```dockerfile +FROM pandoc/latex:latest-ubuntu + +# Installer les packages +RUN apt-get update && \ + apt-get install -y \ + python3-pygments \ + texlive-latex-recommended \ + texlive-latex-extra \ + texlive-fonts-recommended \ + texlive-fonts-extra \ + texlive-science \ + fonts-freefont-ttf && \ + rm -rf /var/lib/apt/lists/* + +# Générer les formats nécessaires pour les moteurs TeX installés +RUN fmtutil-sys --byfmt pdflatex +RUN fmtutil-sys --byfmt xelatex + +# Mettre à jour tlmgr sans exécuter les actions associées +RUN tlmgr update --self --all --no-execute-actions + +# Installer les dépendances pour que le template puisse fonctionner +RUN tlmgr install \ + adjustbox \ + enumitem \ + fvextra \ + lineno \ + mdframed \ + minted \ + ragged2e \ + titlesec \ + wrapfig \ + fvextra + +# Copier les polices personnalisées (optionnel) +# Si vous avez des polices spécifiques, vous pouvez les copier dans l'image +ADD data/fonts/* /usr/share/fonts/truetype/custom/ + +# Mettre à jour le cache des polices +RUN fc-cache -f -v +``` + +Builder cette image, `docker build -t pandoc-custom .` + +### Preparer le template LaTeX + +Bon, on va pas se mentir, on est entre nous, le LaTeX ce n'est pas hyper sexy, par contre c'est (vraiement) super puissant. + +Je vous donne mon template, libre à vous de le customiser ;) + +```latex +\documentclass{article} + +% ici, on active la partie "syntax" highlight +$if(highlighting-macros)$ +$highlighting-macros$ +$endif$ + + +% Encodage et polices +\usepackage[utf8]{inputenc} +\usepackage{fontspec} +\setmainfont{Dosis} % Vous pouvez changer la police si nécessaire + +% Packages requis +\usepackage{graphicx} +\usepackage{geometry} +\usepackage{fancyhdr} +\usepackage{titlesec} +\usepackage{xcolor} +\usepackage{tikz} +\usetikzlibrary{calc, backgrounds, shapes.arrows, shadows} +\usepackage{wrapfig} +\usepackage{ragged2e} % Pour l'alignement du texte +\usepackage{fvextra} +\usepackage{adjustbox} % Pour ajuster les images dans TikZ +\usepackage[cache=true]{minted} +\usepackage[unicode]{hyperref} % Charger hyperref ici + + +% Configuration de la géométrie de la page +\geometry{ + paperwidth=210mm, + paperheight=210mm, + margin=20mm, + tmargin=1mm +} + +% Définition des couleurs personnalisées +\definecolor{MainDark}{HTML}{105263} +\definecolor{Main}{HTML}{1a7996} +\definecolor{MainLight}{HTML}{96e0fd} +\definecolor{BcBackground}{HTML}{32809c} +\definecolor{SecondaryDark}{HTML}{7b9c35} +\definecolor{SecondaryLight}{HTML}{a3ce46} +\definecolor{AccentDark}{HTML}{07a6a0} +\definecolor{AccentLight}{HTML}{09d8d2} + +% Changer la couleur de fond en MainDark +\pagecolor{MainDark} + +% Configuration des en-têtes et pieds de page +\pagestyle{fancy} +\fancyhf{} % Effacer les en-têtes et pieds de page par défaut + +% En-tête avec le logo centré +\fancyhead[C]{% + \includegraphics[width=12cm]{data/logo-with-decors.png} +} + +% Supprimer la ligne horizontale sous l'en-tête +\renewcommand{\headrulewidth}{0pt} + +% Ajuster l'espace entre l'en-tête et le corps +\setlength{\headsep}{5cm} + +% Pied de page avec nom à gauche et flèche à droite +\fancyfoot[L]{% + \begin{tikzpicture}[remember picture, overlay] + % Photo de l'auteur dans un masque rond + \node[anchor=south west, xshift=1cm, yshift=2cm] at (current page.south west) {% + \begin{tikzpicture} + \draw[AccentLight, line width=1pt, drop shadow] (0,0) circle (1cm); + \clip (0,0) circle (1cm); + \node[anchor=center, inner sep=0pt] at (0,0) {\includegraphics[width=2cm]{data/me.png}}; + \end{tikzpicture} + }; + % Nom de l'auteur et de l'entreprise + \node[anchor=south west, xshift=3.2cm, yshift=2.8cm] at (current page.south west) {% + \begin{minipage}{5cm} + \raggedright + \small \textbf{$author$}\\ + \small $company$ + \end{minipage} + }; + \end{tikzpicture} +} +\fancyfoot[R]{% + \begin{tikzpicture}[remember picture, overlay] + % Flèche à droite + \node[anchor=south east, xshift=-1cm, yshift=2cm] at (current page.south east) {% + %\includegraphics[height=1cm]{data/arrow.png} + \begin{tikzpicture} + \node[ + single arrow, + draw=none, + fill=MainLight, + minimum width=1.5cm, + minimum height=3cm, + single arrow head extend=0.5cm, + anchor=west, + drop shadow + ] at (0,0) {}; + \end{tikzpicture} + }; + \end{tikzpicture} +} + +% Configuration des titres +\titleformat{\section}{ + \fontsize{42pt}{50pt}\bfseries\color{AccentLight}\centering +}{}{0pt}{} + +% Configuration du corps de texte +\renewcommand{\normalsize}{\fontsize{18pt}{22pt}\selectfont} + +% Alignement du texte à droite +\let\oldsection\section +\renewcommand{\section}[1]{% + \oldsection{#1} + \raggedright % Commence l'alignement à droite +} + +% Définition de \tightlist si nécessaire +\providecommand{\tightlist}{ + \setlength{\itemsep}{0pt}\setlength{\parskip}{0pt} +} + +% Charger hyperref en dernier +\usepackage[unicode]{hyperref} +\color{MainLight} + +\begin{document} + +$body$ + +\end{document} +``` + +Sauvegarder le dans le dossier `templates`, avec un nom comme par exemple `carousel.tex`. + +### Ecrire un markdown + +````markdown +--- + +author: Etienne Deneuve +company: www.simplified.fr +--- + +# J'aime pas Canvas + +Oui, c'est un chouette outil, mais, moi je n'aime pas... + + + +\newpage + +# Comment faire sans ? + +- Ecrire un markdown +- Lancer un script +- Publier le PDF + +\newpage + +# Docker, Pandoc, LaTex + + + + +```bash +docker run --rm -it \ + -v "$(pwd):/data" \ + pandoc-custom \ + "files/prez.md" -o "output/prez.pdf" \ + --pdf-engine=xelatex \ + --pdf-engine-opt=-interaction=nonstopmode \ + --template="templates/v2.tex" +``` +```` + +Sauvegarder le dans `files/prez.md` par exemple. + +#### Lancer la conversion + +Vérifier vos noms de fichiers ;) + +```bash +export sourceMd="files/prez.md" +export destinationPdf="output/prez.pdf" +export templateTex="templates/v2.tex" +docker run --rm -it \ + -v "$(pwd):/data" \ + pandoc-custom \ + "${sourceMd}" -o "${destinationPdf}" \ + --pdf-engine=xelatex \ + --pdf-engine-opt=-interaction=nonstopmode \ + --template="${templateTex}" +```