Usar Trello como un CMS súper sencillo

A veces nuestros sitios necesitan un poco de gestión de contenidos. No siempre. No mucho. Pero un poco. El mercado de CMS está prosperando con productos enormes y accesibles, por lo que no nos faltan opciones. Afortunadamente, es un mundo muy diferente al que solía obligar a las empresas a desembolsar millones de dólares (no es un coste exacto: lo redondeé al billón más cercano) por un mundo en el que todo canta, todo baila, todo -Plataforma CMS integradora , totalmente personalizada y certificada para grandes empresas.

A veces, sin embargo, es bueno utilizar una realmente simple con la que cualquiera que actualice el contenido del sitio ya esté familiarizado, en lugar de familiarizarse con un nuevo CMS.

Me gusta mucho Trello para gestionar ideas y tareas. Y tiene una API. ¿Por qué no utilizarlo como fuente de contenido para un sitio web? Quiero decir, si podemos hacerlo con Google Sheets, ¿qué nos impide probar otras cosas?

Hola Trelo

Aquí tienes un sitio sencillo para explorar. Obtiene su contenido de este tablero de Trello y ese contenido se muestra en secciones. Cada sección está llena de los campos de título y descripción de una tarjeta en nuestro tablero de Trello.

Trello usa Markdown, lo que resulta útil aquí. Cualquiera que edite contenido en una tarjeta Trello puede aplicar formato de texto básico y tener el mismo flujo de Markdown en el sitio y transformarlo a HTML mediante un proceso de compilación.

Bloques de construcción

Soy un gran admirador de este modelo de ejecutar una compilación que extrae contenido de varios feeds y fuentes y luego los combina con una plantilla para generar el HTML de un sitio web. Desacopla la presentación de la gestión del contenido (de donde proviene el término “desacoplado” en los productos CMS modernos y populares). Y significa que somos libres de crear el sitio web de la manera que queramos con todos los trucos y técnicas que hemos aprendido aquí en CSS-Tricks.

Dado que incorporamos el contenido en el momento de la creación, no necesitamos preocuparnos por las cuotas de uso o el rendimiento de nuestras fuentes de datos si nuestros sitios se vuelven populares y generan mucho tráfico. ¿Y por qué no lo harían? ¡Mira qué bonitos los hemos hecho!

¡Quiero jugar!

Bien. Puede obtener una copia del código de este sitio y modificarlo a su gusto. Esta versión incluye información sobre cómo crear su propio tablero Trello y utilizarlo como fuente de contenido para la compilación.

• Repositorio de código de sitio de ejemplo en GitHub
• Sitio de demostración
• Clona e implementa tu propia copia con un par de clics

Si primero desea ver cómo funciona esto en lugar de sumergirse directamente en ello usted mismo, siga leyendo.

Descubriendo la API

Trello tiene una API bien documentada y un conjunto de recursos para desarrolladores. También hay un práctico módulo Node para simplificar la tarea de autenticar e interactuar con la API. Pero también puedes explorar la API modificando las URL cuando exploras tus tableros de Trello.

Por ejemplo, la URL del tablero de Trello anterior es:

https://trello.com/b/Zzc0USwZ/hellotrello

Si agregamos .jsona esa URL, Trello nos muestra el contenido representado como JSON. Echar un vistazo.

Podemos utilizar esta técnica para inspeccionar los datos subyacentes en Trello. Aquí está la URL de una tarjeta en particular:

https://trello.com/c/YVxlSEzy/4-sections-from-cards

Si usamos este pequeño truco y lo agregamos .jsona la URL veremos los datos que describen esa tarjeta.

Encontraremos cosas interesantes: identificaciones únicas para el tablero, la lista y la tarjeta. Podemos ver el contenido de la tarjeta y muchos metadatos.

¡Me encanta hacer esto! ¡Mira todos los datos encantadores! ¿Cómo lo usaremos?

Decidir cómo usar una tabla

Para este ejemplo, supongamos que tenemos un sitio con solo una página de contenido manejable. Una lista o columna en nuestro tablero sería ideal para controlar las secciones de esa página. Un editor podría darles títulos y contenidos y arrastrarlos en el orden que desee.

Necesitaremos el ID de la lista para poder acceder a ella a través de la API. Afortunadamente, ya hemos visto cómo descubrirlo: eche un vistazo a los datos de cualquiera de las tarjetas de la lista en cuestión. Cada uno tiene una idBoardpropiedad. ¡Bingo!

Generando el sitio

El plan es obtener los datos de Trello y aplicarlos a algunas plantillas para poblar nuestro sitio. La mayoría de los generadores de sitios estáticos (SSG) harían el trabajo. En eso son buenos. Usaré Eleventy porque creo que tiene los conceptos más simples de entender. Además, es muy eficiente para obtener datos y generar HTML limpio con Nunjucks (un lenguaje de plantillas popular).

Querremos poder usar una expresión en nuestra plantilla que genere un sectionelemento para cada elemento encontrado en un objeto JavaScript llamado trello:

!-- index.njk --{% for card in trello %}section  h2{{ card.name }}/h2  div    {% markdown %}      {{- card.desc | safe }}    {% endmarkdown %}  /div/section{% endfor %}

Obtención de datos para la construcción.

Una técnica popular en sitios Jamstack como este es ejecutar una compilación con Gulp, Grunt o [inserte aquí el último script de compilación nuevo] que recupera datos de varias API y fuentes, almacena los datos en un formato adecuado para el SSG y luego ejecuta el SSG para generar HTML. Esto funciona bastante bien.

Once simplifica las cosas aquí al admitir la ejecución de JavaScript en sus archivos de datos. En otras palabras, en lugar de aprovechar únicamente los datos almacenados como JSON o YAML, puede usar todo lo que devuelve JavaScript, lo que abre la puerta a realizar solicitudes directamente a las API cuando se ejecuta la compilación de Eleventy. No necesitaremos un paso de compilación por separado para ir a buscar datos primero. Una vez lo hará por nosotros.

Usamos eso para obtener los datos de nuestro trelloobjeto en las plantillas.

Podríamos usar el cliente Trello Node para consultar la API, pero resulta que todos los datos que queremos están ahí en el JSON del tablero. ¡Hacer! ¡En una sola petición! ¡Podemos buscarlo de una vez!

// trello.jsmodule.exports = () = {  const TRELLO_JSON_URL='https://trello.com/b/Zzc0USwZ/hellotrello.json';  // Use node-fetch to get the JSON data about this board  const fetch = require('node-fetch');  return fetch(TRELLO_JSON_URL)    .then(res = res.json())    .then(json = console.log(json));};

Sin embargo, no queremos mostrar todos los datos de ese tablero. Incluye tarjetas de otras listas, tarjetas que se han cerrado y eliminadas, etc. Pero podemos filtrar las tarjetas para incluir sólo las de interés gracias al método de JavaScript filter.

// trello.jsmodule.exports = () = {   const TRELLO_JSON_URL='https://trello.com/b/Zzc0USwZ/hellotrello.json'   const TRELLO_LIST_ID='5e98325d6d6bd120f2b7395f',    // Use node-fetch to get the JSON data about this board   const fetch = require('node-fetch');   return fetch(TRELLO_JSON_URL)   .then(res = res.json())   .then(json = {      // Just focus on the cards which are in the list we want     // and do not have a closed status     let contentCards = json.cards.filter(card = {       return card.idList == TRELLO_LIST_ID  !card.closed;     });      return contentCards; });};

¡Eso bastará! Con esto guardado en un archivo llamado trello.jsen el directorio de datos de Eleventy, tendremos estos datos listos para usar en nuestras plantillas en un objeto llamado trello.

¡Listo!

Pero lo podemos hacer mejor. También manejaremos las imágenes adjuntas y también agregaremos una forma de preparar el contenido para su revisión antes de publicarlo.

Adjuntos de imagen

Es posible adjuntar archivos a tarjetas en Trello. Cuando adjunta una imagen, aparece allí mismo en la tarjeta con la URL de origen del activo descrita en los datos. ¡Podemos hacer uso de eso!

Si una tarjeta tiene una imagen adjunta, queremos su URL de origen y agregarla como una etiqueta de imagen a lo que nuestra plantilla inserta en la página en el momento de obtener la creación. Eso significa agregar el Markdown para una imagen al Markdown en la propiedad de descripción de nuestro JSON ( card.desc).

Luego podemos dejar que Eleventy lo convierta en HTML junto con todo lo demás. Este código busca tarjetas en nuestro JSON y masajea los datos en la forma que necesitaremos.

// trello.js// If a card has an attachment, add it as an image // in the description markdowncontentCards.forEach(card = {  if(card.attachments.length) {    card.desc = card.desc + `n![${card.name}](${card.attachments[0].url} '${card.name}')`;  }});

Ahora también podemos mover imágenes en nuestro contenido. ¡Práctico!

Contenido de puesta en escena

Agreguemos una floritura más a cómo podemos usar Trello para administrar el contenido de nuestro sitio.

Hay algunas formas en las que es posible que deseemos obtener una vista previa del contenido antes de lanzarlo al mundo. Nuestro tablero Trello podría tener una lista para la puesta en escena y una lista para el contenido de producción. Pero eso sería difícil visualizar cómo el contenido nuevo coexiste con el que ya está publicado.

Una mejor idea sería utilizar las etiquetas de Trello para indicar qué tarjetas se publican en vivo y cuáles solo deben incluirse en una versión preparada del sitio. Esto nos dará un buen flujo de trabajo. Podemos agregar más contenido agregando una nueva tarjeta en el lugar correcto. Etiquételo con “etapa” y fíltrelo de las tarjetas que aparecen en nuestra sucursal de producción.

Se requiere un poco más de filtrado de nuestro objeto JavaScript:

// trello.js// only include cards labelled with "live" or with// the name of the branch we are incontentCards = contentCards.filter(card = {  return card.labels.filter(label = (    label.name.toLowerCase() == 'live' ||    label.name.toLowerCase() == BRANCH   )).length; });

Queremos que el contenido etiquetado como “en vivo” aparezca en cada versión de la compilación, ya sea en etapa de preparación o no. Además, buscaremos incluiremos tarjetas que tengan una etiqueta que coincida con una variable llamada “SUCURSAL”.

¿Cómo? ¿Qué es eso?

¡Aquí es donde nos volvemos astutos! Elegí alojar este sitio en Netlify (descargo de responsabilidad: trabajo allí). Esto significa que puedo ejecutar la compilación desde el entorno CI/CD de Netlify. Esto vuelve a implementar el sitio cada vez que envío cambios a su repositorio git y también da acceso a un par de cosas más que son realmente útiles para este sitio.

Uno es el despliegue de sucursales. Si desea un nuevo entorno para un sitio, puede crear uno creando una nueva rama en el repositorio de Git. La compilación se ejecutará en ese contexto y su sitio se publicará en un subdominio que incluye el nombre de la sucursal. Como esto.

Echa un vistazo y verás todas las tarjetas de nuestra lista, incluida la que tiene la etiqueta naranja "escenario". Lo incluimos en esta compilación porque su etiqueta coincidía con el nombre de la rama para el contexto de compilación. BRANCHera una variable de entorno que contenía cualquier rama en la que se ejecutara la compilación.

label.name.toLowerCase() == BRANCH

En teoría, podríamos crear tantas ramas y etiquetas como queramos y tener todo tipo de entornos de prueba y ensayo. ¿Listo para promocionar algo desde el “escenario” hasta el “en vivo”? ¡Cambia las etiquetas y listo!

¿Pero cómo se actualiza?

El segundo beneficio que obtenemos al ejecutar la compilación del sitio en un CI/CD como el de Netlify es que podemos activar una compilación para que se ejecute cuando queramos. Netlify nos permite crear ganchos de compilación. Estos son webhooks que inician una nueva implementación cuando les envía un HTTP POST.

Si Trello también admite webhooks, entonces podríamos unir estos servicios y actualizar el sitio automáticamente cada vez que cambie el tablero de Trello. Y adivina qué… ¡lo hacen! ¡Hurra!

Para crear un enlace de compilación de Netlify, deberá visitar el panel de administración de su sitio. (Puedes iniciar este sitio de demostración en un nuevo sitio de Netlify con un par de clics si quieres probarlo).

Ahora, armados con una nueva URL de enlace de compilación, necesitaremos registrar un nuevo webhook de Trello que lo llame cuando cambie el contenido. El método para crear webhooks en Trello es a través de la API de Trello.

El repositorio de este sitio incluye una pequeña utilidad para llamar a la API de Trello y crear el webhook por usted. Pero necesitarás tener un token y una clave de desarrollador de Trello. Afortunadamente, es fácil crearlos de forma gratuita visitando el portal para desarrolladores de Trello y siguiendo las instrucciones en "Autorizar un cliente".

¿Los tienes? ¡Excelente! Si los guarda en un .envarchivo de su proyecto, puede ejecutar este comando para configurar el webhook de Trello:

npm run hook --url https://api.netlify.com/build_hooks/XXXXX

Y con eso, hemos creado un pequeño flujo agradable para administrar contenido en un sitio simple. Podemos diseñar nuestra interfaz tal como queramos y hacer que las actualizaciones del contenido se realicen en un tablero de Trello que actualiza automáticamente el sitio cada vez que se realizan cambios.

¿Realmente podría usar esto?

Este es un ejemplo simplista. Eso es por diseño. Realmente quería demostrar los conceptos de desacoplamiento y de uso de la API de un servicio externo para impulsar el contenido de un sitio.

Esto no reemplazará un CMS desacoplado con todas las funciones para proyectos más complicados. Pero los principios son totalmente aplicables a sitios más complejos.

Este modelo, sin embargo, podría ser una gran opción para los tipos de sitios web que vemos para empresas como tiendas independientes, bares y restaurantes. Imagine un tablero de Trello que tiene una lista para administrar la página de inicio de un restaurante y otra para administrar los elementos del menú. Muy accesible para que lo administre el personal del restaurante y mucho mejor que cargar un nuevo PDF del menú cada vez que cambia.

¿Listo para explorar un ejemplo y experimentar con su propio tablero y contenido? Prueba esto:

• Clona e implementa el ejemplo anterior y comienza a realizar cambios.
• Obtenga más información sobre Netlify y lo que puede hacer con las compilaciones de sucursales de Netlify
• Profundice en los recursos para desarrolladores de Trello.