From ab61a720f382cd56a1242fdae57f4334332f0001 Mon Sep 17 00:00:00 2001
From: matthieu42morin <matthieu.bernard.morin@gmail.com>
Date: Wed, 31 Jan 2024 22:50:29 +0100
Subject: [PATCH] Footer, SocialCloud and copyright + responsivity TODO: add
 legal docs

---
 src/lib/components/Logo.svelte             |  0
 src/lib/components/MainFooter.svelte       | 25 +++---
 src/lib/components/SocialsCloud.svelte     | 89 +++++++++++++++++-----
 src/lib/components/logos/GiteaLogo.svelte  | 16 ++++
 src/lib/components/logos/MatrixLogo.svelte | 17 +++++
 5 files changed, 114 insertions(+), 33 deletions(-)
 delete mode 100644 src/lib/components/Logo.svelte
 create mode 100644 src/lib/components/logos/GiteaLogo.svelte
 create mode 100644 src/lib/components/logos/MatrixLogo.svelte

diff --git a/src/lib/components/Logo.svelte b/src/lib/components/Logo.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/MainFooter.svelte b/src/lib/components/MainFooter.svelte
index c552f64..ace9df8 100644
--- a/src/lib/components/MainFooter.svelte
+++ b/src/lib/components/MainFooter.svelte
@@ -1,26 +1,21 @@
 <script lang="ts">
+	import GiteaLogo from './logos/GiteaLogo.svelte';
 	import SocialsCloud from './SocialsCloud.svelte';
-	// Social Icons
-	const socialLinks = [
-		{ title: 'GitHub', href: 'https://github.com/skeletonlabs/skeleton', icon: 'fa-github' },
-		{ title: 'Discord', href: 'https://discord.gg/EXqV7W8MtY', icon: 'fa-discord' },
-		{ title: 'X (Twitter)', href: 'https://x.com/SkeletonUI', icon: 'fa-x-twitter' },
-		{ title: 'YouTube', href: 'https://www.youtube.com/@skeletonlabs', icon: 'fa-youtube' }
-	];
+
+	const year = new Date().getFullYear();
 </script>
 
 <footer
 	class="page-footer bg-surface-50 dark:bg-surface-900 border-t border-surface-500/10 text-xs mt-4 md:text-base"
 >
-	<div
-		class="w-full max-w-7xl mx-auto p-4 py-8 md:py-12 space-y-10 flex items-center justify-center"
-	>
+	<SocialsCloud />
+	<hr class="opacity-20" />
+	<div class="w-full max-w-7xl mx-auto p-4 md:py-8 flex items-center justify-center">
 		<!-- <div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col"> -->
-		<a class="flex items-center md:justify-start justify-center" href="/">
-			<img class="w-4 h-4 md:w-8 md:h-8" src="/images/Logo.png" alt="logo" />
-			<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4">© 2023 Matthieu Morin</p>
+		<a class="items-center md:justify-start justify-center" href="/">
+			<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4">
+				© {year} Matthieu Morin
+			</p>
 		</a>
 	</div>
-	<hr class="opacity-20" />
-	<SocialsCloud />
 </footer>
diff --git a/src/lib/components/SocialsCloud.svelte b/src/lib/components/SocialsCloud.svelte
index e35d681..de2f37c 100644
--- a/src/lib/components/SocialsCloud.svelte
+++ b/src/lib/components/SocialsCloud.svelte
@@ -1,15 +1,43 @@
 <script lang="ts">
-	//Current Dark/Light Mode
-	import { modeCurrent } from '@skeletonlabs/skeleton';
-	console.log(modeCurrent);
-	let iconGitHub: string;
+	import MatrixLogo from './logos/MatrixLogo.svelte';
 
-	$: {
-		iconGitHub = $modeCurrent ? '/logos/GitHub_Logo.png' : '/logos/GitHub_Logo_White.png';
-	}
+	import GiteaLogo from './logos/GiteaLogo.svelte';
+	// Social Icons
+	const socialLinks = [
+		{
+			title: 'LinkedIn',
+			href: 'https://www.linkedin.com/in/matthieu-morin-7524731a9/',
+			icon: 'fa-brands fa-linkedin'
+		},
+		{ title: 'Matrix', href: '', icon: './MatrixLogo' },
+		{ title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
+		{ title: 'X (Twitter)', href: 'https://x.com/SkeletonUI', icon: 'fa-brands fa-x-twitter' },
+		{ title: 'RSS', href: '/blog/feed', icon: 'fa-regular fa-square-rss' }
+	];
 </script>
 
-<div class="flex sm:flex-row flex-col LogoCloud grid-cols-1 lg:!grid-cols-2 gap-1 max-h-[128px]">
+<div class="grid grid-cols-5 gap-1 max-h-[128px]">
+	{#each socialLinks as link}
+		<a
+			class="logo-item"
+			href={link.href}
+			target="_blank"
+			rel="noreferrer"
+			aria-label={link.title}
+		>
+			{#if link.icon === './GiteaLogo'}
+				<GiteaLogo />
+			{:else if link.icon === './MatrixLogo'}
+				<MatrixLogo />
+			{:else}
+				<i class={link.icon + ' text-3xl md:text-6xl'} />
+			{/if}
+		</a>
+	{/each}
+	<!-- <div class="col-span-2 lg:col-span-1 p-4">
+
+	</div>
+	
 	<a
 		class="logo-item"
 		href="https://www.linkedin.com/in/matthieu-morin-7524731a9/"
@@ -18,15 +46,40 @@
 	>
 		<img class="max-h-[64px]" src="/logos/LI-Logo.png" alt="Matt's LinkedIn Acount" />
 	</a>
-	<a class="logo-item" href="https://github.com/matthieu42morin" target="_blank" rel="noreferrer">
-		<img class="max-h-[64px]" src={iconGitHub} alt="Github account" />
+	<a
+		class="logo-item"
+		href="https://git.mattmor.in"
+		target="_blank"
+		rel="noreferrer"
+		aria-label="My personal Git instance"
+	>
+		<GiteaLogo />
+		<p class="text-base md:text-xl text-token">My selfhosted Gitea</p>
 	</a>
+
+	<div
+		class="flex sm:flex-row flex-col LogoCloud grid-cols-3 md:grid-cols-3 lg:grid-cols-auto gap-1 max-h-[128px]"
+	>
+		<a
+			class="logo-item"
+			href="https://git.mattmor.in"
+			target="_blank"
+			rel="noreferrer"
+			aria-label="My personal Git instance"
+		>
+			<i class="fa-brands fa-x-twitter text-6xl" />
+		</a>
+		<a
+			class="logo-item"
+			href="https://git.mattmor.in"
+			target="_blank"
+			rel="noreferrer"
+			aria-label="My matrix"
+		>
+			<MatrixLogo />
+		</a>
+		<a class="logo-item" href="/blog/feed" target="_blank" rel="noreferrer" aria-label="Feed">
+			<i class="fa-solid  text-6xl" />
+		</a>
+	</div> -->
 </div>
-
-<style>
-	.LogoCloud {
-		display: grid;
-
-		border-radius: var(--theme-rounded-container);
-	}
-</style>
diff --git a/src/lib/components/logos/GiteaLogo.svelte b/src/lib/components/logos/GiteaLogo.svelte
new file mode 100644
index 0000000..b5e5204
--- /dev/null
+++ b/src/lib/components/logos/GiteaLogo.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	let clazz = 'w-12 md:w-16';
+</script>
+
+<svg class={clazz} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"
+	><path
+		d="M395.9 484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12z"
+		fill="#fff"
+	/><g fill="#609926"
+		><path
+			d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6zM125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1zm300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1z"
+		/><path
+			d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8-1.9 8 2 16.3 9.1 20 7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3 7.8 4 17.4 1.7 22.5-5.3 5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8l-24.6 50.4z"
+		/></g
+	></svg
+>
diff --git a/src/lib/components/logos/MatrixLogo.svelte b/src/lib/components/logos/MatrixLogo.svelte
new file mode 100644
index 0000000..055df20
--- /dev/null
+++ b/src/lib/components/logos/MatrixLogo.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { modeCurrent } from '@skeletonlabs/skeleton';
+	let clazz = 'w-6 md:w-16';
+	let fillStyle = 'fill: #000000';
+	$: {
+		fillStyle = $modeCurrent ? 'fill: #000000' : 'fill: #ffffff';
+	}
+</script>
+
+<svg class={clazz} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+	<path style={fillStyle} d="M 30,2.0000001 V 30 h -1 -2 v 2 h 5 V -3.3333334e-8 L 27,0 v 2 z" />
+	<path
+		style={fillStyle}
+		d="M 9.9515939,10.594002 V 12.138 h 0.043994 c 0.3845141,-0.563728 0.8932271,-1.031728 1.4869981,-1.368 0.580003,-0.322998 1.244999,-0.485 1.993002,-0.485 0.72,0 1.376999,0.139993 1.971998,0.42 0.595,0.279004 1.047001,0.771001 1.355002,1.477001 0.338003,-0.500001 0.795999,-0.941 1.376999,-1.323001 0.579999,-0.382998 1.265998,-0.574 2.059998,-0.574 0.602003,0 1.160002,0.074 1.674002,0.220006 0.514,0.148006 0.953998,0.382998 1.321999,0.706998 0.36601,0.322999 0.653001,0.746 0.859,1.268002 0.205001,0.521998 0.307994,1.15 0.307994,1.887001 v 7.632997 h -3.127 v -6.463997 c 0,-0.383002 -0.01512,-0.743002 -0.04399,-1.082003 -0.02079,-0.3072 -0.103219,-0.607113 -0.242003,-0.881998 -0.133153,-0.25081 -0.335962,-0.457777 -0.584001,-0.596002 -0.257008,-0.146003 -0.605998,-0.220006 -1.046997,-0.220006 -0.440002,0 -0.796003,0.085 -1.068,0.253002 -0.272013,0.170003 -0.485001,0.390002 -0.639001,0.662003 -0.159119,0.287282 -0.263585,0.601602 -0.307994,0.926997 -0.05197,0.346923 -0.07801,0.697217 -0.07801,1.048002 v 6.353999 h -3.128005 v -6.398 c 0,-0.338003 -0.0072,-0.673001 -0.02116,-1.004001 -0.01134,-0.313663 -0.07487,-0.623229 -0.187994,-0.915999 -0.107943,-0.276623 -0.300435,-0.512126 -0.550001,-0.673001 -0.25799,-0.168 -0.636,-0.253002 -1.134999,-0.253002 -0.198123,0.0083 -0.394383,0.04195 -0.584002,0.100006 -0.258368,0.07446 -0.498455,0.201827 -0.704999,0.373985 -0.227981,0.183987 -0.421999,0.449 -0.583997,0.794003 -0.161008,0.345978 -0.242003,0.797998 -0.242003,1.356998 v 6.618999 H 6.99942 V 10.590001 Z"
+	/>
+	<path style={fillStyle} d="M 2,2.0000001 V 30 h 3 v 2 H 0 V 9.2650922e-8 L 5,0 v 2 z" />
+</svg>