Directory Structure

This project is a static real estate website that utilizes a Node.js server for local development and serving files. The directory structure is organized to separate concerns: content data is stored in a structured format, presentation is handled by HTML and CSS files, client-side interactivity is managed by JavaScript, and server logic is contained in a dedicated script.

The structure is also defined by the Stackbit configuration, which maps structured JSON data from the content/ directory to the corresponding static HTML pages. This allows for content to be managed separately from the site's code and layout.

Top-Level Directory Overview

The project's root contains the main HTML pages, server and configuration files, and subdirectories for assets and content.

This diagram illustrates the high-level folder structure of the repository.

The primary directories and files have distinct roles within the project.

| Directory / File | Purpose | Source(s) -
| content/ | Contains structured content as JSON files, managed by Stackbit. Includes subdirectories for pages and properties. | stackbit.config.ts:8, 11-12 -
| css/ | Stores stylesheets for the website, including style.css, custom.css, and fonts.css. | about.html:7-10, css/custom.css -
| js/ | Contains JavaScript files for client-side functionality. Includes vendor scripts and custom application logic like script.js. | about.html:314-322, js/script.js -
| image/ | Holds all image assets used throughout the site, such as logos and property photos. | about.html:28, 52 -
| *.html | Static HTML files representing the pages of the website (e.g., about.html, properties.html). | about.html, properties.html -
| server.js | A simple Node.js HTTP server to serve the static files for local development. Handles file routing and 404 errors. | server.js -
| stackbit.config.ts | Stackbit configuration file. Defines content models (Page, Property) and maps them to URL paths. | stackbit.config.ts -
| package.json | Defines project metadata and scripts. The start and dev scripts run the server.js file. | package.json:5-6 -

Asset Directories (css/, js/, image/)

These directories contain the static assets required by the HTML pages.

• css/: This folder holds all stylesheets. The HTML files reference css/style.css, css/custom.css, and css/fonts.css to style the website's content and layout.
• js/: This folder contains all client-side JavaScript files. This includes third-party libraries in a vendor/ subdirectory (e.g., jquery.min.js, bootstrap.bundle.min.js) and custom application logic in files like script.js and custom.js.
• image/: This directory is the repository for all visual assets, such as the site logo (red_LOGO_Vandore.png), background images, and property photos.

Sources: about.html:7-10, 28, 314-322, properties.html:7-11, contact.html:7-11, css/custom.css, js/script.js

Content Directory (content/)

The content/ directory is the designated location for structured data, as defined by the Stackbit configuration. It is the "source of truth" for most of the website's textual and relational data, which is then used to generate the final static HTML pages.

Sources: stackbit.config.ts:8-10

Content Models and File Paths

Stackbit is configured to recognize two main types of content: Page and Property.

• Page Model: Represents general site pages like 'About Us' or 'Contact'. The data for these pages is stored in JSON files within the content/pages/ directory. The file path format is content/pages/{slug}.json.
• Property Model: Represents individual real estate listings. Data for each property is stored in a separate JSON file within the content/properties/ directory, following the format content/properties/{slug}.json.

Sources: stackbit.config.ts:13-15, 93-95

Content to URL Mapping

The siteMap function in stackbit.config.ts is responsible for mapping the JSON content documents to the final, publicly accessible HTML URLs.

The following diagram shows how a JSON data file is mapped to a static HTML page.

• Page Mapping: A document like content/pages/about.json is mapped directly to /about.html and uses the about.html file as its source template.
• Property Mapping: A document like content/properties/some-property.json is mapped to a URL like /properties/some-property.html but uses a generic property-detail-template.html as its source. This indicates a templating system where the data from the JSON file populates a common HTML structure.

Sources: stackbit.config.ts:120-126, 128-136

Server and Configuration

The root of the project contains files that control the application's execution and serving behavior.

server.js

This file contains a simple Node.js HTTP server. Its primary function is to serve the static files from the repository's directory structure for local development. It listens on port 8000.

The server determines the correct MIME type for each requested file based on its extension. If a requested file is not found, it serves the contents of 404.html.

Sources: server.js:4, 11-26, 38-50

This sequence diagram illustrates how the server handles an incoming request for a CSS file.

package.json

This file defines the project's scripts. The dev and start scripts both execute node server.js, which starts the local development server.

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

Sources: package.json:5-6

Conclusion

The directory structure of vandore-website-metera is logically organized for a static site enhanced with a CMS. It maintains a clear separation between:

• Content: Managed as structured JSON data in the content/ directory.
• Presentation: Defined by root HTML files and assets in css/ and image/.
• Behavior: Implemented through client-side scripts in js/ and a local development server defined in server.js.
• Configuration: Governed by package.json for scripts and stackbit.config.ts for content modeling and URL mapping.

This architecture facilitates content management through Stackbit while allowing developers to work on the site's templates and assets independently.