cf-elements 1.0.1 → 1.0.3

package/README.md

@@ -1,6 +1,8 @@
 # cf-elements
 
-Zero-dependency Web Components library that generates ClickFunnels compatible HTML with inline styles.
+Zero-dependency markup library that renders ClickFunnels-style HTML with inline styles.
+
+It is intended use is for building "ClickFunnels mockups" in LLMs like Claude/ChatGPT/etc, which then can be converted to ClickFunnels ready JSON via the `cf-pagetree-parser` package.
 
 ## Installation
 

package/cf-elements.js

@@ -70,6 +70,145 @@
     }
   })();
 
+  // ==========================================================================
+  // BACKGROUND STYLES - Inject CSS for background image classes
+  // ==========================================================================
+
+  // Inject background styles immediately
+  (function injectBgStyles() {
+    const style = document.createElement('style');
+    style.id = 'cf-bg-styles';
+    style.textContent = `
+      /* Background style classes - matches ClickFunnels options */
+      .bgCover { background-size: cover !important; background-repeat: no-repeat !important; }
+      .bgCoverCenter { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }
+      .bgCoverV2 { background-attachment: fixed !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }
+      .bgW100 { background-size: 100% auto !important; background-repeat: no-repeat !important; }
+      .bgW100H100 { background-size: 100% 100% !important; background-repeat: no-repeat !important; }
+      .bgNoRepeat { background-repeat: no-repeat !important; }
+      .bgRepeat { background-repeat: repeat !important; }
+      .bgRepeatX { background-repeat: repeat-x !important; }
+      .bgRepeatY { background-repeat: repeat-y !important; }
+    `;
+    if (document.head) {
+      document.head.appendChild(style);
+    } else {
+      document.addEventListener('DOMContentLoaded', () => {
+        document.head.appendChild(style);
+      });
+    }
+  })();
+
+  // ==========================================================================
+  // GOOGLE FONTS - Auto-load fonts from font attributes
+  // ==========================================================================
+
+  // System fonts that don't need to be loaded from Google
+  const SYSTEM_FONTS = new Set([
+    'sans-serif', 'serif', 'monospace', 'cursive', 'fantasy', 'system-ui',
+    'ui-sans-serif', 'ui-serif', 'ui-monospace', 'ui-rounded',
+    'arial', 'helvetica', 'times new roman', 'times', 'courier new', 'courier',
+    'verdana', 'georgia', 'palatino', 'garamond', 'bookman', 'tahoma',
+    'trebuchet ms', 'arial black', 'impact', 'comic sans ms', 'inherit'
+  ]);
+
+  // Track which fonts have been loaded to avoid duplicates
+  const loadedFonts = new Set();
+
+  /**
+   * Extract Google Font names from the document
+   * Scans font attributes on cf-* elements and styleguide data
+   */
+  function extractFontsFromDocument() {
+    const fonts = new Set();
+
+    // 1. Extract from font attributes on elements
+    document.querySelectorAll('[font]').forEach(el => {
+      const font = el.getAttribute('font');
+      if (font) {
+        // Clean and add font name
+        const cleanFont = font.replace(/["']/g, '').split(',')[0].trim();
+        if (cleanFont && !SYSTEM_FONTS.has(cleanFont.toLowerCase())) {
+          fonts.add(cleanFont);
+        }
+      }
+    });
+
+    // 2. Extract from styleguide data if present
+    const styleguideEl = document.getElementById('cf-styleguide-data');
+    if (styleguideEl) {
+      try {
+        const data = JSON.parse(styleguideEl.textContent);
+        if (data.typography) {
+          const { headlineFont, subheadlineFont, contentFont } = data.typography;
+          [headlineFont, subheadlineFont, contentFont].forEach(font => {
+            if (font && !SYSTEM_FONTS.has(font.toLowerCase())) {
+              fonts.add(font);
+            }
+          });
+        }
+      } catch (e) {
+        // Ignore parse errors
+      }
+    }
+
+    // 3. Extract from inline font-family styles in cf-* elements
+    document.querySelectorAll('cf-headline, cf-subheadline, cf-paragraph, cf-button').forEach(el => {
+      const style = el.getAttribute('style') || '';
+      const match = style.match(/font-family:\s*["']?([^"';,]+)/i);
+      if (match) {
+        const font = match[1].trim();
+        if (font && !SYSTEM_FONTS.has(font.toLowerCase())) {
+          fonts.add(font);
+        }
+      }
+    });
+
+    return fonts;
+  }
+
+  /**
+   * Inject Google Fonts stylesheet into document head
+   */
+  function injectGoogleFonts(fonts) {
+    if (!fonts || fonts.size === 0) return;
+
+    // Filter out already loaded fonts
+    const newFonts = Array.from(fonts).filter(f => !loadedFonts.has(f));
+    if (newFonts.length === 0) return;
+
+    // Mark as loaded
+    newFonts.forEach(f => loadedFonts.add(f));
+
+    // Build Google Fonts URL
+    const fontParams = newFonts
+      .map(font => font.replace(/ /g, '+'))
+      .join('&family=');
+
+    const url = `https://fonts.googleapis.com/css2?family=${fontParams}:wght@300;400;500;600;700;800;900&display=swap`;
+
+    // Check if already loaded
+    if (document.querySelector(`link[href^="https://fonts.googleapis.com"][href*="${newFonts[0].replace(/ /g, '+')}"]`)) {
+      return;
+    }
+
+    // Inject link tag
+    const link = document.createElement('link');
+    link.id = 'cf-google-fonts';
+    link.rel = 'stylesheet';
+    link.href = url;
+    document.head.appendChild(link);
+  }
+
+  /**
+   * Auto-load Google Fonts from document
+   * Called before element rendering
+   */
+  function loadGoogleFonts() {
+    const fonts = extractFontsFromDocument();
+    injectGoogleFonts(fonts);
+  }
+
   // ==========================================================================
   // CONSTANTS & MAPPINGS
   // ==========================================================================
@@ -4559,6 +4698,7 @@
   // Auto-initialize when DOM is ready
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", () => {
+      loadGoogleFonts();  // Load fonts before rendering
       styleguideManager.init();
       brandAssetsManager.init();
       initFunnelWind();
@@ -4571,6 +4711,7 @@
   } else {
     // DOM already ready, use requestAnimationFrame to ensure all elements are parsed
     requestAnimationFrame(() => {
+      loadGoogleFonts();  // Load fonts before rendering
       styleguideManager.init();
       brandAssetsManager.init();
       initFunnelWind();
@@ -4587,12 +4728,14 @@
     init: initFunnelWind,
     initAnimations: initAnimations,
     loadAnimateCSS: loadAnimateCSS,
+    loadGoogleFonts: loadGoogleFonts,
     initVideoBackgrounds: initVideoBackgrounds,
     elements: elements,
     StyleguideManager: styleguideManager,
     BrandAssetsManager: brandAssetsManager,
     initStyleguide: (data) => {
       styleguideManager.init(data);
+      loadGoogleFonts();  // Load fonts from styleguide
       initFunnelWind();
     },
     initBrandAssets: (data) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cf-elements",
-  "version": "1.0.1",
-  "description": "Zero-dependency Web Components library that generates ClickFunnels compatible HTML with inline styles",
+  "version": "1.0.3",
+  "description": "Zero-dependency markup library that generates ClickFunnels compatible HTML with inline styles",
   "main": "cf-elements.js",
   "browser": "cf-elements.js",
   "unpkg": "cf-elements.js",
@@ -14,12 +14,9 @@
     "test": "echo \"No tests yet\""
   },
   "keywords": [
-    "web-components",
     "clickfunnels",
     "funnelwind",
-    "landing-pages",
-    "no-code",
-    "inline-styles"
+    "landing-pages"
   ],
   "author": "BarnumPT",
   "license": "MIT",

package/bg-styles.css

@@ -1,63 +0,0 @@
-/**
- * ============================================================================
- * FUNNELWIND - Background Style Classes
- * ============================================================================
- *
- * These classes match ClickFunnels background image styling options.
- * Apply via bg-style attribute on cf-* components.
- *
- * ============================================================================
- */
-
-/* Cover - fills container, may crop */
-.bgCover {
-  background-size: cover !important;
-  background-repeat: no-repeat !important;
-}
-
-/* Cover + Centered (default) */
-.bgCoverCenter {
-  background-size: cover !important;
-  background-position: center center !important;
-  background-repeat: no-repeat !important;
-}
-
-/* Parallax - fixed background attachment */
-.bgCoverV2 {
-  background-attachment: fixed !important;
-  background-size: cover !important;
-  background-position: center center !important;
-  background-repeat: no-repeat !important;
-}
-
-/* 100% width, auto height */
-.bgW100 {
-  background-size: 100% auto !important;
-  background-repeat: no-repeat !important;
-}
-
-/* 100% width and height (stretch) */
-.bgW100H100 {
-  background-size: 100% 100% !important;
-  background-repeat: no-repeat !important;
-}
-
-/* No repeat - original size */
-.bgNoRepeat {
-  background-repeat: no-repeat !important;
-}
-
-/* Repeat/tile in both directions */
-.bgRepeat {
-  background-repeat: repeat !important;
-}
-
-/* Repeat horizontally only */
-.bgRepeatX {
-  background-repeat: repeat-x !important;
-}
-
-/* Repeat vertically only */
-.bgRepeatY {
-  background-repeat: repeat-y !important;
-}