Update branding assets and deployment configurations
- Enhanced moebius ring logo design in Blender - Updated Docker Compose for website-only deployment with improved config - Enhanced teaser layout with updated branding integration - Added installation and setup documentation - Consolidated planning and reports documentation - Updated gitignore to exclude Next.js build artifacts and archives 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
194
planning and reports/WEBSITE_INTEGRATION.md
Normal file
194
planning and reports/WEBSITE_INTEGRATION.md
Normal file
@@ -0,0 +1,194 @@
|
||||
# Website Integration - Updated with Brand Guidelines
|
||||
|
||||
## Status: Ready for Implementation ✅
|
||||
|
||||
The CHORUS Services platform is fully configured for the www.chorus.services website integration with current brand guidelines. All technical specifications have been updated to align with the CHORUS 8-color system, Three.js logo integration, and ultra-minimalist design principles.
|
||||
|
||||
## Technical Integration Complete
|
||||
|
||||
### Brand System Integration
|
||||
- **Color System**: CHORUS 8-color system implemented with Tailwind CSS
|
||||
- **Typography**: Inter Tight, Inconsolata, and Exo font families configured
|
||||
- **Logo System**: Three.js Möbius Ring with accessibility adaptations
|
||||
- **Accessibility**: Data attributes for protanopia, deuteranopia, tritanopia, achromatopsia
|
||||
- **Theme System**: Dark mode default with light mode toggle capability
|
||||
|
||||
### Docker Swarm Configuration
|
||||
- `docker-compose.swarm.yml` includes `chorus-website` service
|
||||
- Traefik labels configured for `www.chorus.services` and `chorus.services`
|
||||
- Domain redirect: `chorus.services` → `www.chorus.services`
|
||||
- SSL/TLS certificates via Let's Encrypt
|
||||
- Registry image: `registry.home.deepblack.cloud/tony/chorus-website:latest`
|
||||
- HTTP server development on port 3000, production on port 80
|
||||
|
||||
### Build Scripts & Development Server
|
||||
- `build-and-push.sh` includes website build support
|
||||
- Individual build command: `./build-and-push.sh website`
|
||||
- Integrated with unified build: `./chorus.sh build`
|
||||
- **Development Server**: HTTP server on port 3000 (`npm run dev`)
|
||||
- **Production Build**: Next.js standalone with Tailwind CSS optimization
|
||||
|
||||
### Management Integration
|
||||
- `./chorus.sh deploy` includes website in production deployment
|
||||
- Production endpoints configured and documented
|
||||
|
||||
## Implementation Requirements
|
||||
|
||||
### 1. Three.js Logo Integration
|
||||
```typescript
|
||||
// Required Three.js logo implementation
|
||||
// components/ui/ChorusLogo.tsx
|
||||
interface ChorusLogoProps {
|
||||
className?: string;
|
||||
size?: number;
|
||||
accessibilityTheme?: 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia' | 'default';
|
||||
}
|
||||
|
||||
// Canvas element with accessibility adaptations
|
||||
<canvas
|
||||
className="chorus-logo aspect-square"
|
||||
data-accessibility-aware="true"
|
||||
style={{ width: `${size}px`, height: `${size}px` }}
|
||||
/>
|
||||
```
|
||||
|
||||
### 2. Accessibility System Implementation
|
||||
```typescript
|
||||
// Required accessibility provider
|
||||
const AccessibilityProvider = ({ children }) => {
|
||||
const [theme, setTheme] = useState('default');
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute('data-accessibility', theme);
|
||||
// Update Three.js logo materials
|
||||
window.updateLogoAccessibilityTheme?.(theme);
|
||||
}, [theme]);
|
||||
|
||||
return <div data-accessibility={theme}>{children}</div>;
|
||||
};
|
||||
```
|
||||
|
||||
### 3. CHORUS 8-Color System Configuration
|
||||
```javascript
|
||||
// tailwind.config.js - Required configuration
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// Semantic color tokens for 8-color system
|
||||
'chorus-primary': '#000000', // carbon-950
|
||||
'chorus-secondary': '#0b0213', // mulberry-950
|
||||
'chorus-accent': '#403730', // walnut-900
|
||||
'chorus-neutral': '#c1bfb1', // nickel-400
|
||||
'chorus-info': '#3a4654', // ocean-900
|
||||
'chorus-success': '#3a4540', // eucalyptus-900
|
||||
'chorus-warning': '#6a5c46', // sand-900
|
||||
'chorus-danger': '#3e2d2c', // coral-900
|
||||
// Full color scales for carbon, mulberry, walnut, etc.
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 4. Performance Optimization Strategy
|
||||
```typescript
|
||||
// Ultra-minimalist component design
|
||||
const MinimalButton = ({ children, variant = 'primary', ...props }) => {
|
||||
const baseClasses = "transition-all duration-200 ease-out";
|
||||
const variants = {
|
||||
primary: "bg-carbon-950 text-white hover:bg-carbon-900",
|
||||
secondary: "bg-mulberry-950 text-paper-400 hover:bg-mulberry-900",
|
||||
};
|
||||
|
||||
return (
|
||||
<button className={`${baseClasses} ${variants[variant]}`} {...props}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Deployment & Access Points
|
||||
|
||||
### Build and Deploy
|
||||
```bash
|
||||
# Development server (port 3000)
|
||||
cd website/
|
||||
npm run dev # http://localhost:3000
|
||||
|
||||
# Production build and deploy
|
||||
./chorus.sh build # Includes website with brand system
|
||||
./chorus.sh deploy # Deploys to production
|
||||
```
|
||||
|
||||
### Access Points
|
||||
- **Marketing**: https://www.chorus.services
|
||||
- **Dashboard**: https://dashboard.chorus.services
|
||||
- **API**: https://api.chorus.services
|
||||
|
||||
## Domain Configuration ✅
|
||||
|
||||
### DNS & SSL Configuration
|
||||
External domains configured with DNS pointing to 202.171.184.242:
|
||||
- `chorus.services` (redirects to www)
|
||||
- `www.chorus.services` (marketing website with CHORUS brand system)
|
||||
- `dashboard.chorus.services` (WHOOSH dashboard)
|
||||
- `api.chorus.services` (API endpoints)
|
||||
- `*.chorus.services` (wildcard for future services)
|
||||
|
||||
### Brand-Compliant Domain Strategy
|
||||
- **Primary Domain**: www.chorus.services (ultra-minimalist design)
|
||||
- **Logo Integration**: Three.js Möbius Ring on all subdomains
|
||||
- **Consistent Theme**: Dark mode default across all services
|
||||
- **Performance**: HTTP/2, Brotli compression, CDN optimization
|
||||
|
||||
## SEO Considerations for Minimalist Design
|
||||
|
||||
### Ultra-Minimalist SEO Strategy
|
||||
```typescript
|
||||
// Structured data for minimalist design
|
||||
const structuredData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "CHORUS Services",
|
||||
"description": "Distributed AI Orchestration Without the Hallucinations",
|
||||
"applicationCategory": "BusinessApplication",
|
||||
"operatingSystem": "Web Browser",
|
||||
"softwareVersion": "1.0",
|
||||
"author": {
|
||||
"@type": "Organization",
|
||||
"name": "Deep Black Cloud Development"
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Performance Requirements
|
||||
- **Core Web Vitals**: LCP < 2.5s, FID < 100ms, CLS < 0.1
|
||||
- **Lighthouse Score**: 95+ across all categories
|
||||
- **Bundle Size**: <500KB initial, optimized with Next.js tree shaking
|
||||
- **Three.js Logo**: GPU-accelerated rendering with fallback images
|
||||
|
||||
### Accessibility Compliance
|
||||
- **WCAG 2.1 AA**: Full compliance with semantic HTML
|
||||
- **Keyboard Navigation**: Tab order and focus management
|
||||
- **Screen Readers**: ARIA labels and descriptions
|
||||
- **Reduced Motion**: Respects prefers-reduced-motion settings
|
||||
- **Color Vision**: Four accessibility theme adaptations
|
||||
|
||||
## Integration Challenges Identified
|
||||
|
||||
### 1. Three.js Logo Performance
|
||||
**Challenge**: Ensuring 60fps performance across all devices
|
||||
**Solution**: GPU acceleration, level-of-detail rendering, WebGL fallbacks
|
||||
|
||||
### 2. Accessibility Theme Switching
|
||||
**Challenge**: Seamless logo material updates without re-initialization
|
||||
**Solution**: CSS custom properties with Three.js material parameter binding
|
||||
|
||||
### 3. Ultra-Minimalist Content Strategy
|
||||
**Challenge**: Maintaining SEO effectiveness with minimal content
|
||||
**Solution**: Semantic HTML, structured data, optimized meta descriptions
|
||||
|
||||
All Traefik labels and routing ready for production deployment with brand-compliant implementation.
|
||||
Reference in New Issue
Block a user