Developer
Demo Site: Content Model Implementations
This guide documents how content models are implemented in the Demo Site codebase, including TypeScript interfaces and usage patterns.
Content Model Overview
The Demo Site has 24 content models:
- 6 Content Items: Single instances (Author, Category, etc.)
- 18 Content Lists: Collections (Posts, Tags, Bento Cards, etc.)
TypeScript Interfaces
All content models have corresponding TypeScript interfaces in src/lib/types/:
Blog Content Models
IPost
Usage:
IAuthor
ICategory
ITag
Personalization Content Models
IAudience
IRegion
Component Content Models
IBentoCard
ITestimonialItem
Content Model IDs
Content Lists
- Posts: Reference name
posts - Tags: Reference name
tags - Bento Cards: Reference name varies (e.g.,
home_bentosection_bentocard) - Testimonials: Reference name
testimonials - FAQ Items: Reference name
faq-items - Pricing Tiers: Reference name
pricing-tiers - Stats: Reference name
stats - Audiences: Reference name
audiences - Regions: Reference name
regions
Content Items
- Author: Content ID varies per author
- Category: Content ID varies per category
- Global Settings: Content ID 1 (typically)
- AI Search Configuration: Content ID varies
Usage Patterns
Fetching Single Content Item
Fetching Content List
Accessing Linked Content
Linked content is automatically populated by the SDK:
Field Naming
Important: Field names are case-insensitive in Agility CMS, but case-sensitive in TypeScript code.
- CMS field:
Headingorheading→ TypeScript:heading - CMS field:
Post Date→ TypeScript:postDate(camelCase) - CMS field:
CTA Button→ TypeScript:ctaButton
Image Fields
All image fields use the ImageField type:
Rich Text Fields
Rich text fields are strings containing HTML:
Best Practices
- Always Define Interfaces: Create TypeScript interfaces for all content models
- Use Type Parameters: Pass type parameter to
getContentItem<T>() - Handle Nulls: Check for null/undefined values
- Type Safety: Let TypeScript catch field name errors
- Document Fields: Comment complex field structures
Next: Components - Component implementations