Header, Socials update, some nice touches
This commit is contained in:
matthieu42morin
parent
ab61a720f3
commit
7813a2a6c5
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||
<link
|
||||
<link rel="icon" href="/Logo.png" />
|
||||
<!-- <link
|
||||
rel="icon"
|
||||
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 18 16'><text x='0' y='14'>🚀</text></svg>"
|
||||
/>
|
||||
/> -->
|
||||
<link rel="preload" href="/fonts/Quicksand.ttf" as="font" type="font/ttf" crossorigin />
|
||||
<!-- Dropin replacement for FontAwesome-->
|
||||
<!-- <link
|
||||
|
|
|
|||
|
|
@ -0,0 +1,37 @@
|
|||
<script lang="ts">
|
||||
import { getDrawerStore, Drawer } from '@skeletonlabs/skeleton';
|
||||
const drawerStore = getDrawerStore();
|
||||
import { NavRoutes } from '$lib/config';
|
||||
import { page } from '$app/stores';
|
||||
import { browser } from '$app/environment';
|
||||
// what is my url?
|
||||
$: classesDrawer = $drawerStore.id === 'mobile-nav' ? 'md:hidden' : '';
|
||||
</script>
|
||||
|
||||
<Drawer class={classesDrawer}>
|
||||
{#if $drawerStore.id === 'demo'}
|
||||
<!-- Doc Sidebar -->
|
||||
{:else if $drawerStore.id === 'mobile-nav'}
|
||||
<!-- Drawer nav only -->
|
||||
<nav
|
||||
class="z-50 flex flex-col gap-2 border border-surface-100-800-token bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token p-2 shadow-xl"
|
||||
>
|
||||
{#each NavRoutes as route}
|
||||
<a
|
||||
href={route.href}
|
||||
class="btn md:btn-sm hover:variant-soft-primary {route.href ===
|
||||
$page.url.pathname
|
||||
? 'variant-filled-primary'
|
||||
: ''}">{route.title}</a
|
||||
>
|
||||
{/each}
|
||||
</nav>
|
||||
{:else}
|
||||
<!-- Fallback Error -->
|
||||
<div class="w-full h-full flex justify-center items-center">
|
||||
<div class="text-center space-y-2">
|
||||
<p>Invalid <code class="code">$drawerStore.id</code> provided.</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Drawer>
|
||||
|
|
@ -1,45 +1,85 @@
|
|||
<script lang="ts">
|
||||
import { AppBar, LightSwitch } from '@skeletonlabs/skeleton';
|
||||
import * as config from '$lib/config';
|
||||
import { LightSwitch, AppBar, Avatar, getDrawerStore, Drawer } from '@skeletonlabs/skeleton';
|
||||
import type { DrawerSettings } from '@skeletonlabs/skeleton';
|
||||
const drawerStore = getDrawerStore();
|
||||
|
||||
// Components
|
||||
import { getImageLink } from '$lib/images';
|
||||
import { page } from '$app/stores';
|
||||
import { NavRoutes } from '$lib/config';
|
||||
|
||||
function triggerStyled() {
|
||||
const drawerSettings: DrawerSettings = {
|
||||
position: 'top',
|
||||
id: 'mobile-nav',
|
||||
// Provide your property overrides:
|
||||
bgDrawer: 'overflow-y-auto ',
|
||||
bgBackdrop:
|
||||
'z-50 bg-gradient-to-tr from-primary-500/50 via-secondary-500/50 to-tertiary-500/50',
|
||||
width: 'w-full h-auto ',
|
||||
rounded: 'rounded-bl-container-token rounded-br-container-token'
|
||||
// Metadata
|
||||
// meta: 'wtf'
|
||||
};
|
||||
drawerStore.open(drawerSettings);
|
||||
}
|
||||
|
||||
// Local
|
||||
const imgPlaceholder = getImageLink({ id: 'linky', w: 128, h: 128 });
|
||||
</script>
|
||||
|
||||
<AppBar>
|
||||
<!-- Left-side Header -->
|
||||
<svelte:fragment slot="lead">
|
||||
<a href="/">
|
||||
<div class="items-center align-middle flex gap-2">
|
||||
<img src="/images/Logo.png" alt="Logo" class="w-8 h-8" />
|
||||
<section
|
||||
class="!max-w-7xl mx-auto grid grid-cols-[1fr_auto_auto]
|
||||
md:grid-cols-[48px_1fr_48px] md:place-items-center items-center gap-4 p-4"
|
||||
>
|
||||
<a href="/" title="Return to Homepage">
|
||||
<Avatar src={'/images/profile-pic.png'} width="w-16" rounded={'rounded-full'} />
|
||||
</a>
|
||||
|
||||
<strong class="text-3xl uppercase">{config.title}</strong>
|
||||
</div>
|
||||
<section id="mobile-nav" class="hidden md:block">
|
||||
<nav
|
||||
class="flex flex-col md:flex-row gap-2 border md:border-0 border-surface-100-800-token bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token md:rounded-token p-2 shadow-xl"
|
||||
>
|
||||
{#each NavRoutes as route}
|
||||
<a
|
||||
href={route.href}
|
||||
class="btn md:btn-sm hover:variant-soft-primary {route.href ===
|
||||
$page.url.pathname
|
||||
? 'variant-filled-primary'
|
||||
: ''}"
|
||||
>
|
||||
{route.title}
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
{/each}
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<!-- Right-side Header -->
|
||||
<svelte:fragment slot="trail">
|
||||
<!-- Links -->
|
||||
<a href="/blog">Blog</a>
|
||||
<a href="/projects">Projects</a>
|
||||
<a href="/about">About</a>
|
||||
<!-- Social -->
|
||||
<section class="hidden sm:inline-flex space-x-1">
|
||||
<a
|
||||
class="btn-icon hover:variant-soft-primary"
|
||||
href="https://github.com/matthieu42morin"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i class="fa-brands fa-github text-lg" />
|
||||
</a>
|
||||
<a
|
||||
class="btn-icon hover:variant-soft-primary"
|
||||
href="https://discord.gg/EXqV7W8MtY"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i class="fa-brands fa-linkedin text-lg" />
|
||||
</a>
|
||||
<section class="block md:hidden" id="mobile-nav">
|
||||
<button class="btn variant-filled-primary" on:click={triggerStyled}>
|
||||
<i class="fa-solid fa-bars" /> <span>Menu</span>
|
||||
</button>
|
||||
</section>
|
||||
<LightSwitch />
|
||||
</svelte:fragment>
|
||||
</AppBar>
|
||||
</section>
|
||||
|
||||
<!-- Compare this snippet from src/lib/components/MainHeader.svelte:
|
||||
|
||||
id: 'demo',
|
||||
// // Property Overrides
|
||||
// position: 'top',
|
||||
// bgDrawer: 'bg-purple-900 text-white',
|
||||
// bgBackdrop: 'zbg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
|
||||
// width: 'w-full md:w-[480px]',
|
||||
// padding: 'p-4',
|
||||
// rounded: 'rounded-xl',
|
||||
// // Metadata
|
||||
// meta: 'Styled Drawer'
|
||||
class="drawer-backdrop fixed top-0 left-0 right-0 bottom-0 flex bg-surface-backdrop-token items-start z-40 "
|
||||
<div class="drawer overflow-y-auto transition-transform bg-transparent shadow-xl
|
||||
|
||||
w-full w-auto rounded-bl-container-token rounded-br-container-token "
|
||||
data-testid="drawer" role="dialog" aria-modal="true" aria-labelledby=""
|
||||
aria-describedby="" style="">
|
||||
<nav class="flex flex-col md:flex-row gap-2 border md:border-0 border-surface-100-800-token
|
||||
bg-surface-50/50 dark:bg-surface-900/50 backdrop-blur-lg rounded-bl-container-token rounded-br-container-token
|
||||
md:rounded-token p-2 shadow-xl"> -->
|
||||
|
|
|
|||
|
|
@ -1,85 +1,25 @@
|
|||
<script lang="ts">
|
||||
import MatrixLogo from './logos/MatrixLogo.svelte';
|
||||
|
||||
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' }
|
||||
];
|
||||
import { socialLinks } from '$lib/config';
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-5 gap-1 max-h-[128px]">
|
||||
<div class="flex flex-rows-auto gap-1 max-h-28">
|
||||
{#each socialLinks as link}
|
||||
<a
|
||||
class="logo-item"
|
||||
href={link.href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
rel={link.title === 'Mastodon' ? 'me' : 'noreferrer'}
|
||||
aria-label={link.title}
|
||||
>
|
||||
{#if link.icon === './GiteaLogo'}
|
||||
{#if link.title === 'Gitea'}
|
||||
<GiteaLogo />
|
||||
{:else if link.icon === './MatrixLogo'}
|
||||
{:else if link.title === 'Matrix'}
|
||||
<MatrixLogo />
|
||||
{:else}
|
||||
<i class={link.icon + ' text-3xl md:text-6xl'} />
|
||||
<i class={link.icon + ' text-3xl md:text-5xl'} />
|
||||
{/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/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img class="max-h-[64px]" src="/logos/LI-Logo.png" alt="Matt's LinkedIn Acount" />
|
||||
</a>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
let clazz = 'w-12 md:w-16';
|
||||
let clazz = 'w-8 md:w-14';
|
||||
</script>
|
||||
|
||||
<svg class={clazz} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
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';
|
||||
|
|
|
|||
|
|
@ -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' }
|
||||
];
|
||||
|
|
|
|||
|
|
@ -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<void>((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);
|
||||
</script>
|
||||
|
||||
|
|
@ -89,9 +114,10 @@
|
|||
|
||||
<!-- <Analytics />
|
||||
-->
|
||||
<MainDrawer />
|
||||
<!-- App Shell -->
|
||||
<AppShell>
|
||||
<svelte:fragment slot="header">
|
||||
<AppShell class="transition-transform {positionClasses} " regionPage="relative" slotPageHeader="">
|
||||
<svelte:fragment slot="pageHeader">
|
||||
<MainHeader />
|
||||
</svelte:fragment>
|
||||
<!-- Page Route Content -->
|
||||
|
|
@ -100,6 +126,22 @@
|
|||
<MainFooter />
|
||||
</svelte:fragment>
|
||||
</AppShell>
|
||||
|
||||
<!-- <CookieConsent />
|
||||
|
||||
<Segment /> -->
|
||||
|
||||
<style lang="postcss">
|
||||
animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue