@linktr.ee/linkapp 0.0.20 → 0.0.22

package/dev-server/classic/main.tsx

@@ -11,39 +11,323 @@ const Layout = Object.values(layoutModules)[0]?.default as
   | React.ComponentType<{ children: React.ReactNode; theme?: any }>
   | undefined;
 
+// Declare global window property for theme application
+declare global {
+  interface Window {
+    __linkapp_applyTheme?: (variables: Record<string, string>) => void
+  }
+}
+
 // Preview props injected by dev server via Vite define
 declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
-const previewProps = __PREVIEW_PROPS__ || {
-  linkUrl: "https://example.com/demo",
-  theme: {
-    cssVariables: {
-      "--button-style-text": "#000000",
-      "--button-style-background": "#ffffff",
-      "--button-style-inner-radius": "12px",
-      "--button-style-border-color": "#e5e7eb",
-      "--button-style-background-hover": "#f3f4f6",
-      "--button-style-contrast-color": "#ffffff",
-      "--profileBackground": "#ffffff",
-    },
-    // Legacy properties (deprecated)
-    textColor: "#000000",
-    backgroundColor: "#ffffff",
-    borderRadius: "12px",
-    borderColor: "#e5e7eb",
-    backgroundHover: "#f3f4f6",
-    contrastColor: "#ffffff",
-    textHoverColor: "#111827",
+// Theme presets matching Preview.tsx
+const THEME_PRESETS: Record<string, Record<string, string>> = {
+  default: {
+    "--button-style-text": "#000000",
+    "--button-style-background": "#ffffff",
+    "--button-style-background-hover": "color-mix(in srgb, #ffffff 93%, #000000 7%)",
+    "--button-style-border": "none",
+    "--button-style-border-color": "transparent",
+    "--button-style-shadow": "none",
+    "--button-style-shadow-color": "#000000",
+    "--button-style-contrast-color": "#000000",
+    "--button-style-radius": "8px",
+    "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
+    "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
+    "--link-gap": "14px",
+    "--link-inner-padding": "7px",
+    "--link-preview-thumbnail-width": "160px",
+    "--linkRadius": "8px",
+    "--profile-container-desktop-width": "580px",
+    "--profileBackground": "#eceef1",
+    "--background-contrast-color": "#000000",
+    "--bodyText": "#000000",
+    "--profileTitleText": "#000000",
+    "--profileDescriptionText": "#000000",
+    "--defaultAvatarBackground": "#000000",
+    "--defaultAvatarText": "#ffffff",
+    "--socialLinkFill": "#000000",
+    "--linkBackground": "#ffffff",
+    "--linkText": "#000000",
+    "--linkHoverBackground": "color-mix(in srgb, #ffffff 93%, #000000 7%)",
+    "--linkHoverText": "#000000",
+    "--linkShadow": "#000000",
+    "--bannerBackground": "#ffffff",
+    "--bannerText": "#000000",
+    "--desktop-frame-color": "color-mix(in srgb, #eceef1 88%, black 12%)",
+    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontWeightNormal": "500",
+    "--profileFontWeightBold": "700",
+    "--profileDescriptionFontWeight": "500",
+    "--linkTextFontWeight": "500",
+    "--headerFontWeight": "700",
+    "--header-font-weight": "600",
+    "--embedLinkTextFontWeight": "500",
+    "--signupSubmitTextFontWeight": "700",
+    "--bannerFontWeight": "700",
+    "--headerFontSize": "normal",
+    "--header-bio-font-size": "16px",
+    "--embedLinkTextFontSize": "14px",
+    "--signupSubmitTextFontSize": "14px",
+    "--linkHeaderFontSize": "14px",
+    "--bannerFontSize": "14px",
+    "--profileDescriptionLineHeight": "1.5",
+    "--headerLineHeight": "1.5",
+    "--header-text-color": "#000000",
+  },
+  dark: {
+    "--button-style-text": "#ffffff",
+    "--button-style-background": "#1f2937",
+    "--button-style-background-hover": "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
+    "--button-style-border": "none",
+    "--button-style-border-color": "transparent",
+    "--button-style-shadow": "none",
+    "--button-style-shadow-color": "#000000",
+    "--button-style-contrast-color": "#ffffff",
+    "--button-style-radius": "8px",
+    "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
+    "--button-style-skeleton-color": "rgba(255, 255, 255, 0.1)",
+    "--link-gap": "14px",
+    "--link-inner-padding": "7px",
+    "--link-preview-thumbnail-width": "160px",
+    "--linkRadius": "8px",
+    "--profile-container-desktop-width": "580px",
+    "--profileBackground": "#111827",
+    "--background-contrast-color": "#ffffff",
+    "--bodyText": "#ffffff",
+    "--profileTitleText": "#ffffff",
+    "--profileDescriptionText": "#ffffff",
+    "--defaultAvatarBackground": "#ffffff",
+    "--defaultAvatarText": "#000000",
+    "--socialLinkFill": "#ffffff",
+    "--linkBackground": "#1f2937",
+    "--linkText": "#ffffff",
+    "--linkHoverBackground": "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
+    "--linkHoverText": "#ffffff",
+    "--linkShadow": "#000000",
+    "--bannerBackground": "#1f2937",
+    "--bannerText": "#ffffff",
+    "--desktop-frame-color": "color-mix(in srgb, #111827 88%, white 12%)",
+    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontWeightNormal": "500",
+    "--profileFontWeightBold": "700",
+    "--profileDescriptionFontWeight": "500",
+    "--linkTextFontWeight": "500",
+    "--headerFontWeight": "700",
+    "--header-font-weight": "600",
+    "--embedLinkTextFontWeight": "500",
+    "--signupSubmitTextFontWeight": "700",
+    "--bannerFontWeight": "700",
+    "--headerFontSize": "normal",
+    "--header-bio-font-size": "16px",
+    "--embedLinkTextFontSize": "14px",
+    "--signupSubmitTextFontSize": "14px",
+    "--linkHeaderFontSize": "14px",
+    "--bannerFontSize": "14px",
+    "--profileDescriptionLineHeight": "1.5",
+    "--headerLineHeight": "1.5",
+    "--header-text-color": "#ffffff",
+  },
+  purple: {
+    "--button-style-text": "#ffffff",
+    "--button-style-background": "#7c3aed",
+    "--button-style-background-hover": "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
+    "--button-style-border": "none",
+    "--button-style-border-color": "transparent",
+    "--button-style-shadow": "none",
+    "--button-style-shadow-color": "#000000",
+    "--button-style-contrast-color": "#ede9fe",
+    "--button-style-radius": "16px",
+    "--button-style-inner-radius": "min(16px, max(4px, calc(16px - 8px)))",
+    "--button-style-skeleton-color": "rgba(124, 58, 237, 0.1)",
+    "--link-gap": "14px",
+    "--link-inner-padding": "7px",
+    "--link-preview-thumbnail-width": "160px",
+    "--linkRadius": "16px",
+    "--profile-container-desktop-width": "580px",
+    "--profileBackground": "#faf5ff",
+    "--background-contrast-color": "#1f2937",
+    "--bodyText": "#1f2937",
+    "--profileTitleText": "#1f2937",
+    "--profileDescriptionText": "#1f2937",
+    "--defaultAvatarBackground": "#7c3aed",
+    "--defaultAvatarText": "#ffffff",
+    "--socialLinkFill": "#1f2937",
+    "--linkBackground": "#7c3aed",
+    "--linkText": "#ffffff",
+    "--linkHoverBackground": "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
+    "--linkHoverText": "#ffffff",
+    "--linkShadow": "#7c3aed",
+    "--bannerBackground": "#7c3aed",
+    "--bannerText": "#ffffff",
+    "--desktop-frame-color": "color-mix(in srgb, #faf5ff 88%, black 12%)",
+    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontWeightNormal": "500",
+    "--profileFontWeightBold": "700",
+    "--profileDescriptionFontWeight": "500",
+    "--linkTextFontWeight": "500",
+    "--headerFontWeight": "700",
+    "--header-font-weight": "600",
+    "--embedLinkTextFontWeight": "500",
+    "--signupSubmitTextFontWeight": "700",
+    "--bannerFontWeight": "700",
+    "--headerFontSize": "normal",
+    "--header-bio-font-size": "16px",
+    "--embedLinkTextFontSize": "14px",
+    "--signupSubmitTextFontSize": "14px",
+    "--linkHeaderFontSize": "14px",
+    "--bannerFontSize": "14px",
+    "--profileDescriptionLineHeight": "1.5",
+    "--headerLineHeight": "1.5",
+    "--header-text-color": "#1f2937",
+  },
+  outline: {
+    "--button-style-text": "#000000",
+    "--button-style-background": "transparent",
+    "--button-style-background-hover": "rgba(0, 0, 0, 0.05)",
+    "--button-style-border": "2px solid currentColor",
+    "--button-style-border-color": "#000000",
+    "--button-style-shadow": "none",
+    "--button-style-shadow-color": "#000000",
+    "--button-style-contrast-color": "#ffffff",
+    "--button-style-radius": "24px",
+    "--button-style-inner-radius": "min(24px, max(4px, calc(24px - 8px)))",
+    "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
+    "--link-gap": "14px",
+    "--link-inner-padding": "7px",
+    "--link-preview-thumbnail-width": "160px",
+    "--linkRadius": "24px",
+    "--profile-container-desktop-width": "580px",
+    "--profileBackground": "#ffffff",
+    "--background-contrast-color": "#000000",
+    "--bodyText": "#000000",
+    "--profileTitleText": "#000000",
+    "--profileDescriptionText": "#000000",
+    "--defaultAvatarBackground": "#000000",
+    "--defaultAvatarText": "#ffffff",
+    "--socialLinkFill": "#000000",
+    "--linkBackground": "transparent",
+    "--linkText": "#000000",
+    "--linkHoverBackground": "rgba(0, 0, 0, 0.05)",
+    "--linkHoverText": "#000000",
+    "--linkShadow": "#000000",
+    "--bannerBackground": "#ffffff",
+    "--bannerText": "#000000",
+    "--desktop-frame-color": "color-mix(in srgb, #ffffff 88%, black 12%)",
+    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontWeightNormal": "500",
+    "--profileFontWeightBold": "700",
+    "--profileDescriptionFontWeight": "500",
+    "--linkTextFontWeight": "500",
+    "--headerFontWeight": "700",
+    "--header-font-weight": "600",
+    "--embedLinkTextFontWeight": "500",
+    "--signupSubmitTextFontWeight": "700",
+    "--bannerFontWeight": "700",
+    "--headerFontSize": "normal",
+    "--header-bio-font-size": "16px",
+    "--embedLinkTextFontSize": "14px",
+    "--signupSubmitTextFontSize": "14px",
+    "--linkHeaderFontSize": "14px",
+    "--bannerFontSize": "14px",
+    "--profileDescriptionLineHeight": "1.5",
+    "--headerLineHeight": "1.5",
+    "--header-text-color": "#000000",
+  },
+  rounded: {
+    "--button-style-text": "#ffffff",
+    "--button-style-background": "#059669",
+    "--button-style-background-hover": "color-mix(in srgb, #059669 93%, #ffffff 7%)",
+    "--button-style-border": "none",
+    "--button-style-border-color": "transparent",
+    "--button-style-shadow": "none",
+    "--button-style-shadow-color": "#000000",
+    "--button-style-contrast-color": "#d1fae5",
+    "--button-style-radius": "28px",
+    "--button-style-inner-radius": "28px",
+    "--button-style-skeleton-color": "rgba(5, 150, 105, 0.1)",
+    "--link-gap": "14px",
+    "--link-inner-padding": "7px",
+    "--link-preview-thumbnail-width": "160px",
+    "--linkRadius": "28px",
+    "--profile-container-desktop-width": "580px",
+    "--profileBackground": "#ecfdf5",
+    "--background-contrast-color": "#1f2937",
+    "--bodyText": "#1f2937",
+    "--profileTitleText": "#1f2937",
+    "--profileDescriptionText": "#1f2937",
+    "--defaultAvatarBackground": "#059669",
+    "--defaultAvatarText": "#ffffff",
+    "--socialLinkFill": "#1f2937",
+    "--linkBackground": "#059669",
+    "--linkText": "#ffffff",
+    "--linkHoverBackground": "color-mix(in srgb, #059669 93%, #ffffff 7%)",
+    "--linkHoverText": "#ffffff",
+    "--linkShadow": "#059669",
+    "--bannerBackground": "#059669",
+    "--bannerText": "#ffffff",
+    "--desktop-frame-color": "color-mix(in srgb, #ecfdf5 88%, black 12%)",
+    "--profileFontFamilyPrimary": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontFamilySecondary": 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--header-font-family": 'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    "--profileFontWeightNormal": "500",
+    "--profileFontWeightBold": "700",
+    "--profileDescriptionFontWeight": "500",
+    "--linkTextFontWeight": "500",
+    "--headerFontWeight": "700",
+    "--header-font-weight": "600",
+    "--embedLinkTextFontWeight": "500",
+    "--signupSubmitTextFontWeight": "700",
+    "--bannerFontWeight": "700",
+    "--headerFontSize": "normal",
+    "--header-bio-font-size": "16px",
+    "--embedLinkTextFontSize": "14px",
+    "--signupSubmitTextFontSize": "14px",
+    "--linkHeaderFontSize": "14px",
+    "--bannerFontSize": "14px",
+    "--profileDescriptionLineHeight": "1.5",
+    "--headerLineHeight": "1.5",
+    "--header-text-color": "#1f2937",
   },
-  locale: "en-US",
-  currency: "USD",
-  username: "demo-user",
-  viewport: {
-    width: 680,
-    height: 800,
+};
+
+// Get theme from URL parameter
+const params = new URLSearchParams(window.location.search);
+const themeParam = params.get('theme') || 'default';
+const themeVariables = THEME_PRESETS[themeParam] || THEME_PRESETS.default;
+
+const previewProps = __PREVIEW_PROPS__ || {};
+
+// Merge theme from URL with preview props
+const mergedProps = {
+  ...previewProps,
+  theme: {
+    cssVariables: themeVariables,
+    // Legacy properties (deprecated) - derived from cssVariables
+    textColor: themeVariables["--button-style-text"] || "#000000",
+    backgroundColor: themeVariables["--button-style-background"] || "#ffffff",
+    borderRadius: themeVariables["--button-style-inner-radius"] || "12px",
+    borderColor: themeVariables["--button-style-border-color"] || "#e5e7eb",
+    backgroundHover: themeVariables["--button-style-background-hover"] || "#f3f4f6",
+    contrastColor: themeVariables["--button-style-contrast-color"] || "#ffffff",
+    textHoverColor: themeVariables["--linkHoverText"] || "#111827",
   },
 };
 
+// Apply theme CSS variables on mount
+if (themeVariables && window.__linkapp_applyTheme) {
+  window.__linkapp_applyTheme(themeVariables);
+}
+
 const rootElement = document.getElementById("root");
 if (!rootElement) {
   throw new Error("Root element not found");
@@ -52,11 +336,11 @@ if (!rootElement) {
 createRoot(rootElement).render(
   <StrictMode>
     {Layout ? (
-      <Layout theme={previewProps.theme}>
-        <Classic {...previewProps} />
+      <Layout theme={mergedProps.theme}>
+        <Classic {...mergedProps} />
       </Layout>
     ) : (
-      <Classic {...previewProps} />
+      <Classic {...mergedProps} />
     )}
   </StrictMode>,
 );

package/dev-server/classic.html

@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Classic - LinkApp</title>
 
+    <!-- iframe-resizer: Required for iframe height auto-adjustment -->
+    <script crossorigin src="https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.contentWindow.js"></script>
+
     <!-- Linktree theme variables will be injected here -->
     <style id="linktree-theme"></style>
 
@@ -21,46 +24,29 @@
       }
 
       /**
-       * Listen for theme updates from parent window
-       * Applies CSS variables to the document root
+       * Apply theme CSS variables to :root
+       * Called once on mount from main.tsx
+       * @param {Record<string, string>} variables - CSS variables to apply
        */
-      window.addEventListener('message', function(event) {
-        // Only process messages with the correct structure
-        if (
-          event.data &&
-          typeof event.data === 'object' &&
-          event.data.type === 'THEME_UPDATE'
-        ) {
-          const themeUpdate = event.data
-
-          // Get the style element where theme variables are injected
-          const themeStyle = document.getElementById('linktree-theme')
+      function applyTheme(variables) {
+        if (!variables || typeof variables !== 'object') {
+          return
+        }
 
-          if (!themeStyle) {
-            console.warn('linktree-theme style element not found')
-            return
-          }
+        // Get the style element where theme variables are injected
+        const themeStyle = document.getElementById('linktree-theme')
 
-          // Inject CSS variables into :root
-          themeStyle.textContent = ':root { ' + renderCssVariables(themeUpdate.payload.variables) + ' }'
+        if (!themeStyle) {
+          console.warn('linktree-theme style element not found')
+          return
+        }
 
-          // Remove any existing theme classes
-          const classesToRemove = []
-          document.documentElement.classList.forEach((className) => {
-            if (className.startsWith('linktree-theme-')) {
-              classesToRemove.push(className)
-            }
-          })
-          classesToRemove.forEach((className) => {
-            document.documentElement.classList.remove(className)
-          })
+        // Inject CSS variables into :root
+        themeStyle.textContent = ':root { ' + renderCssVariables(variables) + ' }'
+      }
 
-          // Add theme class for additional styling hooks
-          if (themeUpdate.payload.name && themeUpdate.payload.name !== 'legacy') {
-            document.documentElement.classList.add('linktree-theme-' + themeUpdate.payload.name)
-          }
-        }
-      }, false)
+      // Export applyTheme to be used by main.tsx
+      window.__linkapp_applyTheme = applyTheme
     </script>
   </head>
   <body>