This directory contains the documentation website for the VIP Block Data API plugin, built with Docusaurus.
- Node.js 18.0 or higher
- npm or yarn
npm installStart the development server:
npm startThis command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
Generate static content for production:
npm run buildThis command generates static content into the build directory and can be served using any static contents hosting service.
Test the production build locally:
npm run serveThe documentation is automatically deployed to GitHub Pages when changes are pushed to the trunk branch. The deployment is handled by GitHub Actions (see .github/workflows/deploy-docs.yml).
docs/
├── docs/ # Documentation pages
│ ├── intro.md # Introduction and overview
│ ├── getting-started.md # Installation and setup guide
│ ├── api/ # API reference documentation
│ │ ├── rest-api.md # REST API reference
│ │ ├── graphql-api.md # GraphQL API reference
│ │ └── response-format.md # Response format details
│ ├── hooks/ # WordPress hooks documentation
│ │ ├── filters.md # Filters reference
│ │ └── actions.md # Actions reference
│ ├── 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
├── src/ # Custom components and styles
│ └── css/
│ └── custom.css # Custom CSS
├── static/ # Static files
│ └── img/ # Images
├── docusaurus.config.js # Docusaurus configuration
├── sidebars.js # Sidebar navigation
└── package.json # Dependencies
## Writing Documentation
### Creating a New Page
1. Create a new Markdown file in the appropriate directory under `docs/`
2. Add frontmatter at the top of the file:
```markdown
---
sidebar_position: 1
title: Page Title
---
# Page Title
Your content here...
- The page will automatically be added to the documentation site
Use fenced code blocks with language identifiers:
```javascript
function example() {
return 'Hello World';
}
\```Supported languages include: javascript, typescript, php, bash, json, graphql, jsx, tsx, and more.
Use callouts for important information:
:::info
This is informational content.
:::
:::warning
This is a warning.
:::
:::danger
This is dangerous!
:::
:::tip
This is a helpful tip.
:::Internal links (to other docs pages):
[Link text](./other-page.md)
[Link text](../category/page.md)External links:
[WordPress VIP](https://wpvip.com/)Custom styles are defined in src/css/custom.css. The documentation follows the WordPress VIP design system.
--ifm-color-primary: #0675C4;
--ifm-color-primary-dark: #0569b1;
/* See custom.css for complete list */When contributing to the documentation:
- Ensure your changes follow the existing style and structure
- Test locally with
npm startbefore committing - Check that the build succeeds with
npm run build - Keep examples practical and well-commented
- Update the sidebar configuration in
sidebars.jsif adding new sections
The documentation is part of the VIP Block Data API plugin and is licensed under GPL-3.0.