@contentgrowth/content-widget 1.1.0 → 1.1.2

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

@@ -1,230 +0,0 @@
-/**
- * Content Viewer Component
- * Displays full content with markdown rendering
- */
-import { formatDate, calculateReadingTime, escapeHtml } from '../utils/helpers.js';
-import { marked } from 'marked';
-
-export class ContentViewer {
-  constructor(container, api, options = {}) {
-    this.container = container;
-    this.api = api;
-    this.options = {
-      displayMode: options.displayMode || 'inline', // 'inline' or 'modal'
-      showBackButton: options.showBackButton !== false, // Default true, can be disabled
-      showSummary: options.showSummary !== false, // Default true, can be disabled
-      onBack: options.onBack || null
-    };
-    
-    this.article = null;
-    this.loading = false;
-    this.summaryExpanded = true; // Summary visible by default
-  }
-
-  /**
-   * Load and display an article
-   */
-  async loadArticle(uuid) {
-    if (this.loading) return;
-    
-    this.loading = true;
-    this.showLoading();
-
-    try {
-      this.article = await this.api.fetchArticle(uuid);
-      this.render();
-    } catch (error) {
-      this.showError('Failed to load article. Please try again.');
-      console.error(error);
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  /**
-   * Render the article
-   */
-  render() {
-    if (!this.article) return;
-
-    const readingTime = calculateReadingTime(this.article.wordCount || this.article.content);
-    const content = this.renderMarkdown(this.article.content || '');
-
-    this.container.innerHTML = `
-      <div class="cg-content-viewer">
-        ${this.options.showBackButton ? `
-        <div class="cg-viewer-header">
-          <button class="cg-back-btn">
-            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-              <path d="M12 16L6 10L12 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
-            </svg>
-            Back to list
-          </button>
-        </div>
-        ` : ''}
-        
-        <article class="cg-viewer-content">
-          <header class="cg-post-title-section">
-            <h1 class="cg-post-title">${escapeHtml(this.article.title)}</h1>
-            
-            ${this.options.showSummary && this.article.summary && this.article.category !== 'announce' ? `
-            <div class="cg-ai-summary ${this.summaryExpanded ? 'expanded' : 'collapsed'}">
-              <div class="cg-ai-summary-header">
-                <div class="cg-ai-summary-label">
-                  <svg class="cg-ai-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                  </svg>
-                  <span>AI Generated Summary</span>
-                </div>
-                <button class="cg-summary-toggle" aria-label="Toggle summary">
-                  <svg class="cg-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6l4 4 4-4" />
-                  </svg>
-                </button>
-              </div>
-              <div class="cg-ai-summary-content">
-                <p>${escapeHtml(this.article.summary)}</p>
-              </div>
-            </div>
-            ` : ''}
-            
-            <div class="cg-post-meta">
-              <span class="cg-meta-item">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <path d="M8 8C9.65685 8 11 6.65685 11 5C11 3.34315 9.65685 2 8 2C6.34315 2 5 3.34315 5 5C5 6.65685 6.34315 8 8 8Z" stroke="currentColor" stroke-width="1.5"/>
-                  <path d="M14 14C14 11.7909 11.3137 10 8 10C4.68629 10 2 11.7909 2 14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-                </svg>
-                ${escapeHtml(this.article.authorName)}
-              </span>
-              <span class="cg-meta-item">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <rect x="2" y="3" width="12" height="11" rx="2" stroke="currentColor" stroke-width="1.5"/>
-                  <path d="M5 2V4M11 2V4M2 6H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-                </svg>
-                ${formatDate(this.article.publishedAt)}
-              </span>
-              <span class="cg-meta-item">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                  <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5"/>
-                  <path d="M8 4V8L10.5 10.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-                </svg>
-                ${readingTime}
-              </span>
-            </div>
-          </header>
-          
-          <div class="cg-post-body">
-            ${content}
-          </div>
-        </article>
-      </div>
-    `;
-
-    // Add back button handler if button exists
-    if (this.options.showBackButton) {
-      const backBtn = this.container.querySelector('.cg-back-btn');
-      if (backBtn) {
-        backBtn.addEventListener('click', () => this.handleBack());
-      }
-    }
-    
-    // Add summary toggle handler
-    const summaryToggle = this.container.querySelector('.cg-summary-toggle');
-    if (summaryToggle) {
-      summaryToggle.addEventListener('click', () => this.toggleSummary());
-    }
-  }
-  
-  /**
-   * Toggle AI summary visibility
-   */
-  toggleSummary() {
-    this.summaryExpanded = !this.summaryExpanded;
-    const summaryEl = this.container.querySelector('.cg-ai-summary');
-    if (summaryEl) {
-      if (this.summaryExpanded) {
-        summaryEl.classList.add('expanded');
-        summaryEl.classList.remove('collapsed');
-      } else {
-        summaryEl.classList.add('collapsed');
-        summaryEl.classList.remove('expanded');
-      }
-    }
-  }
-
-  /**
-   * Render markdown content to HTML
-   */
-  renderMarkdown(markdown) {
-    // Configure marked
-    marked.setOptions({
-      breaks: true,
-      gfm: true,
-      headerIds: true,
-      mangle: false
-    });
-
-    try {
-      return marked.parse(markdown);
-    } catch (error) {
-      console.error('Markdown parsing error:', error);
-      return `<p>${escapeHtml(markdown)}</p>`;
-    }
-  }
-
-  /**
-   * Handle back button click
-   */
-  handleBack() {
-    if (this.options.onBack) {
-      this.options.onBack();
-    }
-  }
-
-  /**
-   * Show loading state
-   */
-  showLoading() {
-    this.container.innerHTML = `
-      <div class="cg-content-viewer">
-        <div class="cg-viewer-loading">
-          <div class="cg-spinner"></div>
-          <p>Loading article...</p>
-        </div>
-      </div>
-    `;
-  }
-
-  /**
-   * Show error message
-   */
-  showError(message) {
-    this.container.innerHTML = `
-      <div class="cg-content-viewer">
-        <div class="cg-viewer-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>
-          ${this.options.showBackButton ? '<button class="cg-back-btn">Back to articles</button>' : ''}
-        </div>
-      </div>
-    `;
-
-    if (this.options.showBackButton) {
-      const backBtn = this.container.querySelector('.cg-back-btn');
-      if (backBtn) {
-        backBtn.addEventListener('click', () => this.handleBack());
-      }
-    }
-  }
-
-  /**
-   * Clear the post view
-   */
-  clear() {
-    this.container.innerHTML = '';
-    this.article = null;
-  }
-}

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

@@ -1,40 +0,0 @@
-/**
- * Content Growth Widget - Vanilla JavaScript
- * Can be used in any framework or vanilla JS project
- */
-
-import { ContentGrowthWidget } from './widget.js';
-import { ContentGrowthAPI } from './utils/api-client.js';
-
-// Export main widget class
-export { ContentGrowthWidget };
-
-// Export API client for advanced usage
-export { ContentGrowthAPI };
-
-// Export helper functions
-export * from './utils/helpers.js';
-
-/**
- * Auto-initialize widgets on page load
- * Only runs if this is loaded as a script (not imported as module)
- */
-if (typeof document !== 'undefined' && !import.meta.url.includes('node_modules')) {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', () => {
-      initializeWidgets();
-    });
-  } else {
-    initializeWidgets();
-  }
-}
-
-function initializeWidgets() {
-  const containers = document.querySelectorAll('[data-cg-content]');
-  containers.forEach(container => {
-    new ContentGrowthWidget(container);
-  });
-}
-
-// Default export for convenience
-export default ContentGrowthWidget;

package/dist/widget/widget-js/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/widget-js/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/widget.d.ts

@@ -1,24 +0,0 @@
-/**
- * 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;
-}