# 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

```bash
# 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:

```yaml
---
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

```bash
# Build the Docker image
npm run docker:build

# Run with Docker Compose
npm run docker:compose
```

### Production Build

```bash
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