From 7813a2a6c54526e501ccb7f62046191bbe1514a3 Mon Sep 17 00:00:00 2001 From: matthieu42morin Date: Mon, 12 Feb 2024 19:53:37 +0100 Subject: [PATCH] Header, Socials update, some nice touches --- src/app.html | 5 +- src/lib/components/MainDrawer.svelte | 37 +++++++ src/lib/components/MainHeader.svelte | 120 ++++++++++++++------- src/lib/components/SocialsCloud.svelte | 72 ++----------- src/lib/components/logos/GiteaLogo.svelte | 2 +- src/lib/components/logos/MatrixLogo.svelte | 2 +- src/lib/config.ts | 21 +++- src/routes/+layout.svelte | 54 ++++++++-- 8 files changed, 195 insertions(+), 118 deletions(-) create mode 100644 src/lib/components/MainDrawer.svelte diff --git a/src/app.html b/src/app.html index b0a643d..7d6784c 100644 --- a/src/app.html +++ b/src/app.html @@ -3,10 +3,11 @@ - + + {:else if $drawerStore.id === 'mobile-nav'} + + + {:else} + +
+
+

Invalid $drawerStore.id provided.

+
+
+ {/if} + diff --git a/src/lib/components/MainHeader.svelte b/src/lib/components/MainHeader.svelte index bde146f..39059e7 100644 --- a/src/lib/components/MainHeader.svelte +++ b/src/lib/components/MainHeader.svelte @@ -1,45 +1,85 @@ - - - - -
- Logo +
+ + + - {config.title} -
- - + - - - - Blog - Projects - About - - - - - +
+ +
+ + + + diff --git a/src/lib/components/SocialsCloud.svelte b/src/lib/components/SocialsCloud.svelte index de2f37c..049264f 100644 --- a/src/lib/components/SocialsCloud.svelte +++ b/src/lib/components/SocialsCloud.svelte @@ -1,85 +1,25 @@ -
+
{#each socialLinks as link} - {#if link.icon === './GiteaLogo'} + {#if link.title === 'Gitea'} - {:else if link.icon === './MatrixLogo'} + {:else if link.title === 'Matrix'} {:else} - + {/if} {/each} -
diff --git a/src/lib/components/logos/GiteaLogo.svelte b/src/lib/components/logos/GiteaLogo.svelte index b5e5204..bdf869e 100644 --- a/src/lib/components/logos/GiteaLogo.svelte +++ b/src/lib/components/logos/GiteaLogo.svelte @@ -1,5 +1,5 @@ import { modeCurrent } from '@skeletonlabs/skeleton'; - let clazz = 'w-6 md:w-16'; + let clazz = 'w-6 md:w-12'; let fillStyle = 'fill: #000000'; $: { fillStyle = $modeCurrent ? 'fill: #000000' : 'fill: #ffffff'; diff --git a/src/lib/config.ts b/src/lib/config.ts index c124799..e39eb4e 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -1,10 +1,27 @@ import { dev } from '$app/environment'; -export const title = "Matt's Matrix"; -export const description = 'A blog about SvelteKit, Svelte, and other things.'; +export const title = "Matt's Propaganda Machine"; +export const description = + 'A blog, portfolio of Matt Morin - a complex organism radically living on planet Earth, staring into the abyss and trying to code his way out of it.'; export const url = dev ? 'http://localhost:5174' : 'https://mattmor.in'; export const author = 'Matt Morin'; export const email = 'mailto:matt.b.morin@pm.me'; export const LinkedIn = 'https://www.linkedin.com/in/matthieu-morin/'; export const github = 'https://github.com/matthieu42morin'; + +// prettier-ignore +export 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: 'Mastodon', href: 'https://mastodon.social/@matt_mor', icon: 'fa-brands fa-mastodon'}, + { title: 'RSS feed', href: '/blog/feed', icon: 'fa-regular fa-square-rss' } +]; + +// Routes +export const NavRoutes = [ + { title: 'Home', href: '/' }, + { title: 'Blog', href: '/blog' }, + { title: 'Projects', href: '/projects' } +]; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 285298a..7518cd4 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -6,10 +6,35 @@ import '@fortawesome/fontawesome-free/css/brands.css'; import '@fortawesome/fontawesome-free/css/solid.css'; - // Shell components + // Stores + import { page } from '$app/stores'; + import { initializeStores } from '@skeletonlabs/skeleton'; + initializeStores(); + + // Drawer + import { getDrawerStore } from '@skeletonlabs/skeleton'; + import MainDrawer from '$lib/components/MainDrawer.svelte'; + const drawerStore = getDrawerStore(); + + // Shell import { AppShell } from '@skeletonlabs/skeleton'; - import MainFooter from '$lib/components/MainFooter.svelte'; + $: positionClasses = $drawerStore.open ? 'animate-pulse' : ''; import MainHeader from '$lib/components/MainHeader.svelte'; + import MainFooter from '$lib/components/MainFooter.svelte'; + + // Turn off Drawer on md and up + let windowWidth: number; + + if (browser) { + windowWidth = window.innerWidth; + const setWindowWidth = () => { + windowWidth = window.innerWidth; + if (windowWidth >= 768) { + drawerStore.close(); + } + }; + window.addEventListener('resize', setWindowWidth); + } // Floating UI for Popups import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; @@ -21,7 +46,6 @@ //Cookie, Identifiers and store import Cookies from 'js-cookie'; - import { page } from '$app/stores'; import { isEurope, removeTrailingSlash } from '$lib/utils/helpers'; // Cookie implementatiion TODO component @@ -64,7 +88,7 @@ //@ts-expect-error - startViewTransition of View Transitions API, types don’t exist yet. if (!document.startViewTransition) return; - return new Promise((resolve) => { + return new Promise((resolve) => { //@ts-expect-error - startViewTransition of View Transitions API, types don’t exist yet. document.startViewTransition(async () => { resolve(); @@ -77,6 +101,7 @@ import hljs from 'highlight.js'; import 'highlight.js/styles/nord.css'; import { storeHighlightJs } from '@skeletonlabs/skeleton'; + import { browser } from '$app/environment'; storeHighlightJs.set(hljs); @@ -89,9 +114,10 @@ + - - + + @@ -100,6 +126,22 @@ + + +