Creating New 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
• server.js
• package.json
• 404.html

Content models are the structural foundation for all content within the Vandore Heritage website. They define the schema for different types of content, such as pages and data objects, enabling consistent data entry and management through the Stackbit visual editor. All content models are configured within the stackbit.config.ts file.

This system uses a Git-based content source, meaning all content defined by these models is stored as JSON files within the content/ directory of the repository. The configuration file also dictates how these content files are mapped to the final static HTML pages served to the user.

System Architecture

The content modeling architecture is centered around the Stackbit configuration. It defines the models, specifies where the content is stored, and maps the content entries to the website's URL structure.

This diagram illustrates the flow from model definition to the final rendered HTML page.

Configuration (stackbit.config.ts)

The entire content modeling system is defined within stackbit.config.ts. This file exports a configuration object using the defineStackbitConfig function.

Sources: stackbit.config.ts:5-120

Content Source

The project uses GitContentSource to manage content. This configuration specifies that the content is stored in the same Git repository as the code.

• rootPath: Set to __dirname, indicating the project's root directory.
• contentDirs: An array containing ['content'], which is the directory where all content JSON files are stored.
• models: An array of model definitions.

Sources: stackbit.config.ts:7-11

Site Mapping

The siteMap function is crucial for linking the abstract content models to the physical HTML files. It iterates through all content documents, filters them by modelName, and creates a mapping between a URL path and a source HTML file.

For example, a Page model document at content/pages/about.json is mapped to the URL /about.html and uses about.html as its source file. A Property document is mapped to a URL like /properties/some-property.html but uses a generic property-detail-template.html for rendering.

The following diagram shows the logic of the siteMap function.

Content Models

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

Page Model

The Page model is a page type, meaning each instance corresponds to a distinct page on the website (e.g., About, Contact).

• type: page
• filePath: content/pages/{slug}.json
• urlPath: /{slug}

Sources: stackbit.config.ts:14-17

The fields for the Page model are detailed below.

Field Name	Type	Description	Required
title	string	The page title, used in the <title> tag.	Yes
heroHeading	string	The main H1 heading in the page's hero section.	Yes
heroSubheading	text	The subheading or introductory text in the hero.	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 for the "About Us" page.	No
faqs	list	A list of frequently asked questions, each with a question and answer.	No
blogPosts	list	A list of blog post previews.	No

Sources: stackbit.config.ts:18-90

Property Model

The Property model is a data type. These are not standalone pages but rather data objects that can be referenced by pages or used to dynamically generate detail pages.

• type: data
• filePath: content/properties/{slug}.json

Sources: stackbit.config.ts:92-94

The fields for the Property model are detailed below.

Field Name	Type	Description	Required
title	string	The name or title of the property.	Yes
price	string	The asking 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 main property image.	Yes
url	string	The link to the property's detail page.	Yes
bedrooms	number	Number of bedrooms.	No
bathrooms	number	Number of bathrooms.	No
area	number	The total area (e.g., in square meters).	No
floors	number	Number of floors.	No

Sources: stackbit.config.ts:95-107

Content Consumption

The data from the JSON files is consumed by the static HTML files. Stackbit injects special attributes into the HTML to create a link between the content and the presentation layer, enabling live editing.

• data-sb-object-id: Identifies the content document being used for the page. It is typically placed on the <html> tag.
• data-sb-field-path: Maps a specific HTML element to a field within the content document.

Here is an example from about.html:

<html lang="lv" data-sb-object-id="content/pages/about.json">
<head>
    <title data-i18n="vandore_heritage_about_us" data-sb-field-path="title">Vandore Heritage - par mums</title>
</head>
<body>
    ...
    <h1 class="display" style="max-width: 700px;" data-i18n="about_us" data-sb-field-path="heroHeading">Par mums</h1>
    <p data-i18n="..." data-sb-field-path="heroSubheading">Vandore Heritage sākās ar sarunu...</p>
    ...
    <div class="row row-cols-xl-2 row-cols-1 align-items-end" data-sb-field-path="sections">
        <div class="col mb-3">
            <h3 ... data-sb-field-path="sections[0].heading">Satikt komandu</h3>
        </div>
        <div class="col mb-3">
            <p ... data-sb-field-path="sections[0].text">Roberts un Ādolfs...</p>
        </div>
    </div>
    ...
</body>
</html>

This snippet shows how the about.html page is linked to content/pages/about.json. The <title>, <h1>, and <p> tags are directly mapped to the title, heroHeading, and heroSubheading fields of the Page model. It also shows mapping to items in a list field (sections[0].heading).

Sources: about.html:1, 14, 154, 156, 233-239, properties.html:1, 13, 150, 152, contact.html:1, 13, 154, 156

Creating a New Model

To create a new content model, a developer would:

1. Define a new model object within the models array in stackbit.config.ts.
2. Specify its name, type (page or data), filePath, and fields.
3. If it's a new page type, create a corresponding template .html file.
4. Update the siteMap function to correctly map documents of this new model type to their corresponding URLs and HTML templates.
5. Add the necessary data-sb-object-id and data-sb-field-path attributes to the new HTML template to enable visual editing.

Sources: stackbit.config.ts:12-119