@contentgrowth/content-widget 1.1.0

package/dist/vue/composables.js

@@ -0,0 +1,165 @@
+/**
+ * Vue Composables for Content Growth API
+ */
+import { ref, watch } from 'vue';
+import { ContentGrowthClient } from '../core/client.js';
+/**
+ * Composable to fetch articles list
+ */
+export function useArticles(options) {
+    const articles = ref([]);
+    const pagination = ref(null);
+    const loading = ref(true);
+    const error = ref(null);
+    const fetchArticles = async () => {
+        loading.value = true;
+        error.value = null;
+        try {
+            const client = new ContentGrowthClient({
+                apiKey: options.apiKey,
+                baseUrl: options.baseUrl
+            });
+            const result = await client.listArticles({
+                page: options.page,
+                limit: options.limit,
+                tags: options.tags,
+                category: options.category
+            });
+            articles.value = result.articles;
+            pagination.value = result.pagination;
+        }
+        catch (err) {
+            error.value = err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    // Fetch on mount
+    fetchArticles();
+    // Watch for options changes
+    watch(() => [options.apiKey, options.baseUrl, options.page, options.limit, options.tags, options.category], () => {
+        fetchArticles();
+    });
+    return {
+        articles,
+        pagination,
+        loading,
+        error,
+        refetch: fetchArticles
+    };
+}
+/**
+ * Composable to fetch a single article
+ */
+export function useArticle(options) {
+    const article = ref(null);
+    const loading = ref(true);
+    const error = ref(null);
+    const fetchArticle = async () => {
+        loading.value = true;
+        error.value = null;
+        try {
+            const client = new ContentGrowthClient({
+                apiKey: options.apiKey,
+                baseUrl: options.baseUrl
+            });
+            const result = await client.getArticle(options.uuid);
+            article.value = result;
+        }
+        catch (err) {
+            error.value = err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    // Fetch on mount
+    fetchArticle();
+    // Watch for options changes
+    watch(() => [options.apiKey, options.uuid, options.baseUrl], () => {
+        fetchArticle();
+    });
+    return {
+        article,
+        loading,
+        error,
+        refetch: fetchArticle
+    };
+}
+/**
+ * Composable to fetch categories
+ */
+export function useCategories(options) {
+    const categories = ref([]);
+    const loading = ref(true);
+    const error = ref(null);
+    const fetchCategories = async () => {
+        loading.value = true;
+        error.value = null;
+        try {
+            const client = new ContentGrowthClient({
+                apiKey: options.apiKey,
+                baseUrl: options.baseUrl
+            });
+            const result = await client.getCategories();
+            categories.value = result.categories;
+        }
+        catch (err) {
+            error.value = err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    // Fetch on mount
+    fetchCategories();
+    // Watch for options changes
+    watch(() => [options.apiKey, options.baseUrl], () => {
+        fetchCategories();
+    });
+    return {
+        categories,
+        loading,
+        error,
+        refetch: fetchCategories
+    };
+}
+/**
+ * Composable to fetch tags
+ */
+export function useTags(options) {
+    const tags = ref([]);
+    const loading = ref(true);
+    const error = ref(null);
+    const fetchTags = async () => {
+        loading.value = true;
+        error.value = null;
+        try {
+            const client = new ContentGrowthClient({
+                apiKey: options.apiKey,
+                baseUrl: options.baseUrl
+            });
+            const result = await client.getTags();
+            tags.value = result.tags;
+        }
+        catch (err) {
+            error.value = err;
+        }
+        finally {
+            loading.value = false;
+        }
+    };
+    // Fetch on mount
+    fetchTags();
+    // Watch for options changes
+    watch(() => [options.apiKey, options.baseUrl], () => {
+        fetchTags();
+    });
+    return {
+        tags,
+        loading,
+        error,
+        refetch: fetchTags
+    };
+}

package/dist/vue/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Content Growth Content Widget - Vue Components
+ *
+ * Note: Vue components are not compiled by TypeScript.
+ * They should be processed by your Vue build tool (Vite, etc.).
+ * Import them directly from the .vue files in your Vue project.
+ */
+export * from './composables.js';
+export type { ContentListProps, ContentViewerProps } from '../types/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/vue/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vue/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,cAAc,kBAAkB,CAAC;AAGjC,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/vue/index.js

@@ -0,0 +1,8 @@
+/**
+ * Content Growth Content Widget - Vue Components
+ *
+ * Note: Vue components are not compiled by TypeScript.
+ * They should be processed by your Vue build tool (Vite, etc.).
+ * Import them directly from the .vue files in your Vue project.
+ */
+export * from './composables.js';

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

package/dist/widget/content-list.js

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