website-new Svelte Themes

Website New

SvelteKit source files of the PoliTo Rocket Team website

Official PRT website source files

Website of PoliTo Rocket Team using the SvelteKit framework with adapter-netlify.

Contributing

  1. Clone the repository into a folder and switch to that folder
  2. Duplicate .env.example, rename it as .env and fill in the required fields
  3. Run the following commands: ```bash

    installing dependencies

    pnpm install

developing by starting the server

pnpm dev

or additionally open the app in a new browser tab

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.

Supabase integration

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;
  • public routes in the case of building or developing, logging in a special user (with only partial read permissions) which allows the load functions to retrieve data from the database.

Permissions

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

Public prerendering

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.

Top categories

Loading Svelte Themes