Project Refactoring and some Cleanup (#1)

Reviewed-on: https://gitpot.dev/sangelo/website/pulls/1

src/lib/components/About.svelte

@@ -1,30 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { smoothScrollTo, handleKeydown } from '$lib/index';
-
-    function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
-
-	function openWebsite(url: string) {
-		goto(url);
-	}
 </script>
 
 <div id="about" class="section">
@@ -38,7 +13,7 @@
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             tabindex="0"
-            on:click={redirectToHome}
+            on:click={() => smoothScrollTo('home')}
             on:keydown={handleKeydown}
         >
             <mask
@@ -79,5 +54,5 @@
 </div>
 
 <style lang="scss">
-    @import '../styles/about.scss';
+    @import '$styles/about.scss';
 </style>

src/lib/components/Home.svelte

@@ -1,32 +1,6 @@
 <script lang='ts'>
-    import { goto } from '$app/navigation';
-
     import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
-
+    import { smoothScrollTo, handleKeydown } from '$lib/index';
-    function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
-
-	function openWebsite(url: string) {
-		goto(url);
-	}
 </script>
 
 <div id="home" class="section">
@@ -80,6 +54,6 @@
 </div>
 
 <style lang="scss">
-    @import '../styles/index.scss';
+    @import '$styles/index.scss';
-	@import '../styles/home.scss';
+	@import '$styles/home.scss';
 </style>

src/lib/components/Projects.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import Modal from './Modal.svelte';
-	import DashinitModal from './modals/dashinit.svelte';
-	import SangeFaultModal from './modals/sangefault.svelte';
-	import ExploreCraftModal from './modals/explorecraft.svelte';
-	import UtilityClientModal from './modals/utilityclient.svelte';
-	import SangeloSpaceModal from './modals/sangelospace.svelte';
-	import LunivityModal from './modals/lunivity.svelte';
-	import MoreProjectsModal from './modals/more.svelte';
-	// import type { SvelteComponent } from 'svelte';
 
+	import { smoothScrollTo, handleKeydown } from '$lib/index';
+	
+	// Modal
+	import Modal from '$lib/components/Modal.svelte';
+	import DashinitModal from '$lib/modals/dashinit.svelte';
+	import SangeFaultModal from '$lib/modals/sangefault.svelte';
+	import ExploreCraftModal from '$lib/modals/explorecraft.svelte';
+	import UtilityClientModal from '$lib/modals/utilityclient.svelte';
+	import SangeloSpaceModal from '$lib/modals/sangelospace.svelte';
+	import LunivityModal from '$lib/modals/lunivity.svelte';
+	import MoreProjectsModal from '$lib/modals/more.svelte';
+	
 	let showModal = false;
 	let selectedModule: any = null;
 
@@ -22,27 +24,6 @@
 		showModal = false;
 	}
 
-
-	function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydown(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
 </script>
 
 <div id="projects" class="section">
@@ -56,7 +37,7 @@
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 			tabindex="0"
-			on:click={redirectToHome}
+			on:click={() => smoothScrollTo('home')}
 			on:keydown={handleKeydown}
 		>
 			<mask
@@ -119,5 +100,5 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/projects.scss';
+	@import '$styles/projects.scss';
 </style>

src/lib/components/Socials.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+    import { onMount } from 'svelte';
-	import { goto } from '$app/navigation';
 	import { slide } from 'svelte/transition';
+	import { smoothScrollTo, handleKeydown, openWebsite } from '$lib/index';
+	import { emojis } from '$lib/emojis';
 
 	// Icons
 	import IconDiscord from 'svelte-material-icons/Discord.svelte';
@@ -14,93 +15,27 @@
 	import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
 	import IconSteam from 'svelte-material-icons/Steam.svelte';
 
-	// Initialisations
-
 	let showMore = false;
-
-	const emojis = [
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ❤️',
-		'with ☕️',
-		'with 🍵',
-		'with 🍪',
-		'with 💤',
-		'on a 💻',
-		'in 🏫',
-		'at 🏠',
-		'with passion',
-		'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
-		'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
-		'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
-	];
-
 	let emoji = '';
 
-	// Functions
+	export function changeEmoji() {
-
-	function changeEmoji() {
 		emoji = emojis[Math.floor(Math.random() * emojis.length)];
 	}
 
-	function toggleShowMore() {
+	export function toggleShowMore() {
 		showMore = !showMore;
 	}
 
-	onMount(() => {
+	export function handleKeydownToggleMore(event: KeyboardEvent) {
-		changeEmoji();
-	});
-
-	function smoothScrollTo(elementId: string) {
-		const element = document.getElementById(elementId);
-		if (element) {
-			element.scrollIntoView({
-				behavior: 'smooth'
-			});
-		}
-	}
-
-	function redirectToHome() {
-		// goto('/');
-		smoothScrollTo('home');
-	}
-
-	function handleKeydownHome(event: KeyboardEvent) {
-		// Trigger redirection on Enter key or Space bar
-		if (event.key === 'Enter' || event.key === ' ') {
-			redirectToHome();
-		}
-	}
-
-	function handleKeydownToggleMore(event: KeyboardEvent) {
 		// Trigger redirection on Enter key or Space bar
 		if (event.key === 'Enter' || event.key === ' ') {
 			toggleShowMore();
 		}
 	}
 
-	function openWebsite(url: string) {
+	onMount(() => {
-		goto(url);
+        changeEmoji();
-	}
+    });
 </script>
 
 <div id="socials" class="section">
@@ -299,8 +234,8 @@
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"
 			tabindex="0"
-			on:click={redirectToHome}
+			on:click={() => smoothScrollTo('home')}
-			on:keydown={handleKeydownHome}
+			on:keydown={handleKeydown}
 		>
 			<mask
 				id="mask0_1404_2"
@@ -336,5 +271,5 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/socials.scss';
+	@import '$styles/socials.scss';
 </style>

src/lib/emojis.ts

@@ -0,0 +1,37 @@
+// Initialisations
+
+export const emojis = [
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ❤️',
+    'with ☕️',
+    'with 🍵',
+    'with 🍪',
+    'with 💤',
+    'on a 💻',
+    'in 🏫',
+    'at 🏠',
+    'with passion',
+    'with <img src="/assets/emojis/vscodium.png" alt="VSCodium" style="height: 18px;"/>',
+    'with <img src="/assets/emojis/stackoverflow.png" alt="StackOverflow" style="height: 18px;"/>',
+    'with <img src="/assets/emojis/svelte.png" alt="Svelte" style="height: 18px;" />'
+];

src/lib/index.ts

@@ -1 +1,28 @@
-// place files you want to import through the `$lib` alias in this folder.
+// index.ts
+
+import { goto } from '$app/navigation';
+
+export function smoothScrollTo(elementId: string) {
+    const element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({
+            behavior: 'smooth'
+        });
+    }
+}
+
+// export function redirectToHome() {
+//     // goto('/');
+//     smoothScrollTo('home');
+// }
+
+export function handleKeydown(event: KeyboardEvent) {
+    // Trigger redirection on Enter key or Space bar
+    if (event.key === 'Enter' || event.key === ' ') {
+        smoothScrollTo('home');
+    }
+}
+
+export function openWebsite(url: string) {
+    goto(url);
+}

src/lib/modals/dashinit.svelte

@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>

src/lib/modals/explorecraft.svelte

@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>

src/lib/modals/lunivity.svelte

@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>

src/lib/modals/more.svelte

@@ -1,11 +1,5 @@
 <script lang="ts">
-	import Modal from '../Modal.svelte';
+	
-	import DashinitModal from './dashinit.svelte';
-	import SangeFaultModal from './sangefault.svelte';
-	import ExploreCraftModal from './explorecraft.svelte';
-	import UtilityClientModal from './utilityclient.svelte';
-	import SangeloSpaceModal from './sangelospace.svelte'
-
 	import IconCobweb from 'svelte-material-icons/SpiderWeb.svelte';
 	import IconArchive from 'svelte-material-icons/ArchiveOutline.svelte';
 
@@ -132,7 +126,7 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
-	@import '../../styles/modal-more.scss';
+	@import '$styles/modal-more.scss';
 </style>

src/lib/modals/sangefault.svelte

@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>

src/lib/modals/sangelospace.svelte

@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>

src/lib/modals/utilityclient.svelte

@@ -37,6 +37,6 @@
 </content>
 
 <style lang="scss">
-	@import '../../styles/modal.scss';
+	@import '$styles/modal.scss';
-	@import '../../styles/mobile/modal-mobile.scss';
+	@import '$styles/mobile/modal-mobile.scss';
 </style>

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script>
 	import '../app.scss';
-	import Navbar from './Navbar.svelte';
+	import Navbar from '$lib/components/Navbar.svelte';
 
 	import { fly } from 'svelte/transition';
 	export let data;

src/routes/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 
-	import Home from './Home.svelte';
+	import Home from '$lib/components/Home.svelte';
-	import About from './About.svelte';
+	import About from '$lib/components/About.svelte';
-	import Projects from './Projects.svelte';
+	import Projects from '$lib/components/Projects.svelte';
-	import Socials from './Socials.svelte';
+	import Socials from '$lib/components/Socials.svelte';
 
 </script>
 
@@ -15,5 +15,5 @@
 </div>
 
 <style lang="scss">
-	@import '../styles/index.scss';
+	@import '$styles/index.scss';
 </style>

svelte.config.js

@@ -8,6 +8,13 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [vitePreprocess({})],
 
+	onwarn: (warning, handler) => {
+        if (warning.code === 'css-unused-selector') {
+            return;
+        }
+        handler(warning);
+    },
+
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
@@ -20,7 +27,13 @@ const config = {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+		
+		alias: {
+			$routes: "src/routes",
+			$components: "src/components",
+			$styles: "src/styles"
+		},
 	}
 };