Add memories

.env.template

@@ -1,9 +1,10 @@
 ADMIN_PASSWORD=
-
 PUBLIC_FAUNA_GQL_ENDPOINT=
 PUBLIC_FAUNA_SECRET=
 FAUNA_SECRET=
-
 PUBLIC_TELEMETRYDECK_APP_ID=
-
 PUBLIC_CF_IMAGES_ENDPOINT=
+PUBLIC_STORYBLOK_TOKEN=
+PUBLIC_NODE_ENV=
+PUBLIC_POSTHOG_TOKEN=
+PUBLIC_VERSION_DATE=

src/lib/_i18n/de/loaders.ts

@@ -27,6 +27,12 @@ export const de_loaders =  [
     routes: ["/de"],
     loader: async () => (await import("./cv.json")).default
   },
+  {
+    locale: "de",
+    key: "memories",
+    routes: ["/de"],
+    loader: async () => (await import("./memories.json")).default
+  },
   {
     locale: "de",
     key: "legal",

src/lib/_i18n/de/memories.json

@@ -0,0 +1,3 @@
+{
+  "title": "Erinnerungen"
+}

src/lib/_i18n/en/loaders.ts

@@ -27,6 +27,12 @@ export const en_loaders = [
     routes: ["/en"],
     loader: async () => (await import("./cv.json")).default
   },
+  {
+    locale: "en",
+    key: "memories",
+    routes: ["/en"],
+    loader: async () => (await import("./memories.json")).default
+  },
   {
     locale: "en",
     key: "legal",

src/lib/_i18n/en/memories.json

@@ -0,0 +1,3 @@
+{
+  "title": "Memories"
+}

src/lib/components/Header.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <header class="container container-tight">
-	<h1 class="overlay">
+	<h1 class="rounded-3xl px-4 py-2 -mx-4 -my-2 max-w-max backdrop-blur-[4px] font-display font-semibold text-md-lg">
 		<a href="/{$locale}"> Valentin Rogg </a>
 	</h1>
 
@@ -31,12 +31,7 @@
 	}
 
 	@media (max-width: 540px) {
-		h1 {
-			/*display: none;*/
-		}
-
 		header {
-			/*top: 2rem;*/
 			display: flex;
 			flex-direction: column;
 			gap: 1rem;
@@ -52,16 +47,4 @@
 		align-items: center;
 		gap: 16px;
 	}
-
-	h1 {
-		font-family: var(--ff-display);
-		font-size: 18px;
-		font-weight: 700;
-		white-space: nowrap;
-		padding: 0;
-		margin: 0;
-		border-radius: 4px;
-		backdrop-filter: blur(4px);
-		width: max-content;
-	}
 </style>

src/lib/components/sections/EyeCatcher/Signature.svelte

@@ -18,14 +18,14 @@
 
 	let canvas: HTMLCanvasElement;
 	let pad: HTMLDivElement;
-	let signaturePad;
+	let signaturePad: SignaturePad;
 	let currentSignature: Signature;
 	let drawModeActive = false;
 	let eraseModeActive = false;
 
-	function clearCanvas() {
-		switchToDraw()
-		sendClientEvent('signature-clear-canvas', document);
+	function clearCanvas(sendEvent = true) {
+		switchToDraw(sendEvent)
+		if (sendEvent) sendClientEvent('signature-clear-canvas', document);
 		signaturePad.clear();
 	}
 
@@ -73,15 +73,15 @@
 
 	async function loadSignature(delta) {
 		drawModeActive = false;
-		loadDelta(delta, fauna);
+		await loadDelta(delta, fauna);
 		sendClientEvent('signature-load-delta', document);
 	}
 
 	function resizeCanvas() {
 		canvas.width = pad.offsetWidth;
 		canvas.height = pad.offsetHeight;
 
-		clearCanvas();
+		clearCanvas(false);
 
 		if ($currentSignatureStore) {
 			const currentSignature = uncenterSignature($currentSignatureStore.signature);
@@ -91,7 +91,7 @@
 
 	function newCanvas() {
 		drawModeActive = true;
-		switchToDraw();
+		switchToDraw(false);
 
 		$currentSignatureStore = <Signature>{
 			name: null,
@@ -109,12 +109,12 @@
 		sendClientEvent('signature-switch-to-erase', document);
 	}
 
-	function switchToDraw() {
+	function switchToDraw(sendEvent = true) {
 		eraseModeActive = false;
 		signaturePad.compositeOperation = 'source-over';
 		signaturePad.minWidth = 0.5
 		signaturePad.maxWidth = 2.5
-		sendClientEvent('signature-switch-to-draw', document);
+		if (sendEvent) sendClientEvent('signature-switch-to-draw', document);
 	}
 
 	onMount(() => {
@@ -160,7 +160,7 @@
 				{#if $signatureRefsStore.length - $refIndexStore - 1 > 0}
 					<button
 						id="next"
-						class="dark:bg-blue-900 dark:hover:bg-blue-700"
+						class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700"
 						on:click="{() => loadSignature(1)}"
 						aria-label="{$t('signature.next')}"
 						transition:fade="{{ duration: 150 }}">
@@ -170,7 +170,7 @@
 				{#if $refIndexStore > 0}
 					<button
 						id="prev"
-						class="dark:bg-blue-900 dark:hover:bg-blue-700"
+						class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700"
 						on:click="{() => loadSignature(-1)}"
 						aria-label="{$t('signature.prev')}"
 						transition:fade="{{ duration: 250 }}">
@@ -210,20 +210,20 @@
 								$signatureRefsStore = signatureRefs;
 								$refIndexStore += 1;
 
-								switchToDraw();
+								switchToDraw(false);
 								drawModeActive = false;
 								signaturePad.off();
 							}
 						};
 					}}"
 					style="pointer-events: all">
-					<button id="save" class="dark:bg-blue-900 dark:hover:bg-blue-700" aria-label="{$t('signature.save')}" transition:fade="{{ duration: 250 }}">
+					<button id="save" class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700" aria-label="{$t('signature.save')}" transition:fade="{{ duration: 250 }}">
 						<i class="fa-solid fa-floppy-disk"></i>
 					</button>
 				</form>
 				<button
 					id="clear"
-					class="dark:bg-blue-900 dark:hover:bg-blue-700"
+					class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700"
 					on:click="{() => clearCanvas()}"
 					aria-label="{$t('signature.clear')}"
 					transition:fade="{{ duration: 250 }}">
@@ -232,7 +232,7 @@
 				{#if !eraseModeActive}
 				<button
 					id="erase"
-					class="dark:bg-blue-900 dark:hover:bg-blue-700"
+					class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700"
 					on:click="{() => switchToErase()}"
 					aria-label="{$t('signature.erase')}"
 					transition:fade="{{ duration: 250 }}">
@@ -241,7 +241,7 @@
 				{:else}
 					<button
 						id="draw"
-						class="dark:bg-blue-900 dark:hover:bg-blue-700"
+						class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700"
 						on:click="{() => switchToDraw()}"
 						aria-label="{$t('signature.draw')}"
 						transition:fade="{{ duration: 250 }}">
@@ -251,7 +251,7 @@
 			{:else if !$admin}
 				<button
 					id="new"
-					class="dark:bg-blue-900 dark:hover:bg-blue-700"
+					class="bg-white-500 hover:bg-white-700 dark:bg-blue-900 dark:hover:bg-blue-700"
 					on:click="{() => newCanvas()}"
 					aria-label="{$t('signature.new')}"
 					transition:fade="{{ duration: 250 }}">

src/lib/components/sections/Memories/Memories.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { t } from "$lib/_i18n";
+	import type { Content, MemoriesSettingsContent, MemoryContent } from "$lib/storyblok/schema";
+	import { StoryblokComponent } from "@storyblok/svelte";
+
+	export let settings: Content<MemoriesSettingsContent>;
+	export let content: Content<MemoryContent>[];
+
+	$: rows = settings.content.rows || 1;
+	$: columns = settings.content.columns || 1;
+</script>
+
+<h2 class="text-2xl font-semibold text-center mb-10">{$t("memories.title")}</h2>
+<div class="grid gap-4" style="grid-template-columns: repeat({columns}, 1fr); grid-template-rows: repeat({rows}, 1fr);">
+	{#each content as memory}
+		<StoryblokComponent blok="{memory.content}" />
+	{/each}
+</div>
+<div class="flex justify-center mt-4">
+	<button class="p-2 bg-white-600 rounded-[100%] w-14 h-14 text-lg">
+		<i class="fa-solid fa-plus"></i>
+	</button>
+</div>

src/lib/components/sections/Memories/Memory.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { storyblokEditable } from "@storyblok/svelte";
+	import type { MemoryContent } from "$lib/storyblok/schema";
+	export let blok: MemoryContent;
+</script>
+
+<div
+	use:storyblokEditable="{blok}"
+	class="rounded-xl overflow-hidden relative h-[25rem]"
+	style="grid-column: span {blok.col_span} / span {blok.col_span}; grid-row: span {blok.row_span} / span {blok.row_span};">
+	{#if blok.img}
+		<img class="object-cover h-[100%] w-[100%] hover:scale-y-105 transition-transform duration-1000" src="{blok.img.filename}/75" alt="{blok.img.alt}" class:-scale-x-100={blok.flip} class:hover:-scale-x-105={blok.flip} class:hover:scale-x-105={!blok.flip}/>
+	{/if}
+	<div class="absolute z-10 pointer-events-none bottom-4 right-4 text-white-500 text-lg backdrop-blur-sm px-2 py-1 rounded-xl border border-[rgba(255,255,255,0.3)] flex gap-2 items-center">
+		<div>{blok.title}</div>
+		{#if blok.flag}
+			{@const flag = blok.flag}
+			<div class="relative">
+				<img class="h-[1.2em]" src="{flag.filename}" alt="{flag.alt}"/>
+<!--				<div class="absolute -bottom-2 -right-1 text-md font-handwriting text-white-500">{new Date(blok.date).getFullYear().toString().substring(2)}</div>-->
+			</div>
+		{/if}
+	</div>
+</div>
+

src/lib/components/sections/ShortBio/ShortBio.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { t } from "$lib/_i18n";
 	import { sendClientEvent } from "$lib/posthog";
+
+	export let blok;
 </script>
 
 <h1 class="text-4xl text-center font-semibold mb-4 font-sans">Valentin Rogg</h1>
@@ -123,8 +125,8 @@
 		alt="🇺🇸"
 		src="https://cdn.jsdelivr.net/gh/twitter/[email protected]/assets/72x72/1f1fa-1f1f8.png" />
 </p>
-<p class="text-center font-serif text-md-lg whitespace-pre-wrap max-sm:mx-10 max-w-2xl mx-auto">
-	{@html $t("bio.description")}
+<p class="text-center font-serif text-md-lg whitespace-pre-wrap max-sm:mx-10 max-w-xl mx-auto">
+	{@html blok.content.short_bio}
 </p>
 
 <div class="w-max mt-16 mb-6 mx-auto text-2xl">

src/lib/stores.ts

@@ -7,23 +7,6 @@ export const darkMode = writable(false, (set) => {
 		set(cookie.parse(document.cookie)["darkModeEnabled"] === "true");
 	});
 });
-// export const currentSignatureStore = writable(<Signature>{});
-// export const signatureRefsStore = writable([]);
 export const slugStore = writable("slug.default");
-// export const refIndexStore = writable(0);
-
 export const admin = writable(false);
 
-
-// // @ts-ignore
-// export const telemetry = derived(identifier, async ($identifier, set) => {
-// 	console.log($identifier);
-// 	if ($identifier != uuid_NIL) {
-// 		// @ts-ignore
-// 		const pkg = await import("@telemetrydeck/sdk");
-// 		const td = new pkg.TelemetryDeck();
-// 		td.app(PUBLIC_TELEMETRYDECK_APP_ID);
-// 		td.user(get(identifier) ?? "anonymous");
-// 		set(td);
-// 	}
-// });

src/lib/storyblok/schema.d.ts

@@ -1,5 +1,36 @@
 export type DATETIME = string;
 
+type File = {
+	filename: string;
+	alt: string;
+}
+
+export type Content<T> = {
+	id: string;
+	content: T;
+}
+
+export type BioContent = {
+	short_bio: string;
+}
+
+export type CvContent = {
+	companies: Company[];
+}
+
+export type MemoriesSettingsContent = {
+	columns: number;
+	rows: number
+}
+
+export type MemoryContent = {
+	title: string;
+	img: File;
+	flag: File;
+	col_span: number;
+	row_span: number;
+}
+
 export type Company = {
 	title: string;
 	url: string;