Fixing js check issues. Updated Svelte check. Formatted files.

2025-03-29 13:26:06 +01:00 · 2025-03-29 13:26:06 +01:00 · 64e3a6e7ac
commit 64e3a6e7ac
parent 78af91262b
19 changed files with 298 additions and 235 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -17,7 +17,7 @@
 				"@sveltejs/kit": "^2.16.0",
 				"@sveltejs/vite-plugin-svelte": "^5.0.0",
 				"svelte": "^5.0.0",
-				"svelte-check": "^4.0.0",
+				"svelte-check": "^4.1.5",
 				"typescript": "^5.0.0",
 				"vite": "^6.0.0"
 			}
--- a/package.json
+++ b/package.json
@ -16,7 +16,7 @@
 		"@sveltejs/kit": "^2.16.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
+		"svelte-check": "^4.1.5",
 		"typescript": "^5.0.0",
 		"vite": "^6.0.0"
 	},
--- a/src/lib/components/archive.svelte
+++ b/src/lib/components/archive.svelte
@ -1,38 +1,38 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/archive.css';
-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiChevronRight } from '@mdi/js';
-	import anime from 'animejs';
+	import "$lib/css/base.css";
+	import "$lib/css/archive.css";
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiChevronRight } from "@mdi/js";
+	import anime from "animejs";

 	export let fontPost = 1;
 	export let paddingPost = 0.5;
 	export let customStyle = "";

 	const posts = {
-		'Août 2024': [
-			'Est-ce que le lorem est Ipsum ?',
+		"Août 2024": [
+			"Est-ce que le lorem est Ipsum ?",
 			"J'aime bien le jeu Minecraft",
-			'Comment Installer Linus Torvalds sur sa tablette',
+			"Comment Installer Linus Torvalds sur sa tablette",
 			'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?',
-			"Peut-on vivre dans une maison en pain d'épices ?"
+			"Peut-on vivre dans une maison en pain d'épices ?",
 		],
-		'Juillet 2024': [
-			'Les secrets du café qui ne refroidit jamais',
-			'Comment devenir un ninja en 10 leçons faciles',
-			'La vérité derrière les licornes: Mythe ou réalité ?',
-			"J'ai adopté un dragon, voici ce qui s'est passé"
+		"Juillet 2024": [
+			"Les secrets du café qui ne refroidit jamais",
+			"Comment devenir un ninja en 10 leçons faciles",
+			"La vérité derrière les licornes: Mythe ou réalité ?",
+			"J'ai adopté un dragon, voici ce qui s'est passé",
 		],
-		'Juin 2024': [
+		"Juin 2024": [
 			'Pourquoi "Le miam" pourrait être votre groupe de musique préféré ?',
-			'La recette secrète de la pizza à la glace',
-			'Comment devenir un expert en pirouettes en 5 jours'
+			"La recette secrète de la pizza à la glace",
+			"Comment devenir un expert en pirouettes en 5 jours",
+		],
+		"Mai 2024": [
+			"Mon voyage au centre de la Terre en montgolfière",
+			"Pourquoi les pandas devraient être vos nouveaux colocataires",
+			"Les chats dominent-ils vraiment Internet ?",
 		],
-		'Mai 2024': [
-			'Mon voyage au centre de la Terre en montgolfière',
-			'Pourquoi les pandas devraient être vos nouveaux colocataires',
-			'Les chats dominent-ils vraiment Internet ?'
-		]
 	};

 	const size = Object.keys(posts).length;
@ -48,7 +48,9 @@
 		const svg = archiveRefs[index].children[1];
 		const rvalue = isActive[index] ? [90, 0] : [0, 90];
 		const ovalue = isActive[index] ? [1, 0] : [0, 1];
-		const shadow = isActive[index] ? '' : '0px 8px 18px -1px rgba(52, 42, 58, 0.2)';
+		const shadow = isActive[index]
+			? ""
+			: "0px 8px 18px -1px rgba(52, 42, 58, 0.2)";
 		const mbvalue = isActive[index] ? [0.5, 0] : [0, 0.5];
 		const hvalue = isActive[index]
 			? [posts[date].length * (2 * paddingPost + fontPost + 0.5), 0]
@ -58,20 +60,25 @@

 		if (!isActive[index]) {
 			indexArchive = -1;
-			archivePost.style.opacity = '0';
+			archivePost.style.opacity = "0";
 		} else {
 			indexArchive = index;
-			archivePost.style.display = 'block';
+			archivePost.style.display = "block";
 		}

 		anime({
-			targets: { transform: rvalue[0], opacity: ovalue[0], margin: mbvalue[0], height: hvalue[0] },
+			targets: {
+				transform: rvalue[0],
+				opacity: ovalue[0],
+				margin: mbvalue[0],
+				height: hvalue[0],
+			},
 			transform: rvalue,
 			opacity: ovalue,
 			margin: mbvalue,
 			height: hvalue,
 			duration: 300,
-			easing: 'easeInOutQuad',
+			easing: "easeInOutQuad",
 			update: function (anim) {
 				svg.style.transform = `rotate(${anim.animations[0].currentValue}deg)`;
 				archive.style.background = `linear-gradient(90deg, rgba(65,53,67,${anim.animations[1].currentValue}) 0%, rgba(38,28,44,${anim.animations[1].currentValue}) 100%)`;
@ -81,22 +88,22 @@
 			},
 			complete: function () {
 				if (!isActive[index]) {
-					archivePost.style.display = 'none';
+					archivePost.style.display = "none";
 					return;
 				}
 				anime({
 					targets: archivePost,
 					opacity: ovalue,
 					duration: 300,
-					easing: 'easeOutQuad'
+					easing: "easeOutQuad",
 				});
-			}
+			},
 		});
 		anime({
 			targets: archive,
-			color: isActive[index] ? '#F8F1F1' : '#261C2C',
+			color: isActive[index] ? "#F8F1F1" : "#261C2C",
 			duration: 200,
-			easing: 'easeInOutQuad'
+			easing: "easeInOutQuad",
 		});
 	}
 </script>
--- a/src/lib/components/button-slider.svelte
+++ b/src/lib/components/button-slider.svelte
@ -1,23 +1,26 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/button-slider.css';
-	import { createEventDispatcher } from 'svelte';
+	import "$lib/css/base.css";
+	import "$lib/css/button-slider.css";
+	import { createEventDispatcher } from "svelte";

 	const dispatch = createEventDispatcher();
-	export let keys = ['Button1', 'Button2'];
+	export let keys = ["Button1", "Button2"];
 	export let active = 0;
 	export let width = "100%";

 	function changeActive(id) {
-		dispatch('click', { id: id });
+		dispatch("click", { id: id });
 		active = id;
 	}
 </script>

-<div class="button-slider-container center" style="--button-slider-width: {width}">
+<div
+	class="button-slider-container center"
+	style="--button-slider-width: {width}"
+>
 	{#each keys as k, id}
 		<button
-			class={id === active ? 'button-slider-active' : ''}
+			class={id === active ? "button-slider-active" : ""}
 			on:click={() => {
 				changeActive(id);
 			}}><span>{k}</span></button
--- a/src/lib/components/carousel-vertical.svelte
+++ b/src/lib/components/carousel-vertical.svelte
@ -1,8 +1,8 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/carousel.css';
-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiAccount, mdiCalendarRange } from '@mdi/js';
+	import "$lib/css/base.css";
+	import "$lib/css/carousel.css";
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiAccount, mdiCalendarRange } from "@mdi/js";

 	export let posts;
 	const mainpost = posts[0];
@ -14,7 +14,7 @@

 	function handleKeyDown(event, url) {
 		console.log(event);
-		if (event.key === 'Enter' || event.key === ' ') {
+		if (event.key === "Enter" || event.key === " ") {
 			redirectTo(url);
 		}
 	}
@ -28,12 +28,17 @@
 		on:click={() => {
 			redirectTo(`/articles/${mainpost.slug}`);
 		}}
-		on:keydown={(event) => handleKeyDown(event, `/articles/${mainpost.slug}`)}
+		on:keydown={(event) =>
+			handleKeyDown(event, `/articles/${mainpost.slug}`)}
 	>
 		<div>
 			<h2>{mainpost.title}</h2>
-			<div class="center flex justify-center h-70 margin-bottom ">
-				<img class="carousel-picture" alt="mainpicture" src={mainpost.picture} />
+			<div class="center flex justify-center h-70 margin-bottom">
+				<img
+					class="carousel-picture"
+					alt="mainpicture"
+					src={mainpost.picture}
+				/>
 			</div>
 			<div class="flex align-center margin-horizontal-05">
 				<SvgIcon type="mdi" path={mdiCalendarRange} size="26" />
@ -56,17 +61,30 @@
 						on:click={() => {
 							redirectTo(`/articles/${p.slug}`);
 						}}
-						on:keydown={(event) => handleKeyDown(event, `/articles/${p.slug}`)}
+						on:keydown={(event) =>
+							handleKeyDown(event, `/articles/${p.slug}`)}
 					>
-						<img class="carousel-picture" alt="mainpicture" src={p.picture} />
+						<img
+							class="carousel-picture"
+							alt="mainpicture"
+							src={p.picture}
+						/>
 						<div class="flex-col align justify-center">
 							<h2>{p.title}</h2>
 							<div class="flex align-center margin-horizontal-05">
-								<SvgIcon type="mdi" path={mdiCalendarRange} size="26" />
+								<SvgIcon
+									type="mdi"
+									path={mdiCalendarRange}
+									size="26"
+								/>
 								{p.date}
 							</div>
 							<div class="flex align-center margin-horizontal-05">
-								<SvgIcon type="mdi" path={mdiAccount} size="26" />
+								<SvgIcon
+									type="mdi"
+									path={mdiAccount}
+									size="26"
+								/>
 								{p.author}
 							</div>
 						</div>
--- a/src/lib/components/count.svelte
+++ b/src/lib/components/count.svelte
@ -1,11 +1,11 @@
 <script>
-	import { onMount } from 'svelte';
-	import anime from 'animejs';
+	import { onMount } from "svelte";
+	import anime from "animejs";

-	import '$lib/css/base.css';
-	import '$lib/css/count.css';
+	import "$lib/css/base.css";
+	import "$lib/css/count.css";

-	export let name = 'Articles';
+	export let name = "Articles";
 	export let num = 69;

 	let count_num = 0;
@ -14,12 +14,12 @@
 		anime({
 			targets: { count: 0 },
 			count: [0, num],
-            delay: 500,
+			delay: 500,
 			duration: 1500,
-			easing: 'easeOutQuint',
+			easing: "easeOutQuint",
 			update: function (anim) {
 				count_num = Math.floor(anim.animations[0].currentValue);
-			}
+			},
 		});
 	});
 </script>
--- a/src/lib/components/footer.svelte
+++ b/src/lib/components/footer.svelte
@ -1,12 +1,12 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/footer.css';
+	import "$lib/css/base.css";
+	import "$lib/css/footer.css";

-	import Page1 from '$lib/components/footer/page1.svelte';
-	import Page2 from '$lib/components/footer/page2.svelte';
-	import Page3 from '$lib/components/footer/page3.svelte';
-	import ButtonSlider from '$lib/components/button-slider.svelte';
-	import anime from 'animejs';
+	import Page1 from "$lib/components/footer/page1.svelte";
+	import Page2 from "$lib/components/footer/page2.svelte";
+	import Page3 from "$lib/components/footer/page3.svelte";
+	import ButtonSlider from "$lib/components/button-slider.svelte";
+	import anime from "animejs";

 	let active = 0;
 	let page = [Page1, Page2, Page3];
@ -14,7 +14,7 @@

 	function slideText(event) {
 		const id = event.detail.id;
-		const width = window.innerWidth/2;
+		const width = window.innerWidth / 2;
 		const animTranslate = active > id ? [width, -width] : [-width, width];

 		anime({
@ -22,7 +22,7 @@
 			translateX: animTranslate[0],
 			opacity: 0,
 			duration: 300,
-			easing: 'easeInQuad',
+			easing: "easeInQuad",
 			complete: function () {
 				active = id;
 				pageDiv.style.transform = `translateX(${animTranslate[1]}px)`;
@ -31,9 +31,9 @@
 					translateX: 0,
 					opacity: 1,
 					duration: 300,
-					easing: 'easeOutQuad'
+					easing: "easeOutQuad",
 				});
-			}
+			},
 		});
 	}
 </script>
@ -50,9 +50,14 @@
 		</div>
 	</div>
 	<div class="footer-slider align-center">
-		<span>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span>
+		<span
+			>{new Date().getFullYear()} • Tous droits réservés • Yohan Boujon</span
+		>
 		<div class="flex-end">
-			<ButtonSlider keys={['À propos', 'Notre Vision', 'Contacter']} on:click={slideText} />
+			<ButtonSlider
+				keys={["À propos", "Notre Vision", "Contacter"]}
+				on:click={slideText}
+			/>
 		</div>
 	</div>
 </div>
--- a/src/lib/components/footer/page1.svelte
+++ b/src/lib/components/footer/page1.svelte
@ -1,21 +1,24 @@
 <script>
-    import '$lib/css/footer/page.css';
+	import "$lib/css/footer/page.css";

-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from '@mdi/js';
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiFormatQuoteClose, mdiFormatQuoteOpen } from "@mdi/js";
 </script>

 <div class="page-icon-text">
 	<img alt="github" src="https://cdn.simpleicons.org/github/F8F1F1" />
-	<a target="_blank" href="https://github.com/yoboujon/etheryo-blog">Code source</a>
+	<a target="_blank" href="https://git.etheryo.fr/Etheryo/etheryo"
+		>Code source</a
+	>
 </div>
 <div class="page-icon-text">
-	<img alt="raspberrypi" src="https://cdn.simpleicons.org/raspberrypi/F8F1F1" />
-	<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi">Hébergé sur Raspberry Pi</a>
-</div>
-<div class="page-icon-text">
-	<img alt="crowcpp" src="https://crowcpp.org/master/assets/favicon.svg" />
-	<a target="_blank" href="https://github.com/CrowCpp/Crow">Réalisé avec CrowCpp</a>
+	<img
+		alt="raspberrypi"
+		src="https://cdn.simpleicons.org/raspberrypi/F8F1F1"
+	/>
+	<a target="_blank" href="https://fr.wikipedia.org/wiki/Raspberry_Pi"
+		>Hébergé sur Raspberry Pi</a
+	>
 </div>
 <div class="page-icon-text page-special">
 	<SvgIcon type="mdi" path={mdiFormatQuoteOpen} />
--- a/src/lib/components/footer/page2.svelte
+++ b/src/lib/components/footer/page2.svelte
@ -1,9 +1,9 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/footer/page.css';
+	import "$lib/css/base.css";
+	import "$lib/css/footer/page.css";

-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiEye } from '@mdi/js';
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiEye } from "@mdi/js";
 </script>

 <div class="page-icon-text">
@ -12,8 +12,9 @@
 </div>
 <div class="page-text">
 	<span class="page-overflow text-justify"
-		>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus ante, porttitor eget massa
-		sit amet, volutpat cursus mauris. Proin et massa dui. Vestibulum eu tempus nisl, vitae bibendum
-		urna. Sed tincidunt est non nulla scelerisque.
+		>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lectus
+		ante, porttitor eget massa sit amet, volutpat cursus mauris. Proin et
+		massa dui. Vestibulum eu tempus nisl, vitae bibendum urna. Sed tincidunt
+		est non nulla scelerisque.
 	</span>
 </div>
--- a/src/lib/components/footer/page3.svelte
+++ b/src/lib/components/footer/page3.svelte
@ -1,16 +1,16 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/footer/page.css';
+	import "$lib/css/base.css";
+	import "$lib/css/footer/page.css";

-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiEmailFast, mdiHelp } from '@mdi/js';
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiEmailFast, mdiHelp } from "@mdi/js";
 </script>

 <div class="page-icon-text">
 	<SvgIcon type="mdi" path={mdiEmailFast} />
-	<a href="mailto:blog@etheryo.fr">Envoyez nous un mail</a>
+	<a href="mailto:contact@etheryo.fr">Envoyez nous un mail</a>
 </div>
 <div class="page-icon-text">
 	<SvgIcon type="mdi" path={mdiHelp} />
 	<a href="https://duckduckgo.com/">Besoin d'aide</a>
-</div>
+</div>
--- a/src/lib/components/link.svelte
+++ b/src/lib/components/link.svelte
@ -1,40 +1,40 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/link.css';
-	import { hexTorgb, darkenHexTorgb } from '$lib/ts/color.ts';
+	import "$lib/css/base.css";
+	import "$lib/css/link.css";
+	import { hexTorgb, darkenHexTorgb } from "$lib/ts/color.ts";

-	import SvgIcon from '$lib/components/svg-icon-custom.svelte';
-	import { mdiChevronRight } from '@mdi/js';
-	import anime from 'animejs';
+	import SvgIcon from "$lib/components/svg-icon-custom.svelte";
+	import { mdiChevronRight } from "@mdi/js";
+	import anime from "animejs";

-	let color = '9A031E';
+	let color = "9A031E";
 	const color_rgb = hexTorgb(color);
 	const color_darken = darkenHexTorgb(color, 0.8);
-	let imgBase = 'placeholder_link.png';
-	let imgHover = 'placeholder_link_hover.png';
+	let imgBase = "placeholder_link.png";
+	let imgHover = "placeholder_link_hover.png";
 	let base;
 	let hover;

 	let span_link;
 	let svg_icon;
 	let div_background;
-	let span_width = '0%';
+	let span_width = "0%";

 	async function enter() {
-		span_width = '100%';
-		span_link.style.color = 'var(--color-background)';
-		svg_icon.svgElement.style.color = 'var(--color-background)';
-		svg_icon.svgElement.style.transform = 'translateX(8px)';
+		span_width = "100%";
+		span_link.style.color = "var(--color-background)";
+		svg_icon.svgElement.style.color = "var(--color-background)";
+		svg_icon.svgElement.style.transform = "translateX(8px)";
 		updatePicture(false, base);
 		updatePicture(true, hover);
 		updatePicture(true, div_background);
 	}

 	async function leave() {
-		span_width = '0%';
-		span_link.style.color = 'var(--color-text)';
-		svg_icon.svgElement.style.color = 'var(--color-text)';
-		svg_icon.svgElement.style.transform = '';
+		span_width = "0%";
+		span_link.style.color = "var(--color-text)";
+		svg_icon.svgElement.style.color = "var(--color-text)";
+		svg_icon.svgElement.style.transform = "";
 		updatePicture(true, base);
 		updatePicture(false, hover);
 		updatePicture(false, div_background);
@ -47,7 +47,7 @@
 			targets: img,
 			opacity: [1 - targetOpacity, targetOpacity],
 			duration: 400,
-			easing: 'easeInOutQuad'
+			easing: "easeInOutQuad",
 		});
 	}
 </script>
@ -60,14 +60,23 @@
 	role="button"
 	tabindex="0"
 >
-	<div class="link-background" bind:this={div_background}>
-	</div>
+	<div class="link-background" bind:this={div_background}></div>
 	<div class="link-content flex-row center">
 		<div class="link-img">
 			<img bind:this={base} alt="base" src={imgBase} />
-			<img bind:this={hover} alt="hover" class="link-img-hover" src={imgHover} />
+			<img
+				bind:this={hover}
+				alt="hover"
+				class="link-img-hover"
+				src={imgHover}
+			/>
 		</div>
 		<span bind:this={span_link}>Link</span>
-		<SvgIcon type="mdi" path={mdiChevronRight} size={80} bind:this={svg_icon}></SvgIcon>
+		<SvgIcon
+			type="mdi"
+			path={mdiChevronRight}
+			size={80}
+			bind:this={svg_icon}
+		></SvgIcon>
 	</div>
 </div>
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@ -103,9 +103,11 @@
 			<div>
 				<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
 			</div>
-			<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size="25" />
+			<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25 />
+		</div>
+		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''}>
+		</div>
+		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category}>
 		</div>
-		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
-		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
 	</div>
 </nav>
--- a/src/lib/components/post-min.svelte
+++ b/src/lib/components/post-min.svelte
@ -1,16 +1,16 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/pill.css';
-	import '$lib/css/post-min.css';
+	import "$lib/css/base.css";
+	import "$lib/css/pill.css";
+	import "$lib/css/post-min.css";

-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiCalendarRange } from '@mdi/js';
-	import anime from 'animejs';
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiCalendarRange } from "@mdi/js";
+	import anime from "animejs";

 	export let cover =
-		'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
-	export let title = 'Title';
-	export let date = '01/01/1997';
+		"https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg";
+	export let title = "Title";
+	export let date = "01/01/1997";

 	let post_div;
 	let title_h1;
@ -34,7 +34,7 @@
 			targets: div_back,
 			opacity: [1 - targetOpacity, targetOpacity],
 			duration: 400,
-			easing: 'easeInOutQuad'
+			easing: "easeInOutQuad",
 		});
 	}
 </script>
@ -48,11 +48,11 @@
 	}}
 	on:mouseenter={() => {
 		animateForeground(true, post_div);
-		title_h1.style.textDecoration = 'underline 2px';
+		title_h1.style.textDecoration = "underline 2px";
 	}}
 	on:mouseleave={() => {
 		animateForeground(false, post_div);
-		title_h1.style.textDecoration = '';
+		title_h1.style.textDecoration = "";
 	}}
 >
 	<div class="post-min">
@ -68,6 +68,6 @@
 			<span>{date}</span>
 		</div>
 	</div>
-	<div class="post-min-overlay-front" />
-	<div class="post-min-overlay-back" bind:this={post_div} />
+	<div class="post-min-overlay-front"></div>
+	<div class="post-min-overlay-back" bind:this={post_div}></div>
 </div>
--- a/src/lib/components/post.svelte
+++ b/src/lib/components/post.svelte
@ -1,18 +1,18 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/pill.css';
-	import '$lib/css/post.css';
-	import SvgIcon from '@jamescoyle/svelte-icon';
-	import { mdiCalendarRange } from '@mdi/js';
-	import anime from 'animejs';
+	import "$lib/css/base.css";
+	import "$lib/css/pill.css";
+	import "$lib/css/post.css";
+	import SvgIcon from "@jamescoyle/svelte-icon";
+	import { mdiCalendarRange } from "@mdi/js";
+	import anime from "animejs";

 	export let cover =
-		'https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg';
-	export let title = 'Title';
-	export let text = 'Little description.';
-	export let author = 'Author';
-	export let date = '01/01/1997';
-	export let profile = 'https://i.pravatar.cc/300';
+		"https://share.etheryo.fr/Rando-01.11.2023/Alix%20Mange%20Lac%20Rouge%20Bleu%20Orange%20Midi.jpg";
+	export let title = "Title";
+	export let text = "Little description.";
+	export let author = "Author";
+	export let date = "01/01/1997";
+	export let profile = "https://i.pravatar.cc/300";

 	let post_div;
 	let title_h1;
@ -36,7 +36,7 @@
 			targets: div_back,
 			opacity: [1 - targetOpacity, targetOpacity],
 			duration: 400,
-			easing: 'easeInOutQuad'
+			easing: "easeInOutQuad",
 		});
 	}
 </script>
@ -49,11 +49,11 @@
 	}}
 	on:mouseenter={() => {
 		animateForeground(true, post_div);
-		title_h1.style.textDecoration = 'underline 3px';
+		title_h1.style.textDecoration = "underline 3px";
 	}}
 	on:mouseleave={() => {
 		animateForeground(false, post_div);
-		title_h1.style.textDecoration = '';
+		title_h1.style.textDecoration = "";
 	}}
 >
 	<div class="post">
@ -75,11 +75,12 @@
 				</div>
 				<div class="pill pill-reversed flex-end">
 					<span>{date}</span>
-					<SvgIcon type="mdi" path={mdiCalendarRange} size="120"></SvgIcon>
+					<SvgIcon type="mdi" path={mdiCalendarRange} size="120"
+					></SvgIcon>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="post-overlay-front" />
-	<div class="post-overlay-back" bind:this={post_div} />
+	<div class="post-overlay-front"></div>
+	<div class="post-overlay-back" bind:this={post_div}></div>
 </div>
--- a/src/lib/components/search.svelte
+++ b/src/lib/components/search.svelte
@ -1,17 +1,17 @@
-<script>
-	import '$lib/css/base.css';
-	import '$lib/css/search.css';
+<script lang="js">
+	import "$lib/css/base.css";
+	import "$lib/css/search.css";

-	import SvgIcon from '$lib/components/svg-icon-custom.svelte';
-	import { mdiMagnify } from '@mdi/js';
-	import anime from 'animejs';
+	import SvgIcon from "$lib/components/svg-icon-custom.svelte";
+	import { mdiMagnify } from "@mdi/js";
+	import anime from "animejs";

-	export let width = '50%';
-	export let font_size = '1rem';
-	export let padding = '1rem';
+	export let width = "50%";
+	export let font_size = "1rem";
+	export let padding = "1rem";
 	export let logo_size = 20;
-	export let margin = '0rem';
-	export let text_color = 'var(--color-subtext)';
+	export let margin = "0rem";
+	export let text_color = "var(--color-subtext)";

 	let div_search;
 	let input_search;
@ -28,11 +28,13 @@
 		showSearch(true);

 		// Animating the div
-		const max = div_search.getBoundingClientRect().right - div_search.getBoundingClientRect().left;
+		const max =
+			div_search.getBoundingClientRect().right -
+			div_search.getBoundingClientRect().left;
 		anime({
 			targets: { position_var: 0 },
 			position_var: [0, max],
-			easing: 'linear',
+			easing: "linear",
 			duration: 300,
 			update: function (anim) {
 				div_search.style.background = `radial-gradient(circle farthest-corner at ${anim.animations[0].currentValue}px 0px, #958a98 0%, var(--color-background) 100%)`;
@ -42,18 +44,22 @@
 					targets: { percent_var: 0, opacity_var: 1 },
 					percent_var: [0, 100],
 					opacity_var: [1, 0],
-					easing: 'easeOutQuad',
+					easing: "easeOutQuad",
 					duration: 300,
 					update: function (anim) {
 						div_search.style.background = `radial-gradient(circle farthest-corner at 0px 0px, var(--color-background) ${anim.animations[0].currentValue}%, rgba(149,138,152,${anim.animations[1].currentValue}) 100%)`;
-					}
+					},
 				});
-			}
+			},
 		});
 	}

 	function closeSearch(event) {
-		if (selected && event.target != input_search && event.target != svgIcon.svgElement) {
+		if (
+			selected &&
+			event.target != input_search &&
+			event.target != svgIcon.svgElement
+		) {
 			showSearch(false);
 			selected = false;
 		}
@ -62,7 +68,7 @@
 	function showSearch(isEntering) {
 		//transform: ;
 		if (isEntering) {
-			search_box.style.display = 'block';
+			search_box.style.display = "block";
 		}

 		const ovalue = isEntering ? [0, 1] : [1, 0];
@ -70,16 +76,16 @@
 			targets: { opacity: 0 },
 			opacity: ovalue,
 			duration: 200,
-			easing: 'easeInOutQuad',
+			easing: "easeInOutQuad",
 			update: function (anim) {
 				search_box.style.opacity = `${anim.animations[0].currentValue}`;
 				search_box.style.transform = `translateX(-1rem) translateY(${anim.animations[0].currentValue}rem)`;
 			},
 			complete: function () {
 				if (!isEntering) {
-					search_box.style.display = 'none';
+					search_box.style.display = "none";
 				}
-			}
+			},
 		});
 	}
 </script>
--- a/src/lib/components/social.svelte
+++ b/src/lib/components/social.svelte
@ -1,53 +1,53 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/social.css';
+	import "$lib/css/base.css";
+	import "$lib/css/social.css";

-	import anime from 'animejs';
-	import SvgIcon from '@jamescoyle/svelte-icon';
+	import anime from "animejs";
+	import SvgIcon from "@jamescoyle/svelte-icon";

 	let social_list = [
 		{
-			pic: 'https://cdn.simpleicons.org/instagram',
-			color: 'E4405F',
-			alt: 'Instagram',
-			name: '@yo.boujon',
-			link: 'https://www.instagram.com/yoboujon/'
+			pic: "https://cdn.simpleicons.org/instagram",
+			color: "E4405F",
+			alt: "Instagram",
+			name: "@yo.boujon",
+			link: "https://www.instagram.com/yoboujon/",
 		},
 		{
-			pic: 'https://cdn.simpleicons.org/github',
-			color: '181717',
-			alt: 'Github',
-			name: 'yoboujon',
-			link: 'https://github.com/yoboujon'
+			pic: "https://cdn.simpleicons.org/github",
+			color: "181717",
+			alt: "Github",
+			name: "yoboujon",
+			link: "https://github.com/yoboujon",
 		},
 		{
-			pic: 'https://cdn.simpleicons.org/youtube',
-			color: 'FF0000',
-			alt: 'Youtube',
-			name: '@yoboujon',
-			link: 'https://www.youtube.com/@yoboujon'
+			pic: "https://cdn.simpleicons.org/youtube",
+			color: "FF0000",
+			alt: "Youtube",
+			name: "@yoboujon",
+			link: "https://www.youtube.com/@yoboujon",
 		},
 		{
-			pic: 'https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2',
-			color: '0A66C2',
-			alt: 'Linkedin',
-			name: 'Yohan Boujon',
-			link: 'https://www.linkedin.com/in/yohan-boujon-a08511202/'
+			pic: "https://img.icons8.com/?size=200&id=8808&format=png&color=0A66C2",
+			color: "0A66C2",
+			alt: "Linkedin",
+			name: "Yohan Boujon",
+			link: "https://www.linkedin.com/in/yohan-boujon-a08511202/",
 		},
 		{
-			icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
-			color: 'AD62AA',
-			alt: 'Etheryo',
-			name: 'Etheryo',
-			link: 'https://www.etheryo.fr'
+			icon: "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z",
+			color: "AD62AA",
+			alt: "Etheryo",
+			name: "Etheryo",
+			link: "https://www.etheryo.fr",
 		},
 		{
-			icon: 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z',
-			color: 'AD62AA',
-			alt: 'Saoul Bonmonsieur',
-			name: 'Saoul Bonmonsieur',
-			link: 'https://saoulbonmonsieur.etheryo.fr/'
-		}
+			icon: "M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z",
+			color: "AD62AA",
+			alt: "Saoul Bonmonsieur",
+			name: "Saoul Bonmonsieur",
+			link: "https://saoulbonmonsieur.etheryo.fr/",
+		},
 	];

 	let div_social;
@ -55,7 +55,7 @@
 		r: 15,
 		g: 11,
 		b: 17,
-		a: 0.1
+		a: 0.1,
 	};
 	let oldcolor = resetcolor;

@ -66,32 +66,37 @@
 				r: parseInt(color.substring(0, 2), 16),
 				g: parseInt(color.substring(2, 4), 16),
 				b: parseInt(color.substring(4, 6), 16),
-				a: 0.2
+				a: 0.2,
 			};
 		}

 		anime({
-			targets: { red: oldcolor.r, green: oldcolor.g, blue: oldcolor.b, alpha: oldcolor.a },
+			targets: {
+				red: oldcolor.r,
+				green: oldcolor.g,
+				blue: oldcolor.b,
+				alpha: oldcolor.a,
+			},
 			red: [oldcolor.r, newcolor.r],
 			green: [oldcolor.g, newcolor.g],
 			blue: [oldcolor.b, newcolor.b],
 			alpha: [oldcolor.a, newcolor.a],
 			duration: 500,
-			easing: 'easeInOutQuad',
+			easing: "easeInOutQuad",
 			update: function (anim) {
 				div_social.style.backgroundImage = `linear-gradient(180deg, rgba(248, 241, 241, 1) 0%, rgba(${anim.animations[0].currentValue},${anim.animations[1].currentValue},${anim.animations[2].currentValue},${anim.animations[3].currentValue}) 100%)`;
 				oldcolor = {
 					r: anim.animations[0].currentValue,
 					g: anim.animations[1].currentValue,
 					b: anim.animations[2].currentValue,
-					a: anim.animations[3].currentValue
+					a: anim.animations[3].currentValue,
 				};
-			}
+			},
 		});
 	}

 	function openWindow(url) {
-		window.open(url, '_blank');
+		window.open(url, "_blank");
 	}
 </script>

--- a/src/lib/components/svg-icon-custom.svelte
+++ b/src/lib/components/svg-icon-custom.svelte
@ -4,23 +4,23 @@
 	const types = {
 		mdi: {
 			size: 24,
-			viewbox: '0 0 24 24'
+			viewbox: "0 0 24 24",
 		},
-		'simple-icons': {
+		"simple-icons": {
 			size: 24,
-			viewbox: '0 0 24 24'
+			viewbox: "0 0 24 24",
 		},
 		default: {
 			size: 0,
-			viewbox: '0 0 0 0'
-		}
+			viewbox: "0 0 0 0",
+		},
 	};

 	export let type = null;
 	export let path;
 	export let size = null;
 	export let viewbox = null;
-	export let flip = 'none';
+	export let flip = "none";
 	export let rotate = 0;
 	export let padding = 0;

@ -28,9 +28,9 @@
 	$: defaults = types[type] || types.default;
 	$: sizeValue = size || defaults.size;
 	$: viewboxValue = viewbox || defaults.viewbox;
-	$: sx = ['both', 'horizontal'].includes(flip) ? '-1' : '1';
-	$: sy = ['both', 'vertical'].includes(flip) ? '-1' : '1';
-	$: r = isNaN(rotate) ? rotate : rotate + 'deg';
+	$: sx = ["both", "horizontal"].includes(flip) ? "-1" : "1";
+	$: sy = ["both", "vertical"].includes(flip) ? "-1" : "1";
+	$: r = isNaN(rotate) ? rotate : rotate + "deg";

 	export let svgElement; // To expose the reference
 </script>
@ -38,7 +38,7 @@
 <svg
 	bind:this={svgElement}
 	width={sizeValue}
-	height=auto
+	height="auto"
 	viewBox={viewboxValue}
 	style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px"
 	{...$$restProps}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,15 +1,18 @@
 <script>
-	import '$lib/css/base.css';
-	import '$lib/css/main.css';
-	import Link from '$lib/components/link.svelte';
+	import "$lib/css/base.css";
+	import "$lib/css/main.css";
+	import Link from "$lib/components/link.svelte";

-	let img = 'placeholder.png';
+	let img = "placeholder.png";
 </script>

 <div class="main-banner">
-	<div class="main-banner-gradient" />
+	<div class="main-banner-gradient"></div>
 	<div class="main-banner-content">
-		<div class="flex-row center" style="padding-top: 15rem;padding-bottom: 15rem;">
+		<div
+			class="flex-row center"
+			style="padding-top: 15rem;padding-bottom: 15rem;"
+		>
 			<h1>Welcome to Etheryo</h1>
 		</div>
 	</div>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,7 +2,7 @@
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"allowJs": true,
-		"checkJs": true,
+		"checkJs": false,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"resolveJsonModule": true,