@contentgrowth/content-widget 1.1.0

package/dist/widget/content-viewer.js

@@ -0,0 +1,230 @@
+/**
+ * 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/index.js

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

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