Team Page

Relevant source files

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

• team.html
• content/pages/team.json
• stackbit.config.ts
• about.html
• server.js
• contact.html
• properties.html
• 404.html

The Team Page is a static HTML page that displays information about the company's team members. The content for this page is sourced from a structured JSON file (content/pages/team.json) and is designed to be editable through a CMS like Stackbit. The data structure for team members is formally defined within the project's Stackbit configuration, ensuring consistency.

This page is an integral part of the website, linked from various key sections such as the "About Us" page, to introduce the people behind the Vandore Heritage brand. The entire site, including the team page, is served by a simple Node.js web server.

System Architecture and Data Flow

The website operates as a static site, where content and presentation are separated. The data for the Team Page is stored in a JSON file and is used by a build process (managed by Stackbit) to generate the final team.html file. This static file is then served to the user's browser by a Node.js server.

The following diagram illustrates the data flow from the content source to the end-user.

Content Management

The content for the team page is managed through a structured data model defined in the Stackbit configuration and populated in a corresponding JSON file.

Team Data Model

The data model for a page's content is defined in stackbit.config.ts. The Page model contains a field named team, which is a list of objects. Each object in this list represents a single team member.

Sources: stackbit.config.ts:60-71

The structure for a team member object is defined as follows:

Sources: stackbit.config.ts:64-69

The fields for each team member are detailed in the table below.

Field	Type	Required	Description
name	string	Yes	The full name of the team member.
role	string	Yes	The job title or role of the team member.
bio	text	No	A short biography of the team member.
image	string	No	The file path to the team member's photo.

Sources: stackbit.config.ts:64-69

Here is the code snippet from the configuration file defining this model:

// stackbit.config.ts
{
  // team members
  name: 'team',
  type: 'list',
  items: {
    type: 'object',
    fields: [
      { name: 'name', type: 'string' },
      { name: 'role', type: 'string' },
      { name: 'bio', type: 'text', required: false },
      { name: 'image', type: 'string', required: false }
    ]
  },
  required: false
}

Sources: stackbit.config.ts:60-71

Content Source

The actual data for the team members is stored in content/pages/team.json. This file contains a JSON object that conforms to the Page model, with the team key holding an array of team member objects. Although the file's content is not available, its structure is dictated by the model defined in stackbit.config.ts.

Sources: stackbit.config.ts:16, stackbit.config.ts:60-71

Page Rendering and Serving

The team.html file is a static asset generated from the data in content/pages/team.json. It is then served by a basic Node.js server.

HTML Structure (team.html)

The team.html file is the final rendered output. While the file's content is not provided, other pages like about.html demonstrate the use of data-sb-field-path attributes. These attributes link specific HTML elements back to their corresponding data fields in the JSON content file, which is a pattern used by Stackbit for in-context editing. It is expected that team.html iterates over the team array from content/pages/team.json and renders a card for each member, using attributes like data-sb-field-path="team.0.name" to map the content.

Sources: about.html:257-258, stackbit.config.ts:16

Page Serving (server.js)

The project includes a simple HTTP server written in Node.js (server.js) to serve the static website files. When a user requests a page like /team.html, the server reads the corresponding file from the filesystem and sends it back to the browser with the correct MIME type. It also includes basic error handling to serve a 404.html page if a requested file is not found.

The following sequence diagram shows the process of a user requesting the team page.

Sources: server.js:29-52

Site Integration

The Team Page is not an isolated part of the site; it is integrated into the main user flow and navigation.

The about.html page features a "Meet the team" section that provides a brief introduction and a prominent button linking directly to team.html. This encourages users to learn more about the people behind the company.

<!-- about.html -->
<div class="col mb-3 scrollanimation animated fadeInLeft adr-7">
    <h3 style="max-width: 600px;" data-i18n="meet_the_team" data-sb-field-path="sections[0].heading">Satikt komandu</h3>
</div>
<div class="col mb-3 scrollanimation animated fadeInDown adr-7">
    <div class="d-flex flex-column gap-2 align-items-end">
        <p data-i18n="..." data-sb-field-path="sections[0].text">...</p>
        <div class="w-max-content" style="justify-self: end;">
            <a href="team.html" class="btn btn-accent-outline d-flex flex-row gap-2 justify-content-center">
                <span data-i18n="view_all_team">Skatīt visu komandu</span>
                <i class="rtmicon rtmicon-arrow-up-right fw-bold"></i>
            </a>
        </div>
    </div>
</div>

Sources: about.html:256-271

Furthermore, links to team.html are present in the footer or secondary navigation sections of other key pages, including properties.html, contact.html, and even the 404.html error page. This consistent linking establishes the Team Page as a primary navigation destination.

Sources: properties.html, contact.html, 404.html:77-80