Docusaurus Feature Showcase

Welcome to the Proper Labs Documentation Feature Showcase - your comprehensive guide to all available Docusaurus components, plugins, and interactive features aligned with our ZEN+ design system.

Why This Showcase?

This showcase demonstrates every available feature so your team can see what's possible and choose the best components for documenting Proper Labs' Web3 AI ecosystem.

📊 Available Feature Categories

🎯 Content Blocks

Essential content components including admonitions, cards, quotes, and structured content layouts. Explore Content Blocks →

⚡ Interactive Components

Dynamic user interactions with tabs, accordions, forms, and live code editors. Explore Interactive →

📈 Data Visualization

Charts, diagrams, flowcharts, and network graphs for complex data representation. Explore Visualization →

💻 Code Features

Syntax highlighting, live playgrounds, diff views, and code documentation tools. Explore Code Features →

🔌 API Integration

OpenAPI docs, GraphQL explorers, SDK generators, and API testing tools. Explore API Tools →

🚀 Quick Examples

Admonitions with Custom Styling

Standard Note

This is a standard note with markdown support and inline code.

Pro Tip from BigSis

Use these admonitions to highlight important information with our brand colors!

Bro Alert

Critical warnings appear in Bro Orange (#FE5F00) for maximum visibility.

System Critical

Danger zones require immediate attention!

Interactive Tabs

✨ Features

• MDX Support - Full React component integration
• Plugin System - Extensible architecture
• Search - Algolia DocSearch ready
• i18n - Multi-language support
• Versioning - Documentation versioning
• PWA - Progressive Web App capable

🎨 Design

Our ZEN+ Design System ensures:

• 60-30-10 Rule - Visual hierarchy
• 8px Grid - Consistent spacing
• Brand Colors - BigSis, Bro, LilSis, CBO
• +2% Rainbow Tints - Subtle warmth

💻 Code

Example Component

function FeatureCard({ title, description, icon }) {
  return (
    <div className="feature-card">
      <span className="icon">{icon}</span>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

Code Blocks with Features

src/components/ProperLabsFeature.tsx

import React from 'react';

export function ProperLabsFeature({ type }) {
  // Highlight these lines for emphasis
  const features = ['BX', 'AX', 'PX'];

  return (
    <div className="proper-labs-feature">
      {features.map(f => <span key={f}>{f}</span>)}
    </div>
  );
}

🎯 Implementation Status

Feature Category	Status	ZEN+ Aligned	Priority
Content Blocks	✅ Ready	100%	Immediate
Interactive	✅ Ready	100%	Immediate
Visualization	🚧 Partial	80%	Week 2
Code Features	✅ Ready	100%	Immediate
API Integration	📅 Planned	70%	Week 3

🛠️ Available Plugins

Currently Installed

• ✅ @docusaurus/theme-classic - Core theme
• ✅ @docusaurus/plugin-content-docs - Documentation
• ✅ @docusaurus/plugin-content-blog - Blog support
• ✅ @docusaurus/theme-mermaid - Diagram support

Recommended Additions

• 🎯 @docusaurus/plugin-ideal-image - Image optimization
• 🎯 @docusaurus/theme-live-codeblock - Live code editing
• 🎯 docusaurus-plugin-sass - SASS for ZEN+ styles
• 🎯 docusaurus-lunr-search - Offline search

📚 Navigation

Start Exploring:

1. Content Blocks - Admonitions, cards, callouts
2. Interactive Components - Tabs, accordions, forms
3. Data Visualization - Charts, diagrams, graphs
4. Code Features - Syntax, playgrounds, diffs
5. API Integration - OpenAPI, GraphQL, SDKs

---

Team Usage

This showcase is designed for the Proper Labs development team to:

• Discover available documentation features
• Choose appropriate components for each use case
• Implement with ZEN+ design consistency
• Scale documentation as the platform grows