Skip to main content
This guide is currently under development. Check back soon for detailed instructions on building news and media websites with Publive’s Decoupled Frontend Infrastructure.

​
Coming Soon

This guide will cover:

Article Rendering

Display news articles with proper formatting and media

Category Pages

Build dynamic category and section pages

Real-time Updates

Implement live content updates and notifications

Performance Optimization

Handle high-traffic scenarios with caching strategies

Search & Discovery

Implement full-text search and content discovery

Social Integration

Add social sharing and engagement features

​
In the Meantime

Explore these related resources:

Build a Brand Website

Similar setup process with reusable section patterns

API Reference

Learn how to fetch articles and media content

Content Delivery API

Retrieve published articles and assets

SDK Documentation

JavaScript SDK for content fetching

​
Get Notified

Want to be notified when this guide is published?

Contact Support

Email us to express interest in the news/media guide

​
Quick Preview

While we finalize this guide, here’s a preview of the article rendering pattern:
Article.tsx (Preview)
import { Article } from "publive-cms-sdk";

interface ArticlePageProps {
  article: Article;
}

export default function ArticlePage({ article }: ArticlePageProps) {
  return (
    <article className="max-w-4xl mx-auto">
      {/* Hero Image */}
      {article.hero_image && (
        <img 
          src={article.hero_image.url} 
          alt={article.hero_image.alt_text}
          className="w-full h-auto"
        />
      )}

      {/* Article Metadata */}
      <header className="py-8">
        <h1 className="text-4xl font-bold mb-4">
          {article.headline}
        </h1>
        
        <div className="flex items-center gap-4 text-gray-600">
          <span>{article.author.name}</span>
          <span>•</span>
          <time>{new Date(article.published_at).toLocaleDateString()}</time>
        </div>
      </header>

      {/* Article Content */}
      <div 
        className="prose prose-lg max-w-none"
        dangerouslySetInnerHTML={{ __html: article.content }}
      />

      {/* Related Articles */}
      {article.related_stories && (
        <section className="mt-12">
          <h2 className="text-2xl font-bold mb-6">Related Stories</h2>
          {/* Related articles rendering */}
        </section>
      )}
    </article>
  );
}

​
Support

For immediate assistance with news/media website development: