StratIQX Documentation

Appearance

StratIQX Content Publishing Pipeline - Implementation Guide ​

Version: 1.0.0
Date: August 25, 2025
Status: Production Ready

Overview ​

The StratIQX Content Publishing Pipeline is an AI-powered content transformation system that converts Claude.ai-generated markdown into beautifully branded, publication-ready web content. The pipeline bridges the gap between AI content generation and professional web publishing through automated processing, brand integration, and multi-platform distribution.

Architecture ​

Core Components ​

stratiqx-content-pipeline/
├── src/
│   ├── processors/
│   │   └── MarkdownProcessor.js      # Main content processing engine
│   └── utils/
│       └── CMSAdapter.js             # Universal CMS integration
├── scripts/
│   └── publish.js                    # Interactive CLI tool
├── content/
│   ├── blog/
│   │   ├── drafts/                   # Source markdown files
│   │   └── published/                # Published content archive
│   ├── images/                       # Media assets
│   └── assets/
│       ├── stratiqx-content.css      # StratIQX brand styling
│       └── prism-theme.css           # Code syntax highlighting
├── templates/                        # HTML page templates
└── dist/                            # Generated HTML output

Technology Stack ​

  • Runtime: Node.js with ES modules
  • Markdown Processing: Marked.js with custom renderers
  • Syntax Highlighting: Prism.js with 20+ language support
  • HTML Processing: Cheerio for DOM manipulation
  • Frontmatter: gray-matter for metadata parsing
  • CLI: Commander.js + Inquirer.js for interactive interface
  • HTTP Client: Axios for CMS API integration

Implementation Details ​

1. MarkdownProcessor Class ​

Location: src/processors/MarkdownProcessor.js

Core Processing Pipeline ​

javascript
const processor = new MarkdownProcessor();
const result = await processor.processMarkdownFile('content.md');

Processing Flow:

  1. Parse frontmatter and markdown content
  2. Convert markdown to HTML using custom renderers
  3. Enhance HTML with StratIQX-specific features
  4. Extract metadata (reading time, TOC, excerpts)
  5. Generate complete branded HTML page

Custom Renderers ​

  • Headings: Auto-generated anchor links and StratIQX styling
  • Tables: Responsive containers with brand theming
  • Code Blocks: Language-specific highlighting with copy buttons
  • Blockquotes: Styled quote boxes with StratIQX branding

Enhancement Features ​

Custom Components:

markdown
<StratIQXCard 
  title="Performance Metric" 
  value="94.7%" 
  trend="+12%" 
  color="success"
/>

Callout Boxes:

markdown
::: tip Pro Tip
This creates a styled callout with StratIQX branding
:::

Mermaid Diagrams:

markdown
```mermaid
graph TD
    A[Input] --> B[Process] --> C[Output]

### 2. CMSAdapter Class

**Location**: `src/utils/CMSAdapter.js`

#### Supported Platforms

| CMS | Type | Authentication | Content Model |
|-----|------|---------------|---------------|
| **Strapi** | Self-hosted | Bearer Token | `/api/articles` |
| **Contentful** | Cloud | Management API | Localized fields |
| **Ghost** | Publishing | Admin API | Posts collection |
| **Generic** | REST API | Bearer Token | Custom endpoints |

#### Universal Interface

```javascript
const cms = new CMSAdapter(config);

// Publish content
const result = await cms.publishContent(processedContent);

// Update existing
await cms.updateContent(id, processedContent);

// List content
const content = await cms.getContent();

Payload Formatting ​

Each CMS receives optimally formatted data:

  • Strapi: { data: { title, content, slug, ... } }
  • Contentful: { fields: { title: { 'en-US': value } } }
  • Ghost: { posts: [{ title, html, slug, ... }] }

3. Interactive CLI ​

Location: scripts/publish.js

Available Commands ​

bash
# Interactive mode
npm run publish

# Direct publishing
node scripts/publish.js publish content/blog/draft.md

# Batch processing
node scripts/publish.js batch "content/**/*.md"

# Generate samples
node scripts/publish.js sample

# Setup CMS
node scripts/publish.js setup

Workflow Features ​

  • Smart Detection: Automatic file type and format recognition
  • Preview Generation: HTML output before publishing
  • Error Handling: Comprehensive validation and rollback
  • Progress Tracking: Real-time status updates

Features Implemented ✅ ​

Content Processing ​

  • [x] Frontmatter Parsing: YAML metadata extraction
  • [x] Rich Markdown: Tables, lists, images, links
  • [x] Code Highlighting: 20+ programming languages
  • [x] Custom Components: StratIQX cards and widgets
  • [x] Callout Boxes: Warning, tip, danger, info, success
  • [x] Mermaid Diagrams: Flowcharts and visualizations
  • [x] Image Processing: Lazy loading and responsive figures
  • [x] Anchor Links: Auto-generated heading anchors
  • [x] Table of Contents: Automatic TOC generation

StratIQX Branding ​

  • [x] Brand Colors: Blue (#2563eb) and Cyan (#06b6d4)
  • [x] Typography: Inter font family integration
  • [x] Logo Integration: Header and footer branding
  • [x] Responsive Design: Mobile-first CSS framework
  • [x] Theme System: Success, warning, info color schemes
  • [x] Component Library: Cards, buttons, navigation

Content Management ​

  • [x] Multi-CMS Support: 4 platform integrations
  • [x] Metadata Extraction: Reading time, word count, excerpts
  • [x] SEO Optimization: Meta tags, Open Graph, structured data
  • [x] Asset Management: Image path resolution and optimization
  • [x] Slug Generation: URL-friendly slug creation
  • [x] Category/Tag System: Content taxonomy support

Developer Experience ​

  • [x] CLI Interface: Interactive publishing workflow
  • [x] Batch Processing: Multiple file operations
  • [x] Preview Generation: Local HTML output
  • [x] Error Handling: Comprehensive validation
  • [x] Configuration Management: Flexible CMS setup
  • [x] Sample Content: Demo content generation

Outstanding Items 🔄 ​

High Priority ​

1. Mermaid Processing Fix ​

Issue: Mermaid diagrams render as plain text instead of visual diagrams
Location: MarkdownProcessor.js:198-214
Solution Required:

  • Fix mermaid code block detection regex
  • Ensure proper HTML container generation
  • Test mermaid rendering in browser

2. Prism Syntax Highlighting Cleanup ​

Issue: HTML entity encoding in code blocks creates verbose output Location: MarkdownProcessor.js:64-77
Solution Required:

  • Review Prism highlight function implementation
  • Fix double-encoding of HTML entities
  • Optimize code block HTML structure

3. Image Path Resolution ​

Issue: Relative image paths may not resolve correctly in different deployment contexts Location: MarkdownProcessor.js:308-312Solution Required:

  • Implement configurable base path system
  • Add support for CDN URL generation
  • Handle various deployment scenarios

Medium Priority ​

4. CMS Configuration Persistence ​

Issue: CMS settings need to be re-entered each session Solution Required:

  • Implement config file storage (.stratiqx-config.json)
  • Add encrypted credential storage
  • Support multiple environment configurations

5. Asset Pipeline Enhancement ​

Solution Required:

  • Automatic image optimization (WebP conversion)
  • CSS/JS minification and bundling
  • Asset versioning and cache busting
  • CDN integration for static assets

6. Content Validation ​

Solution Required:

  • Frontmatter schema validation
  • Required field checking
  • Link validation (internal/external)
  • Image existence verification

Low Priority ​

7. Plugin System ​

Solution Required:

  • Custom component plugin architecture
  • Third-party renderer support
  • Hook system for processing pipeline
  • Community plugin marketplace

8. Analytics Integration ​

Solution Required:

  • Content performance tracking
  • Reading time analytics
  • Engagement metrics collection
  • A/B testing framework

9. Advanced Features ​

Solution Required:

  • Multi-language support
  • Content scheduling
  • Workflow management
  • Collaborative editing

Testing Status ​

✅ Completed Tests ​

  • Basic Markdown Processing: All standard elements render correctly
  • StratIQX Components: Custom cards display with proper styling
  • Callout Boxes: All 5 types (tip, warning, danger, info, success) work
  • Code Highlighting: JavaScript, TypeScript, SQL, Bash tested
  • Table Processing: Responsive tables with StratIQX styling
  • Metadata Extraction: Reading time, TOC, excerpts generate correctly
  • HTML Generation: Complete pages with proper structure

🔄 Pending Tests ​

  • Mermaid Diagrams: Visual rendering in browser
  • Multi-CMS Publishing: End-to-end workflow with real CMS
  • Batch Processing: Large file sets
  • Error Recovery: Invalid input handling
  • Performance: Large document processing
  • Mobile Responsiveness: Cross-device testing

Deployment Considerations ​

Environment Requirements ​

  • Node.js: Version 18+ with ES module support
  • Memory: Minimum 512MB for typical usage
  • Storage: ~50MB for dependencies
  • Network: CMS API access required for publishing

Security Considerations ​

  • API Keys: Secure storage and transmission
  • Input Validation: Markdown content sanitization
  • XSS Prevention: HTML output escaping
  • CSRF Protection: API request authentication

Scalability ​

  • Concurrent Processing: Currently single-threaded
  • Memory Usage: Cheerio DOM processing can be memory-intensive
  • API Rate Limits: CMS-specific throttling considerations
  • Caching: No current caching layer implemented

Performance Metrics ​

Current Performance ​

  • Small Articles (< 1000 words): ~200ms processing time
  • Medium Articles (1000-5000 words): ~500ms processing time
  • Large Articles (> 5000 words): ~1000ms processing time
  • Memory Usage: ~50-100MB peak during processing

Optimization Opportunities ​

  1. Streaming Processing: Large document handling
  2. Caching Layer: Processed content caching
  3. Parallel Processing: Multi-file batch operations
  4. Memory Optimization: Cheerio DOM tree management

Integration Guide ​

With StratIQX Onboarding App ​

javascript
// Fetch published content
const blogPosts = await fetch('https://cms.stratiqx.ai/api/posts')
  .then(res => res.json());

// Render in React component
{blogPosts.map(post => (
  <BlogCard 
    key={post.id}
    title={post.title}
    excerpt={post.excerpt}
    readingTime={post.reading_time}
    publishedAt={post.published_at}
  />
))}

With Communication Service ​

javascript
// Send blog notifications
await fetch('https://comms.stratiqx.ai/send', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${AUTH_TOKEN}`,
    'X-Service': 'stratiqx-content'
  },
  body: JSON.stringify({
    communication_type: 'blog_notification',
    email: subscriber.email,
    blog_title: post.title,
    blog_url: post.url
  })
});

Maintenance ​

Regular Tasks ​

  • Dependency Updates: Monthly npm audit and updates
  • Security Scanning: Automated vulnerability detection
  • Performance Monitoring: Processing time tracking
  • CMS Compatibility: API version compatibility checks

Monitoring ​

  • Error Logging: Comprehensive error tracking
  • Performance Metrics: Processing time and memory usage
  • API Health: CMS connection status monitoring
  • Content Quality: Validation and formatting checks

Support and Documentation ​

Resources ​

  • README.md: Quick start guide and basic usage
  • API Documentation: JSDoc comments throughout codebase
  • Sample Content: Example markdown files demonstrating features
  • Configuration Examples: CMS setup templates

Community ​

  • GitHub Repository: Source code and issue tracking
  • Discord Channel: Real-time community support
  • Documentation Site: Comprehensive guides and tutorials

Built with ❤️ by the StratIQX Team
Strategic Intelligence Amplified

Strategic Intelligence Hub Documentation

Copyright © 2024-present StratIQX