Skip to content

Commit

Permalink
New documentation site (Docusaurus) (#398)
Browse files Browse the repository at this point in the history
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
adamziel authored May 21, 2023
1 parent c74d038 commit 6855241
Show file tree
Hide file tree
Showing 134 changed files with 26,718 additions and 2,210 deletions.
1 change: 1 addition & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ jobs:
- uses: actions/checkout@v2
with:
fetch-depth: 0
- uses: actions/setup-node@v3
- uses: nrwl/nx-set-shas@v3
with:
main-branch-name: 'trunk'
Expand Down
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ var
.vitepress
__pycache__
packages/php-wasm/node/src/test/__test*
packages/docs/site/src/model.json
.docusaurus
dist.zip

# dependencies
Expand Down
9 changes: 8 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,12 @@
},
"autoImportFileExcludePatterns": [
"@wp-playground/client"
]
],
"frontMatter.content.pageFolders": [
{
"title": "Start here",
"path": "[[workspace]]/packages/docs/site/docs/01-start-here"
}
],
"git.ignoreLimitWarning": true
}
11 changes: 11 additions & 0 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
This project comes under the WordPress [Etiquette](https://wordpress.org/about/etiquette/):

In the WordPress open source project, we realize that our biggest asset is the community that we foster. The project, as a whole, follows these basic philosophical principles from The Cathedral and The Bazaar.

- Contributions to the WordPress open source project are for the benefit of the WordPress community as a whole, not specific businesses or individuals. All actions taken as a contributor should be made with the best interests of the community in mind.
- Participation in the WordPress open source project is open to all who wish to join, regardless of ability, skill, financial status, or any other criteria.
- The WordPress open source project is a volunteer-run community. Even in cases where contributors are sponsored by companies, that time is donated for the benefit of the entire open source community.
- Any member of the community can donate their time and contribute to the project in any form including design, code, documentation, community building, etc. For more information, go to make.wordpress.org.
- The WordPress open source community cares about diversity. We strive to maintain a welcoming environment where everyone can feel included, by keeping communication free of discrimination, incitement to violence, promotion of hate, and unwelcoming behavior.

The team involved will block any user who causes any breach in this.
Loading

0 comments on commit 6855241

Please sign in to comment.