Skip to main content
The CAFH Platform includes a powerful Content Management System (CMS) that allows administrators to create, edit, and manage all website content without code.

​
Core Capabilities

Dynamic Pages

Create unlimited custom pages with drag-and-drop sections

Blog Management

Publish and manage blog posts with rich media support

Media Library

Centralized asset management with search and tagging

Change Tracking

Automatic versioning and rollback capabilities

​
Content Types

The CMS manages several content types defined in types.ts:88-99: 
export interface ContentItem {
  id: string;
  title: string;
  type: 'Article' | 'Page' | 'Event' | 'Resource';
  status: 'Published' | 'Draft';
  author: string;
  publishDate: string;
  views: number;
  tags: string[];
  imageUrl?: string;
  seo?: SEOConfig;
}

​
Supported Content Types

TypeDescriptionUse Case
ArticleLong-form content with SEOBlog posts, announcements
PageCustom pages with sectionsAbout, Services, Landing pages
EventCalendar events with metadataWorkshops, meetings, retreats
ResourceDownloadable or viewable assetsPDFs, videos, audio files

​
Home Configuration

The Home page uses a centralized configuration system (storage.ts:484-523):
1

Access Home Editor

Navigate to CMS → Home in the admin panel
2

Edit Hero Section

Configure title, backgrounds, CTA buttons, and video modal settings
3

Manage Sections

Reorder sections using drag handles or the section order configuration
4

Configure Footer

Edit footer columns, social links, and subscription settings
5

Save Changes

All changes are logged in the change history with user attribution

​
Home Configuration Structure

export interface HomeConfig {
  hero: HeroConfig;
  searchSubtitle: string;
  searchItems: SearchItem[];
  threeColumns: HomeThreeColumn[];
  blogSection: BlogConfig;
  activitiesSection: {
    title: string;
    subtitle: string;
    maxEvents: number;
    order: number;
  };
  sectionOrder: string[];
  footer: FooterConfig;
}

​
SEO Configuration

Every content item supports comprehensive SEO metadata (types.ts:69-75): 
export interface SEOConfig {
  title: string;
  description: string;
  keywords: string[];
  ogImage?: string;
  schemaType?: string; // 'Article', 'Event', 'Organization'
}
SEO titles should be 50-60 characters. Meta descriptions work best at 150-160 characters.

​
Change Log System

The CMS automatically tracks all modifications (storage.ts:458-474):
  • User Attribution: Every change records the user who made it
  • Timestamps: Precise ISO timestamps for all operations
  • Previous State: Stores JSON snapshot for rollback capability
  • Action Types: Create, Update, Delete, Rollback

​
Accessing Change Logs

View change logs in CMS → History to see:
  • All content modifications across the platform
  • Which admin made each change
  • Detailed descriptions of changes
  • Ability to restore previous versions
export interface ChangeLog {
  id: string;
  userId: string;
  userName: string;
  section: string; // e.g., 'Home > Hero', 'CMS > Article #12'
  action: 'Create' | 'Update' | 'Delete' | 'Rollback';
  timestamp: string;
  details: string;
  previousState?: string; // JSON stringified for rollback
}
The mega menu system supports multi-level navigation with columns (types.ts:203-214):
1

Access Menu Editor

Navigate to CMS → Mega Menu in admin panel
2

Add Menu Items

Create top-level menu items with labels and paths
3

Configure Columns

For dropdown menus, add columns with grouped links
4

Set Descriptions

Add optional descriptions for items with icons
5

Link to Content

Use dynamic page slugs (e.g., /p/quienes-somos) or static routes

​
Available Routes Helper

The system provides a helper to list all available routes (storage.ts:567-600): 
db.cms.getAllAvailableRoutes()
// Returns both static routes and dynamic pages

​
Content Storage

All CMS data is stored in localStorage with these keys:
KeyContent Type
cafh_home_config_v1Home page configuration
cafh_pages_v1Custom dynamic pages
cafh_menu_v1Mega menu structure
cafh_changelog_v1Change history (last 100)
cafh_blog_v1Blog posts
cafh_blog_config_v1Blog section settings
cafh_content_v1All content items
The change log keeps only the last 100 entries. Critical changes should be documented externally for long-term audit trails.

​
Best Practices

  • Use consistent naming conventions for pages
  • Tag content properly for search and filtering
  • Keep URLs short and SEO-friendly
  • Use Draft status while working on content
  • Optimize images before upload (WebP recommended)
  • Use descriptive filenames
  • Add alt text for accessibility
  • Organize media with folders and tags
  • Write unique meta descriptions for each page
  • Use header hierarchy correctly (H1 → H2 → H3)
  • Add schema.org markup for rich snippets
  • Update Open Graph images for social sharing

Pages Editor

Create dynamic pages with section builder

Blog Management

Publish and manage blog content

Media Library

Upload and organize media assets

Build docs developers (and LLMs) love

Get started for freeTalk to us