Share pal

apps/color-buddy/src/App.svelte

@@ -15,6 +15,40 @@
       {},
       $configStore.userName
     );
+
+    // check if there's a palette specified in the url
+    const url = new URL(window.location.href);
+    const colors = url.searchParams.get("colors");
+    const background = url.searchParams.get("background") || "#ffffff";
+    const palName = url.searchParams.get("palName");
+    const space = url.searchParams.get("space");
+    if (colors) {
+      console.log(colors, background, palName, space);
+      let parsedColors = [];
+      try {
+        parsedColors = JSON.parse(colors || "[]");
+      } catch (e) {
+        console.error(e);
+      }
+      const newPal = makePalFromString(parsedColors, background);
+      if (palName) {
+        newPal.name = palName;
+      }
+      if (space) {
+        newPal.colorSpace = space as any;
+      }
+      if (parsedColors.length > 0) {
+        console.log("here", newPal);
+        colorStore.createNewPal(newPal);
+      }
+
+      // remove the palette from the url
+      url.searchParams.delete("colors");
+      url.searchParams.delete("background");
+      url.searchParams.delete("palName");
+      url.searchParams.delete("space");
+      window.history.replaceState({}, "", url.toString());
+    }
   });
 
   // make sure no focused colors are out of bounds
@@ -43,12 +77,15 @@
   import TourProvider from "./content-modules/TourProvider.svelte";
   import Config from "./controls/Config.svelte";
   import Title from "./controls/Title.svelte";
+  import SharePal from "./components/SharePal.svelte";
 
   import { lint } from "./lib/api-calls";
   import { debounce } from "vega";
 
   import { buttonStyle } from "./lib/styles";
 
+  import { makePalFromString } from "color-buddy-palette";
+
   $: route = $configStore.route;
   $: evalRoute = $configStore.evalDisplayMode;
   const bindStr = "!!";
@@ -114,6 +151,7 @@
             Redo
           </button>
         </div>
+        <SharePal />
       </div>
     </div>
   </div>

apps/color-buddy/src/components/SharePal.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import ExportIcon from "virtual:icons/fa6-solid/file-export";
+  import Tooltip from "./Tooltip.svelte";
+  import { buttonStyle } from "../lib/styles";
+
+  import colorStore from "../stores/color-store";
+
+  $: palette = $colorStore.palettes[$colorStore.currentPal];
+
+  function generateWebUrl() {
+    const colors = `[${palette.colors.map((x) => `"${x.toHex()}"`).join(",")}]`;
+    const background = palette.background.toHex();
+    const newUrl = new URL(window.location.href);
+    newUrl.searchParams.set("colors", colors);
+    newUrl.searchParams.set("background", background);
+    newUrl.searchParams.set("palName", palette.name);
+    newUrl.searchParams.set("space", palette.colorSpace);
+    return newUrl.toString();
+  }
+
+  let copyState = "idle" as "idle" | "copied";
+</script>
+
+<div class="mt-0.5 ml-2">
+  <Tooltip>
+    <div slot="content" let:open class="max-w-md overflow-hidden">
+      <div class="font-bold">Share via url</div>
+      <div class="font-mono text-sm p-1 border">{open && generateWebUrl()}</div>
+      <div class="flex items-center">
+        <button
+          class={buttonStyle}
+          on:click={() => {
+            navigator.clipboard.writeText(generateWebUrl());
+            copyState = "copied";
+            setTimeout(() => {
+              copyState = "idle";
+            }, 2000);
+          }}
+        >
+          Copy
+        </button>
+        {#if copyState === "copied"}
+          <div class=" ml-4">Copied!</div>
+        {/if}
+      </div>
+    </div>
+
+    <button slot="target" let:toggle on:click={toggle} class={buttonStyle}>
+      <ExportIcon class="text-xl" />
+    </button>
+  </Tooltip>
+</div>

apps/color-buddy/src/components/Tooltip.svelte

@@ -129,7 +129,7 @@
               }}
             ></div>
           {/if}
-          <slot name="content" {onClick} />
+          <slot name="content" {onClick} open={tooltipOpen} />
         </span>
       </div>
     </div>

yarn.lock

@@ -2314,11 +2314,6 @@
   resolved "https://registry.npmjs.org/@types/color-namer/-/color-namer-1.3.3.tgz"
   integrity sha512-DJ0MHHqazwb94dUBRhahK49nXhRGk2DIRNrVNVR3U3uQjYWY4uNhEjHXO+TbFQGpZcwli1pCj6xm3S3KsB/+3A==
 
-"@types/color-thief-node@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/color-thief-node/-/color-thief-node-1.0.4.tgz#33b250895de87ed7090dce44bee2b19a419acbb6"
-  integrity sha512-9mHoSyLAojvDQsZWxu3FHhiwUsQC7Lfuxrii6rnYc11uJ7GH2ODaM82gyDCXnR/5eXqlOymauUXU5eCEYAHS4A==
-
 "@types/d3-array@*":
   version "3.2.1"
   resolved "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz"