A comprehensive documentation website for the PlyWP WordPress management suite, including landing page, installation guides, and API reference documentation.
This documentation site serves as the central hub for developers, hosting operators, and system administrators to learn about, install, and integrate with PlyWP. The site is built with Next.js 16, TypeScript, and Tailwind CSS with a professional dark theme.
- Hero Section with compelling value proposition
- Features Overview highlighting Panel and Plyorde components
- Benefits Section demonstrating key advantages
- Quick Links to documentation sections
- Footer with repository links
- Panel Installation - Complete setup guide for the web control panel
- Plyorde Installation - Comprehensive daemon deployment guide
- Environment Guides - Platform-specific instructions for:
- macOS and Windows (WSL2)
- Debian/Ubuntu/CentOS servers
- Docker and Docker Compose
- Cloud providers (AWS, DigitalOcean, Heroku)
- Kubernetes
- Overview - API basics, authentication, response formats, rate limiting
- Authentication - Token generation, API key management, security best practices
- Plyorde Endpoints - Complete endpoint reference including:
- Sites management (CRUD operations)
- Plugin management (list, activate, deactivate, update, delete)
- User management (create, update, delete WordPress users)
- Backup operations (create, restore backups)
- Health and status monitoring
- Code Examples - Real-world examples in:
- JavaScript/Node.js
- Python
- Go
- cURL
- Bash
- Architecture - Understanding PlyWP components and data flows
- Deployment - Production deployment strategies and best practices
- Security - Security hardening, authentication, encryption, monitoring
- Professional Dark Theme - Easy on the eyes, modern appearance
- Responsive Design - Works perfectly on desktop and mobile
- Search Functionality - Cmd+K global search across all documentation
- Navigation Sidebar - Collapsible navigation with section grouping
- Breadcrumbs - Clear path navigation through documentation
- Table of Contents - Auto-generated from page headings
- Code Highlighting - Syntax highlighting for all code examples
- Copy Button - Easy code copying from examples
- Mobile-Optimized - Touch-friendly interface for tablets and phones
/vercel/share/v0-project/
├── app/
│ ├── page.tsx # Landing page
│ ├── layout.tsx # Root layout
│ ├── globals.css # Global styles & theme
│ └── docs/
│ ├── layout.tsx # Documentation layout with sidebar
│ ├── page.tsx # Documentation index
│ ├── installation/
│ │ ├── page.tsx # Installation index
│ │ ├── panel.mdx # Panel installation guide
│ │ ├── plyorde.mdx # Plyorde installation guide
│ │ └── environments.mdx # Environment-specific guides
│ ├── api/
│ │ ├── page.tsx # API documentation index
│ │ ├── overview.mdx # API overview
│ │ ├── authentication.mdx # Authentication guide
│ │ └── plyorde/
│ │ ├── endpoints.mdx # Complete endpoint reference
│ │ └── examples.mdx # Code examples
│ └── guides/
│ ├── architecture.mdx # Architecture explanation
│ ├── deployment.mdx # Deployment guide
│ └── security.mdx # Security best practices
├── components/
│ ├── Navbar.tsx # Navigation bar
│ ├── Sidebar.tsx # Documentation sidebar
│ ├── SearchDialog.tsx # Search component
│ ├── CodeBlock.tsx # Syntax-highlighted code blocks
│ ├── Breadcrumb.tsx # Breadcrumb navigation
│ ├── TableOfContents.tsx # Auto-generated TOC
│ ├── Footer.tsx # Footer component
│ └── ui/ # shadcn/ui components
├── lib/
│ ├── docs.ts # Documentation structure & data
│ ├── search.ts # Search functionality
│ └── utils.ts # Utility functions
├── package.json
└── tailwind.config.ts
- Framework: Next.js 16 with TypeScript
- Styling: Tailwind CSS 4.2
- UI Components: shadcn/ui
- MDX: Content as React components
- Search: Fuse.js for client-side full-text search
- Icons: Lucide React
- Syntax Highlighting: Shiki
- Hosting: Vercel
- Node.js 18+
- npm, yarn, or pnpm package manager
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Start production server
pnpm startThe site will be available at http://localhost:3000
-
Landing Page (
/)- Overview of PlyWP features and benefits
- Quick navigation to key sections
-
Documentation Index (
/docs)- Main documentation portal
- Overview of all documentation sections
-
Installation Guides (
/docs/installation/*)- Step-by-step installation instructions
- Environment-specific guides
- Troubleshooting tips
-
API Documentation (
/docs/api/*)- API overview and authentication
- Complete endpoint reference
- Code examples in multiple languages
-
Guides (
/docs/guides/*)- Architecture explanation
- Deployment strategies
- Security best practices
- Press Cmd+K (Mac) or Ctrl+K (Windows/Linux) to open search
- Click the search icon in the navbar
- Search by title, topic, or content
- Real-time filtering as you type
- Use the sidebar to browse documentation sections
- Click breadcrumbs at the top to navigate
- Use Table of Contents (right side, desktop) to jump to sections
- Mobile menu for touch devices
Edit /app/globals.css to customize the color scheme:
:root {
--background: oklch(0.08 0 0);
--foreground: oklch(0.95 0 0);
--primary: oklch(0.5 0.15 263);
/* ... more colors ... */
}Fonts are defined in tailwind.config.ts:
fontFamily: {
sans: ['Geist', 'sans-serif'],
mono: ['Geist Mono', 'monospace'],
}Update /lib/docs.ts to add or modify documentation sections:
export const docSections: DocSection[] = [
{
title: 'Your Section',
items: [
{
title: 'Your Page',
href: '/docs/your-path',
section: 'your-section',
description: 'Description here'
}
]
}
];# Push to GitHub
git push origin main
# Vercel auto-deploys from GitHub
# or use Vercel CLI
vercel deploy# Build Docker image
docker build -t plywp-docs .
# Run container
docker run -p 3000:3000 plywp-docs# Build production bundle
pnpm build
# Start server
pnpm startServer will listen on port 3000.
- Fast Build Time: ~4-5 seconds with Turbopack
- Optimized Images: Automatic image optimization
- Code Splitting: Lazy loading of pages and components
- Static Generation: Pages pre-generated for speed
- Caching: Intelligent caching strategies
- Metadata: Title, description, and OG tags on all pages
- Sitemap: Auto-generated sitemap for search engines
- Open Graph: Social media sharing optimized
- Twitter Cards: Enhanced Twitter sharing
- Structured Data: Schema.org markup where applicable
- WCAG 2.1 AA Compliant: Accessibility standards met
- Semantic HTML: Proper heading hierarchy and structure
- Keyboard Navigation: Full keyboard support
- Screen Readers: Compatible with assistive technologies
- Color Contrast: High contrast for readability
- Focus States: Clear focus indicators
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
To contribute to the documentation:
- Edit MDX Files: Modify content in
/app/docs/**/*.mdx - Add Examples: Update code examples in documentation
- Improve Guides: Enhance existing guides with more details
- Report Issues: Found an error? Open an issue on GitHub
MIT License - See LICENSE file for details
- Issues: Report issues on GitHub
- Discussions: Join GitHub Discussions
- Documentation: Read full documentation at
/docs - Examples: Check code examples in API documentation
- Complete landing page with features and benefits
- Full installation documentation for Panel and Plyorde
- Comprehensive API reference with endpoints and examples
- Architecture, deployment, and security guides
- Professional dark theme
- Global search functionality
- Mobile-responsive design
- Production-ready deployment
Built with Next.js 16 • Tailwind CSS • shadcn/ui