ECSESS/CONTRIBUTIONS.md

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.

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.