@contentgrowth/content-widget 1.3.4 → 1.3.6

package/README.md

@@ -268,25 +268,83 @@ const widget = new ContentGrowthWidget(container, {
 />
 ```
 
+**ContentCard:**
+
+A standalone article card component. Use it to display individual articles outside of ContentList.
+
+```astro
+<!-- Load by slug -->
+<ContentCard
+  apiKey="pk_your_key_here"
+  slug="my-article-slug"
+  linkPattern="/articles/{slug}"
+/>
+
+<!-- Load by UUID -->
+<ContentCard
+  apiKey="pk_your_key_here"
+  uuid="article-uuid"
+/>
+
+<!-- Use pre-loaded article data -->
+<ContentCard
+  article={articleData}
+  linkPattern="/articles/{slug}"
+  showSummary={true}
+  showTags={true}
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | string | - | Your API key (required unless `article` is provided) |
+| `article` | Article | - | Pre-loaded article data (skips API fetch) |
+| `slug` | string | - | Load specific article by slug |
+| `uuid` | string | - | Load specific article by UUID |
+| `linkPattern` | string | '/articles/{slug}' | URL pattern for link |
+| `linkTarget` | string | - | Link target attribute |
+| `showSummary` | boolean | true | Show article summary |
+| `summaryMaxLength` | number | - | Truncate summary at length |
+| `showTags` | boolean | false | Show article tags |
+| `showCategory` | boolean | true | Show category badge |
+
 **FeaturedCard:**
 
 A compact card displaying the Featured Summary with customizable styling. Perfect for landing pages.
 
 ```astro
+<!-- Find latest article in category -->
 <FeaturedCard
   apiKey="pk_your_key_here"
   category="announce"
   linkPattern="/articles/{slug}"
   layout="horizontal"
   borderStyle="dashed"
-  itemsBackground="#f3f4f6"
+  borderColor="#e5e7eb"
+  padding="20px"
   ctaText="Read full story"
 />
+
+<!-- Load specific article by slug -->
+<FeaturedCard
+  apiKey="pk_your_key_here"
+  slug="my-article-slug"
+  linkPattern="/articles/{slug}"
+/>
+
+<!-- Use pre-loaded article data (for lists) -->
+<FeaturedCard
+  article={articleData}
+  linkPattern="/articles/{slug}"
+/>
 ```
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `apiKey` | string | - | Your API key |
+| `apiKey` | string | - | Your API key (required unless `article` is provided) |
+| `article` | Article | - | Pre-loaded article data (skips API fetch) |
+| `slug` | string | - | Load specific article by slug |
+| `uuid` | string | - | Load specific article by UUID |
 | `category` | string | - | Filter by category |
 | `tags` | string[] | [] | Filter by tags |
 | `layout` | 'vertical' \| 'horizontal' | auto | Card layout (auto uses article setting) |
@@ -294,11 +352,41 @@ A compact card displaying the Featured Summary with customizable styling. Perfec
 | `borderColor` | string | '#e5e7eb' | Border color (CSS value) |
 | `cardBackground` | string | 'none' | Card background ('none' = transparent) |
 | `itemsBackground` | string | '#f3f4f6' | Background for list/quote section |
+| `padding` | string | - | Custom padding (e.g., '10px', '2rem 3rem') |
 | `ctaText` | string | 'Read full story' | Call-to-action text |
 | `showAuthor` | boolean | false | Show author name |
 | `showReadingTime` | boolean | false | Show reading time |
 | `linkPattern` | string | '/articles/{slug}' | URL pattern for link |
 
+**Featured Summary Types:**
+
+FeaturedCard supports structured JSON summaries generated via the portal wizard:
+
+| Type | Description |
+|------|-------------|
+| `list` | Intro text on left, bulleted key points on right |
+| `steps` | Intro text on left, numbered action steps on right |
+| `quote` | Intro text on left, styled pullquote on right |
+| `classic` | Simple text summary (legacy) |
+
+**Featured Cards List:**
+
+Display all articles as FeaturedCards in a grid using `displayAs`:
+
+```astro
+<ContentList
+  apiKey="pk_your_key_here"
+  displayAs="featured-cards"
+  linkPattern="/articles/{slug}"
+  pageSize={12}
+/>
+```
+
+| displayAs Value | Description |
+|-----------------|-------------|
+| `'default'` | Standard card/row layout |
+| `'featured-cards'` | Renders each article as a FeaturedCard |
+
 ## API Client
 
 ### ContentGrowthClient

package/dist/astro/ContentCard.astro

@@ -0,0 +1,170 @@
+---
+import { marked } from 'marked';
+import { ContentGrowthClient } from '../core/client';
+import { formatDate, calculateReadingTime } from '../core/utils';
+import type { Article, ArticleWithContent } from '../types';
+
+interface ContentCardProps {
+  /**
+   * Pre-loaded article data (bypasses API fetch)
+   */
+  article?: Article | ArticleWithContent;
+
+  /**
+   * Load specific article by slug
+   */
+  slug?: string;
+
+  /**
+   * Load specific article by UUID
+   */
+  uuid?: string;
+
+  /**
+   * API key (required if fetching article)
+   */
+  apiKey?: string;
+
+  /**
+   * API base URL
+   */
+  baseUrl?: string;
+
+  /**
+   * URL pattern for the article link
+   * Supports placeholders: {uuid}, {slug}, {category}
+   * @default '/articles/{slug}'
+   */
+  linkPattern?: string;
+
+  /**
+   * Link target attribute
+   */
+  linkTarget?: string;
+
+  /**
+   * Show article summary
+   * @default true
+   */
+  showSummary?: boolean;
+
+  /**
+   * Maximum length of summary text
+   */
+  summaryMaxLength?: number;
+
+  /**
+   * Show article tags
+   * @default false
+   */
+  showTags?: boolean;
+
+  /**
+   * Show article category
+   * @default true
+   */
+  showCategory?: boolean;
+}
+
+type Props = ContentCardProps & { class?: string };
+
+const {
+  apiKey,
+  baseUrl,
+  article: providedArticle,
+  slug,
+  uuid,
+  linkPattern = '/articles/{slug}',
+  linkTarget,
+  showSummary = true,
+  summaryMaxLength,
+  showTags = false,
+  showCategory = true,
+  class: className = ''
+} = Astro.props;
+
+// Determine article source
+let article: Article | ArticleWithContent | null = null;
+let error: string | null = null;
+
+if (providedArticle) {
+  // Mode 1: Article provided directly
+  article = providedArticle;
+} else if (apiKey) {
+  // Need to fetch article from API
+  const client = new ContentGrowthClient({ apiKey, baseUrl });
+  
+  try {
+    if (uuid) {
+      // Mode 2: Load by UUID
+      article = await client.getArticle(uuid);
+    } else if (slug) {
+      // Mode 3: Load by slug
+      article = await client.getArticleBySlug(slug);
+    }
+  } catch (e) {
+    console.error('Failed to fetch article:', e);
+    error = e instanceof Error ? e.message : 'Failed to load article';
+  }
+}
+
+// Generate article URL
+const getArticleUrl = (article: any) => {
+  if (!article) return '#';
+  return linkPattern
+    .replace('{uuid}', article.uuid || '')
+    .replace('{slug}', article.slug || article.uuid || '')
+    .replace('{category}', article.category || 'uncategorized');
+};
+
+// Truncate summary text
+const truncateSummary = (text: string | null, maxLength?: number): string => {
+  if (!text) return '';
+  if (!maxLength || text.length <= maxLength) return text;
+  return text.substring(0, maxLength).trim() + '...';
+};
+---
+
+{article ? (
+  <article class={`cg-article-card ${className}`}>
+    <a href={getArticleUrl(article)} target={linkTarget} class="cg-card-link">
+      <div class="cg-card-content">
+        {showCategory && article.category && (
+          <div class="cg-card-category">
+            <span class="cg-category-badge">{article.category}</span>
+          </div>
+        )}
+        
+        <h2 class="cg-card-title">{article.title}</h2>
+        
+        {showSummary && article.summary && (
+          <p class="cg-card-summary">{truncateSummary(article.summary, summaryMaxLength)}</p>
+        )}
+        
+        <div class="cg-card-meta">
+          <span class="cg-meta-author">{article.authorName}</span>
+          <span class="cg-meta-separator">•</span>
+          <time class="cg-meta-date" datetime={new Date(article.publishedAt * 1000).toISOString()}>
+            {formatDate(article.publishedAt)}
+          </time>
+          <span class="cg-meta-separator">•</span>
+          <span class="cg-meta-reading-time">{calculateReadingTime(article.wordCount)}</span>
+        </div>
+        
+        {showTags && article.tags && article.tags.length > 0 && (
+          <div class="cg-card-tags">
+            {article.tags.map((tag) => (
+              <span class="cg-tag">{tag}</span>
+            ))}
+          </div>
+        )}
+      </div>
+    </a>
+  </article>
+) : (
+  error ? (
+    <div class={`cg-widget cg-error ${className}`}>
+      {error}
+    </div>
+  ) : null
+)}

package/dist/astro/ContentList.astro

@@ -5,7 +5,8 @@
  */
 import type { ContentListProps } from '../types/index.js';
 import { ContentGrowthClient } from '../core/client.js';
-import { formatDate, calculateReadingTime } from '../core/utils.js';
+import FeaturedCard from './FeaturedCard.astro';
+import ContentCard from './ContentCard.astro';
 
 interface Props extends ContentListProps {}
 
@@ -14,6 +15,7 @@ const {
   baseUrl,
   layout = 'cards',
   displayMode = 'comfortable',
+  displayAs = 'default',
   theme = 'light',
   pageSize = 12,
   tags = [],
@@ -67,10 +69,13 @@ function truncateSummary(text: string | null, maxLength?: number): string {
   if (!maxLength || text.length <= maxLength) return text;
   return text.substring(0, maxLength).trim() + '...';
 }
+
+// Check if we're in featured-cards mode
+const isFeaturedCardsMode = displayAs === 'featured-cards';
 ---
 
 <div 
-  class={`cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${className}`}
+  class={`cg-content-list cg-layout-${layout} cg-display-${displayMode} cg-theme-${theme} ${isFeaturedCardsMode ? 'cg-featured-cards-list' : ''} ${className}`}
   data-cg-widget="list"
 >
   {articles.length === 0 ? (
@@ -79,60 +84,38 @@ function truncateSummary(text: string | null, maxLength?: number): string {
     </div>
   ) : (
     <>
-      <div class={`cg-articles-grid ${layout === 'cards' ? 'cg-grid' : 'cg-list'}`}>
+      <div class={`cg-articles-grid ${isFeaturedCardsMode ? 'cg-featured-cards-grid' : (layout === 'cards' ? 'cg-grid' : 'cg-list')}`}>
         {articles.map((article) => {
-          // Build article URL from pattern
-          const articleUrl = linkPattern
-            .replace('{uuid}', article.uuid)
-            .replace('{slug}', article.slug)
-            .replace('{category}', article.category || '');
-          
           // Build link target from pattern
           const articleTarget = linkTarget
             ? linkTarget
                 .replace('{uuid}', article.uuid)
                 .replace('{id}', article.uuid)
             : undefined;
-          
-          const readingTime = calculateReadingTime(article.wordCount);
-          const publishedDate = formatDate(article.publishedAt);
 
+          // Featured Cards Mode - Use FeaturedCard component
+          if (isFeaturedCardsMode) {
+            return (
+              <FeaturedCard
+                article={article}
+                linkPattern={linkPattern}
+                linkTarget={articleTarget}
+                showCategory={true}
+              />
+            );
+          }
+
+          // Default Card Mode - Use ContentCard component
           return (
-            <article class="cg-article-card">
-              <a href={articleUrl} target={articleTarget} class="cg-card-link">
-                <div class="cg-card-content">
-                  {article.category && (
-                    <div class="cg-card-category">
-                      <span class="cg-category-badge">{article.category}</span>
-                    </div>
-                  )}
-                  
-                  <h2 class="cg-card-title">{article.title}</h2>
-                  
-                  {showAiSummary && article.summary && (
-                    <p class="cg-card-summary">{truncateSummary(article.summary, summaryMaxLength)}</p>
-                  )}
-                  
-                  <div class="cg-card-meta">
-                    <span class="cg-meta-author">{article.authorName}</span>
-                    <span class="cg-meta-separator">•</span>
-                    <time class="cg-meta-date" datetime={new Date(article.publishedAt * 1000).toISOString()}>
-                      {publishedDate}
-                    </time>
-                    <span class="cg-meta-separator">•</span>
-                    <span class="cg-meta-reading-time">{readingTime}</span>
-                  </div>
-                  
-                  {showTags && article.tags && article.tags.length > 0 && (
-                    <div class="cg-card-tags">
-                      {article.tags.map((tag) => (
-                        <span class="cg-tag">{tag}</span>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              </a>
-            </article>
+            <ContentCard
+              article={article}
+              linkPattern={linkPattern}
+              linkTarget={articleTarget}
+              showSummary={showAiSummary}
+              summaryMaxLength={summaryMaxLength}
+              showTags={showTags}
+              showCategory={true}
+            />
           );
         })}
       </div>