diff --git a/CONTRIBUTIONS.md b/CONTRIBUTIONS.md new file mode 100644 index 0000000..86c9052 --- /dev/null +++ b/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. diff --git a/Dockerfile b/Dockerfile index f5845f0..9f2103a 100644 --- a/Dockerfile +++ b/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 -CMD ["bun", "run", "vite", "preview", "--host"] -# ENTRYPOINT [ "bun", "run", "vite", "preview", "--host" ] \ No newline at end of file +EXPOSE 5173 + +CMD ["bun", "run", "vite"] \ No newline at end of file diff --git a/README.md b/README.md index 0da6226..51f8c5b 100644 --- a/README.md +++ b/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 - -- `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` +## Technical Stack +- `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 diff --git a/src/app.css b/src/app.css index feb5357..2864336 100644 --- a/src/app.css +++ b/src/app.css @@ -4,30 +4,27 @@ @theme { /* Light shades - for backgrounds and cards */ --color-ecsess-50: #e8ffd9; - --color-ecsess-100: #CCE7BA; - --color-ecsess-150: #b8dda8; + --color-ecsess-100: #cce7ba; --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; } } - diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index e33e154..47a2e64 100644 --- a/src/lib/schemas.ts +++ b/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;