Añadir un slug a tus documentos

Al construir un CMS, es común querer generar slugs para tus documentos basándose en un campo específico, como el título. Esto es útil para crear URLs amigables para SEO y mejorar la descubribilidad de tu contenido.

En este tutorial, te mostraremos cómo generar automáticamente slugs para tus documentos usando FireCMS. Es muy sencillo añadir un callback que se ejecutará antes de guardar tu documento, permitiéndote generar el slug basándose en el campo del título.

Declara tu colección

Para fines ilustrativos, creemos una colección pages simple, con solo un campo de título, a la que le añadiremos un slug:

import { buildCollection } from "@firecms/core";

export type Page = {
    title: string;
    slug: string;
}

export const pagesCollection = buildCollection<Page>({
    name: "Pages",
    id: "pages",
    path: "pages",
    properties: {
        title: {
            name: "Title",
            validation: { required: true },
            dataType: "string"
        },
        slug: {
            name: "Slug",
            dataType: "string",
            readOnly: true,
        }
    }
});

Añadir el callback pre-guardado

Para añadir un slug a tus documentos, puedes usar el callback onPreSave proporcionado por FireCMS. Este callback se ejecutará antes de guardar el documento, permitiéndote modificar el documento antes de que se escriba en la base de datos.

import { EntityCallbacks, slugify } from "@firecms/core";

const callbacks: EntityCallbacks = {
    onPreSave: ({
                    collection,
                    path,
                    entityId,
                    values,
                    status,
                    context
                }) => {
        const updatedSlug = slugify(values.title);
        values.slug = updatedSlug;
        return values;
    }
};

Código completo

Aquí está el código completo para este ejemplo:

import { buildCollection, slugify } from "@firecms/core";

export type Page = {
    title: string;
    slug: string;
}

export const pagesCollection = buildCollection<Page>({
    name: "Pages",
    id: "pages",
    path: "pages",
    callbacks: {
        onPreSave: ({
                        values,
                    }) => {
            const updatedSlug = slugify(values.title);
            values.slug = updatedSlug;
            return values;
        }
    },
    properties: {
        title: {
            name: "Title",
            validation: { required: true },
            dataType: "string"
        },
        slug: {
            name: "Slug",
            dataType: "string",
            readOnly: true,
        }
    }
});