Website of PoliTo Rocket Team using the SvelteKit framework with adapter-netlify.
.env.example
, rename it as .env
and fill in the required fieldspnpm dev
pnpm dev -- --open
## Code formatter
We are using [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension to format our code for better readability across developers. Follow these steps to set it up:
1. Download the [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension.
2. Go to vscode formatting settings:
- Enable Format on Paste (optional)
- Enable Format on Save (obligatory)
- Enable Format on Type (optional)
3. Go to default formatter settings and choose **Prettier - Code formatter** extension as your default code formatter.
Now you should be able to format your code when you save it (CTRL + S or CMD + S)
## Building
To create a production version of your app:
```bash
pnpm build
You can preview the production build with pnpm preview
afterwards.
Division leads, subteam chiefs, and the president – each with their permissions – can edit their own appearance, manage their divisions, write/open/close positions.
The public routes are prerendered (see here) in order to be served very quickly and to save netlify computation time. On the other hand the dashboard makes full use of SvelteKit load functions. On top of that, a minimal server hook is used to create a supabase server client for:
/auth
routes;/dashboard
routes, for which it also checks for the existance of a user session, redirecting in case of unauthenticated users;Action | Division Lead | Subteam Chief | President |
---|---|---|---|
Update personal picture & linkedin | ✔ | ✔ | ✔ |
Read positions | Their division | Their subteam | All |
Edit positions | Their own division | Their subteam | ✖ |
Close division | ✖ | Can request | All |
Edit division name | ✖ | ✖ | ✖ |
Edit subteams | ✖ | ✖ | ✔ |
Appoint new division lead | ✖ | Can request | ✔ |
Appoint new subteam chief | ✖ | ✖ | ✔ |
Add notable student (N.S.) | ✖ | Can request | Can confirm |
Update & remove N.S. | ✖ | ✖ | ✔ |
Edit apply faqs | ✖ | COO | ✔ |
Edit timeline | Media lead | COO | ✔ |
Issue Netlify build | IT lead | COO | ✔ |
Invite people | ✖ | ✖ | ✔ |
In the public layout.ts
, export const prerender = true;
tells sveltekit to prerender any public route. +page.server.ts
load functions are thus executed only during build time, and their result is stored in json files. The returned data is available in the prop page
of +page.svelte
components.
// +page.server.ts
import type { PageServerLoad } from "./$types";
export const load: PageServerLoad = async ({ locals }) => {
const res = await locals.supabase.from("<table>").select("<fields>");
return res.data; // or do some processing
};
<!-- +page.svelte -->
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
// PageData is inferred from return type of load function
</script>
<!-- use data in the document -->
In order for some databse change to take effect on the public pages, Netlify has to receive a POST request to https://api.netlify.com/build_hooks/<id>?trigger_title=<name>
where the id
is given when creating a new Netlify build hook, an name
is an optional name for tracking purposes. Such request can be only done by the president or by the IT lead, though an ad-hoc page.