@contentgrowth/content-widget 1.1.0 → 1.1.2

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

@@ -1,154 +0,0 @@
-/**
- * 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/utils/helpers.js

@@ -1,71 +0,0 @@
-/**
- * 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/content-card.js

@@ -1,190 +0,0 @@
-/**
- * Content Card Component
- * Displays a single content item in compact or expanded mode
- */
-import { formatDate, calculateReadingTime, escapeHtml } from '../utils/helpers.js';
-
-export class ContentCard {
-  constructor(article, options = {}) {
-    this.article = article;
-    this.displayMode = options.displayMode || 'compact';
-    this.viewerMode = options.viewerMode || 'inline';
-    this.externalUrlPattern = options.externalUrlPattern || '/article/{id}';
-    this.externalTarget = options.externalTarget || 'article-{id}';
-    this.onExpand = options.onExpand || null;
-    this.onClick = options.onClick || null;
-  }
-
-  /**
-   * Render the content card
-   */
-  render() {
-    // Map display modes: compact/comfortable/spacious all use compact layout
-    // expanded shows summary
-    const layoutMode = this.displayMode === 'expanded' ? 'expanded' : 'compact';
-    
-    // For external mode, wrap in <a> tag
-    if (this.viewerMode === 'external') {
-      const link = document.createElement('a');
-      link.className = `cg-card cg-card--${this.displayMode}`;
-      link.dataset.contentId = this.article.uuid;
-      
-      // Generate URL and target
-      const url = this.externalUrlPattern.replace('{id}', this.article.uuid);
-      const target = this.externalTarget.replace('{id}', this.article.uuid);
-      
-      link.href = url;
-      link.target = target;
-      link.rel = 'noopener'; // Security best practice
-      
-      if (layoutMode === 'compact') {
-        link.innerHTML = this.renderCompact();
-      } else {
-        link.innerHTML = this.renderExpanded();
-      }
-      
-      // Add expand button handler
-      const expandBtn = link.querySelector('.cg-expand-btn');
-      if (expandBtn && this.onExpand) {
-        expandBtn.addEventListener('click', (e) => {
-          e.preventDefault(); // Prevent link navigation
-          e.stopPropagation();
-          this.onExpand(this.article, link);
-        });
-      }
-      
-      return link;
-    }
-    
-    // For inline/modal mode, use regular article element
-    const card = document.createElement('article');
-    card.className = `cg-card cg-card--${this.displayMode}`;
-    card.dataset.contentId = this.article.uuid;
-
-    if (layoutMode === 'compact') {
-      card.innerHTML = this.renderCompact();
-    } else {
-      card.innerHTML = this.renderExpanded();
-    }
-
-    // Add click handler for the whole card
-    card.addEventListener('click', (e) => {
-      // Don't trigger if clicking expand button
-      if (e.target.closest('.cg-expand-btn')) return;
-      
-      if (this.onClick) {
-        this.onClick(this.article);
-      }
-    });
-
-    // Add expand button handler if in compact mode
-    const expandBtn = card.querySelector('.cg-expand-btn');
-    if (expandBtn && this.onExpand) {
-      expandBtn.addEventListener('click', (e) => {
-        e.stopPropagation();
-        this.onExpand(this.article, card);
-      });
-    }
-
-    return card;
-  }
-
-  /**
-   * Render compact mode (title, meta only)
-   */
-  renderCompact() {
-    const readingTime = calculateReadingTime(this.article.wordCount);
-    
-    return `
-      <div class="cg-card-header">
-        <h3 class="cg-card-title">${escapeHtml(this.article.title)}</h3>
-        <button class="cg-expand-btn" aria-label="Show more" title="Show summary">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </button>
-      </div>
-      <div class="cg-card-meta">
-        <span class="cg-meta-item cg-author">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path d="M7 7C8.65685 7 10 5.65685 10 4C10 2.34315 8.65685 1 7 1C5.34315 1 4 2.34315 4 4C4 5.65685 5.34315 7 7 7Z" stroke="currentColor" stroke-width="1.5"/>
-            <path d="M13 13C13 10.7909 10.3137 9 7 9C3.68629 9 1 10.7909 1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          ${escapeHtml(this.article.authorName)}
-        </span>
-        <span class="cg-meta-item cg-date">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <rect x="1" y="2" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/>
-            <path d="M4 1V3M10 1V3M1 5H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          ${formatDate(this.article.publishedAt)}
-        </span>
-        <span class="cg-meta-item cg-reading-time">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.5"/>
-            <path d="M7 3.5V7L9.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          ${readingTime}
-        </span>
-      </div>
-    `;
-  }
-
-  /**
-   * Render expanded mode (with summary and tags)
-   */
-  renderExpanded() {
-    const readingTime = calculateReadingTime(this.article.wordCount);
-    const summary = this.article.summary || '';
-    const tags = this.article.tags || [];
-    
-    return `
-      <div class="cg-card-header">
-        <h3 class="cg-card-title">${escapeHtml(this.article.title)}</h3>
-        <button class="cg-expand-btn cg-expand-btn--collapse" aria-label="Show less" title="Hide summary">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path d="M12 10L8 6L4 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-        </button>
-      </div>
-      
-      ${summary ? `
-        <div class="cg-card-summary">
-          <p>${escapeHtml(summary)}</p>
-        </div>
-      ` : ''}
-      
-      ${tags.length > 0 ? `
-        <div class="cg-card-tags">
-          ${tags.map(tag => `
-            <span class="cg-tag">${escapeHtml(tag)}</span>
-          `).join('')}
-        </div>
-      ` : ''}
-      
-      <div class="cg-card-meta">
-        <span class="cg-meta-item cg-author">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <path d="M7 7C8.65685 7 10 5.65685 10 4C10 2.34315 8.65685 1 7 1C5.34315 1 4 2.34315 4 4C4 5.65685 5.34315 7 7 7Z" stroke="currentColor" stroke-width="1.5"/>
-            <path d="M13 13C13 10.7909 10.3137 9 7 9C3.68629 9 1 10.7909 1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          ${escapeHtml(this.article.authorName)}
-        </span>
-        <span class="cg-meta-item cg-date">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <rect x="1" y="2" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/>
-            <path d="M4 1V3M10 1V3M1 5H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          ${formatDate(this.article.publishedAt)}
-        </span>
-        <span class="cg-meta-item cg-reading-time">
-          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-            <circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.5"/>
-            <path d="M7 3.5V7L9.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          </svg>
-          ${readingTime}
-        </span>
-      </div>
-    `;
-  }
-}

package/dist/widget/widget-js/content-list.js

@@ -1,289 +0,0 @@
-/**
- * Content List Component
- * Displays a list of content items with pagination
- */
-import { ContentCard } from './content-card.js';
-
-export class ContentList {
-  constructor(container, api, options = {}) {
-    console.log('[ContentList] Constructor called with options:', options);
-    this.container = container;
-    this.api = api;
-    this.options = {
-      layoutMode: options.layoutMode || 'cards', // 'cards' or 'rows'
-      displayMode: options.displayMode || 'comfortable',
-      pageSize: parseInt(options.pageSize) || 12,
-      tags: options.tags || [],
-      viewerMode: options.viewerMode || 'inline', // 'inline' | 'modal' | 'external'
-      externalUrlPattern: options.externalUrlPattern || '/article/{id}',
-      externalTarget: options.externalTarget || 'article-{id}',
-      onArticleClick: options.onArticleClick || null
-    };
-    
-    console.log('[ContentList] Final options:', this.options);
-    
-    this.currentPage = 1;
-    this.totalPages = 1;
-    this.articles = [];
-    this.loading = false;
-    this.expandedCards = new Set();
-  }
-
-  /**
-   * Initialize and render the list
-   */
-  async init() {
-    console.log('[ContentList] Initializing...');
-    this.render();
-    await this.loadArticles();
-    console.log('[ContentList] Initialization complete');
-  }
-
-  /**
-   * Render the list container
-   */
-  render() {
-    const layoutClass = this.options.layoutMode === 'rows' ? 'cg-content-rows' : 'cg-content-grid';
-    
-    this.container.innerHTML = `
-      <div class="cg-content-list">
-        <div class="cg-list-header">
-          <button class="cg-display-toggle" title="Toggle display mode">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <rect x="2" y="2" width="16" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/>
-              <rect x="2" y="8" width="16" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/>
-              <rect x="2" y="14" width="16" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/>
-            </svg>
-            <span>${this.options.displayMode === 'compact' ? 'Show summaries' : 'Hide summaries'}</span>
-          </button>
-        </div>
-        <div class="${layoutClass}"></div>
-        <div class="cg-pagination"></div>
-      </div>
-    `;
-
-    // Add toggle handler
-    const toggle = this.container.querySelector('.cg-display-toggle');
-    toggle.addEventListener('click', () => this.toggleDisplayMode());
-  }
-
-  /**
-   * Load articles from API
-   */
-  async loadArticles(page = 1) {
-    if (this.loading) {
-      console.log('[ContentList] Already loading, skipping...');
-      return;
-    }
-    
-    console.log('[ContentList] Loading articles for page:', page);
-    this.loading = true;
-    this.showLoading();
-
-    try {
-      console.log('[ContentList] Calling api.fetchArticles with:', {
-        page,
-        limit: this.options.pageSize,
-        tags: this.options.tags
-      });
-      
-      const data = await this.api.fetchArticles({
-        page,
-        limit: this.options.pageSize,
-        tags: this.options.tags
-      });
-
-      console.log('[ContentList] Received data:', data);
-      
-      this.articles = data.articles || [];
-      this.currentPage = data.pagination?.page || 1;
-      this.totalPages = data.pagination?.totalPages || 1;
-
-      console.log('[ContentList] Loaded', this.articles.length, 'articles');
-      
-      this.renderArticles();
-      this.renderPagination();
-    } catch (error) {
-      console.error('[ContentList] Error loading articles:', error);
-      this.showError('Failed to load articles. Please try again.');
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  /**
-   * Render content grid
-   */
-  renderArticles() {
-    const grid = this.container.querySelector('.cg-content-grid, .cg-content-rows');
-    
-    if (this.articles.length === 0) {
-      grid.innerHTML = `
-        <div class="cg-empty-state">
-          <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
-            <rect x="8" y="12" width="48" height="40" rx="4" stroke="currentColor" stroke-width="2"/>
-            <path d="M16 24H48M16 32H48M16 40H32" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          <p>No articles found</p>
-        </div>
-      `;
-      return;
-    }
-
-    grid.innerHTML = '';
-    
-    this.articles.forEach(article => {
-      const isExpanded = this.expandedCards.has(article.uuid);
-      const card = new ContentCard(article, {
-        displayMode: isExpanded ? 'expanded' : this.options.displayMode,
-        viewerMode: this.options.viewerMode,
-        externalUrlPattern: this.options.externalUrlPattern,
-        externalTarget: this.options.externalTarget,
-        onExpand: (article, cardElement) => this.handleExpand(article, cardElement),
-        onClick: (article) => this.handleArticleClick(article)
-      });
-      
-      grid.appendChild(card.render());
-    });
-  }
-
-  /**
-   * Handle expand/collapse of a card
-   */
-  handleExpand(article, cardElement) {
-    const isExpanded = this.expandedCards.has(article.uuid);
-    
-    if (isExpanded) {
-      this.expandedCards.delete(article.uuid);
-    } else {
-      this.expandedCards.add(article.uuid);
-    }
-    
-    // Re-render just this card
-    const newCard = new ContentCard(article, {
-      displayMode: isExpanded ? this.options.displayMode : 'expanded',
-      viewerMode: this.options.viewerMode,
-      externalUrlPattern: this.options.externalUrlPattern,
-      externalTarget: this.options.externalTarget,
-      onExpand: (article, cardElement) => this.handleExpand(article, cardElement),
-      onClick: (article) => this.handleArticleClick(article)
-    });
-    
-    cardElement.replaceWith(newCard.render());
-  }
-
-  /**
-   * Handle article click
-   */
-  handleArticleClick(article) {
-    if (this.options.onArticleClick) {
-      this.options.onArticleClick(article);
-    }
-  }
-
-  /**
-   * Toggle display mode for all cards
-   */
-  toggleDisplayMode() {
-    this.options.displayMode = this.options.displayMode === 'compact' ? 'expanded' : 'compact';
-    this.expandedCards.clear(); // Reset individual expansions
-    this.renderArticles();
-    
-    // Update button text
-    const toggle = this.container.querySelector('.cg-display-toggle span');
-    toggle.textContent = this.options.displayMode === 'compact' ? 'Show summaries' : 'Hide summaries';
-  }
-
-  /**
-   * Render pagination controls
-   */
-  renderPagination() {
-    const pagination = this.container.querySelector('.cg-pagination');
-    
-    if (this.totalPages <= 1) {
-      pagination.innerHTML = '';
-      return;
-    }
-
-    const prevDisabled = this.currentPage === 1;
-    const nextDisabled = this.currentPage === this.totalPages;
-
-    pagination.innerHTML = `
-      <button class="cg-btn-prev" ${prevDisabled ? 'disabled' : ''}>
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </svg>
-        Previous
-      </button>
-      <span class="cg-page-info">Page ${this.currentPage} of ${this.totalPages}</span>
-      <button class="cg-btn-next" ${nextDisabled ? 'disabled' : ''}>
-        Next
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-          <path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-        </svg>
-      </button>
-    `;
-
-    // Add event listeners
-    const prevBtn = pagination.querySelector('.cg-btn-prev');
-    const nextBtn = pagination.querySelector('.cg-btn-next');
-
-    prevBtn.addEventListener('click', () => {
-      if (this.currentPage > 1) {
-        this.loadArticles(this.currentPage - 1);
-        this.scrollToTop();
-      }
-    });
-
-    nextBtn.addEventListener('click', () => {
-      if (this.currentPage < this.totalPages) {
-        this.loadArticles(this.currentPage + 1);
-        this.scrollToTop();
-      }
-    });
-  }
-
-  /**
-   * Show loading state
-   */
-  showLoading() {
-    const grid = this.container.querySelector('.cg-content-grid, .cg-content-rows');
-    if (grid) {
-      grid.innerHTML = `
-        <div class="cg-loading">
-          <div class="cg-spinner"></div>
-          <p>Loading articles...</p>
-        </div>
-      `;
-    }
-  }
-
-  /**
-   * Show error message
-   */
-  showError(message) {
-    const grid = this.container.querySelector('.cg-content-grid, .cg-content-rows');
-    if (grid) {
-      grid.innerHTML = `
-        <div class="cg-error">
-          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-            <circle cx="24" cy="24" r="20" stroke="currentColor" stroke-width="2"/>
-            <path d="M24 16V26M24 32V32.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-          </svg>
-          <p>${message}</p>
-          <button class="cg-retry-btn">Try Again</button>
-        </div>
-      `;
-
-      const retryBtn = grid.querySelector('.cg-retry-btn');
-      retryBtn.addEventListener('click', () => this.loadArticles(this.currentPage));
-    }
-  }
-
-  /**
-   * Scroll to top of widget
-   */
-  scrollToTop() {
-    this.container.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }
-}