Architecture Overview

Relevant source files

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

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

This document provides a technical overview of the Vandore Website Metera project. The architecture is that of a static website served by a simple Node.js server. Content is managed through a structured system of JSON files, which are defined and mapped to HTML pages using the Stackbit CMS configuration. The frontend is built with standard HTML, CSS (including Bootstrap), and JavaScript for interactivity.

The core components are the Node.js web server for serving static assets, the Stackbit configuration for content modeling and site structure, and the collection of static HTML, CSS, and JavaScript files that constitute the user-facing website.

Web Server (server.js)

The project uses a lightweight, custom Node.js server to serve the static website files. It is started using the node server.js command.

Sources: server.js, package.json:5-6

Request Handling

The server listens for HTTP requests on port 8000. For each incoming request, it determines the local file path, identifies the correct MIME type based on the file extension, and serves the file.

This diagram illustrates the server's request handling logic.

MIME Type Configuration

The server maintains a map of file extensions to their corresponding MIME types to ensure browsers correctly interpret the served files.

Extension	MIME Type
.html	text/html
.css	text/css
.js	text/javascript
.json	application/json
.png	image/png
.jpg	image/jpeg
.jpeg	image/jpeg
.gif	image/gif
.svg	image/svg+xml
.ico	image/x-icon
.woff	font/woff
.woff2	font/woff2
.ttf	font/ttf
.eot	application/vnd.ms-fontobject

Sources: server.js:7-22

Content Management (Stackbit)

The project uses Stackbit for content management, with the configuration defined in stackbit.config.ts. This file specifies the content source, data models, and the mapping between content documents and the site's URL structure.

Sources: stackbit.config.ts

Content Source

The content is sourced from a Git repository, specifically from the content directory within the project root.

// stackbit.config.ts:6-11
new GitContentSource({
  name: 'content',
  rootPath: __dirname,
  contentDirs: ['content'],
  models: [ /* ... models defined here ... */ ]
})

Sources: stackbit.config.ts:6-11

Content Models

Two primary data models are defined: Page and Property. These models dictate the structure of the JSON files in the content/ directory.

This ER diagram shows the relationship and fields of the Page and Property models.

Page Model

The Page model is a page type, meaning it corresponds directly to a web page. Its data is stored in content/pages/{slug}.json.

Field	Type	Description
title	string	The title of the page.
heroHeading	string	Main heading in the hero section.
heroSubheading	text	Subheading text in the hero section.
sections	list	Generic content sections (heading, text).
properties	list	List of property cards for listing pages.
team	list	List of team members.
faqs	list	List of frequently asked questions.
blogPosts	list	List of blog post summaries.

Sources: stackbit.config.ts:14-87

Property Model

The Property model is a data type, used for individual property listings. Its data is stored in content/properties/{slug}.json.

Field	Type	Description
title	string	The property's title.
price	string	The asking price.
address	string	The property's address.
description	text	A detailed description.
image	string	URL or path to the primary image.
url	string	The canonical URL for the property.
bedrooms	number	Number of bedrooms.
bathrooms	number	Number of bathrooms.
area	number	The area of the property.
floors	number	Number of floors.

Sources: stackbit.config.ts:88-110

Site Mapping

The siteMap function dynamically maps the content documents to static HTML URLs.

• Page documents are mapped to /{slug}.html.
• Property documents are mapped to /properties/{slug}.html and use a template file named property-detail-template.html.

Sources: stackbit.config.ts:114-137

Frontend Architecture

The frontend is composed of static HTML files, styled with CSS (leveraging Bootstrap and custom styles), and enhanced with client-side JavaScript for dynamic features.

HTML Structure

The site consists of several static HTML files, such as index.html, about.html, properties.html, and contact.html. These files contain the page structure and link to the necessary CSS and JavaScript assets. The data-sb-object-id attribute in the HTML suggests that Stackbit's visual editor can link the rendered HTML elements back to their source JSON content files.

Example from about.html:

<html lang="lv" data-sb-object-id="content/pages/about.json">
...
<h1 ... data-sb-field-path="heroHeading">Par mums</h1>
...
</html>

Sources: about.html:1, 131, properties.html:1, contact.html:1

Styling (CSS)

Styling is handled by a combination of pre-built and custom stylesheets.

• css/style.css: Main stylesheet.
• css/custom.css: Contains brand-specific styles, such as the property filter bar UI.
• css/fonts.css: Font definitions.
• Bootstrap and Animate.css are also included via CDN or local files.

The css/custom.css file defines specific styles for components like the property filter bar on the properties.html page, including colors, borders, and responsive behavior.

Sources: properties.html:7-11, css/custom.css:3-33

Client-Side Scripting

Various JavaScript libraries are used to provide interactivity. These are included at the bottom of the HTML files.

• jQuery: Used as a general-purpose utility library.
• Bootstrap.bundle.js: Provides functionality for Bootstrap components like modals and off-canvas menus.
• Swiper: For creating carousels and sliders.
• Isotope: For filterable and sortable layouts, likely used on the properties page.
• fslightbox.js: For displaying images in a lightbox gallery.
• Custom Scripts: script.js, swiper-script.js, submit-form.js, custom.js contain project-specific logic.

Sources: about.html:314-323, properties.html:420-429, contact.html:332-341

Summary

The vandore-website-metera project employs a straightforward and effective architecture for a static real estate website. It decouples content from presentation by using JSON files managed via Stackbit's content modeling. A simple Node.js server handles the serving of static files, while the frontend uses a standard stack of HTML, CSS, and JavaScript to render the pages and provide a rich user experience. This setup is robust, performant, and easily maintainable.