diff --git a/src/content/docs/es/guides/cms/tina-cms.mdx b/src/content/docs/es/guides/cms/tina-cms.mdx new file mode 100644 index 0000000000000..0b4b0abe9309d --- /dev/null +++ b/src/content/docs/es/guides/cms/tina-cms.mdx @@ -0,0 +1,160 @@ +--- +title: TinaCMS y Astro +description: Agrega contenido a tu proyecto Astro usando Tina como CMS +sidebar: + label: TinaCMS +type: cms +stub: false +logo: tina-cms +i18nReady: true +--- +import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import { Steps } from '@astrojs/starlight/components'; + +[TinaCMS](https://tina.io/) es un sistema de gestión de contenidos headless basado en Git. + +## Integración con Astro + +Para comenzar, necesitarás un proyecto Astro existente. + + +1. Ejecuta el siguiente comando para instalar Tina en tu proyecto Astro. + + + + ```shell + npx @tinacms/cli@latest init + ``` + + + ```shell + pnpm dlx @tinacms/cli@latest init + ``` + + + ```shell + yarn dlx @tinacms/cli@latest init + ``` + + + + - Cuando se te pida un Cloud ID, presiona Enter para omitirlo. Generarás uno más tarde si deseas usar Tina Cloud. + - Cuando se te pregunte "¿Qué framework estás usando?", elige **Other**. + - Cuando se te pregunte dónde se almacenan los assets públicos, presiona Enter. + + Una vez que esto haya finalizado, ahora deberías tener una carpeta `.tina` en la raíz de tu proyecto y un archivo `hello-world.md` generado en `content/posts`. + +2. Cambia el script `dev` en `package.json`: + + + + ```json del={4} ins={5} + // package.json + { + "scripts": { + "dev": "astro dev", + "dev": "tinacms dev -c \"astro dev\"" + } + } + ``` + + + ```json del={4} ins={5} + // package.json + { + "scripts": { + "dev": "astro dev", + "dev": "tinacms dev -c \"astro dev\"" + } + } + ``` + + + ```json del={4} ins={5} + // package.json + { + "scripts": { + "dev": "astro dev", + "dev": "tinacms dev -c \"astro dev\"" + } + } + ``` + + + +3. TinaCMS ahora está configurado en modo local. Prueba esto ejecutando el script `dev` y luego navegando a `/admin/index.html#/collections/post`. + + Editar la publicación “Hello, World!” actualizará el archivo `content/posts/hello-world.md` en el directorio de tu proyecto. + +4. Configura tus colecciones de Tina editando la propiedad `schema.collections` en `.tina/config.ts`. + + Por ejemplo, puedes agregar una propiedad obligatoria de frontmatter de "fecha de publicación" a tus publicaciones: + + ```js title=".tina/config.ts" ins={35-40} + import { defineConfig } from "tinacms"; + + // Tu proveedor de hosting probablemente expone esto como una variable de entorno + const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main"; + + export default defineConfig({ + branch, + clientId: null, // Obtén esto de tina.io + token: null, // Obtén esto de tina.io + build: { + outputFolder: "admin", + publicFolder: "public", + }, + media: { + tina: { + mediaRoot: "images", + publicFolder: "public", + }, + }, + schema: { + collections: [ + { + name: "posts", + label: "Publicaciones", + path: "src/content/posts", + format: 'mdx', + fields: [ + { + type: "string", + name: "title", + label: "Título", + isTitle: true, + required: true, + }, + { + type: "datetime", + name: "posted", + label: "Fecha de publicación", + required: true, + }, + { + type: "rich-text", + name: "body", + label: "Contenido", + isBody: true, + }, + ], + }, + ], + }, + }); + ``` + + Aprende más sobre las colecciones de Tina [en la documentación de Tina](https://tina.io/docs/reference/collections/). + +5. En producción, TinaCMS puede hacer commits de los cambios directamente en tu repositorio de GitHub. Para configurar TinaCMS para producción, puedes elegir usar [Tina Cloud](https://tina.io/docs/tina-cloud/) o autoalojar el [Tina Data Layer](https://tina.io/docs/self-hosted/overview/). Puedes [leer más sobre cómo registrarte en Tina Cloud](https://app.tina.io/register) en la documentación de Tina. + + +## Recursos oficiales + +- [Guía de integración de TinaCMS con Astro](https://tina.io/docs/frameworks/astro/). + +## Recursos de la comunidad + +- [Plantilla de inicio de Astro y Tina con edición visual](https://github.com/dawaltconley/tina-astro) por Jeff See + Dylan Awalt-Conley +- [Plantilla de inicio de Astro y Tina con edición básica](https://github.com/tombennet/astro-tina-starter/tree/main) por Tom Bennet +- [Uso de la optimización de imágenes de Astro con Tina](https://joschua.io/posts/2023/08/16/how-to-use-astro-assets-with-tina-cms/)