Adicionar um slug aos seus documentos

Ao construir um CMS, é comum querer gerar slugs para seus documentos com base em um campo específico, como o título. Isso é útil para criar URLs amigáveis para SEO e melhorar a descoberta do seu conteúdo.

Neste tutorial, vamos mostrar como gerar slugs automaticamente para seus documentos usando o FireCMS. É muito simples adicionar um callback que será executado antes de salvar seu documento, permitindo que você gere o slug baseado no campo título.

Declarar sua coleção

Para fins ilustrativos, vamos criar uma coleção simples de pages, com apenas um campo title, que vamos adicionar um slug a:

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,
        }
    }
});

Adicionar o callback pre-save

Para adicionar um slug aos seus documentos, você pode usar o callback onPreSave fornecido pelo FireCMS. Este callback será executado antes de salvar o documento, permitindo que você modifique o documento antes de ser gravado no banco de dados.

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

Aqui está o código completo deste exemplo:

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,
        }
    }
});