Code Structure

File/Directory	Purpose
index.html	Root HTML file with basic structure and Javascript file linking
src/content	Text assets directory. See Asset Handling
src/components	React components (tsx files that will create HTML elements)
src/scripts	TypeScript files that run the 3D graphics or help with data going to the components
src/styles	SCSS 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.tsx: Parent component which holds the headings, cards, and components
• ArtifactCard.tsx: Heading, subtitle, and 3D graphic
• ArtifactContents.tsx: Artifact text, images, and embedded content

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

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

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