Content Growth Developer Documentation

This documentation provides technical details on how to integrate Content Growth widgets and APIs into your application. It is structured to be easily parsable by LLMs to assist in code generation.

Core Concepts

• Tenant ID: Your unique identifier.
• API Key: Public key (pk_...) used for widget authentication.
• Base URL: The API endpoint (e.g., https://api.content-growth.com).

Client SDK (Universal)

The ContentGrowthClient is a universal library that works in both:

1. Frontend: Browser (React, Vue, etc.)
2. Backend: Server-side (Node.js, Astro SSR, Next.js API routes)

It handles authentication, caching, and response parsing for you.

import { ContentGrowthClient } from '@contentgrowth/content-widget/core';

const client = new ContentGrowthClient({
  apiKey: 'pk_your_api_key',
  baseUrl: 'https://api.content-growth.com' // Optional
});

Methods

getArticle(uuid: string, options?: { excludeTags?: string[] })

Fetch a single article by UUID.

• excludeTags: Array of tags to hide from the result.

getArticleBySlug(slug: string, options?: { excludeTags?: string[] })

Fetch a single article by slug.

getFeaturedArticle(options: { tags?: string[], category?: string, excludeTags?: string[] })

Fetch the latest article matching specific criteria.

• tags: Array of strings. Finds the latest article containing these tags.
• category: String. Finds the latest article in this category.
• excludeTags: Array of strings. Tags to hide from the result.

Widgets

We provide ready-to-use components for React, Vue, and Astro.

1. ContentList

Displays a grid or list of articles with pagination and filtering.

Props:

• layout: 'cards' | 'rows'
• displayMode: 'compact' | 'comfortable' | 'spacious'
• pageSize: Number of articles per page.
• tags: Initial filter tags.
• category: Initial filter category.
• showTags: Boolean to show/hide tags on cards.

Usage (React):

<ContentList 
  apiKey="pk_..." 
  category="Blog" 
  layout="cards" 
/>

2. ContentViewer

Displays a full single article.

Props:

• uuid OR slug: Identifier for the article.
• showAiSummary: Boolean to show/hide AI summary.
• showCategory: Boolean to show/hide category.
• showTags: Boolean to show/hide tags.
• excludeTags: Array of tags to hide (useful for filtering tags).

Usage (React):

<ContentViewer 
  apiKey="pk_..." 
  slug="my-first-post" 
  excludeTags={['internal-use']}
/>

3. FeaturedContent

Displays the latest article matching specific criteria. Combines filtering of ContentList with display of ContentViewer.

Props:

• tags: Array of strings to filter by.
• category: String category to filter by.
• excludeTags: Array of strings to exclude from display.
• Inherits all display props from ContentViewer (showAiSummary, etc.).

Usage (React):

// Show the latest "News" article
<FeaturedContent 
  apiKey="pk_..." 
  category="News" 
/>

// Show the latest article tagged "featured"
<FeaturedContent 
  apiKey="pk_..." 
  tags={['featured']} 
/>

4. FeaturedCard

A compact card displaying the Featured Summary with customizable styling. Perfect for landing pages, sidebars, or promotional sections.

Props:

Prop	Type	Default	Description
apiKey	string	-	Your API key (required)
category	string	-	Filter by category
tags	string[]	[]	Filter by tags
layout	’vertical’ | ‘horizontal’	auto	Layout mode
borderStyle	’none’ | ‘line’ | ‘dashed'	'none’	Card border style
borderColor	string	’#e5e7eb’	Border color
cardBackground	string	’none’	Card background (transparent)
itemsBackground	string	’#f3f4f6’	Background for list section
padding	string	-	Custom padding (e.g., ‘10px’, ‘2rem 3rem’)
ctaText	string	’Read full story’	CTA link text
linkPattern	string	’/articles/{slug}‘	URL pattern

Usage (Astro):

<FeaturedCard 
  apiKey="pk_..." 
  category="announce"
  layout="horizontal"
  borderStyle="dashed"
  padding="20px"
  itemsBackground="#eff6ff"
  ctaText="Read the guide"
/>

Layout Modes:

• vertical: Title + summary stacked vertically (default)
• horizontal: Intro paragraph on left, list items on right (desktop)

Featured Summary Types:

The FeaturedCard displays structured summaries generated via the portal wizard:

Type	Display
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 with quote mark on right
classic	Simple text summary (legacy)

SEO & SSR (Astro)

For best SEO, usage in Astro is recommended to render content on the server.

---
import { FeaturedContent } from '@contentgrowth/widgets/astro';
---
<!-- Renders static HTML on the server -->
<FeaturedContent 
  apiKey="pk_..." 
  slug="seo-matters" 
/>

Widgets use a predictable CSS class structure (.cg-widget, .cg-article, etc.) and can be styled via global CSS or by passing a className / class prop.

Raw API Endpoints

If you prefer to build your own client, you can call the API directly. Base URL: https://api.content-growth.com/widget

Authentication

Pass your API key in the X-API-Key header.

curl -H "X-API-Key: pk_..." https://api.content-growth.com/widget/articles

Endpoints

Method	Endpoint	Description	Query Params
GET	/articles	List articles	page, limit (default 12), tags (comma-separated), category
GET	/articles/:uuid	Get single article	excludeTags (comma-separated)
GET	/articles/slug/:slug	Get by slug	excludeTags (comma-separated)
GET	/articles/featured	Get latest match	tags, category, excludeTags