Obfuscated mail and socials

src/lib/components/ObfuscatedEmail.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import socials from '$lib/socialsObjects';
+	export let mail: string = socials[0].href;
+	export let clazz: string = '';
+	export let iconClazz: string = '';
+	export let h: number = 16;
+	export let w: number = 16;
+</script>
+
+<div class={` ${clazz}`}>
+	<svg xmlns="http://www.w3.org/2000/svg" lang="en-GB" aria-labelledby="title">
+		<title id="title">Send me a mail!</title>
+
+		<defs />
+
+		<a href="mailto:{mail}" target="" rel="noreferrer" aria-label="Send me a mail!">
+			<rect class="fill-current text-transparent" width="100%" height="100%" />
+
+			<foreignObject x="0" y="0" width="100%" height="100%">
+				<div class="email-icon-wrapper">
+					<i class={`${iconClazz} `} />
+				</div>
+			</foreignObject>
+		</a>
+	</svg>
+</div>
+
+<style lang="postcss">
+	.email-icon-wrapper {
+		@apply flex items-center justify-center w-full h-full;
+	}
+</style>

src/lib/components/SocialsCloud.svelte

@@ -1,25 +1,36 @@
 <script lang="ts">
-	import MatrixLogo from './logos/MatrixLogo.svelte';
+	import MatrixLogo from '$lib/components/logos/MatrixLogo.svelte';
-	import GiteaLogo from './logos/GiteaLogo.svelte';
+	import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
-	import { socialLinks } from '$lib/config';
+	import socials from '$lib/socialsObjects';
+	import ObfuscatedEmail from '$lib/components/ObfuscatedEmail.svelte';
 </script>
 
 <div class="flex flex-rows-auto gap-1 max-h-28">
-	{#each socialLinks as link}
+	{#each socials as link}
-		<a
+		{#if link.title === 'Email'}
-			class="logo-item"
+			<ObfuscatedEmail
-			href={link.href}
+				mail={socials[0].href}
-			target="_blank"
+				clazz="logo-item w-[43px]"
-			rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
+				h={48}
-			aria-label={link.title}
+				w={48}
-		>
+				iconClazz={socials[0].icon + ' text-3xl md:text-5xl'}
-			{#if link.title === 'Gitea'}
+			/>
-				<GiteaLogo />
+		{:else}
-			{:else if link.title === 'Matrix'}
+			<a
-				<MatrixLogo />
+				class="logo-item"
-			{:else}
+				href={link.title === 'Email' ? `mailto:${link.href}` : link.href}
-				<i class={link.icon + ' text-3xl md:text-5xl'} />
+				target="_blank"
-			{/if}
+				rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
-		</a>
+				aria-label={link.title}
+			>
+				{#if link.title === 'Gitea'}
+					<GiteaLogo />
+				{:else if link.title === 'Matrix'}
+					<MatrixLogo />
+				{:else}
+					<i class={link.icon + ' text-3xl md:text-5xl'} />
+				{/if}
+			</a>
+		{/if}
 	{/each}
 </div>

src/lib/components/home/QuickLinks.svelte

@@ -1,28 +1,27 @@
 <script lang="ts">
-	import * as conf from '$lib/config';
+	import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
-    import GiteaLogo from '$lib/components/logos/GiteaLogo.svelte';
+	import socials from '$lib/socialsObjects';
+	import ObfuscatedEmail from '../ObfuscatedEmail.svelte';
 </script>
+
 <div class="flex space-x-4">
-    <a
+	<a
-        class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
+		class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
-        href={conf.socialLinks[2].href}
+		href={socials[3].href}
-        target="_blank"
+		target="_blank"
-        rel="noreferrer"
+		rel="noreferrer"
-        title="Gitea - private github"
+		title="Gitea - private github"
-        ><GiteaLogo clazz="w-6" />
+		><GiteaLogo clazz="w-6" />
-    </a><a
+	</a><a
-        class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
+		class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
-        href={conf.socialLinks[0].href}
+		href={socials[1].href}
-        target="_blank"
+		target="_blank"
-        rel="noreferrer"
+		rel="noreferrer"
-        title="LinkedIn"
+		title={socials[1].title}
-        ><i class="fa-brands fa-linkedin" />
+		><i class={socials[1].icon} />
-    </a><a
+	</a><ObfuscatedEmail
-        class="btn btn-icon variant-soft-primary hover:variant-filled-primary"
+		mail={socials[0].href}
-        href="mailto:{conf.email}"
+		clazz="btn btn-icon variant-soft-primary hover:variant-filled-primary h-[43px]"
-        target=""
+		iconClazz={socials[0].icon}
-        rel="noreferrer"
+	/>
-        title="Email"
-        ><i class="fa-solid fa-envelope" />
-    </a>
 </div>

src/lib/config.ts

@@ -1,30 +1,51 @@
 import { dev } from '$app/environment';
 
-export const title = "Matt's Portfolio";
+/* Website config */
-export const description =
+const siteTitle = 'The portfolio and blog of Matt Morin, projects, thoughts and ideas.';
+const siteShortTitle = "Matt's Portfolio";
+const description =
 	'I code, I think, I write. My thoughts go into the world of Free & Open Source Software, AI and philosophy of mind, Climate Change, Cybersecurity.';
-export const url = dev ? 'http://localhost:5174' : 'https://mattmor.in';
+const siteUrl = dev ? 'http://localhost:5174' : 'https://mattmor.in';
-export const author = 'Matt Morin';
+const author = 'Matt Morin';
-export const backgroundColor = '#111827';
+const backgroundColor = '#111827';
-export const themeColor = '#3b82f6';
+const themeColor = '#3b82f6';
-export const logo = '/Logo.png';
+const logo = '/Logo.png';
-export const keywords = 'Dev, FOSS, Nix, Philosopher, DevOps, Climate';
+const keywords = 'Dev, FOSS, Nix, Philosopher, DevOps, Climate';
-export const ogLanguage = 'en_US';
+const ogLanguage = 'en_US';
-export const siteLanguage = 'en-US';
+const siteLanguage = 'en-US';
+const defaultOgImage = '';
+const defaultOgSquareImage = '';
+const defaultTwitterImage = '';
 
 // prettier-ignore
-export const socialLinks = [
+const website = { siteTitle, siteShortTitle, description, siteUrl, author, backgroundColor, themeColor, logo, keywords, ogLanguage, siteLanguage, defaultOgImage, defaultOgSquareImage, defaultTwitterImage };
-    { title: 'LinkedIn', href: 'https://linkedin.com/in/mattmor-in', icon: 'fa-brands fa-linkedin'},
+
-    { title: 'Matrix', href: '', icon: './MatrixLogo' },
+/* Social Nicknames */
-    { title: 'Gitea', href: 'https://git.mattmor.in', icon: './GiteaLogo' },
+const GHNick = 'matthieu42morin';
-    { title: 'Mastodon', href: 'https://mastodon.social/@matt_mor', icon: 'fa-brands fa-mastodon'},
+const LINick = 'mattmor-in';
-    { title: 'RSS feed', href: '/blog/feed', icon: 'fa-regular fa-square-rss' },
+const MatrixServer = '';
-    { title: 'email', href: 'matt.b.morin@protonmail.com', icon: 'fa-regular mail'}
+const MatrixNick = '';
-];
+const MastodonServer = 'mastodon.social';
+const MastodonNick = '@matt_mor';
+
+const socialNicks = { GHNick, LINick, MatrixNick, MastodonNick };
+
+/* Social links */
+const Email = 'matt.b.morin@protonmail.com';
+const Github = `https://github.com/${GHNick}`;
+const LinkedIn = `https://linkedin.com/in/${LINick}`;
+const Matrix = `https://${MatrixServer}/${MatrixNick}`;
+const Gitea = 'https://git.mattmor.in';
+const Mastodon = `https://${MastodonServer}/${MastodonNick}`;
+const RSS = '/blog/feed';
+
+const socialLinks = { Email, Github, LinkedIn, Matrix, Gitea, Mastodon, RSS };
 
 // Routes
-export const NavRoutes = [
+const NavRoutes = [
 	{ title: 'Home', href: '/' },
 	{ title: 'Blog', href: '/blog' },
 	{ title: 'Projects', href: '/projects' }
 ];
+
+export { website, socialNicks, socialLinks, NavRoutes };

src/lib/constants.ts

@@ -0,0 +1,9 @@
+export const cookies = {
+	NECESSARY: 'mattmor-necessary',
+	ANALYTICAL: 'mattmor-analytical',
+	TARGETING: 'mattmor-targeting',
+	VISITED: 'mattmor-marketing-website-visited'
+};
+export const COPYRIGHT_ENTITY = '\u00a9'; // (c)
+export const H_ELLIPSIS_ENTITY = '\u2026'; // ...
+export const VERTICAL_LINE_ENTITY = '\u007c'; // |

src/lib/socialsObjects.ts

@@ -0,0 +1,12 @@
+import { socialLinks } from './config';
+
+const socials = [
+	{ title: 'Email', href: socialLinks.Email, icon: 'fa-solid fa-envelope' },
+	{ title: 'LinkedIn', href: socialLinks.LinkedIn, icon: 'fa-brands fa-linkedin' },
+	{ title: 'Matrix', href: socialLinks.Matrix, icon: 'MatrixLogo' },
+	{ title: 'Gitea', href: socialLinks.Gitea, icon: 'GiteaLogo' },
+	{ title: 'Mastodon', href: socialLinks.Mastodon, icon: 'fa-brands fa-mastodon' },
+	{ title: 'RSS feed', href: socialLinks.RSS, icon: 'fa-solid fa-square-rss' }
+];
+
+export default socials;