Guide to Editing Content

Relevant source files

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

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

This guide provides a technical overview of the content management architecture for the Vandore Heritage website. The site uses Stackbit for content modeling, with data stored in JSON files within a Git repository. This approach separates content from presentation, allowing editors to modify website text, images, and data without directly editing HTML code.

The core of this system is the stackbit.config.ts file, which defines the structure of the content models. These models dictate the fields available for editing. The content itself is stored in JSON files, which are then mapped to static HTML pages. A simple Node.js server is used for local development to serve these static files.

Content Architecture Overview

The content architecture is defined by Stackbit and relies on a Git-based content source. The configuration file, stackbit.config.ts, defines data models (Page, Property) which correspond to JSON files in the content/ directory. A siteMap function within the configuration maps these JSON documents to the final HTML URLs.

This diagram illustrates the high-level data flow from configuration to the live site.

Sources: stackbit.config.ts:5-13, stackbit.config.ts:133-154

Content Models

The website uses two primary content models: Page for general-purpose pages and Property for individual property listings. These models are defined in stackbit.config.ts.

Model Relationship Diagram

The following diagram shows the two main data models and their fields.

Sources: stackbit.config.ts:15-100, stackbit.config.ts:101-118

Page Model

The Page model is a versatile page type used for most of the website's static pages like "About Us", "Contact", etc. It contains fields for hero sections and lists of other content types like FAQs, team members, and properties.

Field	Type	Description
title	string	The page title, used in the <title> tag.
heroHeading	string	The main heading in the hero section.
heroSubheading	text	The subheading or paragraph in the hero section.
sections	list	A list of generic content sections, each with a heading and text.
properties	list	A list of property cards, used on listing pages.
team	list	A list of team members, each with a name, role, bio, and image.
faqs	list	A list of frequently asked questions, each with a question and answer.
blogPosts	list	A list of blog post summaries.

Sources: stackbit.config.ts:15-100

Property Model

The Property model is a data type used for individual property details. These are stored as separate JSON files and are not directly pages themselves, but their data can be used to populate property detail pages or listings.

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

Sources: stackbit.config.ts:101-118

Content-to-Page Mapping

Content is linked to HTML pages in two ways: through the siteMap function in the Stackbit configuration and through special data-sb-* attributes in the HTML files.

Site Map Configuration

The siteMap function in stackbit.config.ts programmatically generates the website's structure by mapping content documents to URL paths. It filters documents by their modelName and constructs the appropriate URL.

Sources: stackbit.config.ts:133-154

• Page documents are mapped to root-level HTML files (e.g., content/pages/about.json becomes /about.html).
• Property documents are mapped to a nested path and use a template (e.g., content/properties/historic-villa.json becomes /properties/historic-villa.html using property-detail-template.html).

HTML Field Mapping

Within the HTML files, elements are made editable by Stackbit through data-sb-object-id and data-sb-field-path attributes.

• data-sb-object-id: Placed on a container element (like <html> or <body>), this attribute links the entire HTML page to a specific JSON content file.
• data-sb-field-path: Placed on individual elements (like <h1> or <p>), this attribute links the element's content to a specific field within the JSON file.

Here is an example from contact.html:

<html lang="lv" data-sb-object-id="content/pages/contact.json">
...
    <h1 class="display" data-sb-field-path="heroHeading">Sazinieties ar mums</h1>
...
</html>

In this case, the <h1> tag's content is sourced from the heroHeading field in the content/pages/contact.json file.
Sources: contact.html:1, contact.html:148, about.html:1, about.html:167, properties.html:1, properties.html:159

Local Development Environment

The project includes a simple Node.js server for local development.

Running the Server

The server can be started using an npm script defined in package.json.

"scripts": {
  "dev": "node server.js",
  "start": "node server.js"
}

To run the server, execute npm run dev in the terminal. The server will be available at http://localhost:8000.
Sources: package.json:5-7, server.js:4, server.js:60-62

Server Functionality

The server.js file sets up a basic HTTP server that:

1. Serves files based on the request URL.
2. Defaults to index.html for the root / path.
3. Sets the correct MIME type for common web assets (.html, .css, .js, etc.).
4. If a file is not found, it serves the custom 404.html page.

Sources: server.js:8-23, server.js:26-31, server.js:38-47