Incrustar flujos de N8N en Hugo
A priori, la publicación de tus propios workflows de n8n en su web de creadores puede parecer la forma más rápida y sencilla pero resulta que el filtro es terrible y no importa que el flujo funcione o no, lo importante es que el formato sea el correcto. Por esto me decido a publicarlos en mi propio blog.
El objetivo esta vez está claro, queremos guardar un workflow de n8n exportado en json en la carpeta “static/workflows” y que se pueda incrustar en un post en el que describiremos como funciona y cuales son sus bloques. Estamos de suerte, n8n tiene un componente para publicar sus workflows y lo que aquí voy a hacer es adaptarlo a un shortcode de Hugo.
Después de un rato peleándome con el código he dado con el contenido que deberá tener el archivo “n8n_workflow.html” que crearemos en la carpeta “layouts/shortcodes”
<style>
n8n-demo {
--n8n-workflow-min-height: 400px;
}
</style>
<!-- Polyfills y componente -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js"></script>
<script src="https://www.unpkg.com/lit@2.0.0-rc.2/polyfill-support.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@n8n_io/n8n-demo-component/n8n-demo.bundled.js"></script>
<n8n-demo
frame="true"
workflow='{{ readFile (printf "static%s" (.Get `src`)) | safeHTML }}'>
</n8n-demo>
Con esto y el correspondiente workflow exportado guardado en la carpeta “static/workflows” ya sólo queda invocar el shortcode dentro del post
{{< n8n_workflow src="/workflows/rss_mastodon_telegram" >}}
Y nos quedará algo como esto:
Nada más sencillo, rápido y potente