chorus-ping-blog/README.md

CHORUS Blog

A static blog built with Next.js for sharing insights about contextual AI orchestration, agent coordination, and intelligent systems.

Features

• Static Blog Posts: Markdown-based blog posts with MDX support
• CHORUS Brand Styling: Consistent with the main CHORUS design system
• SEO Optimized: Full metadata, OpenGraph, and Twitter Card support
• Responsive Design: Mobile-first design that works on all devices
• Typography: Clean, readable typography optimized for technical content
• Code Highlighting: Syntax highlighting for code blocks
• Fast Performance: Optimized build with static generation

Development

Quick Start

# Start the development server
./dev-start.sh

# Or manually
npm install
npm run dev

The blog will be available at http://localhost:3002

Adding Blog Posts

1. Create a new .md file in content/posts/
2. Add frontmatter with metadata:

---
title: "Your Post Title"
description: "Brief description of the post"
date: "2025-01-27"
author:
  name: "Author Name"
  role: "Author Role"
tags: ["tag1", "tag2", "tag3"]
featured: false
---

3. Write your content in Markdown
4. The post will automatically appear on the blog

Project Structure

├── app/                    # Next.js app directory
│   ├── posts/[slug]/      # Dynamic blog post pages
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Homepage
├── components/            # React components
│   ├── BlogHeader.tsx     # Site header
│   ├── BlogFooter.tsx     # Site footer
│   └── PostCard.tsx       # Blog post card
├── content/posts/         # Blog post markdown files
├── lib/                   # Utilities
│   └── blog.ts           # Blog post handling
├── types/                 # TypeScript types
└── public/               # Static assets

Deployment

Docker

# Build the Docker image
npm run docker:build

# Run with Docker Compose
npm run docker:compose

Production Build

npm run build
npm start

The blog uses Next.js's static generation features for optimal performance.

Configuration

Tailwind CSS

The blog uses the same Tailwind configuration as the main CHORUS website, ensuring brand consistency. The configuration includes:

• CHORUS color palette (carbon, mulberry, ocean, etc.)
• Typography scale and font families
• Custom spacing and sizing utilities
• Blog-specific prose styling

Environment Variables

No environment variables are required for basic operation. The blog is designed to work as a static site.

Brand Guidelines

The blog follows the CHORUS brand guidelines:

• Colors: Carbon (grays), Mulberry (purples), Ocean (blues)
• Typography: Inter Tight for body text, Exo for headings
• Logo: Consistent CHORUS branding
• Spacing: Golden ratio-based spacing system

Adding New Features

New Page Types

Create new pages in the app/ directory following Next.js 13+ app router conventions.

Custom Components

Add new components to the components/ directory. All components should:

• Use TypeScript
• Follow the existing naming conventions
• Be responsive by default
• Use CHORUS brand colors and typography

Styling

• Use Tailwind CSS classes
• Reference the existing design tokens
• Maintain consistency with the CHORUS brand

Production Deployment

The blog is configured for deployment with:

• Docker: Multi-stage build for production
• Traefik: Reverse proxy with Let's Encrypt SSL
• Docker Swarm: Container orchestration

Production URL: https://blog.chorus.services

License

Proprietary - CHORUS Services