Adding New Pages

Relevant source files

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

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

This document outlines the process for adding new static pages to the Vandore Heritage website. The system uses a combination of Stackbit for content modeling, JSON files for data, and static HTML files for the presentation layer. A simple Node.js server is used for serving the files locally.

The core concept is that each page is defined by a JSON data file in content/pages/ and a corresponding HTML template in the root directory. The Stackbit configuration maps the data from the JSON file to the correct HTML page, enabling content management.

Architecture Overview

The website operates on a static-first architecture. Content is decoupled from presentation. Stackbit defines the content structure (Page model), which is then instantiated as individual JSON files. The siteMap function in the Stackbit configuration links these JSON data files to their corresponding static HTML templates. A basic Node.js server handles HTTP requests and serves the appropriate HTML file.

This diagram illustrates the high-level data and request flow for a page.

Sources: stackbit.config.ts, server.js, about.html, contact.html

Key Components

File/Directory	Role
stackbit.config.ts	Defines content models (e.g., Page) and maps content files to site URLs.
content/pages/{slug}.json	Contains the structured data for a specific page.
/{slug}.html	The static HTML template that renders the page content.
server.js	A simple Node.js HTTP server to serve the static files.
package.json	Defines project scripts, including the dev script to run the server.

Sources: stackbit.config.ts:5-10, stackbit.config.ts:14-17, server.js:25-28, package.json:5-6

1. Content Modeling

The structure of a standard page is defined by the Page model within the Stackbit configuration. To add a new page, its content must conform to this model.

Sources: stackbit.config.ts:12-100

The Page Model

The Page model specifies the file path for content files (content/pages/{slug}.json) and the fields available for a page.

// stackbit.config.ts
{
  name: 'Page',
  type: 'page',
  filePath: 'content/pages/{slug}.json',
  urlPath: '/{slug}',
  fields: [
    // ... field definitions
  ]
}

Sources: stackbit.config.ts:13-18

The following diagram shows the schema for the Page model.

Sources: stackbit.config.ts:19-99

Page Fields

Field Name	Type	Description	Required
title	string	The page title, used in the <title> tag.	Yes
heroHeading	string	The main heading in the hero section.	Yes
heroSubheading	text	The subheading or paragraph in 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 for listing pages.	No
team	list	A list of team members to be displayed.	No
faqs	list	A list of frequently asked questions.	No
blogPosts	list	A list of blog post cards/previews.	No

Sources: stackbit.config.ts:19-99

2. Creating the Page Files

Adding a new page involves two main steps:

1. Creating the JSON content file.
2. Creating the corresponding HTML template file.

Step 2.1: Create the JSON Content File

Create a new JSON file inside the content/pages/ directory. The name of the file determines its slug. For example, a new "Services" page would be content/pages/services.json.

This file must contain the data for the page, adhering to the Page model structure.

Example: content/pages/services.json

{
  "title": "Vandore Heritage - Our Services",
  "heroHeading": "Our Services",
  "heroSubheading": "Comprehensive real estate services tailored to your needs.",
  "sections": [
    {
      "heading": "Buying & Selling",
      "text": "We guide you through every step of the process."
    },
    {
      "heading": "Property Management",
      "text": "Full-service management for your peace of mind."
    }
  ]
}

This is a hypothetical example based on the model defined in stackbit.config.ts.
Sources: stackbit.config.ts:13-40

Step 2.2: Create the HTML Template

Create a new HTML file in the root directory of the project. The name of this file must match the slug from the JSON file (e.g., services.html).

This HTML file is responsible for rendering the page structure. It must link to the JSON data file using the data-sb-object-id attribute in the <html> tag. You can use existing pages like about.html or contact.html as a starting point.

Example: services.html

<!DOCTYPE html>
<html lang="lv" data-sb-object-id="content/pages/services.json">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS includes -->
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/custom.css">
    <!-- The title is populated from the JSON file -->
    <title data-sb-field-path="title">Vandore Heritage - Our Services</title>
</head>
<body>
    <!-- Header, Main, Footer -->
    <main>
        <!-- Hero Section -->
        <h1 data-sb-field-path="heroHeading">Our Services</h1>
        <p data-sb-field-path="heroSubheading">Comprehensive real estate services...</p>
        
        <!-- Sections Loop -->
        <div data-sb-field-path="sections">
            <!-- Iterate over sections here -->
        </div>
    </main>
    
    <!-- JS includes -->
    <script src="js/script.js"></script>
</body>
</html>

Note the data-sb-object-id attribute linking to the JSON file and data-sb-field-path attributes for individual fields.
Sources: about.html:1, contact.html:1, properties.html:1

3. Site Mapping and Routing

The stackbit.config.ts file contains a siteMap function that programmatically maps content documents to the final HTML pages and URLs.

siteMap Function Logic

The siteMap function filters all documents to find those using the Page model. For each Page document, it extracts the slug from its file path and constructs a SiteMapEntry object. This object tells Stackbit which HTML file (pageSrc) corresponds to which URL (urlPath) and which data object (pageObjectId).

This flowchart shows the logic for mapping Page documents.

Sources: stackbit.config.ts:103-115

Server-Side Routing

The application uses a simple Node.js server defined in server.js for local development. When a request is made (e.g., http://localhost:8000/about.html), the server looks for the corresponding file in the root directory and serves it.

The following sequence diagram illustrates the server's handling of a page request.

Sources: server.js:25-56, 404.html

Summary

Adding a new page to the Vandore website is a straightforward process that respects the project's content-driven architecture. It requires creating a JSON data file that follows the Page model schema and a corresponding HTML template that links to this data. The Stackbit configuration and the local Node.js server work together to automatically map the new content to a browsable URL, ensuring a consistent and manageable workflow for site expansion.