Code Structure

Code Structure

In General

File/Directory	Purpose
index.html	Root HTML file with basic structure and Javascript file linking
src/assets	Assets directory. See [Assets Folder Structure]
src/components	React components (JavaScript files that will create HTML elements)
src/scripts	JavaScript files that run the 3D graphics or help with data going to the components
src/styles	CSS files that help with the layout and styling of the website

Frameworks and technologies

• NPM is used for package management
• Vite is used to build and bundle this website
• React is used for generating Artifact elements from reading in a tsv file
• DeepSource is used to track and fix styling issues

Artifacts

In General: holds the headings and content of artifacts and year/quarter separators

• Artifacts.jsx: Parent component which holds the headings, cards, and commponents
• ArtifactCard.jsx: Heading, subtitle, and 3D graphic
• ArtifactContents.jsx: Artifact text, images, and embedded content

Asset imports (src/scripts/asset-imports.js)

In General: Import local assets into code to get Vite to bundle them Also...

• Hold URLs for external embedded assets
• Import meta.tsv files as urls
• export the assets as objects to access them with the artifact titles in code (object names: imageAssets, imageAssetMetas, embedAssets)