Contribution Guide

The website development is under the portfolio of ECSESS VP Technical Development. For content request, please refer to VP Communications for the content management. This document outlines the developer guides to contribute to the ECSESS website project. Developers can choose to contribute either by (1) working as an internal team member of ECSESS Website Subcommittee (make a branch and open PR), or (2) contributing as an external open-source contributor (fork the repo and open a PR).

Prerequisite knowledge

npm knowledge. We use bun for this project. See https://bun.sh for installation guide.
Svelte & SvelteKit: Follow the tutorial here: https://svelte.dev/tutorial/svelte/welcome-to-svelte

Collaboration workflow

Branches:
- main The development of the site, default branch on ECSESS org.
- All development branches: If you're working on an issue, name your branch accordingly so that we know what feature it is.
Pull Requests (PRs) & Code Review:
- Once your feature is complete, open a PR against main. Ensure to describe the changes made and link any relevant issues.
- At least one code review approval from ECSESS dev team members is required before merging.
- After merging, delete the feature branch to keep the repository clean.

Tech stack

SvelteKit (Svelte v5, Kit v2)
TailwindCSS (v4.0)
bun as Node.js package manager (similar to npm, yarn, pnpm, and deno v2)
Content Management System: Sanity

Development guide

Clone the repo and install dependencies, and start dev environment:

git clone https://github.com/mcgill-ecsess/ecsess-site.git # or use SSH
cd ecsess-site
bun i

Create .env by copy .env.example
Add the Sanity CMS project ID SANITY_ID=the_project_id -- Contact VP TechDev or VP Comms for this info
See the development website locally at localhost:5173:

bun run dev

To build and preview a production version of the website. This step is optional as Vercel handles the build and preview deployment automatically as you commit to a PR.

bun run build
bun run preview

Content Management

See ecsess-sanity-studio for the development of the Sanity CMS studio.
Schemas are defined in src/lib/schemas.ts as reference based on what is configured in the Sanity studio
Each +page.svelte (client-side/frontend) has a corresponding +page.server.ts (server-side/backend) that fetches the content from Sanity CMS using GROQ queries. This data is loaded to data variable that can be accessed in the Svelte component.

UI Designs

Figma

The original Figma design can be found here

Colour Palette

The website relies on TailwindCSS custom colour variables:

HEX CODE	Variable name
#e8ffd9	--color-ecsess-50
#cce7ba	--color-ecsess-100
#a9d0a0	--color-ecsess-200
#8fb98a	--color-ecsess-300
#6a9a6a	--color-ecsess-400
#5a8b5a	--color-ecsess-500
#3f6a3f	--color-ecsess-600
#2d5a2d	--color-ecsess-700
#0a3d2a	--color-ecsess-800
#062c20	--color-ecsess-900
#031c15	--color-ecsess-950
#1f1f1f	--color-ecsess-black
#161917	--color-ecsess-black-hover

Typography

The website uses the Saira font family from Google Fonts:
- Saira: https://fonts.google.com/specimen/Saira
Instead of using TailwindCSS Typography plugin, we define our own typography styles in src/app.css, via .typography class.

3.7 KiB Raw Blame History