Add copy id, open sig by id

v-rogg · Oct 14, 2023 · cd1295a · cd1295a
1 parent 2fbe5b2
commit cd1295a
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,10 @@
 # Personal Website
 
 Required services:
+- [Fly](https://fly.io)
 - [Fauna](https://fauna.com)
 - [Cloudflare Images](https://www.cloudflare.com/products/cloudflare-images/)
+- [PostHog](https://posthog.com)
 
 
 > Make sure to supply all needed environment variables. See `.env.template`.
@@ -22,7 +24,3 @@ npm run build
 You can preview the production build with `npm run preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-
-## Second Version (Cloudflare Images as Signature Storage)
-The alternate storage solution using cloudflare Images can be found inside the `archive` folder
diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -5,7 +5,6 @@ import * as cookie from "cookie";
 import { ADMIN_PASSWORD } from "$env/static/private";
 import { redirect } from "@sveltejs/kit";
 import { v4 as uuid_v4 } from "uuid";
-import { postHogClient } from "$lib/posthog";
 
 export const handle: Handle = async ({ event, resolve }) => {
 	const { url, request } = event;
@@ -42,7 +41,7 @@ export const handle: Handle = async ({ event, resolve }) => {
 
 			// 301 redirect
 			return new Response(undefined, {
-				headers: { location: `/${locale}${pathname}` },
+				headers: { location: `/${locale}${pathname}?${url.searchParams.toString()}` },
 				status: 301
 			});
 		}

diff --git a/src/lib/components/sections/EyeCatcher/EyeCatcher.svelte b/src/lib/components/sections/EyeCatcher/EyeCatcher.svelte
@@ -57,19 +57,11 @@
 		background: var(--c-secondary);
 		margin-top: 2rem;
 		min-width: 100%;
-		/*padding: 2rem;*/
-		/*border-radius: 4px;*/
 		position: relative;
 		height: 650px;
 		overflow: hidden;
 	}
 
-	/*@media (max-width: 540px) {*/
-	/*	.eyecatcher {*/
-	/*		margin: 1rem 1rem 1rem;*/
-	/*	}*/
-	/*}*/
-
 	img {
 		position: absolute;
 		bottom: 0;

diff --git a/src/lib/components/sections/EyeCatcher/Signature.svelte b/src/lib/components/sections/EyeCatcher/Signature.svelte
@@ -160,6 +160,7 @@
 				{#if $signatureRefsStore.length - $refIndexStore - 1 > 0}
 					<button
 						id="next"
+						class="dark:bg-blue-900 dark:hover:bg-blue-700"
 						on:click="{() => loadSignature(1)}"
 						aria-label="{$t('signature.next')}"
 						transition:fade="{{ duration: 150 }}">
@@ -169,6 +170,7 @@
 				{#if $refIndexStore > 0}
 					<button
 						id="prev"
+						class="dark:bg-blue-900 dark:hover:bg-blue-700"
 						on:click="{() => loadSignature(-1)}"
 						aria-label="{$t('signature.prev')}"
 						transition:fade="{{ duration: 250 }}">
@@ -215,12 +217,13 @@
 						};
 					}}"
 					style="pointer-events: all">
-					<button id="save" aria-label="{$t('signature.save')}" transition:fade="{{ duration: 250 }}">
+					<button id="save" class="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"
 					on:click="{() => clearCanvas()}"
 					aria-label="{$t('signature.clear')}"
 					transition:fade="{{ duration: 250 }}">
@@ -229,6 +232,7 @@
 				{#if !eraseModeActive}
 				<button
 					id="erase"
+					class="dark:bg-blue-900 dark:hover:bg-blue-700"
 					on:click="{() => switchToErase()}"
 					aria-label="{$t('signature.erase')}"
 					transition:fade="{{ duration: 250 }}">
@@ -237,6 +241,7 @@
 				{:else}
 					<button
 						id="draw"
+						class="dark:bg-blue-900 dark:hover:bg-blue-700"
 						on:click="{() => switchToDraw()}"
 						aria-label="{$t('signature.draw')}"
 						transition:fade="{{ duration: 250 }}">
@@ -246,6 +251,7 @@
 			{:else if !$admin}
 				<button
 					id="new"
+					class="dark:bg-blue-900 dark:hover:bg-blue-700"
 					on:click="{() => newCanvas()}"
 					aria-label="{$t('signature.new')}"
 					transition:fade="{{ duration: 250 }}">
@@ -299,7 +305,6 @@
 	}
 
 	.overlay button {
-		background: var(--c-bg);
 		border: none;
 		font-size: 1rem;
 		z-index: 250;
@@ -323,7 +328,6 @@
 		pointer-events: all;
 
 		&:hover {
-			background: var(--c-bg-hover);
 			cursor: pointer;
 		}
 

diff --git a/src/lib/components/sections/EyeCatcher/SignatureAdmin.svelte b/src/lib/components/sections/EyeCatcher/SignatureAdmin.svelte
@@ -105,15 +105,18 @@
 		left: 50%;
 		transform: translateX(-50%);
 		z-index: 799;
+    pointer-events: none;
 	}
 
-	.overlay {
-		position: relative;
-		height: 100%;
-		width: 100%;
-	}
+  .overlay {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
 
 	.admin-panel {
+		pointer-events: all;
 		position: absolute;
 		bottom: 2rem;
 		z-index: 800;

diff --git a/src/lib/components/sections/EyeCatcher/SignatureNumber.svelte b/src/lib/components/sections/EyeCatcher/SignatureNumber.svelte
@@ -2,25 +2,40 @@
 	import { currentSignatureStore } from "$lib/components/sections/EyeCatcher/signature.stores";
 	import { locale } from "$lib/_i18n";
 	import { browser } from "$app/environment";
+	import { page } from "$app/stores";
 </script>
 
 <div class="container container-tight">
 	<div class="signature-number">
-		{#if $currentSignatureStore && browser}
-			{#if Object.keys($currentSignatureStore).length > 0}
-				<div class="name">
-					{#if $currentSignatureStore?.name}
-						<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" class="mr-1"><path d="M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" fill="currentColor"/></svg>
-						{$currentSignatureStore?.name}
+		<div class="flex gap-4 items-center">
+			<div>
+				{#if $currentSignatureStore && browser}
+					{#if Object.keys($currentSignatureStore).length > 0}
+						<div
+							class="name hover:cursor-pointer"
+							title="{$currentSignatureStore.id}"
+							on:click="{() => {
+								navigator.clipboard.writeText(`${$page.url.origin}/?sid=${$currentSignatureStore.id}`);
+							}}"
+							role="button">
+							{#if $currentSignatureStore?.name}
+								<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" class="mr-1"
+									><path
+										d="M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+										fill="currentColor"></path
+									></svg>
+								{$currentSignatureStore?.name}
+							{/if}
+						</div>
+						<div id="date" class="small">
+							{$currentSignatureStore.ts_created
+								? new Date($currentSignatureStore.ts_created / 1000).toLocaleDateString($locale)
+								: ""}
+						</div>
 					{/if}
-				</div>
-				<div id="date" class="small">
-					{$currentSignatureStore.ts_created
-						? new Date($currentSignatureStore.ts_created / 1000).toLocaleDateString($locale)
-						: ""}
-				</div>
-			{/if}
-		{/if}
+				{/if}
+			</div>
+		</div>
 	</div>
 </div>
 

diff --git a/src/lib/fauna/schema.d.ts b/src/lib/fauna/schema.d.ts
@@ -9,9 +9,7 @@ export type Pagination<T> = {
 }
 
 export type Signature = {
-	_id?: ID;
 	id: ID;
-	_ts?: TS;
 	ts?: TS;
 	user_identifier?: UUID;
 	name?: string;

diff --git a/src/routes/(public)/[lang]/+page.server.ts b/src/routes/(public)/[lang]/+page.server.ts
@@ -4,7 +4,7 @@ import { fail } from "@sveltejs/kit";
 import { fql } from "fauna";
 import { getPublicFaunaClient } from "$lib/fauna/fauna.public";
 import { getPrivateFaunaClient } from "$lib/fauna/fauna.private";
-import type { Pagination, Signature } from "$lib/fauna/schema";
+import type { ID, Pagination, Signature } from "$lib/fauna/schema";
 
 export const actions: Actions = {
 	create: async ({ request }) => {
@@ -39,11 +39,14 @@ function shuffle(array: Signature[]): Signature[] {
 	return array;
 }
 
-export const load: PageServerLoad = async () => {
+export const load: PageServerLoad = async ({url}) => {
 	const fauna = getPublicFaunaClient();
 
+	const requestedSID: ID | undefined = url.searchParams.get("sid") || undefined;
+
 	try {
-		const signatureRefs =
+
+		let signatureRefs =
 			(await fauna
 				.query<Pagination<Signature[]>>(
 					fql`
@@ -53,7 +56,10 @@ export const load: PageServerLoad = async () => {
 				)
 				.then((res) => shuffle(res.data.data))) || [];
 
-		if (signatureRefs.length > 0) {
+		if (requestedSID) {
+			signatureRefs = signatureRefs.filter(signature => signature.id != requestedSID);
+			signatureRefs.unshift({id: requestedSID});
+
 			const firstResult = await fauna
 				.query<Signature>(
 					fql`
@@ -69,10 +75,27 @@ export const load: PageServerLoad = async () => {
 				currentSignature: firstResult
 			};
 		} else {
-			fauna.close()
-			return {
-				signatureRefs: []
-			};
+			if (signatureRefs.length > 0) {
+				const firstResult = await fauna
+					.query<Signature>(
+						fql`
+				signatures.where(.id == ${signatureRefs[0].id}).first()
+			`,
+						{ format: "simple" }
+					)
+					.then((res) => res.data);
+
+				fauna.close()
+				return {
+					signatureRefs: signatureRefs,
+					currentSignature: firstResult
+				};
+			} else {
+				fauna.close()
+				return {
+					signatureRefs: []
+				};
+			}
 		}
 	} catch (error) {
 		return fail(500, { msg: String(error) });