Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New documentation site (Docusaurus) #398

Merged
merged 19 commits into from
May 21, 2023
Merged

New documentation site (Docusaurus) #398

merged 19 commits into from
May 21, 2023

Conversation

adamziel
Copy link
Collaborator

@adamziel adamziel commented May 20, 2023

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 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

CleanShot 2023-05-21 at 14 07 17@2x

Runnable code examples

CleanShot 2023-05-21 at 14 03 57@2x CleanShot 2023-05-21 at 14 03 50@2x

Reusable content

CleanShot 2023-05-21 at 14 06 38@2x CleanShot 2023-05-21 at 14 06 14@2x

Inline TOC

CleanShot 2023-05-21 at 14 05 14@2x CleanShot 2023-05-21 at 14 05 35@2x

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.

CleanShot 2023-05-21 at 01 23 22@2x

Docusaurus prevents broken links

CleanShot 2023-05-21 at 00 58 36@2x

TypeScript comment embedded inside of a documentation page

CleanShot 2023-05-21 at 01 41 58@2x CleanShot 2023-05-21 at 01 42 24@2x

The current documentation suffers from a few problems:

* 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

This commit is the first step towards fixing these problems. It:

* 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

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.
@adamziel adamziel added [Type] Documentation Improvements or additions to documentation [Type] Enhancement New feature or request Mission-critical labels May 20, 2023
@adamziel adamziel changed the title New documentation site built with Docusaurus New documentation site (Docusaurus) May 20, 2023
@adamziel adamziel force-pushed the docs-docusaurus-site branch from 4d083d7 to ac766ac Compare May 21, 2023 21:16
@adamziel
Copy link
Collaborator Author

I'll go ahead and merge this one. I'm sure there are typos and things missing, but the value add is clear so let's keep iterating from trunk.

.gitignore Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Mission-critical [Type] Documentation Improvements or additions to documentation [Type] Enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants