generated: update output palette and tooltips

MadMaxMcKinney · Jun 24, 2024 · d5325ee · d5325ee
1 parent ff727ec
commit d5325ee
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 18 deletions.
diff --git a/src/lib/actions.ts b/src/lib/actions.ts
@@ -14,7 +14,8 @@ export function tooltip(elem: HTMLElement, { text, offset }: TooltipOptions) {
         arrow: false,
         theme: 'cauldron',
         hideOnClick: true,
-        offset: offset ? offset : [0, -10]
+        offset: offset ? offset : [0, -10],
+        touch: false
     });
 
     return {

diff --git a/src/lib/components/PaletteCard.svelte b/src/lib/components/PaletteCard.svelte
@@ -30,21 +30,28 @@
     }
 
     async function downloadPalette() {
-        let paletteData = await fetch(`/api/palette/`, {
-            method: 'POST',
-            body: JSON.stringify(palette)
+        toast.promise(savePalette(), {
+            loading: 'Saving palette...',
+            success: 'Palette saved!',
+            error: 'Failed to save palette'
         });
-        const paletteDataURI = await paletteData.blob();
-        const paletteFile = new File([paletteDataURI], `${palette.name}.png`, { type: 'image/png' });
-        if (navigator.share) {
-            navigator.share({ files: [paletteFile] });
-        } else {
-            const url = URL.createObjectURL(paletteFile);
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = paletteFile.name;
-            a.click();
-            URL.revokeObjectURL(url);
+        async function savePalette() {
+            let paletteData = await fetch(`/api/palette/`, {
+                method: 'POST',
+                body: JSON.stringify(palette)
+            });
+            const paletteDataURI = await paletteData.blob();
+            const paletteFile = new File([paletteDataURI], `${palette.name}.png`, { type: 'image/png' });
+            if (navigator.share) {
+                navigator.share({ files: [paletteFile] });
+            } else {
+                const url = URL.createObjectURL(paletteFile);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = paletteFile.name;
+                a.click();
+                URL.revokeObjectURL(url);
+            }
         }
     }
 

diff --git a/src/lib/components/gen/SharePalette.svelte → .../components/generated/SharePalette.svelte b/src/lib/components/gen/SharePalette.svelte → .../components/generated/SharePalette.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
     export let palette: Palette;
+    import { getContrastColorFromHex } from '$lib/utils';
 </script>
 
 <div class="container">
     <div class="colors">
         {#each palette.colors as color}
-            <span style="background-color: {color.hex}"></span>
+            <span style="background-color: {color.hex}">
+                <p style={`color: ${getContrastColorFromHex(color.hex)}`}>{color.hex}</p>
+                <p style={`color: ${getContrastColorFromHex(color.hex)}`}>{color.name}</p>
+            </span>
         {/each}
     </div>
     <div class="footer">
@@ -34,9 +38,21 @@
     }
     .colors span {
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: center;
         height: 100px;
         width: 100%;
         height: 100%;
+        padding: 8px;
+        padding-bottom: 16px;
+    }
+    .colors span p {
+        font-size: 22px;
+        font-weight: 700;
+        opacity: 0.75;
+        line-height: 1;
     }
     .footer {
         display: flex;

diff --git a/src/routes/api/palette/+server.ts b/src/routes/api/palette/+server.ts
@@ -5,7 +5,7 @@ import type { RequestHandler } from './$types';
 import { image_from_component, type RenderOptions } from 'svelte-component-to-image';
 
 // Normal .svelte component
-import HelloWorld from '$lib/components/gen/SharePalette.svelte';
+import SharePalette from '$lib/components/generated/SharePalette.svelte';
 
 export const POST: RequestHandler = (async ({ url, request }: { url: URL; request: Request }) => {
     try {
@@ -33,7 +33,7 @@ export const POST: RequestHandler = (async ({ url, request }: { url: URL; reques
         };
 
         // pass the component and options to the package
-        const image = await image_from_component(HelloWorld, options);
+        const image = await image_from_component(SharePalette, options);
         const response = new Response(image);
         response.headers.append('Content-Type', 'image/png');
         response.headers.append('Cache-Control', 's-maxage=604800, stale-while-revalidate=604800');