This project was created using a library called SvelteKit which uses Svelte to create efficient, static websites.
The website's pages are located under the routes directory.
In that directory, each file with a prefix + represents an endpoint of the website.
| Path of File | Production URL |
|---|---|
/src/routes/+page.svelte |
https://acmcsuf.com/ |
/src/routes/teams/+page.svelte |
https://acmcsuf.com/teams/ |
/src/routes/paths/+page.svelte |
https://acmcsuf.com/paths/ |
ℹ more info: https://kit.svelte.dev/docs/routing#advanced-routing
The +layout.svelte file at the root of the /routes directory is used in the background of every page of the site.
...But in many apps, there are elements that should be visible on every page, such as top-level navigation or a footer. Instead of repeating them in every page, we can use layout components.
Read more about how layouts are used in the SvelteKit documentation.
This page is rendered when there are any errors on any page of the website. If a page on our site cannot render properly due to an error, our site will render this page instead in order to provide the user with any information about the error. This page should be happy since errors are normally frustrating for users.
In addition to regular pages, there is a 'special' page that SvelteKit expects to find —
/src/routes/+error.svelte. This will be shown when an error occurs while rendering a page.
Read more about how error pages are used in the SvelteKit documentation.
Other components of the website can be organized into the /lib/components/ directory.
These files are like pieces of the website that can be composed together in the /routes components.
For example, the /src/lib/components/footer/footer.svelte and src/lib/components/nav/bar.svelte components are used in /routes/+page.svelte.
The /lib/components/svg/ directory contains several Svelte files that contain SVG data.
These icons can be used in the website in multiple places.
The /static directory contains multiple files that are statically hosted for use on the client.
The global.css file is used to supply several macros for us to use anywhere in the site.
This includes some utility classes that help color specific text and some CSS variables that are used to set the font size on every page of the site.
This file is to be amended once in a while as any deletions could cause site-wide issues.
Additions to this file should also be taken with great care as to not complicate the simplicity of our collection of utility classes and CSS variables.
This directory is used to contain any assets that are used on the client; primarily including images.
The /static/people/ directory is home to the normalized head shots of each current acmCSUF board member.
Each board member who is shown in this directory has granted their consent for their image to be public.
The TSConfig file is used by the TypeScript compiler to specify any compilation parameters and settings.
In the case of this project, our TSConfig is mostly extended from @tsconfig/svelte, an opinionated base TSConfig for working with Svelte.
This file is a configuration file of sorts that handles the bundling and live page reloading when developing the project.
This file is a file that declares the linting configuration of the project.
This file is a file that declares the formatting configuration of the project.
This JSON file describes information about the project and stores the information for all of the dependencies (along with their versions) used in the project.
This includes "dependencies" that are used inside our program and "devDependencies" that are used for development outside of the inner-workings of our program.
This file is not meant to be modified by humans, but instead left to be managed by the project's package manager, NPM.
Even though it is not affected by developers, the lock file is still important and so it is advised to leave it out of the .gitignore file.