Decap CMS y Astro

Decap CMS (anteriormente Netlify CMS) es un sistema de gestión de contenido de código abierto basado en Git.

Decap te permite aprovechar al máximo todas las funciones de Astro, incluida la optimización de imágenes y las colecciones de contenido.

Decap añade una ruta (normalmente /admin) a tu proyecto que cargará una aplicación React para permitir a los usuarios autorizados administrar el contenido directamente desde el sitio web desplegado. Decap enviará los cambios directamente al repositorio fuente de su proyecto Astro.

Instalar DecapCMS

Hay dos opciones para añadir Decap a Astro:

Instala Decap a través de un administrador de paquetes con el siguiente comando:

npm install decap-cms-app

pnpm add decap-cms-app

yarn add decap-cms-app

Importa el paquete a una etiqueta <script> dentro del <body> de tu página.

     <body>
       <!-- Incluye el script que crea la página y alimenta Decap CMS -->
       <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
    </body>

Configuración

Crea una carpeta de administración estática en public/admin/
Agrega config.yml a public/admin/:
- Directorypublic
  - Directoryadmin
    config.yml

Para agregar soporte para colecciones de contenido, configura cada esquema en config.yml. El siguiente ejemplo configura una colección blog, definiendo una etiqueta para la propiedad frontmatter de cada entrada:

collections:
  - name: "blog" # Usado en rutas, por ejemplo, /admin/collections/blog
    label: "Blog" # Usado en la interfaz de usuario
    folder: "src/content/blog" # La ruta a la carpeta donde se almacenan los documentos
    create: true # Permitir a los usuarios crear nuevos documentos en esta colección
    fields: # Los campos para cada documento, generalmente al principio
       - { label: "Layout", name: "layout", widget: "hidden", default: "blog" }
       - { label: "Title", name: "title", widget: "string" }
       - { label: "Publish Date", name: "date", widget: "datetime" }
       - { label: "Featured Image", name: "thumbnail", widget: "image" }
       - { label: "Rating (scale of 1-5)", name: "rating", widget: "number" }
       - { label: "Body", name: "body", widget: "markdown" }

Agregar la ruta admin para tu aplicación React. Este archivo puede ser public/admin/index.html junto con config.yml o, si prefieres utilizar una ruta de Astro, src/pages/admin.astro.

Directorypublic
- Directoryadmin -config.yml
  - index.html

<!doctype html>
<html lang="es">
  <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="robots" content="noindex" />
   <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
   <title>Administrador de contenidos</title>
  </head>
 <body>
   <script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
 </body>
</html>

Para habilitar la carga de medios a una carpeta específica a través del editor de Decap, agrega una ruta adecuada:

media_folder: "src/assets/images" # Ubicación donde se almacenarán los archivos en el repositorio
public_folder: "src/assets/images" # El atributo src para los medios cargados

Consulta la documentación de configuración de Decap CMS para obtener instrucciones y opciones completas.

Uso

Navega hasta yoursite.com/admin/ para usar el editor de Decap CMS.

Autenticación

Decap CMS con Netlify Identity

Decap CMS fue desarrollado originalmente por Netlify y tiene soporte de primera clase para Netlify Identity.

Cuando despliegues en netlify, configura la identidad para tu proyecto a través del panel de Netlify e incluye el Netlify Identity Widget en la ruta admin de tu proyecto. Opcionalmente, incluye el widget de identidad en la página de inicio de tu sitio si planeas invitar a nuevos usuarios por correo electrónico.