Architecture

 public 
   |- imgs/             // images used in the website
   |- gallery/          // images for the gallery section
 src
   |- components/       // reusable components (e.g., Navbar, Footer)
   |- data/             // data files (e.g., team members, projects)
   |- icons/            // SVG icons used in the website
   |- layouts/          // layout components
   |- pages/            // individual pages of the website
   |- react/            // React components used in the website
   |- shared/           // Small components shared across other components and pages
   |- styles/           // global styles and CSS files
   |- utils/            // utility functions and helpers
   |- content.config.ts // configuration for site content

utils/constants.ts

This file has some useful constants such as: - NAV_LINKS: An array of navigation links used in the Navbar components. - SPONSOR_X_COLORS: An object defining colors for different sponsor levels. - APPLICATION_FORM_ENABLED: A boolean flag to enable or disable the application form on the recruitment page.

src/data/

The paths used in the JSON files below are relative to the public/ directory and must always start with a leading /.

For type information about each of the fields, refer to the content.config.ts file which defines all the data types.

src/data/competitions.ts

This holds the data related to the competitions the team has participated in. This content is shown in the website landing page.

src/data/fleet.ts

This file contains information about the team's fleet. Each object represents a boat with its details. This is used in the /fleet page.

src/data/gallery.ts

This file contains an array of image objects used in the gallery section of the website. Each object includes the image path and an optional caption.

The gallery images are aggregated by event. The order that appear in the website is determined by the order in this file.

src/data/sponsors.ts

The sponsors data file contains information about TSB sponsors. Each sponsor object includes details such as name, logo path, website URL, and sponsorship level.

The sponsor categories are also infered from the sponsor data and used to group sponsors in the /sponsors page. Categories are displayed in order of apearance in the JSON file.

src/data/the_team.ts

This file contains information about the team members. Each object represents a member with their details such as name, role and photo path. This data is used in the /team page.

Each team member has a years array that is used to indicate the years they were part of the team. This allows for filtering members by year on the team page. Use the format YYYY/YYYY for academic years (e.g., 2022/2023). as this is the format displayed in the website and used for ordering.

The years and departments are infered from the team members data so keeping the writing consistent is important to avoid duplicates.

Extra Content

In addition to structured content in /data you can find content directly into the pages conponents in /pages. This is usually done for content that is not expected to change often or that requires more complex formatting.

For example, the /about page contains several sections with static content directly in the component file. Changing the content there requires modifying the component itself. However, it should not be strayforward as the content is organized into smaller sub-components for better readability and maintainability.