copying over previously used components
This commit is contained in:
matthieu42morin
parent
38a1e787c6
commit
c6be61d1e8
|
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let clazz = 'w-8 md:w-14 ';
|
||||||
|
</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
|
||||||
|
>
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { modeCurrent } from '@skeletonlabs/skeleton';
|
||||||
|
let clazz = 'w-6 md:w-12';
|
||||||
|
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>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Tag } from '$lib/types/post';
|
||||||
|
export let selected: Tag | null = null;
|
||||||
|
export let className = '';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { goto } from '$app/navigation';
|
||||||
|
|
||||||
|
const tags: Tag[] = ['Blog', 'Projects', 'Updates'];
|
||||||
|
|
||||||
|
const clickHandler = (value: Tag) => {
|
||||||
|
if (value === selected) {
|
||||||
|
goto(`/blog`, { keepFocus: true, noScroll: true });
|
||||||
|
selected = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let query = new URLSearchParams($page.url.searchParams.toString());
|
||||||
|
query.set('tag', value);
|
||||||
|
goto(`?${query.toString()}`, { keepFocus: true, noScroll: true });
|
||||||
|
selected = value;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="flex justify-center flex-col items-center {className}">
|
||||||
|
<h3 class="h3 mb-2 md:mb-3">Sort by category</h3>
|
||||||
|
<ul class="flex flex-wrap justify-center gap-2">
|
||||||
|
{#each tags as option}
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
class="chip {option === selected
|
||||||
|
? 'variant-filled-primary'
|
||||||
|
: 'variant-soft-primary'}"
|
||||||
|
on:click={() => clickHandler(option)}
|
||||||
|
>
|
||||||
|
{option}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Preview from '$lib/components/blog/Preview.svelte';
|
||||||
|
import CategoryFilter from '$lib/components/blog/CategoryFilter.svelte';
|
||||||
|
import type { Post, Tag } from '$lib/types/post';
|
||||||
|
import { H_ELLIPSIS_ENTITY } from '$lib/constants';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
|
||||||
|
export let data: PageData;
|
||||||
|
export let posts: Post[] = [];
|
||||||
|
|
||||||
|
let filter: Tag | null = null;
|
||||||
|
export const displayAmount = 8;
|
||||||
|
|
||||||
|
$: showPosts = displayAmount;
|
||||||
|
$: postCount = posts.length;
|
||||||
|
$: posts = data.posts.filter((post: Post) => (filter ? post.tags?.includes(filter) : true));
|
||||||
|
$: displayPosts = posts.slice(displayAmount);
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
showPosts += displayAmount;
|
||||||
|
};
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const tagParam = $page.url.searchParams.get('tag');
|
||||||
|
|
||||||
|
if (!filter && typeof tagParam == 'string') {
|
||||||
|
filter = tagParam as Tag;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section role="feed">
|
||||||
|
<div class="space-y-8">
|
||||||
|
<header class="flex flex-col justify-center items-center">
|
||||||
|
<h1 class="h1 m-4">Blog</h1>
|
||||||
|
<CategoryFilter className="mb-2 md:mb-4" bind:selected={filter} />
|
||||||
|
</header>
|
||||||
|
<div
|
||||||
|
class="grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
|
||||||
|
>
|
||||||
|
{#each posts.slice(0, displayAmount) as post, index}
|
||||||
|
<article
|
||||||
|
class="flex justify-center min-w-[20rem] max-w-sm"
|
||||||
|
aria-posinset={index + 1}
|
||||||
|
aria-setsize={postCount}
|
||||||
|
>
|
||||||
|
<Preview {post} type="blog" />
|
||||||
|
</article>
|
||||||
|
{:else}
|
||||||
|
<p>No posts yet!</p>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if posts.slice(displayAmount).length > 0}
|
||||||
|
<div>
|
||||||
|
<h2 class="mb-4 text-center">Previous posts</h2>
|
||||||
|
<div
|
||||||
|
class="previous grid m-auto max-w-7xl w-full gap-6 grid-cols-none justify-center md:grid-cols-2 lg:grid-cols-3"
|
||||||
|
>
|
||||||
|
{#each displayPosts as post}
|
||||||
|
<div class="flex justify-center min-w-[20rem] max-w-sm">
|
||||||
|
<Preview {post} type="blog" />
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if showPosts < postCount}
|
||||||
|
<button type="submit" on:click={handleClick}>See more {H_ELLIPSIS_ENTITY}</button>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!-- <script lang="ts" context="module">
|
||||||
|
import Image from '$lib/components/prose/img.svelte'
|
||||||
|
import table from '$lib/components/prose/table.svelte'
|
||||||
|
export { Image as img, table }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { typeOfPost } from '$lib/utils/posts'
|
||||||
|
import Container from '$lib/components/blog/post_container.svelte'
|
||||||
|
// auto-generated
|
||||||
|
export let path
|
||||||
|
export let slug
|
||||||
|
export let toc
|
||||||
|
// common
|
||||||
|
export let created
|
||||||
|
export let updated
|
||||||
|
export let published
|
||||||
|
export let summary
|
||||||
|
export let tags
|
||||||
|
export let flags
|
||||||
|
// specify
|
||||||
|
export let title
|
||||||
|
export let image
|
||||||
|
export let in_reply_to
|
||||||
|
// post
|
||||||
|
let fm = { path, slug, toc, created, updated, published, summary, tags, flags, title, image, in_reply_to }
|
||||||
|
let post = { type: typeOfPost(fm), ...fm }
|
||||||
|
</script> -->
|
||||||
|
|
||||||
|
<article class="text-token prose prose-slate mx-auto dark:prose-invert lg:prose-lg">
|
||||||
|
<slot />
|
||||||
|
</article>
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import SEO from '$lib/components/SEO/index.svelte';
|
||||||
|
import '$lib/assets/prism-nord.css';
|
||||||
|
import type { Post } from '$lib/types/post';
|
||||||
|
import Tags from '$lib/components/blog/Tags.svelte';
|
||||||
|
|
||||||
|
export let post: Post;
|
||||||
|
|
||||||
|
const {
|
||||||
|
postTitle,
|
||||||
|
datePublished,
|
||||||
|
featuredImage,
|
||||||
|
featuredImageAlt,
|
||||||
|
lastUpdated,
|
||||||
|
seoMetaDescription: metadescription,
|
||||||
|
slug,
|
||||||
|
timeToRead,
|
||||||
|
ogImage,
|
||||||
|
ogSquareImage,
|
||||||
|
twitterImage
|
||||||
|
} = post || {};
|
||||||
|
|
||||||
|
const breadcrumbs = [
|
||||||
|
{ name: 'Home', slug: '' },
|
||||||
|
{ name: 'type', slug: post.type },
|
||||||
|
{ name: postTitle, slug }
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SEO
|
||||||
|
article
|
||||||
|
{breadcrumbs}
|
||||||
|
{slug}
|
||||||
|
{postTitle}
|
||||||
|
{datePublished}
|
||||||
|
{lastUpdated}
|
||||||
|
{metadescription}
|
||||||
|
{timeToRead}
|
||||||
|
{featuredImage}
|
||||||
|
{ogImage}
|
||||||
|
{ogSquareImage}
|
||||||
|
{twitterImage}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<section class="flex justify-center mt-4 mb-8">
|
||||||
|
<div
|
||||||
|
class=" w-full md:w-[50rem] leading-[177.7%] bg-white/50 dark:bg-black/50 m-2 rounded-t-lg mx-auto"
|
||||||
|
>
|
||||||
|
<header>
|
||||||
|
<img
|
||||||
|
src={featuredImage}
|
||||||
|
alt={featuredImageAlt}
|
||||||
|
class=" w-full aspect-[21/9] max-h-[540px] rounded-t-lg"
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
<Tags {post} />
|
||||||
|
<div class="space-y-4 m-8">
|
||||||
|
<h2 class="h2" data-toc-ignore>{post.title}</h2>
|
||||||
|
<div class="max-w-none md:w-[720px]">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="opacity-50" />
|
||||||
|
<footer class="p-4 flex justify-start items-center space-x-4" />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style lang="postcss">
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { isAnExternalLink, generateURL } from '$lib/utils/helpers';
|
||||||
|
import type { Post } from '$lib/types/post';
|
||||||
|
import { onMount, onDestroy } from 'svelte';
|
||||||
|
import { formatDate } from '$lib/utils/blog';
|
||||||
|
|
||||||
|
export let type: Post['type'];
|
||||||
|
export let post: Post;
|
||||||
|
// export let published: boolean;
|
||||||
|
// export let headlineOrder: 'h3' | '' = '';
|
||||||
|
// export let badge: string = '';
|
||||||
|
// export let textWidth: string = '';
|
||||||
|
|
||||||
|
//window width
|
||||||
|
let iteration = 0;
|
||||||
|
let interval: string | number | NodeJS.Timeout | undefined;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
console.log(window.innerWidth);
|
||||||
|
iteration++;
|
||||||
|
|
||||||
|
if (iteration === 50) {
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
$: href = generateURL(post['href'], post.type, post.slug);
|
||||||
|
|
||||||
|
$: target = post && post['href'] && isAnExternalLink(post['href']) ? '_blank' : undefined;
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
clearInterval(interval);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a
|
||||||
|
{href}
|
||||||
|
{target}
|
||||||
|
class="card bg-gradient-to-br variant-glass-primary card-hover overflow-hidden flex flex-col space-y-4"
|
||||||
|
>
|
||||||
|
<!-- Blog in long cols, projects in wide rows -->
|
||||||
|
<div class="flex {type === 'blog' ? 'flex-col' : 'flex-row'} justify-between w-full h-full">
|
||||||
|
<header>
|
||||||
|
<!-- <img
|
||||||
|
src={`/images/${type}/${post.slug}/${post.image}`}
|
||||||
|
class="bg-black/200 w-full aspect-[3/2]"
|
||||||
|
alt="Post preview"
|
||||||
|
/> -->
|
||||||
|
<img
|
||||||
|
src={post.featuredImage}
|
||||||
|
alt={post.title}
|
||||||
|
class="bg-black/200 h-[448px] w-[672px] aspect-[3/2]"
|
||||||
|
/>
|
||||||
|
</header>
|
||||||
|
<section class="p-4 space-y-4">
|
||||||
|
<h2 class="h2 text-ellipsis overflow-hidden" data-toc-ignore>{post.title}</h2>
|
||||||
|
<article class="text-ellipsis break-words overflow-hidden max-h-[128px] max-w-4">
|
||||||
|
<p>
|
||||||
|
<!-- cspell:disable -->
|
||||||
|
{post.excerpt}
|
||||||
|
<!-- cspell:enable -->
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<hr class="opacity-30 bg-tertiary-500" />
|
||||||
|
<footer class="p-4 flex justify-between">
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{#if post.tags && post.tags.length > 0}
|
||||||
|
<small>tags: </small>
|
||||||
|
{#each post.tags as tag}
|
||||||
|
<a
|
||||||
|
data-sveltekit-preload-data="hover"
|
||||||
|
href="/blog?{new URLSearchParams({ tag }).toString()}"
|
||||||
|
class="chip variant-glass-secondary"
|
||||||
|
>
|
||||||
|
<p class="text-md text-token">{tag}</p>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto">
|
||||||
|
<small>
|
||||||
|
{#if post.datePublished}
|
||||||
|
<span class="text-sm ml-4">
|
||||||
|
{formatDate(post.datePublished)}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Post } from '$lib/types/post';
|
||||||
|
import { formatDate } from '$lib/utils/blog';
|
||||||
|
|
||||||
|
export let post: Post;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section class="flex-auto flex justify-between items-center py-4 px-2 m-8">
|
||||||
|
{#if post.tags && post.tags.length > 0}
|
||||||
|
<div class="flex mb-2 items-center gap-2">
|
||||||
|
tags: {#each post.tags as tag}
|
||||||
|
<a
|
||||||
|
data-sveltekit-preload-data="hover"
|
||||||
|
href="/{post.type}{new URLSearchParams({ tag }).toString()}"
|
||||||
|
>
|
||||||
|
<span class="chip variant-ghost-surface">{tag}</span>
|
||||||
|
</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<small>On {formatDate(post.datePublished)}</small>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { getDrawerStore, Drawer } from '@skeletonlabs/skeleton';
|
||||||
|
const drawerStore = getDrawerStore();
|
||||||
|
import { NavRoutes } from '$lib/config';
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
$: 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>
|
||||||
|
|
@ -0,0 +1,33 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import GiteaLogo from '$lib/assets/logos/GiteaLogo.svelte';
|
||||||
|
import SocialsCloud from '$lib/components/SocialsCloud.svelte';
|
||||||
|
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<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="items-center md:justify-start justify-center" href="/">
|
||||||
|
<p class="sm:pl-4 text-base sm:py-2 sm:mt-0 mt-4 text-center">
|
||||||
|
All content on this website, unless otherwise stated,
|
||||||
|
<br />by Matthieu Morin, is under copyright © {year},
|
||||||
|
<br />all of it licensed under
|
||||||
|
<a
|
||||||
|
class="anchor font-bold"
|
||||||
|
href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">CC BY-SA 4.0</a
|
||||||
|
>.
|
||||||
|
<br />This site, coded by me, is
|
||||||
|
<a
|
||||||
|
class="font-bold anchor"
|
||||||
|
href="https://git.mattmor.in/Madmin/its-personal/src/branch/master/LICENSE"
|
||||||
|
>MIT Licensed</a
|
||||||
|
>.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { LightSwitch, Avatar, getDrawerStore } from '@skeletonlabs/skeleton';
|
||||||
|
import type { DrawerSettings } from '@skeletonlabs/skeleton';
|
||||||
|
const drawerStore = getDrawerStore();
|
||||||
|
|
||||||
|
// Components
|
||||||
|
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: ''
|
||||||
|
};
|
||||||
|
drawerStore.open(drawerSettings);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
{/each}
|
||||||
|
</nav>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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 />
|
||||||
|
</section>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue