@contentgrowth/content-widget 1.1.0 → 1.1.2

package/dist/widget/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' });
-  }
-}

package/dist/widget/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/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;