Overview
The CMS API (db.cms) provides methods for managing custom pages, home page configuration, navigation menus, and tracking content changes.
Change Logging
logChange
Logs a CMS modification for audit trail.
db.cms.logChange(
section: string,
action: 'Create' | 'Update' | 'Delete' | 'Rollback',
details: string,
previousState?: any
): ChangeLog
The section being modified (e.g., “Home”, “Página: Acerca de”)
action
'Create' | 'Update' | 'Delete' | 'Rollback'
required
Type of action performed
Human-readable description of the change
Optional snapshot of data before modification (for rollback)
The created change log entry
db.cms.logChange(
'Home > Hero',
'Update',
'Actualización de título del hero',
previousHeroConfig
);
getChangeLogs
Retrieves all change logs (last 100 entries).
db.cms.getChangeLogs(): ChangeLog[]
const logs = db.cms.getChangeLogs();
console.log(`Recent changes: ${logs.length}`);
Home Configuration
getHomeConfig
Retrieves the complete home page configuration.
db.cms.getHomeConfig(): HomeConfig
Complete home page configuration including hero, search, sections, and footer
Example
Usage in Component
const config = db.cms.getHomeConfig();
console.log(config.hero.title);
console.log(config.searchItems);
console.log(config.sectionOrder);
const HomeView: React.FC = () => {
const [config, setConfig] = useState<HomeConfig>();
useEffect(() => {
setConfig(db.cms.getHomeConfig());
}, []);
return (
<div>
<Hero config={config?.hero} />
<SearchBar items={config?.searchItems} />
</div>
);
};
Retrieves footer configuration from home config.
db.cms.getFooterConfig(): FooterConfig
const footer = db.cms.getFooterConfig();
footer.columns.forEach(col => {
console.log(col.title, col.links);
});
updateHomeConfig
Updates home page configuration and logs the change.
db.cms.updateHomeConfig(config: HomeConfig): HomeConfig
Complete HomeConfig object with updated values
Update Hero
Update Section Order
const config = db.cms.getHomeConfig();
config.hero.title = 'Nuevo Título';
config.hero.subtitle = 'Nueva descripción';
db.cms.updateHomeConfig(config);
const config = db.cms.getHomeConfig();
config.sectionOrder = ['hero', 'threeColumns', 'blog', 'activities', 'search'];
db.cms.updateHomeConfig(config);
Custom Pages
getPages
Retrieves all custom pages.
db.cms.getPages(): CustomPage[]
const pages = db.cms.getPages();
const publishedPages = pages.filter(p => p.status === 'Published');
getPageBySlug
Finds a page by its URL slug.
db.cms.getPageBySlug(slug: string): CustomPage | undefined
URL slug of the page (e.g., “quienes-somos”)
const page = db.cms.getPageBySlug('quienes-somos');
if (page) {
console.log(page.title);
console.log(page.sections);
}
const DynamicPageView: React.FC<{ slug: string }> = ({ slug }) => {
const page = db.cms.getPageBySlug(slug);
if (!page) {
return <NotFound />;
}
return <PageRenderer sections={page.sections} />;
};
savePage
Creates or updates a custom page.
db.cms.savePage(page: CustomPage): CustomPage[]
Complete page object with id, slug, title, sections, and SEO config
Updated array of all pages
Create New Page
Update Existing Page
const newPage: CustomPage = {
id: 'p_' + Date.now(),
title: 'Nueva Página',
slug: 'nueva-pagina',
status: 'Draft',
sections: [
{
id: 's_hero',
type: 'Hero',
order: 0,
content: {
title: 'Bienvenido',
subtitle: 'Descripción'
}
}
],
seo: {
title: 'Nueva Página | Cafh',
description: 'Descripción de la página',
keywords: ['cafh', 'nueva']
}
};
db.cms.savePage(newPage);
const page = db.cms.getPageBySlug('quienes-somos');
if (page) {
page.sections[0].content.title = 'Título Actualizado';
db.cms.savePage(page);
}
deletePage
Deletes a custom page by ID.
db.cms.deletePage(id: string): CustomPage[]
db.cms.deletePage('p_historia_01');
Retrieves the mega menu navigation structure.
db.cms.getMenu(): MegaMenuItem[]
const menu = db.cms.getMenu();
menu.forEach(item => {
console.log(item.label, item.path);
item.columns?.forEach(col => {
console.log(col.title, col.items);
});
});
Updates the mega menu structure.
db.cms.updateMenu(menu: MegaMenuItem[]): MegaMenuItem[]
Complete array of menu items
const menu = db.cms.getMenu();
menu.push({
label: 'Nueva Sección',
path: '/nueva-seccion',
columns: [
{
title: 'Columna 1',
items: [
{ label: 'Link 1', path: '/link1' }
]
}
]
});
db.cms.updateMenu(menu);
getAllAvailableRoutes
Retrieves all available routes (static + dynamic pages) for menu configuration.
db.cms.getAllAvailableRoutes(): { label: string; path: string; isDynamic?: boolean }[]
return
Array<{ label: string; path: string; isDynamic?: boolean }>
Array of all available routes including static routes and dynamic custom pages
const routes = db.cms.getAllAvailableRoutes();
routes.forEach(route => {
if (route.isDynamic) {
console.log(`[Dynamic] ${route.label} → ${route.path}`);
} else {
console.log(`[Static] ${route.label} → ${route.path}`);
}
});
Storage Keys
cafh_home_config_v1 - Home page configurationcafh_custom_pages_v1 - Custom pages arraycafh_menu_v1 - Mega menu structurecafh_changelog_v1 - Change logs (max 100 entries)
See Data Types for complete interface definitions:
HomeConfigCustomPagePageSectionMegaMenuItemChangeLogSEOConfig