Quick update for contribution and README

CONTRIBUTIONS.md

@@ -0,0 +1,94 @@
+# 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`](https://bun.sh) 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:
+
+```bash
+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`:
+
+```sh
+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.
+
+```bash
+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](https://www.figma.com/design/tomzJ7nLU4KCkojf2vM6xq/ECSESS-Website?node-id=0-1&t=wph9RdHLmvAW6rld-1)
+
+### 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.

Dockerfile

@@ -1,11 +1,14 @@
 # Using `bun` runtime: https://hub.docker.com/r/oven/bun/tags
-FROM oven/bun:1 AS ecsess-website
+# This is for development purposes only so you don't have to install bun locally
+
+# Production build is generated by Vercel preview
+
+FROM oven/bun:latest
 WORKDIR /ecsess
 
 COPY . /ecsess
 RUN bun install
-RUN bun run build
 
-EXPOSE 4173/tcp
+EXPOSE 5173
-CMD ["bun", "run", "vite", "preview", "--host"]
+
-# ENTRYPOINT [ "bun", "run", "vite", "preview", "--host" ]
+CMD ["bun", "run", "vite"]

README.md

@@ -1,111 +1,12 @@
 # ECSESS Website
 
-> Made by ECSESS 2024-2025
+The official open-source website for the Engineering and Computer Science Students' Society (ECSESS) at McGill University.
 
-# Prerequisite knowledge
+## Technical Stack
-
-- `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
-
-# Tech stack
-
-## Frontend
-
-- SvelteKit (Svelte v5, Kit v2)
-  - JavaScript with JSDoc
-  - [Svelte Auto Adapter](https://svelte.dev/docs/kit/adapters)
-- TailwindCSS (v4.0)
-
-- [`bun`](https://bun.sh) as Node.js package manager (similar to `npm`, `yarn`, `pnpm`, and `deno` v2)
-
-## Content Management System (CMS)
-
-- Sanity CMS
-
-# Development guide
-
-- Clone the repo, install dependencies, and start dev environment:
-
-```bash
-git clone https://github.com/mcgill-ecsess/ecsess-site.git
-bun i
-bun run dev
-```
-
-- Branches:
-  | name | purpose |
-  | - | - |
-  |`main` | The development of the site, default branch on ECSESS org.|
-  |`master`| Deployment of the site, default branch on EUS org.|
-  | development branches | If you're working on an issue, **name your branch accordingly** so that we know what feature it is |
-
-- To create a production version of the website:
-
-```bash
-bun run build
-bun run preview # to preview the production build
-```
-
-# Deployment
-- Other than the deployment on EUS server with AWS Caddy, there are alternative ways to deploy the website!
-## Docker
-- Edit the `.env` file to include the `SANITY_ID` of the CMS
-- From the root directory of the project
-```sh
-# Build the website with `nightly` tag
-docker build -t ecsess-website:nightly .
-docker run -p 4173:4173 ecsess-website:nightly
-```
-- The site should now be running on `localhost:4173`
-
-
-# Development Notes
-
-> Documentation is important !!
-
-## Development Stack
-
-- SvelteKit: 2
-- Svelte: 5
-- TailwindCSS: 4
-- `bun` (https://bun.sh) - it's `npm` and `node` for JavaScript/TypeScript runtime. Feel free to use `npm`, `pnpm`, or even `deno` if you wish, but I built this project with `bun` hehe :smile:
-
-```sh
-bun i # install dependencies
-bun run dev   # development server
-bun run build # test build
-```
-
-## Design:
-
-- Figma: https://www.figma.com/design/tomzJ7nLU4KCkojf2vM6xq/ECSESS-Website?node-id=1-1375&t=IxVyjZTYTlztEEpK-0
-
-## Libraries I considered to use:
-
-- Styling:
-  - [x] SkelentonUI
-- Components:
-  - [ ] BitsUI
-    - I think it's a bit painful and overkill to use this, tho it gives all the accessibility stuff... Could be a feature!
-- Icons:
-  - [ ] Lucide: https://lucide.dev/icons/
-  - [ ] FontAwesome: https://fontawesome.com/icons
-
-## ECSESS Colors
-
-- I didn't use SkeletonUI custom colors or themes. I rely solely on TailwindCSS custom colors variable.
-
-| ECSESS Colours    | HEX     | `var`                |
-| ----------------- | ------- | -------------------- |
-| Beigey Green      | #a9b7a0 | --color-ecsess-200   |
-| Touching Grass    | #5c8a5c | --color-ecsess-400   |
-| Simply Green      | #3b6a3a | --color-ecsess-600   |
-| Iconic Dark Green | #0A3D2A | --color-ecsess-800   |
-| Not quite black   | #1f1f1f | --color-ecsess-black |
-
-## CMS Integration
-
-- Edit `.env` in the project folder (see `.env.example` for template)
-- Add the Sanity CMS's **Project ID**
-- See the data when you run `bun run dev`
 
+- `bun` (https://bun.sh) as Node.js package manager and runtime
+- SvelteKit v2 with Svelte v5
+- TailwindCSS v4
+- Sanity CMS for content management
+- SkelentonUI (https://www.skeleton.dev) for UI components
+- Lucide (https://lucide.dev/icons/) for icons

src/app.css

@@ -4,30 +4,27 @@
 @theme {
 	/* Light shades - for backgrounds and cards */
 	--color-ecsess-50: #e8ffd9;
-	--color-ecsess-100: #CCE7BA;
+	--color-ecsess-100: #cce7ba;
-	--color-ecsess-150: #b8dda8;
 	--color-ecsess-200: #a9d0a0;
-	
+
 	/* Mid-light shades - for borders and hover states */
 	--color-ecsess-300: #8fb98a;
-	--color-ecsess-350: #7aa876;
 	--color-ecsess-400: #6a9a6a;
-	
+
 	/* Mid shades - for accents and interactive elements */
 	--color-ecsess-500: #5a8b5a;
-	--color-ecsess-550: #4d7a4d;
 	--color-ecsess-600: #3f6a3f;
-	
+
 	/* Mid-dark shades - for text on light backgrounds */
 	--color-ecsess-700: #2d5a2d;
 	--color-ecsess-800: #0a3d2a;
-	
+
 	/* Dark shades - for text and backgrounds */
 	--color-ecsess-900: #062c20;
 	--color-ecsess-950: #031c15;
-	
+
 	/* Black variants for UI elements */
-	--color-ecsess-black: #1F1F1F;
+	--color-ecsess-black: #1f1f1f;
 	--color-ecsess-black-hover: #161917;
 }
 
@@ -57,7 +54,8 @@ h2 {
 		@apply my-2 leading-relaxed;
 	}
 
-	strong, b {
+	strong,
+	b {
 		@apply font-bold;
 	}
 
@@ -205,4 +203,3 @@ h2 {
 		@apply mt-3 text-sm leading-5;
 	}
 }
-

src/lib/schemas.ts

@@ -1,3 +1,5 @@
+import type { InputValue } from '@portabletext/svelte';
+
 export type EventPost = {
 	id: string;
 	name: string;
@@ -16,8 +18,6 @@ export type FAQ = {
 	answer: string;
 };
 
-import type { InputValue } from '@portabletext/svelte';
-
 export type HomepageCMSResponse = {
 	description: InputValue;
 	councilPhoto: string;