@contentgrowth/content-widget 1.3.5 → 1.3.6

package/README.md

@@ -320,6 +320,8 @@ A compact card displaying the Featured Summary with customizable styling. Perfec
   linkPattern="/articles/{slug}"
   layout="horizontal"
   borderStyle="dashed"
+  borderColor="#e5e7eb"
+  padding="20px"
   ctaText="Read full story"
 />
 
@@ -350,11 +352,23 @@ 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`:

package/dist/astro/FeaturedCard.astro

@@ -1,5 +1,4 @@
 ---
-import { marked } from 'marked';
 import { ContentGrowthClient } from '../core/client';
 import type { FeaturedContentProps, Article, ArticleWithContent } from '../types';
 
@@ -78,6 +77,12 @@ interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton'
    * @default undefined (same tab)
    */
   linkTarget?: string;
+
+  /**
+   * Custom padding for the card content
+   * @example "20px" or "0"
+   */
+  padding?: string;
 }
 
 type Props = FeaturedCardProps & { class?: string };
@@ -102,6 +107,7 @@ const {
   borderColor = '#e5e7eb',
   cardBackground = 'none',
   itemsBackground = '#f3f4f6',
+  padding,
   class: className = ''
 } = Astro.props;
 
@@ -146,13 +152,39 @@ const getArticleUrl = (article: any) => {
     .replace('{category}', article.category || 'uncategorized');
 };
 
-// Render featured summary (or fallback to regular summary) as HTML
-const getSummaryHtml = (article: any) => {
+// Parse featured summary - supports both JSON (new) and plain text (legacy)
+interface SummaryData {
+  type: 'classic' | 'list' | 'steps' | 'quote' | 'legacy';
+  text?: string;
+  intro?: string;
+  items?: Array<{ title: string; description: string }>;
+  quote?: string;
+  highlight?: string;
+}
+
+const parseSummary = (article: any): SummaryData | null => {
   const summaryText = article.featuredSummary || article.summary;
-  if (!summaryText) return '';
-  return marked.parse(summaryText, { async: false }) as string;
+  if (!summaryText) return null;
+  
+  // Try to parse as JSON
+  try {
+    const parsed = JSON.parse(summaryText);
+    if (parsed.type) {
+      return parsed as SummaryData;
+    }
+  } catch (e) {
+    // Not JSON, treat as legacy markdown/plain text
+  }
+  
+  // Legacy fallback - render as plain text
+  return {
+    type: 'legacy',
+    text: summaryText
+  };
 };
 
+const summaryData = article ? parseSummary(article) : null;
+
 const layout = propLayout || (article as any)?.featuredSummaryLayout || 'vertical';
 const layoutClass = layout !== 'vertical' ? `cg-layout-${layout}` : '';
 const borderClass = borderStyle !== 'none' ? `cg-border-${borderStyle}` : '';
@@ -165,6 +197,7 @@ const customStyles = [
   borderColor !== '#e5e7eb' ? `--cg-card-border-color: ${borderColor}` : '',
   cardBackground !== 'none' ? `--cg-card-bg: ${cardBackground}` : '',
   itemsBackground !== '#f3f4f6' ? `--cg-items-bg: ${itemsBackground}` : '',
+  padding ? `--cg-card-padding: ${padding}` : '',
 ].filter(Boolean).join('; ');
 ---
 
@@ -178,42 +211,83 @@ const customStyles = [
     rel={linkTarget === '_blank' ? 'noopener noreferrer' : undefined}
   >
     <article class="cg-featured-card-inner">
-      {/* Header with category badge */}
-      {showCategory && article.category && (
-        <div class="cg-featured-card-category">
-          <span class="cg-category-badge">{article.category}</span>
-        </div>
-      )}
-      
-      {/* Title */}
-      <h3 class="cg-featured-card-title">{article.title}</h3>
-      
-      {/* Featured Summary */}
-      {(article.featuredSummary || article.summary) && (
-        <div 
-          class="cg-featured-card-summary"
-          set:html={getSummaryHtml(article)}
-        />
-      )}
-      
-      {/* Footer with meta info */}
-      {(showAuthor || showReadingTime) && (
-        <div class="cg-featured-card-footer">
-          {showAuthor && <span class="cg-featured-card-author">{article.authorName}</span>}
-          
-          {showAuthor && showReadingTime && (
-            <span class="cg-featured-card-separator">•</span>
+      <div class="cg-card-primary">
+        {/* Header with category badge */}
+        {showCategory && article.category && (
+          <div class="cg-featured-card-category">
+            <span class="cg-category-badge">{article.category}</span>
+          </div>
+        )}
+        
+        {/* Title */}
+        <h3 class="cg-featured-card-title">{article.title}</h3>
+        
+        {/* Featured Summary - Intro / Text Part */}
+        {summaryData && (
+          <div class="cg-featured-card-summary">
+            {/* Intro for structured types */}
+            {(summaryData.type === 'list' || summaryData.type === 'steps' || summaryData.type === 'quote') && summaryData.intro && (
+              <p>{summaryData.intro}</p>
+            )}
+
+            {/* Classic type - just text */}
+            {summaryData.type === 'classic' && (
+              <p>{summaryData.text}</p>
+            )}
+            
+            {/* Legacy markdown - render as plain text */}
+            {summaryData.type === 'legacy' && (
+              <p>{summaryData.text}</p>
+            )}
+          </div>
+        )}
+        
+        {/* Footer with meta info */}
+        {(showAuthor || showReadingTime) && (
+          <div class="cg-featured-card-footer">
+            {showAuthor && <span class="cg-featured-card-author">{article.authorName}</span>}
+            
+            {showAuthor && showReadingTime && (
+              <span class="cg-featured-card-separator">•</span>
+            )}
+            
+            {showReadingTime && (
+              <span class="cg-featured-card-reading-time">
+                {Math.ceil(article.wordCount / 200)} min read
+              </span>
+            )}
+          </div>
+        )}
+        
+        {/* Read more indicator */}
+      </div>
+
+      {/* Right Panel - Structured Visual Items (List/Quote) */}
+      {summaryData && (summaryData.type === 'list' || summaryData.type === 'steps' || summaryData.type === 'quote') && (
+        <div class="cg-card-secondary">
+          {(summaryData.type === 'list' || summaryData.type === 'steps') && (
+            <ul class="cg-summary-items">
+              {summaryData.items?.map((item, index) => (
+                <li>
+                  <span class="cg-item-number">{index + 1}</span>
+                  <div class="cg-item-content">
+                    <strong class="cg-item-title">{item.title}</strong>
+                    <span class="cg-item-description">{item.description}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
           )}
           
-          {showReadingTime && (
-            <span class="cg-featured-card-reading-time">
-              {Math.ceil(article.wordCount / 200)} min read
-            </span>
+          {summaryData.type === 'quote' && (
+            <blockquote>
+              {summaryData.quote}
+            </blockquote>
           )}
         </div>
       )}
-      
-      {/* Read more indicator */}
+
+      {/* Read more indicator - Now at bottom */}
       <div class="cg-featured-card-cta">
         <span>{ctaText}</span>
         <svg class="cg-featured-card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">

package/dist/react/FeaturedCard.d.ts

@@ -58,11 +58,20 @@ interface FeaturedCardProps extends Partial<Omit<FeaturedContentProps, 'showBack
      * @default 'none'
      */
     cardBackground?: string;
+    /**
+     * Background color for list/quote section (the items area)
+     * @default '#f3f4f6'
+     */
     /**
      * Background color for list/quote section (the items area)
      * @default '#f3f4f6'
      */
     itemsBackground?: string;
+    /**
+     * Custom padding for the card content
+     * @example "20px" or "0"
+     */
+    padding?: string;
 }
 export declare const FeaturedCard: React.FC<FeaturedCardProps>;
 export {};

package/dist/react/FeaturedCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAElF,UAAU,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;IAChI;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAEvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0KpD,CAAC"}
+{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAkClF,UAAU,iBAAkB,SAAQ,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC;IAChI;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,kBAAkB,CAAC;IAEvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4NpD,CAAC"}

package/dist/react/FeaturedCard.js

@@ -1,7 +1,27 @@
 import React, { useEffect, useState } from 'react';
-import { marked } from 'marked';
 import { ContentGrowthClient } from '../core/client';
-export const FeaturedCard = ({ apiKey, baseUrl, article: providedArticle, slug, uuid, tags = [], category, excludeTags = [], showCategory = true, showReadingTime = false, showAuthor = false, ctaText: propCtaText, linkPattern = '/articles/{slug}', linkTarget, layout: propLayout, borderStyle = 'none', borderColor = '#e5e7eb', cardBackground = 'none', itemsBackground = '#f3f4f6', className = '' }) => {
+// Parse featured summary - supports both JSON (new) and plain text (legacy)
+const parseSummary = (article) => {
+    const summaryText = article.featuredSummary || article.summary;
+    if (!summaryText)
+        return null;
+    // Try to parse as JSON
+    try {
+        const parsed = JSON.parse(summaryText);
+        if (parsed.type) {
+            return parsed;
+        }
+    }
+    catch (e) {
+        // Not JSON, treat as legacy markdown/plain text
+    }
+    // Legacy fallback - render as plain text
+    return {
+        type: 'legacy',
+        text: summaryText
+    };
+};
+export const FeaturedCard = ({ apiKey, baseUrl, article: providedArticle, slug, uuid, tags = [], category, excludeTags = [], showCategory = true, showReadingTime = false, showAuthor = false, ctaText: propCtaText, linkPattern = '/articles/{slug}', linkTarget, layout: propLayout, borderStyle = 'none', borderColor = '#e5e7eb', cardBackground = 'none', itemsBackground = '#f3f4f6', padding, className = '' }) => {
     const [article, setArticle] = useState(providedArticle || null);
     const [loading, setLoading] = useState(!providedArticle);
     const [error, setError] = useState(null);
@@ -56,13 +76,6 @@ export const FeaturedCard = ({ apiKey, baseUrl, article: providedArticle, slug,
             .replace('{slug}', article.slug || article.uuid || '')
             .replace('{category}', article.category || 'uncategorized');
     };
-    // Render featured summary (or fallback to regular summary) as HTML
-    const getSummaryHtml = (article) => {
-        const summaryText = article.featuredSummary || article.summary;
-        if (!summaryText)
-            return '';
-        return marked.parse(summaryText, { async: false });
-    };
     if (loading) {
         return (React.createElement("div", { className: `cg-widget cg-loading ${className}` },
             React.createElement("div", { className: "cg-spinner" })));
@@ -70,7 +83,6 @@ export const FeaturedCard = ({ apiKey, baseUrl, article: providedArticle, slug,
     if (error || !article) {
         return (React.createElement("div", { className: `cg-widget cg-error ${className}` }, error || 'No featured content found'));
     }
-    const summaryHtml = getSummaryHtml(article);
     const layout = propLayout || article.featuredSummaryLayout || 'vertical';
     const readingTime = Math.ceil(article.wordCount / 200);
     const borderClass = borderStyle !== 'none' ? `cg-border-${borderStyle}` : '';
@@ -84,18 +96,52 @@ export const FeaturedCard = ({ apiKey, baseUrl, article: providedArticle, slug,
         customStyles['--cg-card-bg'] = cardBackground;
     if (itemsBackground !== '#f3f4f6')
         customStyles['--cg-items-bg'] = itemsBackground;
+    if (padding)
+        customStyles['--cg-card-padding'] = padding;
     return (React.createElement("a", { href: getArticleUrl(article), className: `cg-widget cg-featured-card ${className} ${layoutClass} ${borderClass}`, style: Object.keys(customStyles).length > 0 ? customStyles : undefined, "data-cg-widget": "featured-card", target: linkTarget, rel: linkTarget === '_blank' ? 'noopener noreferrer' : undefined },
         React.createElement("article", { className: "cg-featured-card-inner" },
-            showCategory && article.category && (React.createElement("div", { className: "cg-featured-card-category" },
-                React.createElement("span", { className: "cg-category-badge" }, article.category))),
-            React.createElement("h3", { className: "cg-featured-card-title" }, article.title),
-            summaryHtml && (React.createElement("div", { className: "cg-featured-card-summary", dangerouslySetInnerHTML: { __html: summaryHtml } })),
-            (showAuthor || showReadingTime) && (React.createElement("div", { className: "cg-featured-card-footer" },
-                showAuthor && React.createElement("span", { className: "cg-featured-card-author" }, article.authorName),
-                showAuthor && showReadingTime && (React.createElement("span", { className: "cg-featured-card-separator" }, "\u2022")),
-                showReadingTime && (React.createElement("span", { className: "cg-featured-card-reading-time" },
-                    readingTime,
-                    " min read")))),
+            React.createElement("div", { className: "cg-card-primary" },
+                showCategory && article.category && (React.createElement("div", { className: "cg-featured-card-category" },
+                    React.createElement("span", { className: "cg-category-badge" }, article.category))),
+                React.createElement("h3", { className: "cg-featured-card-title" }, article.title),
+                parseSummary(article) && (React.createElement("div", { className: "cg-featured-card-summary" }, (() => {
+                    const summaryData = parseSummary(article);
+                    if (summaryData.type === 'classic') {
+                        return React.createElement("p", null, summaryData.text);
+                    }
+                    if ((summaryData.type === 'list' || summaryData.type === 'steps') && summaryData.intro) {
+                        return React.createElement("p", null, summaryData.intro);
+                    }
+                    if (summaryData.type === 'quote' && summaryData.quote) {
+                        return React.createElement("p", null, summaryData.intro);
+                    }
+                    // Legacy
+                    return React.createElement("p", null, summaryData.text);
+                })())),
+                (showAuthor || showReadingTime) && (React.createElement("div", { className: "cg-featured-card-footer" },
+                    showAuthor && React.createElement("span", { className: "cg-featured-card-author" }, article.authorName),
+                    showAuthor && showReadingTime && (React.createElement("span", { className: "cg-featured-card-separator" }, "\u2022")),
+                    showReadingTime && (React.createElement("span", { className: "cg-featured-card-reading-time" },
+                        readingTime,
+                        " min read"))))),
+            (() => {
+                const summaryData = parseSummary(article);
+                if (!summaryData)
+                    return null;
+                if ((summaryData.type === 'list' || summaryData.type === 'steps') && summaryData.items) {
+                    return (React.createElement("div", { className: "cg-card-secondary" },
+                        React.createElement("ul", { className: "cg-summary-items" }, summaryData.items.map((item, index) => (React.createElement("li", { key: index },
+                            React.createElement("span", { className: "cg-item-number" }, index + 1),
+                            React.createElement("div", { className: "cg-item-content" },
+                                React.createElement("strong", { className: "cg-item-title" }, item.title),
+                                React.createElement("span", { className: "cg-item-description" }, item.description))))))));
+                }
+                if (summaryData.type === 'quote' && summaryData.quote) {
+                    return (React.createElement("div", { className: "cg-card-secondary" },
+                        React.createElement("blockquote", null, summaryData.quote)));
+                }
+                return null;
+            })(),
             React.createElement("div", { className: "cg-featured-card-cta" },
                 React.createElement("span", null, ctaText),
                 React.createElement("svg", { className: "cg-featured-card-arrow", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", width: "16", height: "16" },