Add util for getting sharing URL (which the current state in the hash). Use it for comments in the CSS variables and tailwind config export targets (Other targets are JSON, which aren't support comments out of the box)

Author: psd-coder

packages/core/src/components/ExportImportMenu/items/OpenInWebApp.tsx

@@ -1,18 +1,14 @@
 import { useSubscribe } from "@spred/react";
 
 import { MenuItemLink } from "@core/components/Menu/MenuItemLink";
-import { HARMONIZER_WEB_APP_URL } from "@core/constants";
 import { $compactExportConfigHash } from "@core/stores/config";
+import { getShareUrl } from "@core/utils/url/getShareUrl";
 
 export function OpenInWebApp() {
   const configHash = useSubscribe($compactExportConfigHash);
 
   return (
-    <MenuItemLink
-      value="open-in-web"
-      href={`${HARMONIZER_WEB_APP_URL}/${configHash}`}
-      target="_blank"
-    >
+    <MenuItemLink value="open-in-web" href={getShareUrl(configHash)} target="_blank">
       Open in web app
     </MenuItemLink>
   );

packages/core/src/stores/config.ts

@@ -169,13 +169,15 @@ export const ExportTargets = {
     name: "Tailwind v3",
     filename: "tailwind.config.js",
     mimetype: "application/javascript",
-    getFileData: () => getTailwindConfig(getExportConfigWithColors()),
+    getFileData: () =>
+      getTailwindConfig(getExportConfigWithColors(), $compactExportConfigHash.value),
   },
   "css-variables": {
     name: "CSS variables",
     filename: "harmonized-palette.css",
     mimetype: "application/javascript",
-    getFileData: () => getCssVariablesConfig(getExportConfigWithColors()),
+    getFileData: () =>
+      getCssVariablesConfig(getExportConfigWithColors(), $compactExportConfigHash.value),
   },
   json: {
     name: "JSON Config",

packages/core/src/utils/config/getCssVariablesConfig.ts

@@ -1,15 +1,19 @@
 import type { ExportConfigWithColors } from "@core/types";
 import { toCss } from "@core/utils/colors/toCss";
+import { getShareUrl } from "@core/utils/url/getShareUrl";
 
 import { buildColorItems } from "./buildColorItems";
 import { buildName } from "./utils";
 
-export function getCssVariablesConfig(config: ExportConfigWithColors): string {
+export function getCssVariablesConfig(config: ExportConfigWithColors, configHash: string): string {
   const colors = buildColorItems(config, (level, hue, color) => {
     return `--${buildName(hue.name, level.name)}: ${toCss(color, config.settings.colorSpace)};`;
   });
 
-  return `:root {
+  return `/*
+  Generated via Harmonizer: ${getShareUrl(configHash)}
+*/
+:root {
   ${colors.join("\n  ")}
 }`;
 }

packages/core/src/utils/config/getTailwindConfig.ts

@@ -1,15 +1,19 @@
 import type { ExportConfigWithColors } from "@core/types";
 import { toCss } from "@core/utils/colors/toCss";
+import { getShareUrl } from "@core/utils/url/getShareUrl";
 
 import { buildColorItems } from "./buildColorItems";
 import { buildName } from "./utils";
 
-export function getTailwindConfig(config: ExportConfigWithColors): string {
+export function getTailwindConfig(config: ExportConfigWithColors, configHash: string): string {
   const colors = buildColorItems(config, (level, hue, color) => {
     return `"${buildName(hue.name, level.name)}": "${toCss(color, config.settings.colorSpace)}",`;
   });
 
-  return `/** @type {import('tailwindcss').Config} */
+  return `/**
+ * Generated via Harmonizer: ${getShareUrl(configHash)}
+ * @type {import('tailwindcss').Config}
+ * */
 module.exports = {
   theme: {
     colors: {

packages/core/src/utils/url/getShareUrl.ts

@@ -0,0 +1,5 @@
+import { HARMONIZER_WEB_APP_URL } from "@core/constants";
+
+export function getShareUrl(configHash: string): string {
+  return `${HARMONIZER_WEB_APP_URL}/${configHash}`;
+}