6e13451dc4
- Next.js 14 blog application with theme support - Docker containerization with volume bindings - Traefik integration with Let's Encrypt SSL - MDX support for blog posts - Theme toggle with localStorage persistence - Scheduled posts directory structure - Brand guidelines compliance with CHORUS colors 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
147 lines
3.7 KiB
Markdown
147 lines
3.7 KiB
Markdown
# 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 |