diff --git a/AGENT.md b/AGENT.md new file mode 100644 index 0000000..b4d17c2 --- /dev/null +++ b/AGENT.md @@ -0,0 +1,72 @@ +# ECSESS Agent Guidelines + +This document outlines the standards, technology stack, and best practices for the **ECSESS (Engineering and Computer Science Students' Society)** website project. All AI agents and developers should follow these guidelines strictly. + +## 1. Technology Stack + +- **Runtime & Package Manager**: **Bun**. + - Use `bun install`, `bun run dev`, `bun run build`. + - Do NOT use `npm` or `yarn` unless explicitly instructed. +- **Framework**: **SvelteKit v2** with **Svelte 5**. + - **Runes**: The project is configured with `runes: true`. ALWAYS use Svelte 5 Runes (`$state`, `$derived`, `$effect`, `$props`) for reactivity. Avoid legacy `export let` or `store` syntax for new components. +- **Styling**: **TailwindCSS v4**. + - Configuration is largely handled in CSS (`@theme` in `app.css`) rather than `tailwind.config.js`. +- **CMS**: **Sanity**. + - Content is managed via Sanity. Content schemas and fetching logic are critical parts of the app. +- **Icons**: **Lucide Svelte** (`@lucide/svelte`). + +## 2. Setup Instructions + +1. **Install Dependencies**: Run `bun install` in the project root. +2. **Environment Setup**: + - Copy `.env.example` to `.env` if it doesn't exist. + - Ensure Sanity CMS credentials (project ID, dataset) are correctly populated. +3. **Development**: Run `bun run dev` to start the local server. + +## 3. Project Structure & Imports + +- **Aliases**: Always use the configured import aliases: + - `import X from 'components/...'` (mapped to `src/components`) + - `import X from 'utils/...'` (mapped to `src/utils`) + - `import X from 'assets/...'` (mapped to `src/assets`) + - `$lib` is available for `src/lib`. + +## 4. Styling & Design System + +- **Global Styles**: Refer to [`src/app.css`](file:///src/app.css) for the design system. +- **Custom Styles**: For custom css styling, please use `` tags in the component. +- **Color Palette**: Use the ECSESS brand colors defined in CSS variables. Do not hardcode hex values if a variable exists. + - Light: `--color-ecsess-50` to `--color-ecsess-200` + - Mid: `--color-ecsess-300` to `--color-ecsess-600` + - Dark: `--color-ecsess-700` to `--color-ecsess-950` + - Black: `--color-ecsess-black` +- **Typography**: + - Primary Font: 'Saira', sans-serif. + - Classes: Use the `.typography` global class for prose content (CMS text, blogs) to ensure consistent formatting of headers, lists, and quotes. + - Use Tailwind utility classes for layout and spacing. + +## 5. Coding Standards + +- **Specification & Clarification (CRITICAL)**: + - **Ask Questions**: The agent **MUST** ask for clarification if the prompt is ambiguous, vague, or lacks sufficient detail. + - **Maximize Detail**: Require as much detail as possible from the user regarding functionality, design preferences, and edge cases before coding. + - **Confirm Plan**: Before implementing complex changes, re-state the requirements to the user to ensure alignment. +- **Svelte Components**: + - Use `snippets` for repeated markup within a file. + - Ensure accessibility (a11y) attributes are present. + - Type all props using `$props()`. +- **TypeScript**: + - Strict typing is encouraged. Avoid `any`. + - Define interfaces/types in `src/lib/types` or colocated with components if specific. + +## 6. UI/UX Philosophy + +- **Premium & Modern**: The design should feel high-quality. Use smooth transitions, subtle hover states, and the specific color palette to maintain brand identity. +- **Responsive**: Mobile responsiveness is a strict requirement. Always verify layouts on small screens. +- **Consistency**: Maintain consistency in design and functionality throughout the website. + +## 7. Workflow + +- **Development**: `bun run dev` +- **Formatting**: `bun run format` (Prettier) +- **Linting**: `bun run check` diff --git a/README.md b/README.md index 51f8c5b..92cb17b 100644 --- a/README.md +++ b/README.md @@ -8,5 +8,4 @@ The official open-source website for the Engineering and Computer Science Studen - 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/components/layout/Footer.svelte b/src/components/layout/Footer.svelte index eed2a3e..80d1685 100644 --- a/src/components/layout/Footer.svelte +++ b/src/components/layout/Footer.svelte @@ -1,4 +1,6 @@ @@ -86,42 +94,11 @@ class="bg-ecsess-800 hover:bg-ecsess-600 flex h-10 w-10 items-center justify-center rounded-full transition-all hover:scale-110" > {#if link.icon === 'instagram'} - + {:else if link.icon === 'facebook'} - + {:else if link.icon === 'linkedin'} - + {:else if link.icon === 'linktree'} {:else if link.icon === 'email'} - + + {:else if link.icon == 'github'} + {/if} {/each} @@ -161,19 +127,13 @@ Let us know!

- - ECSESS on GitHub + ECSESS Logo + Bug Report Form diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte index b998b7c..bbf049c 100644 --- a/src/components/layout/NavBar.svelte +++ b/src/components/layout/NavBar.svelte @@ -33,6 +33,7 @@ > Home Meet the council + Team Events Resources {#if isElectionTime} @@ -50,6 +51,7 @@ Home Meet the council + Team Events Resources {#if isElectionTime} diff --git a/src/components/team/Avatar.svelte b/src/components/team/Avatar.svelte new file mode 100644 index 0000000..857745f --- /dev/null +++ b/src/components/team/Avatar.svelte @@ -0,0 +1,32 @@ + + +
+ {name} + {#if role} + {#each array as char, index} +

+ {char} +

+ {/each} + {/if} +
diff --git a/src/components/team/TeamBanner.svelte b/src/components/team/TeamBanner.svelte new file mode 100644 index 0000000..c471a60 --- /dev/null +++ b/src/components/team/TeamBanner.svelte @@ -0,0 +1,49 @@ + + +
+ + + +
+

{name}

+
Fun Fact:
+
{funFact}
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid ex voluptate minus ratione + animi unde beatae, maiores maxime adipisci alias, omnis vel, modi provident. Numquam accusamus + nisi dolores nihil temporibus? +
+
+ +
+ +
+
+ + diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index eb9eba2..f4f4ff4 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -81,3 +81,13 @@ export type Redirect = { shortname: string; url: string; }; + +export type DevTeam = { + name: string; + role: string; + yeaProgram: string; + email: string; + funFact: string; + github: string; + image: string; //URL +}; diff --git a/src/routes/council/+page.server.ts b/src/routes/council/+page.server.ts index ff6497a..fa562b4 100644 --- a/src/routes/council/+page.server.ts +++ b/src/routes/council/+page.server.ts @@ -19,7 +19,11 @@ const councilQuery = `{ }`; export const load = async ({ url }) => { - const { members, councilGoofyPic }: { members: CouncilMember[], councilGoofyPic: { url: string } } = await getFromCMS(councilQuery); + const { + members, + councilGoofyPic + }: { members: CouncilMember[]; councilGoofyPic: { url: string } } = + await getFromCMS(councilQuery); return { members: members, diff --git a/src/routes/team/+page.server.ts b/src/routes/team/+page.server.ts new file mode 100644 index 0000000..5ad3b3a --- /dev/null +++ b/src/routes/team/+page.server.ts @@ -0,0 +1,22 @@ +//Wait for CMS to setup +import type { DevTeam } from '$lib/schemas'; +import { getFromCMS } from '$lib/utils'; + +const query = `*[_type == "devTeam"]{ + name, + role, + yearProgram, + email, + funFact, + github, + "image": image.asset->url+"?h=300&fm=webp", +}`; + +export const load = async ({ url }) => { + let devTeam: DevTeam[] = await getFromCMS(query); + + return { + devTeam: devTeam, + canonical: url.href + }; +}; diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte new file mode 100644 index 0000000..108db7a --- /dev/null +++ b/src/routes/team/+page.svelte @@ -0,0 +1,36 @@ + + + + +
+
+

Meet the team!

+

Our Current Team

+ +
+ {#each data.devTeam as member, idx} + + {/each} +
+ +

Past Contributors

+
+ + + + +
+
+