diff --git a/src/content/docs/es/guides/cms/caisy.mdx b/src/content/docs/es/guides/cms/caisy.mdx new file mode 100644 index 0000000000000..8c905695d50cd --- /dev/null +++ b/src/content/docs/es/guides/cms/caisy.mdx @@ -0,0 +1,65 @@ +--- +title: Caisy y Astro +description: Agrega contenido a tu proyecto Astro usando Caisy como CMS +sidebar: + label: Caisy +type: cms +logo: caisy +i18nReady: true +stub: true +--- + +[Caisy](https://caisy.io/) es un CMS headless que expone una API de GraphQL para acceder al contenido. + +## Cómo usar Caisy CMS con Astro + +Usa `graphql-request` y el renderizador de texto enriquecido de Caisy para Astro para recuperar los datos de tu CMS y mostrar tu contenido en una página Astro: + +```astro title="src/pages/blog/[...slug].astro" +--- +import RichTextRenderer from '@caisy/rich-text-astro-renderer'; +import { gql, GraphQLClient } from 'graphql-request'; + +const params = Astro.params; + +const client = new GraphQLClient( + `https://cloud.caisy.io/api/v3/e/${import.meta.env.CAISY_PROJECT_ID}/graphql`, + { + headers: { + 'x-caisy-apikey': import.meta.env.CAISY_API_KEY + } + } +); + +const gqlResponse = await client.request( + gql` + query allBlogArticle($slug: String) { + allBlogArticle(where: { slug: { eq: $slug } }) { + edges { + node { + text { + json + } + title + slug + id + } + } + } + } + `, + { slug: params.slug } +); + +const post = gqlResponse?.allBlogArticle?.edges?.[0]?.node; +--- +