website/QWEN.md

OmniVerse Website Project

Project Overview

The OmniVerse Website is a modern, feature-rich React application built with TypeScript and Vite. It's a comprehensive web platform that includes multiple sections such as blog posts, articles, industry news, documentation, product information, and company details. The project features a sophisticated content management system with support for markdown rendering, syntax highlighting, internationalization, and specialized chart components for data visualization.

Key Technologies and Architecture

• Frontend Framework: React 18 with TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS with custom dark/light theme support
• Routing: React Router DOM
• Animations: Framer Motion
• Icons: Lucide React
• Internationalization: i18next + react-i18next
• Content Rendering: react-markdown + react-syntax-highlighter
• State Management: React Context API
• Deployment: Docker with multi-stage build

Project Structure

src/
├── assets/           # Static assets (images, icons, etc.)
├── components/       # Reusable UI components
│   ├── charts/       # Specialized chart components (SVG-based)
│   └── sections/     # Common page sections
├── content/          # Content files and markdown data
├── contexts/         # React context providers
├── data/             # Data files and mock data
├── locales/          # Internationalization files
├── pages/            # Page components
│   └── company/      # Company-specific pages
├── services/         # API services and utilities
├── types/            # TypeScript type definitions
├── utils/            # Utility functions
├── App.tsx           # Main application routing
├── i18n.ts           # Internationalization setup
├── main.tsx          # Application entry point
└── index.css         # Global styles

Key Features

Content Management

• Markdown rendering with syntax highlighting
• Section tagging system with 36 different tag types for semantic content organization
• Chart integration system with 4 specialized chart components (Health Monitoring, Case Study Comparison, Market Trend, AI System Architecture)
• Dynamic content routing for blogs, articles, news, and documentation

UI/UX Features

• Dark/light theme switching with context management
• Responsive design with Tailwind CSS
• Smooth animations using Framer Motion
• Mobile-optimized navigation
• Search functionality with modal interface
• Authentication modal for user management

Technical Features

• TypeScript type safety throughout
• React Router for client-side navigation
• Internationalization support
• Component-based architecture
• Modern CSS with custom animations and transitions

Building and Running

Development

# Install dependencies
pnpm install  # or npm install or yarn install

# Start development server
npm run dev
# The app will run on port 5174 by default

Production Build

# Build for production
npm run build

# Preview production build locally
npm run preview

Docker Deployment

# Build and run with Docker
docker-compose up --build

# Or build the image directly
docker build -t omniverse-website .
docker run -p 5173:5173 omniverse-website

Environment Variables

Create a .env file if needed:

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=OmniVerse

Development Conventions

Code Style

• TypeScript for all components with strict mode enabled
• ESLint for code linting following recommended TypeScript rules
• Tailwind CSS for styling with custom theme extensions
• Component-based architecture with focused, reusable components

Naming Conventions

• Component files: PascalCase (e.g., BlogDetail.tsx)
• Utility functions: camelCase (e.g., formatDate.ts)
• Type definitions: PascalCase with 'Type' suffix where appropriate

Content Integration

• Use section tags for semantic content organization
• Markdown content can include chart placeholders like {{CHART:chart-type}}
• Proper accessibility attributes for all interactive elements

Testing

While no explicit test files were found in the initial exploration, the project structure suggests unit and integration tests would likely be co-located with components or in a separate __tests__ directory.

Specialized Components

Chart Components

The project includes a sophisticated chart system with:

• Zero external charting library dependency
• SVG-based implementation for performance
• Responsive design and dark theme support
• Easy integration via markdown placeholders ({{CHART:chart-type}})

Section Tags

A comprehensive system with 36 different tag types for:

• Project management content (requirements, implementation, testing, deployment, etc.)
• Technical content (analysis, architecture, trends)
• Content organization and semantic labeling

Deployment

Production Deployment Options

1. Direct Node deployment using PM2 process manager
2. Docker containerization with multi-stage build for optimized image size
3. GitHub Pages via npm run deploy script

Server Configuration

• Exposes port 5173 in Docker
• Health checks configured in docker-compose.yml
• Production build serves static assets efficiently

Special Files and Documentation

• DEPLOY.md: Complete deployment instructions for various environments
• CHART_COMPONENTS_GUIDE.md: Detailed guide for chart component integration
• SECTION_TAGS_GUIDE.md: Comprehensive list of section tags for content organization
• CLAUDE.md: Possibly contains project-specific guidance for AI assistants
• NEWS_CRAWLER_SETUP.md: Configuration for news crawling functionality