Documentation

Welcome to the Luffa documentation hub. Here you'll find comprehensive guides, tutorials, and resources to help you make the most of your documentation platform.

Getting Started

New to Luffa? Start here to understand the fundamentals:

Installation Guide - Set up Luffa in minutes
Quick Start - Create your first documentation site
Project Structure - Understand how Luffa projects are organized

Key Features

🤖 AI-Powered Search

Luffa includes advanced AI search capabilities powered by RAG (Retrieval-Augmented Generation):

Semantic Search - Find content by meaning, not just keywords
Source Attribution - See exactly where answers come from
Contextual Responses - Get accurate answers based on your actual content

📝 MDX Support

Write content in Markdown with React component support:

# My Documentation

This is regular Markdown content.

<CustomComponent prop="value">
  You can embed React components too!
</CustomComponent>

## Code Examples

```javascript
const luffa = new LuffaClient({
  apiKey: 'your-api-key'
})
# My Documentation

This is regular Markdown content.

<CustomComponent prop="value">
  You can embed React components too!
</CustomComponent>

## Code Examples

```javascript
const luffa = new LuffaClient({
  apiKey: 'your-api-key'
})

🎨 Theming & Customization

Built-in Themes - Light and dark modes
Custom Colors - Brand-specific color palettes
Component Override - Customize any component
Layout Flexibility - Adapt the layout to your needs

Documentation Types

Luffa supports multiple documentation patterns:

API Documentation

Perfect for REST APIs, GraphQL schemas, and SDK references:

Auto-generated from OpenAPI specs
Interactive examples
Code samples in multiple languages

User Guides

Step-by-step tutorials and how-to guides:

Progressive disclosure
Screenshots and media
Interactive demos

Technical References

Comprehensive technical documentation:

Searchable content
Cross-references
Version history

Advanced Features

RAG-Powered Search Setup

Configure Upstash Vector

# Set environment variables
UPSTASH_VECTOR_REST_URL=your_url
UPSTASH_VECTOR_REST_TOKEN=your_token
OPENAI_API_KEY=your_openai_key
# Set environment variables
UPSTASH_VECTOR_REST_URL=your_url
UPSTASH_VECTOR_REST_TOKEN=your_token
OPENAI_API_KEY=your_openai_key

Sync Your Content
npm run sync-docs npm run sync-docs

Customize Search Behavior

// Adjust in src/app/api/rag-search/route.ts
topK: 8, // Number of results
model: 'text-embedding-3-small' // Embedding model
// Adjust in src/app/api/rag-search/route.ts
topK: 8, // Number of results
model: 'text-embedding-3-small' // Embedding model

Performance Optimization

Static Generation - Pre-render pages at build time
Image Optimization - Automatic image compression and lazy loading
Code Splitting - Load only what's needed
CDN Ready - Deploy to any CDN for global performance

SEO Best Practices

Meta Tags - Automatic OpenGraph and Twitter cards
Structured Data - Schema.org markup for better search results
Sitemap Generation - Automatic sitemap creation
Fast Loading - Optimized for Core Web Vitals

Content Management

Writing Guidelines

Structure Your Content
- Use clear headings (H1-H6)
- Break up long sections
- Include code examples
- Add cross-references
Optimize for Search
- Include relevant keywords naturally
- Write descriptive titles
- Use meta descriptions
- Add alt text to images
Keep It Updated
- Review content regularly
- Update code examples
- Check external links
- Version your documentation

Collaboration Workflow

graph LR
    A[Write Content] --> B[Review]
    B --> C[Test Examples]
    C --> D[Deploy]
    D --> E[Monitor Analytics]
    E --> A

Integration Examples

CI/CD Pipeline

# .github/workflows/docs.yml
name: Deploy Documentation
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - run: npm run build
      - run: npm run sync-docs
      - uses: vercel/action@v1
# .github/workflows/docs.yml
name: Deploy Documentation
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: npm install
      - run: npm run build
      - run: npm run sync-docs
      - uses: vercel/action@v1

Analytics Integration

// Track page views
import { analytics } from '@/lib/analytics'

export default function DocsLayout({ children }) {
  useEffect(() => {
    analytics.page('Documentation Viewed')
  }, [])
  
  return <>{children}</>
}
// Track page views
import { analytics } from '@/lib/analytics'

export default function DocsLayout({ children }) {
  useEffect(() => {
    analytics.page('Documentation Viewed')
  }, [])
  
  return <>{children}</>
}

Troubleshooting

Common Issues

Build fails with MDX errors

Check MDX syntax in your files
Ensure all imports are correct
Validate frontmatter format

Search not working

Verify environment variables
Check API key permissions
Run sync script after content changes

Styling issues

Clear browser cache
Check Tailwind configuration
Verify component imports

Getting Help

GitHub Issues - Report bugs
Discussions - Community support
Discord - Real-time chat
Email - Direct support

What's Next?

Explore Best Practices
Check out Examples
Join our Community