Docs
pageSchema.ts
This file is what controls how the admin form looks, and what data you get to work with in the front-end.
<slug>PageData
This object exports all the data needed by the script to generate the admin pages.
export const docsConfigPageData: PageDataType = {
slug: "docs-config",
title: "Config",
category: "Core concepts",
schema: DocsConfigPageSchema,
icon: FileText,
allowedRoles: ["admin"],
};category
This field is used to group page together in the admin sidebar to help you better organize similar pages.
export const docsConfigPageData: PageDataType = {
//..
category: "Core concepts",
// ...
};Icon
This field expects you to pass a lucide-icon. This icon will be shown alongside the name in the sidebar.
export const docsConfigPageData: PageDataType = {
// ...
icon: FileText,
// ...
};allowedRoles
This is an important one. This is a list of the roles that are allowed to edit the page. Users with any other role will not be able to edit the form, and the form will become read-only.
export const docsConfigPageData: PageDataType = {
// ...
allowedRoles: ["admin"],
};
// If you wish to create a page that no-one can edit.
// Pass the allowedRoles as ["nobody"], and don't assign anyone the role of nobodySchema
This is the most important one. Use zod to create the schema. This schema is parsed to generate the admin forms, as well as acts as validation for the fields.
const DocsConfigPageSchema = z.object({
title: z.string(),
description: z.string().optional(),
steps: z.array(
z.object({
title: z.string(),
description: z.string().optional(),
code: z.string().optional().meta({ field: "text-area" }), // passing field as text-area makes the input-field text-area for the admin
language: z.string().optional(),
}),
)
});