tina-astro
Para aprender a integrar Tina CMS en Astro con edición contextual sin penalizar el JavaScript en producción.
Demo que integra Tina CMS con Astro usando una directiva client:tina para hidratar componentes solo en el editor.
Notas y contexto
Qué es
tina-astro es un proyecto de demostración creado por Dawalt Conley que muestra cómo integrar Tina CMS en un sitio Astro habilitando la edición contextual dentro del editor visual de Tina. Su aportación principal es una directiva personalizada client:tina que aprovecha las directivas de cliente custom introducidas en Astro 2.6 para hidratar componentes React únicamente cuando la página se carga dentro del iframe del editor de Tina, manteniendo la web de producción prácticamente sin JavaScript.
Para qué sirve
- Entender el patrón de edición contextual de Tina sobre componentes Astro.
- Reutilizar la directiva
client:tinapara hidratar componentes solo dentro del editor visual. - Servir como base o referencia para montar un blog o sitio Astro editable con Tina CMS.
- Estudiar cómo combinar componentes React de Tina con la salida casi sin JS de Astro.
Cuándo usarlo
Útil como referencia educativa si quieres ver cómo se resolvía la edición visual de Tina en Astro mediante una directiva de cliente. Para proyectos nuevos conviene partir del enfoque oficial actual: la integración @tinacms/astro, que ofrece la misma edición visual mediante un puente en JavaScript plano y una integración de una sola línea, sin necesidad de React en el árbol de la página ni de directivas personalizadas.
Ejemplo
El uso de la directiva en un componente dentro del editor es:
---
import MyComponent from '../components/MyComponent.jsx';
---
<MyComponent client:tina {...props} />La directiva comprueba si la página se ejecuta dentro del iframe del editor (window.frameElement.id === 'tina-iframe') antes de hidratar el componente. Para arrancar el proyecto en local:
npm install
npm run devEl editor de Tina queda accesible en http://localhost:3000/admin/index.html#/~.
Puntos clave
- Demuestra una directiva
client:tinaque hidrata componentes solo dentro del editor de Tina. - Mantiene la web pública casi sin JavaScript al no hidratar fuera del iframe del editor.
- Combina Astro, Tina CMS y React como prueba de concepto de edición contextual.
Ten en cuenta
Es un proyecto demostrativo (no una librería ni una plantilla mantenida como producto), con muy poca actividad reciente y sin licencia declarada en el repositorio, por lo que conviene contactar al autor antes de reutilizarlo en producción. Además, el patrón de la directiva client:tina ha quedado superado: la integración oficial @tinacms/astro ya ofrece edición visual sin React en las páginas ni directivas custom, así que para empezar de cero es mejor seguir la documentación oficial de Tina para Astro.