Merge branch 'beta' into 'main'

2023 release

See merge request pls5618/website!5

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

.gitignore

@@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.gitlab-ci.yml

@@ -1,9 +1,39 @@
-deploy:
+default:
   tags:
     - website
+
+stages:
+  - build
+  - deploy
+
+build:
+  stage: build
+  artifacts:
+    paths:
+      - build/
+  script:
+    - echo "Build"
+    - npm install
+    - npm run build
+
+deploy-beta:
+  stage: deploy
+  script:
+    - echo "Deploy to beta server"
+    - ncftpput -R -u "$ftp_user" -p "$ftp_pass" pls5618.com beta_site build/*
+  environment:
+    name: beta
+    url: http://beta.pls5618.com
+  only:
+    - beta
+
+deploy:
   stage: deploy
   script:
     - echo "Deploy to server"
+    - ncftpput -R -u "$ftp_user" -p "$ftp_pass" pls5618.com build/*
   environment:
     name: website
-    url: https://pls5618.com
+    url: http://pls5618.com
+  only:
+    - main

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

package.json

@@ -0,0 +1,41 @@
+{
+	"name": "website",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.1",
+		"@sveltejs/kit": "^1.5.0",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.8.1",
+		"sass": "^1.58.2",
+		"svelte": "^3.54.0",
+		"svelte-check": "^3.0.1",
+		"svelte-preprocess": "^5.0.1",
+		"tslib": "^2.4.1",
+		"typescript": "^4.9.3",
+		"vite": "^4.0.0",
+		"vite-imagetools": "^4.0.18"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fortawesome/free-brands-svg-icons": "^6.3.0",
+		"@fortawesome/free-solid-svg-icons": "^6.3.0",
+		"@picocss/pico": "^1.5.7",
+		"svelte-fa": "^3.0.3"
+	}
+}

src/app.d.ts

@@ -0,0 +1,24 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+		declare module '*.jpg?width=600&webp' {
+			const out: string;
+			export default out;
+		}
+		declare module '*.png?height=600&width=600&fit=contain&background=transparent&webp' {
+			const out: string;
+			export default out;
+		}
+		declare module '*.png?width=1100&fit=contain&background=transparent&webp' {
+			const out: string;
+			export default out;
+		}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		<title>PLS5618</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents" class="container">%sveltekit.body%</div>
+	</body>
+</html>

src/app.scss

@@ -0,0 +1,32 @@
+/* Light scheme (Default) */
+/* Can be forced with data-theme="light" */
+
+:root {
+	--primary: #189ad6;
+	--primary-hover: #0288d1;
+	--primary-focus: rgba(3, 155, 229, 0.125);
+	--primary-inverse: #fff;
+	--form-element-active-border-color: var(--primary);
+	--form-element-focus-color: var(--primary-focus);
+	--switch-color: var(--primary-inverse);
+	--switch-checked-background-color: var(--primary);
+}
+
+:root:not([data-theme='dark']) {
+	--muted-border-color: #c99a2c;
+	--card-sectionning-background-color: #189ad6;
+	--card-background-color: hsl(199, 80%, 55%);
+	--color: white;
+	--border-width: 2px;
+	--active-link-color: #0a1425;
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+	:root:not([data-theme]) {
+		--background-color: #0a1425;
+		--card-sectionning-background-color: #243043;
+		--card-background-color: #0c192e;
+		--card-border-color: #c99a2c;
+		--active-link-color: #189ad6;
+	}
+}

src/routes/+layout.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import '@picocss/pico/';
+	import Fa from 'svelte-fa';
+	import { faFacebook, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
+</script>
+
+<nav id="topnav">
+	<ul>
+		<li><a href="/"><img id="logo" src="/favicon.png" alt="PLS Logo" /></a></li>
+		<li id="title"><strong>PLS 5618</strong></li>
+	</ul>
+	<ul>
+		<li><a class={$page.route.id === '/' ? 'active' : ''} href="/"> L'équipe </a></li>
+		<li>
+			<a class={$page.route.id === '/resultats' ? 'active' : ''} href="/resultats"> Résultats </a>
+		</li>
+		<li>
+			<a class={$page.route.id === '/partenaires' ? 'active' : ''} href="/partenaires">
+				Partenaires
+			</a>
+		</li>
+	</ul>
+</nav>
+
+<slot />
+
+<footer>
+	<nav>
+		<ul>
+			<li>
+				<a href="https://www.facebook.com/PLS5618" target="_blank" rel="noreferrer">
+					<Fa icon={faFacebook} size="2.5x" />
+				</a>
+			</li>
+			<li>
+				<a href="https://twitter.com/pls5618" target="_blank" rel="noreferrer">
+					<Fa icon={faTwitter} size="2.5x" />
+				</a>
+			</li>
+			<li>
+				<a href="https://www.instagram.com/team5618" target="_blank" rel="noreferrer">
+					<Fa icon={faInstagram} size="2.5x" />
+				</a>
+			</li>
+		</ul>
+	</nav>
+</footer>
+
+<style lang="scss">
+	#topnav {
+		background-color: var(--card-sectionning-background-color);
+		border-bottom: var(--border-width) solid var(--card-border-color);
+		ul > li > a {
+			color: white;
+			&.active {
+				color: var(--active-link-color);
+			}
+		}
+	}
+	footer ul {
+		min-width: 40%;
+		margin: auto;
+		justify-content: space-evenly;
+	}
+	#logo {
+		height: 64px;
+		object-fit: contain;
+	}
+	nav {
+		padding-inline: 20px;
+	}
+
+	@media (max-width: 445px) {
+		#title {
+			display: none;
+		}
+	}
+</style>

src/routes/+layout.ts

@@ -0,0 +1,7 @@
+import type { LayoutLoad } from './$types';
+
+export const load = (async () => {
+    return {};
+}) satisfies LayoutLoad;
+
+export const prerender = true;

src/routes/+page.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import image1 from '$lib/assets/images/image1.jpg?width=600&webp';
+	import image2 from '$lib/assets/images/image2.jpg?width=600&webp';
+	import image3 from '$lib/assets/images/image3.jpg?width=600&webp';
+</script>
+
+<div class="container">
+	<article>
+		<header>Nous sommes</header>
+		<content>
+			<p>
+				Une équipe de jeunes de 12 à 18 ans, encadrés par des mentors, participant à la compétition
+				internationale de robotique FIRST. Notre défi consiste à concevoir et construite un robot
+				performant dans un temps limité.
+			</p>
+			<div class="img" style="background-image: url('{image1}')" />
+		</content>
+	</article>
+
+	<article>
+		<header>Notre mission</header>
+		<content>
+			<div class="img" style="background-image: url('{image2}')" />
+			<p>
+				L'équipe PLS 5618 désire garantir aux élèves une expérience enrichissante et professionnelle
+				en connaissances technologiques et personnelles dans un climat favorisant la confiance et
+				l'autonomie Le projet stimule l'intérêt envers les sciences et technologies tout en
+				développant un sentiment d'appartenance envers l'équipe, l'école et la communauté.
+			</p>
+		</content>
+	</article>
+
+	<article>
+		<header>Nos valeurs</header>
+		<content>
+			<ul>
+				<li>Esprit d'équipe</li>
+				<li>Organisation</li>
+				<li>Connaissances</li>
+				<li>Confiance en soi et envers les autres</li>
+				<li>Plaisir</li>
+				<li>Amitié</li>
+			</ul>
+			<div class="img" style="background-image: url('{image3}')" />
+		</content>
+	</article>
+
+	<article id="links">
+		<a href="/resultats" role="button">Voir nos résultats</a>
+		<a href="/partenaires" role="button">Voir nos partenaires</a>
+	</article>
+</div>
+
+<style lang="scss">
+	content {
+		display: flex;
+		flex-flow: row;
+		gap: 30px;
+		flex-grow: 1;
+		flex-basis: 0;
+		justify-content: space-between;
+	}
+
+	.img {
+		width: 50%;
+		background-size: cover;
+		background-position: center;
+		//height: auto;
+	}
+
+	p {
+		width: 50%;
+	}
+
+	#links {
+		display: flex;
+		flex-flow: row wrap;
+		justify-content: space-evenly;
+		gap: 10px;
+	}
+
+	@media (max-width: 640px) {
+		.img {
+			display: none;
+		}
+		p {
+			width: 100%;
+		}
+	}
+</style>

src/routes/partenaires/+page.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import primewood from '$lib/assets/partenaires/primewood.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import machinex from '$lib/assets/partenaires/machinex.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import atocas from '$lib/assets/partenaires/atocas.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import usnr from '$lib/assets/partenaires/usnr.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import boisdaction from '$lib/assets/partenaires/boisdaction.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import jit from '$lib/assets/partenaires/jit.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import batteriesexpert from '$lib/assets/partenaires/batteriesexpert.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import carbotech from '$lib/assets/partenaires/carbotech.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import festivalduboeuf from '$lib/assets/partenaires/festivalduboeuf.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import mrc from '$lib/assets/partenaires/mrc.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import robovic from '$lib/assets/partenaires/robovic.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import ville from '$lib/assets/partenaires/ville.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import homedepot from '$lib/assets/partenaires/homedepot.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import manoir from '$lib/assets/partenaires/manoir.png?height=600&width=600&fit=contain&background=transparent&webp';
+	import bombardier from '$lib/assets/partenaires/bombardier.png?width=1100&fit=contain&background=transparent&webp';
+	import hydroquebec from '$lib/assets/partenaires/hydroquebec.png?height=600&width=600&fit=contain&background=transparent&webp';
+</script>
+
+<div class="container">
+	<article>
+		<header>Platine</header>
+		<div class="partenaires" id="platine">
+			<img src={bombardier} alt="Fondation J Armand Bombardier" />
+		</div>
+	</article>
+	<article>
+		<header>Or</header>
+		<div class="partenaires" id="or">
+			<img src={atocas} alt="Atocas de l'érable" />
+			<img src={hydroquebec} alt="Hydro Québec" />
+			<img src={jit} alt="Jit Laser" />
+			<img src={machinex} alt="Machinex" />
+			<img src={usnr} alt="USNR" />
+		</div>
+	</article>
+	<article>
+		<header>Argent</header>
+		<div class="partenaires" id="argent">
+			<img src={primewood} alt="Primewood" />
+			<img src={batteriesexpert} alt="Batteries Expert" />
+			<img src={boisdaction} alt="Boisdaction" />
+			<img src={carbotech} alt="Carbotech" />
+			<img src={festivalduboeuf} alt="Festival du boeuf" />
+			<img src={mrc} alt="MRC de l'érable" />
+			<img src={robovic} alt="Robovic" />
+			<img src={ville} alt="Ville de Plessisville" />
+		</div>
+	</article>
+	<article>
+		<header>Bronze</header>
+		<div class="partenaires" id="bronze">
+			<img src={homedepot} alt="Home Dépot" />
+			<img src={manoir} alt="Manoir du Lac William" />
+		</div>
+	</article>
+</div>
+
+<style lang="scss">
+	.partenaires {
+		display: grid;
+		column-gap: 20px;
+		row-gap: 20px;
+		align-items: stretch;
+		justify-items: stretch;
+
+		img {
+			object-fit: contain;
+			filter: drop-shadow(1px 1px 1px white) drop-shadow(-1px 1px 1px white)
+				drop-shadow(1px -1px 1px white) drop-shadow(-1px -1px 1px white);
+		}
+
+		&#platine {
+			grid-template-columns: repeat(1, 1fr);
+		}
+		&#or {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		&#argent {
+			grid-template-columns: repeat(3, 1fr);
+		}
+		&#bronze {
+			grid-template-columns: repeat(4, 1fr);
+		}
+
+		@media (min-width: 576px) {
+			&#platine {
+				grid-template-columns: repeat(1, 1fr);
+			}
+			&#or {
+				grid-template-columns: repeat(3, 1fr);
+			}
+			&#argent {
+				grid-template-columns: repeat(4, 1fr);
+			}
+			&#bronze {
+				grid-template-columns: repeat(5, 1fr);
+			}
+		}
+	}
+</style>

src/routes/resultats/+page.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import img2022 from '$lib/assets/resultats/2022.jpg?width=600&webp';
+	import img2020 from '$lib/assets/resultats/2020.jpg?width=600&webp';
+	import img2019 from '$lib/assets/resultats/2019.jpg?width=600&webp';
+	import img2018 from '$lib/assets/resultats/2018.jpg?width=600&webp';
+	import img2017 from '$lib/assets/resultats/2017.jpg?width=600&webp';
+	import img2016 from '$lib/assets/resultats/2016.jpg?width=600&webp';
+	import img2015 from '$lib/assets/resultats/2015.jpg?width=600&webp';
+	import type { Res } from './types';
+	import Resultat from './Resultat.svelte';
+
+	const resultats: Res[] = [
+		{
+			saison: '2022',
+			image: img2022,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal (Jour 3)',
+					resultats: ['11e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2020',
+			image: img2020,
+			events: [
+				{
+					nom: 'Festival de robotique de Sherbrooke',
+					resultats: [
+						'18e en qualification',
+						'Finaliste Prix Liste de Dean Kamen (Édouard Moffet)',
+						'Prix du Professionnalisme coopératif'
+					]
+				}
+			]
+		},
+		{
+			saison: '2019',
+			image: img2019,
+			events: [
+				{
+					nom: 'Festival de robotique de Québec',
+					resultats: ['1er en qualification', 'Alliance finaliste']
+				},
+				{
+					nom: 'Championnat Mondial de Détroit (Tesla)',
+					resultats: ['21e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2018',
+			image: img2018,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: ['9e en qualification', 'Finaliste Prix Liste de Dean Kamen (Olivier Demers)']
+				}
+			]
+		},
+		{
+			saison: '2017',
+			image: img2017,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: [
+						'18e en qualification',
+						'Alliance finaliste',
+						"Prix de l'inspiration en ingénierie"
+					]
+				},
+				{
+					nom: 'Championnat Mondial de St. Louis (Carson)',
+					resultats: ['47e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2016',
+			image: img2016,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: ['1er en qualification', 'Alliance championne', "Prix de l'entrepreneuriat"]
+				},
+				{
+					nom: 'Championnat Mondial de St. Louis (Hopper)',
+					resultats: ['15e en qualification']
+				}
+			]
+		},
+		{
+			saison: '2015',
+			image: img2015,
+			events: [
+				{
+					nom: 'Festival de robotique de Montréal',
+					resultats: [
+						'5e en qualification',
+						"Prix de l'équipe recrue la mieux classée en qualifications"
+					]
+				}
+			]
+		}
+	];
+</script>
+
+<div class="container">
+	{#each resultats as resultat}
+		<Resultat resultats={resultat} />
+	{/each}
+</div>
+
+<style>
+</style>

src/routes/resultats/Resultat.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Res } from './types';
+
+	export let resultats: Res;
+</script>
+
+<article>
+	<header>Saison {resultats.saison}</header>
+	<content>
+		<img src={resultats.image} alt="équipe {resultats.saison}" />
+		<div>
+			{#each resultats.events as event}
+				<strong>{event.nom}</strong>
+				<ul>
+					{#each event.resultats as res}
+						<li>{res}</li>
+					{/each}
+				</ul>
+			{/each}
+		</div>
+	</content>
+</article>
+
+<style>
+	content {
+		display: flex;
+		flex-flow: row;
+		gap: 30px;
+	}
+
+	img {
+		object-fit: cover;
+		width: 50%;
+		height: auto;
+	}
+
+	@media (max-width: 640px) {
+		img {
+			display: none;
+		}
+	}
+</style>

src/routes/resultats/types.ts

@@ -0,0 +1,8 @@
+export type Res = {
+	image: string;
+	saison: string;
+	events: {
+		nom: string;
+		resultats: string[];
+	}[];
+};

svelte.config.js

@@ -0,0 +1,25 @@
+import adapter from '@sveltejs/adapter-static';
+import preprocess from 'svelte-preprocess';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: preprocess({
+		scss: {
+			prependData: `@import './src/app.scss';`
+		}
+	}),
+
+	kit: {
+		adapter: adapter({
+			pages: 'build',
+			assets: 'build',
+			fallback: null,
+			precompress: false,
+			strict: true
+		})
+	}
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import { imagetools } from 'vite-imagetools';
+
+export default defineConfig({
+	plugins: [sveltekit(), imagetools()]
+});