@contentgrowth/content-widget 1.1.0

package/dist/widget/widget-js/utils/api-client.js

@@ -0,0 +1,154 @@
+/**
+ * Content Growth API Client
+ * Handles fetching articles from the widget API (requires API key)
+ */
+export class ContentGrowthAPI {
+  constructor(config) {
+    console.log('[ContentGrowthAPI] Constructor called with config:', config);
+    this.apiKey = config.apiKey;
+    this.baseUrl = config.baseUrl || 'https://api.content-growth.com';
+    this.cache = new Map();
+    this.cacheTTL = 5 * 60 * 1000; // 5 minutes
+    console.log('[ContentGrowthAPI] Initialized with baseUrl:', this.baseUrl, 'apiKey:', this.apiKey);
+  }
+
+  /**
+   * Fetch list of articles
+   */
+  async fetchArticles(options = {}) {
+    const { page = 1, limit = 12, tags = [] } = options;
+    console.log('[ContentGrowthAPI] fetchArticles called with options:', options);
+    
+    const params = new URLSearchParams({
+      page: page.toString(),
+      limit: limit.toString()
+    });
+
+    if (tags.length > 0) {
+      params.set('tag', tags.join(','));
+    }
+
+    const url = `${this.baseUrl}/widget/articles?${params}`;
+    const cacheKey = url;
+    console.log('[ContentGrowthAPI] Request URL:', url);
+
+    // Check cache
+    const cached = this.getFromCache(cacheKey);
+    if (cached) {
+      console.log('[ContentGrowthAPI] Returning cached data');
+      return cached;
+    }
+
+    try {
+      console.log('[ContentGrowthAPI] Making fetch request with headers:', {
+        'X-API-Key': this.apiKey
+      });
+      
+      const response = await fetch(url, {
+        headers: {
+          'X-API-Key': this.apiKey
+        }
+      });
+
+      console.log('[ContentGrowthAPI] Response status:', response.status, response.statusText);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('[ContentGrowthAPI] Error response body:', errorText);
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      console.log('[ContentGrowthAPI] Response data:', data);
+      
+      // Cache the result
+      this.setCache(cacheKey, data);
+      
+      return data;
+    } catch (error) {
+      console.error('[ContentGrowthAPI] Failed to fetch articles:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Fetch single article by UUID
+   */
+  async fetchArticle(uuid) {
+    const url = `${this.baseUrl}/widget/articles/${uuid}`;
+    const cacheKey = url;
+    console.log('[ContentGrowthAPI] fetchArticle called for uuid:', uuid);
+    console.log('[ContentGrowthAPI] Request URL:', url);
+
+    // Check cache
+    const cached = this.getFromCache(cacheKey);
+    if (cached) {
+      console.log('[ContentGrowthAPI] Returning cached article');
+      return cached;
+    }
+
+    try {
+      console.log('[ContentGrowthAPI] Making fetch request with headers:', {
+        'X-API-Key': this.apiKey
+      });
+      
+      const response = await fetch(url, {
+        headers: {
+          'X-API-Key': this.apiKey
+        }
+      });
+
+      console.log('[ContentGrowthAPI] Response status:', response.status, response.statusText);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error('[ContentGrowthAPI] Error response body:', errorText);
+        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+      }
+
+      const data = await response.json();
+      console.log('[ContentGrowthAPI] Response data:', data);
+      
+      // Cache the result
+      this.setCache(cacheKey, data);
+      
+      return data;
+    } catch (error) {
+      console.error('[ContentGrowthAPI] Failed to fetch article:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get from cache if not expired
+   */
+  getFromCache(key) {
+    const cached = this.cache.get(key);
+    if (!cached) return null;
+
+    const now = Date.now();
+    if (now - cached.timestamp > this.cacheTTL) {
+      this.cache.delete(key);
+      return null;
+    }
+
+    return cached.data;
+  }
+
+  /**
+   * Set cache with timestamp
+   */
+  setCache(key, data) {
+    this.cache.set(key, {
+      data,
+      timestamp: Date.now()
+    });
+  }
+
+  /**
+   * Clear all cache
+   */
+  clearCache() {
+    this.cache.clear();
+  }
+}

package/dist/widget/widget-js/utils/helpers.js

@@ -0,0 +1,71 @@
+/**
+ * Utility helper functions
+ */
+
+/**
+ * Format date to readable string
+ */
+export function formatDate(timestamp) {
+  const date = new Date(timestamp * 1000);
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric'
+  });
+}
+
+/**
+ * Calculate reading time from word count or content
+ * @param {number|string} wordCountOrContent - Word count (number) or content text (string)
+ * @returns {string} Reading time string (e.g., "5 min read")
+ */
+export function calculateReadingTime(wordCountOrContent) {
+  if (!wordCountOrContent) return 'Unknown';
+  
+  const wordsPerMinute = 200;
+  let words;
+  
+  // If it's a number, use it directly as word count
+  if (typeof wordCountOrContent === 'number') {
+    words = wordCountOrContent;
+    if (words === 0) return 'Unknown'; // No word count available
+  } else {
+    // Otherwise, calculate from content text (fallback)
+    words = wordCountOrContent.trim().split(/\s+/).filter(w => w.length > 0).length;
+  }
+  
+  const minutes = Math.ceil(words / wordsPerMinute);
+  return `${minutes} min read`;
+}
+
+/**
+ * Truncate text to specified length
+ */
+export function truncate(text, maxLength = 150) {
+  if (!text || text.length <= maxLength) return text;
+  return text.substring(0, maxLength).trim() + '...';
+}
+
+/**
+ * Escape HTML to prevent XSS
+ */
+export function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Debounce function calls
+ */
+export function debounce(func, wait) {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}

package/dist/widget/widget-js/widget.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Type declarations for ContentGrowthWidget
+ */
+
+export interface WidgetConfig {
+  apiKey: string;
+  baseUrl?: string;
+  layoutMode?: 'cards' | 'rows';
+  displayMode?: 'compact' | 'comfortable' | 'spacious';
+  theme?: 'light' | 'dark';
+  pageSize?: number;
+  tags?: string[];
+  category?: string;
+  viewerMode?: 'inline' | 'modal' | 'external';
+  mode?: 'list' | 'article-only';
+  uuid?: string;
+  slug?: string;
+  articleId?: string; // Legacy support for uuid
+}
+
+export class ContentGrowthWidget {
+  constructor(container: HTMLElement, config: WidgetConfig);
+  destroy(): void;
+}

package/dist/widget/widget-js/widget.js

@@ -0,0 +1,240 @@
+/**
+ * Content Growth Widget
+ * Main widget class that combines list and viewer
+ */
+import { ContentGrowthAPI } from './utils/api-client.js';
+import { ContentList } from './components/content-list.js';
+import { ContentViewer } from './components/content-viewer.js';
+
+export class ContentGrowthWidget {
+  constructor(container, config) {
+    console.log('[ContentGrowthWidget] Constructor called with config:', config);
+    
+    this.container = typeof container === 'string' 
+      ? document.querySelector(container)
+      : container;
+    
+    if (!this.container) {
+      throw new Error('Container not found');
+    }
+
+    this.config = {
+      apiKey: config.apiKey || config['api-key'],
+      baseUrl: config.baseUrl || 'https://api.content-growth.com',
+      tags: this.parseTags(config.tags),
+      theme: config.theme || 'light',
+      layoutMode: config.layoutMode || config['layout-mode'] || 'cards', // 'cards' or 'rows'
+      displayMode: config.displayMode || config['display-mode'] || 'comfortable',
+      viewerMode: config.viewerMode || config['viewer-mode'] || 'inline', // 'inline' | 'modal' | 'external'
+      externalUrlPattern: config.externalUrlPattern || config['external-url-pattern'] || '/article/{id}',
+      externalTarget: config.externalTarget || config['external-target'] || 'article-{id}', // Tab name with {id}
+      pageSize: config.pageSize || config['page-size'] || 12,
+      mode: config.mode || 'list', // 'list' or 'article-only'
+      articleId: config.articleId || config['article-id'] // Article ID for article-only mode
+    };
+
+    console.log('[ContentGrowthWidget] Final config:', this.config);
+
+    if (!this.config.apiKey) {
+      throw new Error('API key is required');
+    }
+
+    console.log('[ContentGrowthWidget] Creating API client with baseUrl:', this.config.baseUrl);
+    this.api = new ContentGrowthAPI({
+      apiKey: this.config.apiKey,
+      baseUrl: this.config.baseUrl
+    });
+
+    this.currentView = 'list'; // 'list' or 'viewer'
+    this.contentList = null;
+    this.contentViewer = null;
+
+    this.init();
+  }
+
+  /**
+   * Initialize the widget
+   */
+  init() {
+    console.log('[ContentGrowthWidget] Initializing widget...');
+    // Apply theme
+    this.container.classList.add('cg-widget');
+    this.container.setAttribute('data-theme', this.config.theme);
+
+    // Check if article-only mode
+    if (this.config.mode === 'article-only' && this.config.articleId) {
+      console.log('[ContentGrowthWidget] Article-only mode, loading article:', this.config.articleId);
+      this.showPostInline(this.config.articleId);
+    } else {
+      // Create views
+      this.showList();
+    }
+    console.log('[ContentGrowthWidget] Widget initialized');
+  }
+
+  /**
+   * Show the list view
+   */
+  showList() {
+    console.log('[ContentGrowthWidget] Showing list view...');
+    this.currentView = 'list';
+    this.container.innerHTML = '';
+
+    const listContainer = document.createElement('div');
+    listContainer.className = 'cg-list-view';
+    this.container.appendChild(listContainer);
+
+    console.log('[ContentGrowthWidget] Creating ContentList with options:', {
+      layoutMode: this.config.layoutMode,
+      displayMode: this.config.displayMode,
+      pageSize: this.config.pageSize,
+      tags: this.config.tags
+    });
+
+    this.contentList = new ContentList(listContainer, this.api, {
+      layoutMode: this.config.layoutMode,
+      displayMode: this.config.displayMode,
+      pageSize: this.config.pageSize,
+      tags: this.config.tags,
+      viewerMode: this.config.viewerMode,
+      externalUrlPattern: this.config.externalUrlPattern,
+      externalTarget: this.config.externalTarget,
+      onArticleClick: (article) => this.showPost(article.uuid)
+    });
+
+    this.contentList.init();
+  }
+
+  /**
+   * Show the content viewer
+   */
+  showPost(uuid) {
+    this.currentView = 'viewer';
+
+    if (this.config.viewerMode === 'modal') {
+      this.showPostModal(uuid);
+    } else {
+      this.showPostInline(uuid);
+    }
+  }
+
+  /**
+   * Show content inline (replaces list)
+   */
+  showPostInline(uuid) {
+    this.container.innerHTML = '';
+
+    const viewerContainer = document.createElement('div');
+    viewerContainer.className = 'cg-viewer-view';
+    this.container.appendChild(viewerContainer);
+
+    // In article-only mode, don't show back button (no list to go back to)
+    const showBackButton = this.config.mode !== 'article-only';
+
+    this.contentViewer = new ContentViewer(viewerContainer, this.api, {
+      displayMode: 'inline',
+      showBackButton: showBackButton,
+      onBack: showBackButton ? () => this.showList() : null
+    });
+
+    this.contentViewer.loadArticle(uuid);
+  }
+
+  /**
+   * Show content in modal
+   */
+  showPostModal(uuid) {
+    // Create modal
+    const modal = document.createElement('div');
+    modal.className = 'cg-modal';
+    // Apply theme to modal
+    if (this.config.theme) {
+      modal.setAttribute('data-theme', this.config.theme);
+    }
+    modal.innerHTML = `
+      <div class="cg-modal-overlay"></div>
+      <div class="cg-modal-content">
+        <button class="cg-modal-close" aria-label="Close">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+        </button>
+        <div class="cg-modal-body"></div>
+      </div>
+    `;
+
+    document.body.appendChild(modal);
+
+    // Prevent body scroll
+    document.body.style.overflow = 'hidden';
+
+    // Load content
+    const modalBody = modal.querySelector('.cg-modal-body');
+    this.contentViewer = new ContentViewer(modalBody, this.api, {
+      displayMode: 'modal',
+      onBack: () => this.closeModal(modal)
+    });
+
+    this.contentViewer.loadArticle(uuid);
+
+    // Close handlers
+    const closeBtn = modal.querySelector('.cg-modal-close');
+    const overlay = modal.querySelector('.cg-modal-overlay');
+
+    const closeModal = () => this.closeModal(modal);
+    closeBtn.addEventListener('click', closeModal);
+    overlay.addEventListener('click', closeModal);
+
+    // ESC key
+    const handleEsc = (e) => {
+      if (e.key === 'Escape') {
+        closeModal();
+        document.removeEventListener('keydown', handleEsc);
+      }
+    };
+    document.addEventListener('keydown', handleEsc);
+
+    // Fade in
+    requestAnimationFrame(() => {
+      modal.classList.add('cg-modal--active');
+    });
+  }
+
+  /**
+   * Close modal
+   */
+  closeModal(modal) {
+    modal.classList.remove('cg-modal--active');
+    
+    setTimeout(() => {
+      modal.remove();
+      document.body.style.overflow = '';
+    }, 300); // Match CSS transition duration
+  }
+
+  /**
+   * Parse tags from string or array
+   */
+  parseTags(tags) {
+    if (!tags) return [];
+    if (Array.isArray(tags)) return tags;
+    return tags.split(',').map(t => t.trim()).filter(Boolean);
+  }
+
+  /**
+   * Update configuration
+   */
+  updateConfig(newConfig) {
+    Object.assign(this.config, newConfig);
+    this.init();
+  }
+
+  /**
+   * Destroy the widget
+   */
+  destroy() {
+    this.container.innerHTML = '';
+    this.container.classList.remove('cg-widget');
+    this.container.removeAttribute('data-theme');
+  }
+}

package/dist/widget/widget.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Type declarations for ContentGrowthWidget
+ */
+
+export interface WidgetConfig {
+  apiKey: string;
+  baseUrl?: string;
+  layoutMode?: 'cards' | 'rows';
+  displayMode?: 'compact' | 'comfortable' | 'spacious';
+  theme?: 'light' | 'dark';
+  pageSize?: number;
+  tags?: string[];
+  category?: string;
+  viewerMode?: 'inline' | 'modal' | 'external';
+  mode?: 'list' | 'article-only';
+  uuid?: string;
+  slug?: string;
+  articleId?: string; // Legacy support for uuid
+}
+
+export class ContentGrowthWidget {
+  constructor(container: HTMLElement, config: WidgetConfig);
+  destroy(): void;
+}