Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New documentation site (Docusaurus) (#398)
Solves #323, related to #217. # Description This commit revisits the documentation site. Here's a preview: https://wordpress.github.io/wordpress-playground/docs/blueprints-api/steps/ (I went ahead and deployed it to github.io even tough this PR isn't merged yet since it's a much better entry point to the project). ## What changed? This PR: * Adds the missing bits of the documentation and improve the structure * Adds the first interactive examples with more to come * Generates parts of the docs directly from the doc strings * Adds link validation * Improves readability and interconnectedness between the content pages and the API reference It is the first step towards addressing the following issues with the current documentation: * It is incomplete * It is not interactive * It is not connected to code and a PR can make it go stale * It is not testable and there's no way to know whether the code snippets still work * API docs can be hard to read * Dead links – no link validation ## Technical details * Docusaurus uses [MDX](https://mdxjs.com/) which is essentially Markdown + React. * TypeScript documentation is generated with Typedoc and included using a Docusaurus plugin. * Repeatable code snippets are abstracted to fragments. Updating them once updates all the occurrences in the docs. * We can use React components inside the mdx files. Super useful for code examples and auto-displaying information derived from the TypeScript code. A few practical example of what's so good about this approach ### API Reference integration <img width="600" alt="CleanShot 2023-05-21 at 14 07 17@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/9a755d3c-e205-4b75-b3c4-bb0cd2bcd131"> ### Runnable code examples <img width="530" alt="CleanShot 2023-05-21 at 14 03 57@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/466bb639-1bda-4303-9ce6-6a05eb234cab"> <img width="530" alt="CleanShot 2023-05-21 at 14 03 50@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/c74916b3-0890-437e-beab-87b60b480fab"> ### Reusable content <img width="400" alt="CleanShot 2023-05-21 at 14 06 38@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/78b3b7b1-042d-46c7-bfa4-c87f2f115d2e"> <img width="400" alt="CleanShot 2023-05-21 at 14 06 14@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/b15d3238-5bca-47e1-bc2e-7ff31a58acc7"> ### Inline TOC <img width="300" alt="CleanShot 2023-05-21 at 14 05 14@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/42a10f13-4f54-4a2c-bb5a-d9a66db85333"> <img width="300" alt="CleanShot 2023-05-21 at 14 05 35@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/e5e374c7-d790-4c89-beb0-f064ccb8588c"> ### Deriving Blueprint steps from code With this PR, adding a Blueprint step into the codebase will automatically add it to the docs. If it has a usage example, it will be rendered as a live code snippet. In the future, it will be editable and the CI will verify whether it still works. <img width="441" alt="CleanShot 2023-05-21 at 01 23 22@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/80b265f9-6954-45a1-bd35-e888fe3e5f91"> ### Docusaurus prevents broken links <img width="450" alt="CleanShot 2023-05-21 at 00 58 36@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/b5e57360-9f2d-4676-9888-557c4c0bcf0c"> ### TypeScript comment embedded inside of a documentation page <img width="343" alt="CleanShot 2023-05-21 at 01 41 58@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/c4cf1811-549e-4d21-ae8a-3009f8024b5a"> <img width="445" alt="CleanShot 2023-05-21 at 01 42 24@2x" src="https://github.com/WordPress/wordpress-playground/assets/205419/5d6a9d5b-1286-466b-a082-fcdcc5659439">
- Loading branch information