-
Notifications
You must be signed in to change notification settings - Fork 0
Code Structure
| File/Directory | Purpose |
|---|---|
index.html |
Root HTML file with basic structure and Javascript file linking |
src/assets |
Text assets directory. See Asset Handling. |
src/components |
React components (tsx files that will create HTML elements) |
src/routes |
React components that will be rendered by the router. |
src/scripts |
TypeScript files that run the 3D graphics or help with data going to the components |
src/styles |
SASS files that help with the layout and styling of the website |
- 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
tsvfile - React Router is used to route to different pages
- Prettier is used for formatting
- ESLint is used for linting
- DeepSource is used for additional static analysis
The website uses React Router to route to different pages. The router is set up
in main.tsx and routes to the root.tsx page (the main website),
individual ArtifactPage.tsx pages, and an error / 404 page.
Instead of using props for these main pages, the router's loader data system is used instead. This allows for the data to be passed in as a function of the route rather than needing to generate a prop for each page.
These are what the website was built to showcase. Artifacts are sorted by year and quarter and presented as cards with only the title, subtitle, and an accompanying 3D graphic. Clicking on a card will take the user to a separate page with more information about the artifact.
-
Year.tsx: Component that presents a year header and renders a list of quarters -
Quarter.tsx: Component that presents a quarter header and renders a list of artifacts -
ArtifactCard.tsx: Component that presents an artifact card which links to an Artifact page -
ArtifactPage.tsx: Component that presents an artifact page with more information about the artifact
Because of my interest in 3D graphics, I wanted to use 3D graphics to make the website more interesting. Three.js is the driving framework for presenting the 3D graphics. Assets are loaded in from my Cloudinary CDN.