Add comprehensive GitHub Pages documentation site

[whyisjake]

Overview

This PR adds a complete, production-ready documentation site for the VIP Block Data API plugin built with Docusaurus (React-based).

What's Included

📚 Complete Documentation

• Getting Started: Installation, setup, and first API request
• API Reference: Full REST and GraphQL API documentation
• WordPress Hooks: All filters and actions with practical examples
• Guides: Block filtering, custom attributes, bindings, synced patterns
• Examples: REST, GraphQL, React renderer, and filtering examples
• Advanced Topics: Performance, caching, attribute sources, troubleshooting

🎨 Design & Features

• WordPress VIP design system and color scheme (matching docs.wpvip.com)
• Responsive layout with dark mode support
• Mobile-friendly navigation
• Search-ready (Algolia DocSearch integration)
• Clean, modern UI with code syntax highlighting

💻 Technical Implementation

• Built with Docusaurus 3.x
• 20+ documentation pages with extensive code examples
• Complete React block renderer component
• TypeScript type definitions
• Examples for React, Next.js, Apollo Client, and more
• PHP, JavaScript, GraphQL, and bash code examples

🚀 Deployment

• GitHub Actions workflow for automatic deployment to GitHub Pages
• Triggers on pushes to trunk branch
• Static site generation for optimal performance

How to Use

Local Development

cd docs
npm install
npm start

Build for Production

cd docs
npm run build

Enable GitHub Pages

1. Go to repository Settings → Pages
2. Select "GitHub Actions" as the source
3. Merge this PR to deploy automatically

Documentation Site Structure

docs/
├── intro.md                    # Overview and introduction
├── getting-started.md          # Installation and setup
├── api/                        # API reference
│   ├── rest-api.md
│   ├── graphql-api.md
│   └── response-format.md
├── hooks/                      # WordPress hooks
│   ├── filters.md
│   └── actions.md
├── guides/                     # How-to guides
│   ├── block-filtering.md
│   ├── custom-attributes.md
│   ├── block-bindings.md
│   └── synced-patterns.md
├── examples/                   # Code examples
│   ├── rest-api-examples.md
│   ├── graphql-examples.md
│   ├── react-renderer.md
│   └── filtering-blocks.md
└── advanced/                   # Advanced topics
    ├── block-attribute-sources.md
    ├── performance.md
    ├── caching.md
    └── troubleshooting.md

Preview

Once merged and deployed, the documentation will be available at: https://automattic.github.io/vip-block-data-api/

Testing Checklist

• [x] All documentation pages created and organized
• [x] Code examples tested and verified
• [x] WordPress VIP design style applied
• [x] Mobile responsive layout
• [x] Dark mode support
• [x] Navigation structure complete
• [x] GitHub Actions deployment workflow configured
• [x] Local build succeeds
• [x] All internal links work correctly

Benefits

1. Better Developer Experience: Comprehensive, searchable documentation
2. Reduced Support Load: Self-service guides and troubleshooting
3. Professional Presentation: Modern, well-designed documentation site
4. Easy Maintenance: Markdown-based, version-controlled docs
5. Community Growth: Lower barrier to entry for new users

---

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]