Front Matter CMS y Astro

Front Matter CMS trae el CMS a tu editor, se ejecuta dentro de Visual Studio Code, GitPod y muchos más.

Integración con Astro

En esta sección, veremos cómo agregar Front Matter CMS a tu proyecto de Astro.

Prerrequistos

Visual Studio Code
Usa la plantilla de Astro Blog para proporcionar la configuración base y el contenido de ejemplo para comenzar con Front Matter CMS.

Instala la extensión de Front Matter CMS

Puedes obtener la extensión desde la Plataforma de Visual Studio Code - Front Matter o haciendo clic en el siguiente enlace: abrir la extensión de Front Matter CMS en VS Code

Inicialización del proyecto

Una vez instalado Front Matter CMS, obtendrás un nuevo icono en la barra de actividad. Se abrirá el panel Front Matter CMS en la barra lateral principal cuando hagas clic en él. Sigue los siguientes pasos para inicializar tu proyecto:

Haz clic en el botón Initialize project en el panel de Front Matter
La pantalla de bienvenida se abrirá y podrás comenzar a inicializar el proyecto
Haz clic en el primer paso para Initialize project
Como Astro es uno de los frameworks soportados, puedes seleccionarlo de la lista
Registra tus carpetas de contenido, en este caso, la carpeta src/content/blog.

El registro de la carpeta es necesario para que Front Matter CMS sepa dónde puede encontrar y crear tu contenido. Puedes tener varios tipos de carpetas como páginas, blog, docs y muchos más.
Se te pedirá que introduzcas el nombre de la carpeta. De forma predeterminada, toma el nombre de la carpeta.

El nombre se usa durante el proceso de creación de nuevo contenido. Por ejemplo, tener varios registros de carpetas te permite elegir el tipo de contenido que deseas crear.
Haz clic en Start the dashboard para abrir el panel de contenido
Consejo
Una vez que Front Matter CMS es inicializado, puedes abrir el panel de contenido de las siguientes maneras:
- Usando los combinaciones del teclado: alt + d (Windows & Linux) o options + d (macOS)
- Abre la paleta de comandos y busca Front Matter: Open dashboard
- Haz clic en el icono de Front Matter en la barra de título del panel o en los archivos.

Configuración del proyecto

Una vez que el proyecto esté inicializado, obtendrás un archivo de configuración frontmatter.json y una carpeta .frontmatter en la raíz de tu proyecto.

Directory.frontmatter/
- Directorydatabase/
  - mediaDb.json
Directorysrc/
- …
astro.config.mjs
frontmatter.json
package.json

Configuración del tipo de contenido

Los tipos de contenido(content-types) son la forma en que Front Matter CMS gestiona tu contenido. Cada tipo de contenido contiene un conjunto de campos, que se pueden definir por tipo de contenido que deseas usar para tu sitio web.

Los campos corresponden al front matter de tu contenido de página.

Puedes configurar los tipos de contenido en el archivo frontmatter.json.

Abre el archivo frontmatter.json
Reemplaza el arreglo frontMatter.taxonomy.contentTypes con la siguiente configuración de tipos de contenido:

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]

Previsualiza tus artículos en el editor

Desde el panel de Front Matter CMS, haz clic en el botón Start server. Esta acción inicia el servidor de desarrollo local de Astro. Una vez en ejecución, puedes abrir el panel de contenido, seleccionar uno de los artículos y hacer clic en el botón Open preview para abrir el artículo en el editor.

Crea nuevos artículos

Abre el Front Matter CMS Dashboard; puedes hacerlo de la siguiente manera:

Abre el panel de contenido de Front Matter CMS
Haz clic en el botón Create new article
Front Matter te preguntará por el título del artículo. Rellénalo y pulsa enter
Tu nuevo artículo será creado y abierto en el editor. Puedes empezar a escribir tu artículo.

Usando Markdoc con Front Matter CMS

Para usar Markdoc con Front Matter CMS, debes configurarlo en frontMatter.content.supportedFileTypes. Esta configuración le permite al CMS saber qué tipos de archivos puede procesar.

Puedes configurar la opción de la siguiente manera:

"frontMatter.content.supportedFileTypes": [ "md", "markdown", "mdx", "mdoc" ]

Para permitir que el contenido se cree como Markdoc, especifica la propiedad fileType en el tipo de contenido.

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "default",
    "pageBundle": false,
    "previewPath": "'blog'",
    "filePrefix": null,
    "fileType": "mdoc",
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string",
        "single": true
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "pubDate",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Content preview",
        "name": "heroImage",
        "type": "image",
        "isPreviewImage": true
      }
    ]
  }
]