Content Models

Relevant source files

The following files were used as context for generating this wiki page:

• stackbit.config.ts
• about.html
• properties.html
• contact.html
• 404.html
• server.js
• package.json
• css/custom.css
• js/script.js

The content modeling for this project is defined by Stackbit and dictates the structure of the JSON data files found in the content/ directory. These models serve as blueprints for different types of content, such as general pages and property listings, ensuring consistency and enabling programmatic rendering into static HTML. The primary configuration is located in stackbit.config.ts, which defines the models and how their corresponding data files are mapped to site URLs.

The system uses a GitContentSource, indicating that all content is stored as files within the Git repository itself. Two main content models are defined: Page for standard site pages and Property for individual real estate listings. These models are then consumed by static HTML templates, which use data-sb-field-path attributes to link HTML elements directly to fields in the JSON data files.

Core Configuration

The content source is configured as a GitContentSource, which looks for models and content within the content/ directory of the repository.

Sources: stackbit.config.ts:6-11

Model Definitions

The project defines two primary content models: Page and Property.

This diagram illustrates the two main data models, Page and PropertyData, and the various nested object types that can be part of a Page.

Sources: stackbit.config.ts:12-132

Page Model

The Page model is a versatile, page-level model used for creating standard website pages like "About Us", "Contact", and "Properties". Its type is page, and its data files are stored in content/pages/{slug}.json.

Sources: stackbit.config.ts:14-17

Page Fields

The Page model is composed of several fields, including multiple list fields that allow for flexible content composition.

Field	Type	Description	Required
title	string	The page title, used in the <title> tag.	Yes
heroHeading	string	The main heading displayed in the page's hero section.	Yes
heroSubheading	text	A subheading or introductory text for the hero section.	Yes
sections	list	A list of generic content sections, each with a heading and text.	No
properties	list	A list of property cards, used on listing pages.	No
team	list	A list of team members, used on pages like "About Us".	No
faqs	list	A list of frequently asked questions and answers.	No
blogPosts	list	A list of blog post summaries or cards.	No

Sources: stackbit.config.ts:18-103

Nested Object Structures

Several fields in the Page model are lists of objects, each with its own defined structure.

sections items

• heading: string
• text: text

properties items

• title: string
• price: string
• address: string
• description: text (optional)
• image: string (optional)
• url: string (optional)

team items

• name: string
• role: string
• bio: text (optional)
• image: string (optional)

faqs items

• question: string
• answer: text

blogPosts items

• title: string
• excerpt: text (optional)
• date: string (optional)
• url: string (optional)

Sources: stackbit.config.ts:24-101

Example Usage in HTML

The data from a Page JSON file is mapped to elements in the corresponding HTML file. This is visible through data-sb-field-path attributes. For example, in about.html, the hero heading is populated from the heroHeading field.

<!-- File: about.html:150 -->
<h1 class="display" style="max-width: 700px;" data-i18n="about_us" data-sb-field-path="heroHeading">Par mums</h1>

This h1 tag is linked to the heroHeading field of content/pages/about.json.

Sources: about.html:150, contact.html:151, 404.html:18

Property Model

The Property model is a data model used to define the structure for individual property listings. These are not pages themselves but data files that can be used to populate property detail pages or property listing cards. The data files are located at content/properties/{slug}.json.

Sources: stackbit.config.ts:104-107

Property Fields

Field	Type	Description	Required
title	string	The name or title of the property.	Yes
price	string	The listing price.	Yes
address	string	The physical address of the property.	Yes
description	text	A detailed description of the property.	Yes
image	string	URL or path to the property's main image.	Yes
url	string	The URL to the property's detail page.	Yes
bedrooms	number	The number of bedrooms.	No
bathrooms	number	The number of bathrooms.	No
area	number	The total area (e.g., in square meters).	No
floors	number	The number of floors.	No

Sources: stackbit.config.ts:108-119

Content-to-URL Mapping

The siteMap function in stackbit.config.ts is responsible for mapping the content documents (JSON files) to the final static HTML URLs that the site will use. It processes documents based on their modelName.

This diagram shows the flow of how a JSON content file is resolved to a public URL.

Page Mapping

• A document with modelName: 'Page' and filePath: 'content/pages/about.json' will be mapped to:
  • urlPath: /about.html
  • pageSrc: about.html

Sources: stackbit.config.ts:126-134

Property Mapping

• A document with modelName: 'Property' and filePath: 'content/properties/sample.json' will be mapped to:
  • urlPath: /properties/sample.html
  • pageSrc: property-detail-template.html (Note: all properties use a single template)

Sources: stackbit.config.ts:136-144

Summary

The content model architecture is defined centrally in stackbit.config.ts, providing a clear and maintainable structure for all site content. It leverages two main models, Page and Property, to handle different content needs. The siteMap configuration provides a robust mechanism for translating structured data files into a predictable static site structure, linking content directly to HTML templates. This separation of content and presentation is a key architectural feature of the project.

Sources: stackbit.config.ts, about.html, properties.html