@linktr.ee/linkapp 0.0.10 → 0.0.11

package/dev-server/classic/main.tsx

@@ -1,41 +1,62 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Layout from '@/app/layout'
-import Classic from '@/app/classic'
-import '@/app/globals.css'
+import Classic from "@/app/classic";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@/app/globals.css";
+
+// Conditionally import Layout if it exists
+const layoutModules = import.meta.glob("@/app/layout.{ts,tsx}", {
+  eager: true,
+});
+const Layout = Object.values(layoutModules)[0]?.default as
+  | React.ComponentType<{ children: React.ReactNode; theme?: any }>
+  | undefined;
 
 // Preview props injected by dev server via Vite define
-declare const __PREVIEW_PROPS__: Record<string, unknown>
+declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
 const previewProps = __PREVIEW_PROPS__ || {
-  linkUrl: 'https://example.com/demo',
+  linkUrl: "https://example.com/demo",
   theme: {
-    textColor: '#000000',
-    backgroundColor: '#ffffff',
-    borderRadius: '12px',
-    borderColor: '#e5e7eb',
-    isOutlineStyle: false,
-    contrastColor: '#ffffff',
-    textHoverColor: '#111827',
+    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",
   },
-  locale: 'en-US',
-  currency: 'USD',
-  username: 'demo-user',
+  locale: "en-US",
+  currency: "USD",
+  username: "demo-user",
   viewport: {
     width: 680,
     height: 800,
   },
-}
+};
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById("root");
 if (!rootElement) {
-  throw new Error('Root element not found')
+  throw new Error("Root element not found");
 }
 
 createRoot(rootElement).render(
   <StrictMode>
-    <Layout>
+    {Layout ? (
+      <Layout theme={previewProps.theme}>
+        <Classic {...previewProps} />
+      </Layout>
+    ) : (
       <Classic {...previewProps} />
-    </Layout>
-  </StrictMode>
-)
+    )}
+  </StrictMode>,
+);

package/dev-server/classic.html

@@ -4,6 +4,64 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Classic - LinkApp</title>
+
+    <!-- Linktree theme variables will be injected here -->
+    <style id="linktree-theme"></style>
+
+    <script>
+      /**
+       * Helper function to convert CSS variables object to CSS string
+       * @param {Record<string, string>} vars - Object with CSS variable names as keys
+       * @returns {string} CSS string like "--var1: value1; --var2: value2;"
+       */
+      function renderCssVariables(vars) {
+        return Object.entries(vars)
+          .map((entry) => entry.join(': '))
+          .join('; ') + ';'
+      }
+
+      /**
+       * Listen for theme updates from parent window
+       * Applies CSS variables to the document root
+       */
+      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')
+
+          if (!themeStyle) {
+            console.warn('linktree-theme style element not found')
+            return
+          }
+
+          // Inject CSS variables into :root
+          themeStyle.textContent = ':root { ' + renderCssVariables(themeUpdate.payload.variables) + ' }'
+
+          // 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)
+          })
+
+          // 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)
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/dev-server/featured/main.tsx

@@ -1,41 +1,62 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import Layout from '@/app/layout'
-import Featured from '@/app/featured'
-import '@/app/globals.css'
+import Featured from "@/app/featured";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "@/app/globals.css";
+
+// Conditionally import Layout if it exists
+const layoutModules = import.meta.glob("@/app/layout.{ts,tsx}", {
+  eager: true,
+});
+const Layout = Object.values(layoutModules)[0]?.default as
+  | React.ComponentType<{ children: React.ReactNode; theme?: any }>
+  | undefined;
 
 // Preview props injected by dev server via Vite define
-declare const __PREVIEW_PROPS__: Record<string, unknown>
+declare const __PREVIEW_PROPS__: Record<string, unknown>;
 
 const previewProps = __PREVIEW_PROPS__ || {
-  linkUrl: 'https://example.com/demo',
+  linkUrl: "https://example.com/demo",
   theme: {
-    textColor: '#000000',
-    backgroundColor: '#ffffff',
-    borderRadius: '12px',
-    borderColor: '#e5e7eb',
-    isOutlineStyle: false,
-    contrastColor: '#ffffff',
-    textHoverColor: '#111827',
+    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",
   },
-  locale: 'en-US',
-  currency: 'USD',
-  username: 'demo-user',
+  locale: "en-US",
+  currency: "USD",
+  username: "demo-user",
   viewport: {
     width: 680,
     height: 800,
   },
-}
+};
 
-const rootElement = document.getElementById('root')
+const rootElement = document.getElementById("root");
 if (!rootElement) {
-  throw new Error('Root element not found')
+  throw new Error("Root element not found");
 }
 
 createRoot(rootElement).render(
   <StrictMode>
-    <Layout>
+    {Layout ? (
+      <Layout theme={previewProps.theme}>
+        <Featured {...previewProps} />
+      </Layout>
+    ) : (
       <Featured {...previewProps} />
-    </Layout>
-  </StrictMode>
-)
+    )}
+  </StrictMode>,
+);

package/dev-server/featured.html

@@ -4,6 +4,64 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Featured - LinkApp</title>
+
+    <!-- Linktree theme variables will be injected here -->
+    <style id="linktree-theme"></style>
+
+    <script>
+      /**
+       * Helper function to convert CSS variables object to CSS string
+       * @param {Record<string, string>} vars - Object with CSS variable names as keys
+       * @returns {string} CSS string like "--var1: value1; --var2: value2;"
+       */
+      function renderCssVariables(vars) {
+        return Object.entries(vars)
+          .map((entry) => entry.join(': '))
+          .join('; ') + ';'
+      }
+
+      /**
+       * Listen for theme updates from parent window
+       * Applies CSS variables to the document root
+       */
+      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')
+
+          if (!themeStyle) {
+            console.warn('linktree-theme style element not found')
+            return
+          }
+
+          // Inject CSS variables into :root
+          themeStyle.textContent = ':root { ' + renderCssVariables(themeUpdate.payload.variables) + ' }'
+
+          // 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)
+          })
+
+          // 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)
+    </script>
   </head>
   <body>
     <div id="root"></div>