Quick update for contribution and README
This commit is contained in:
Antoine Phan
94
CONTRIBUTIONS.md
Normal file
94
CONTRIBUTIONS.md
Normal file
@@ -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.
|
||||
13
Dockerfile
13
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" ]
|
||||
EXPOSE 5173
|
||||
|
||||
CMD ["bun", "run", "vite"]
|
||||
115
README.md
115
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
|
||||
|
||||
21
src/app.css
21
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user