From dbcdf65d888a9e61aa81f5cfa32d24d6bec2c843 Mon Sep 17 00:00:00 2001
From: Ronny Shani <63248335+ironnysh@users.noreply.github.com>
Date: Wed, 1 May 2024 20:37:59 +0200
Subject: [PATCH] Reorganize and update documentation (#1354)
## What is this PR doing?
1. Reorganizing the **Contributing** chapter of the docs, and updating
the content. See [this
issue](https://github.com/adamziel/playground-docs-workflow/issues/31#issuecomment-2061532195)
2. Adding references to [the Developer
docs](https://developer.wordpress.org/) in relevant Blueprints steps.
See #1291.
~### To-Do:~
- [x] Update [wp-now](https://www.npmjs.com/package/@wp-now/wp-now)
README.
**Done** in [Update wp-now documentation
#251](https://github.com/WordPress/playground-tools/pull/251).
## Testing Instructions
1. Build the site (standard `npm run build` to update the steps in
`packages/playground/blueprints/src/lib/steps/`)
2. Run `npm run dev:docs`.
3. Review the changes.
@adamziel
---
package.json | 1 +
.../docs/site/docs/01-start-here/01-index.md | 4 +-
packages/docs/site/docs/04-nodejs/01-index.md | 27 ----
.../docs/05-local-development/01-wp-now.md | 41 +++++++
.../02-vscode-extension.md | 16 +++
.../05-local-development/03-php-wasm-node.md | 19 +++
.../docs/05-local-development/_category_.json | 3 +
.../06-playground-apis/02-api-concepts.md | 2 +-
.../site/docs/11-architecture/01-index.md | 21 +++-
.../10-browser-iframe-rendering.md | 18 ++-
.../site/docs/11-architecture/15-wordpress.md | 8 +-
.../18-host-your-own-playground.md | 7 +-
.../docs/site/docs/12-limitations/01-index.md | 37 +++---
.../site/docs/13-contributing/01-index.md | 28 +++--
.../docs/site/docs/13-contributing/02-code.md | 74 +++++++----
.../13-contributing/03-coding-standards.md | 76 ++++--------
.../04-packages-and-projects.md | 112 -----------------
.../site/docs/13-contributing/05-triage.md | 15 ---
.../docs/13-contributing/06-publishing.md | 41 -------
.../docs/13-contributing/07-crash-reports.md | 21 ----
.../13-contributing/09-contributor-day.md | 111 +++++++++++++++++
.../docs/13-contributing/20-documentation.md | 70 ++++-------
.../site/docs/14-contributor-day/01-index.md | 116 ------------------
packages/docs/site/docs/16-faq.md | 18 ---
.../site/docs/_fragments/_limitations_ui.md | 13 --
.../site/docs/_fragments/_wp_now_overview.mdx | 9 --
.../src/lib/steps/define-site-url.ts | 6 +-
.../src/lib/steps/define-wp-config-consts.ts | 5 +-
.../src/lib/steps/enable-multisite.ts | 2 +-
.../src/lib/steps/import-wordpress-files.ts | 4 +-
.../blueprints/src/lib/steps/login.ts | 4 +-
.../blueprints/src/lib/steps/request.ts | 2 +-
.../src/lib/steps/run-php-with-options.ts | 2 +-
.../blueprints/src/lib/steps/run-php.ts | 1 +
.../blueprints/src/lib/steps/site-data.ts | 6 +-
.../blueprints/src/lib/steps/wp-cli.ts | 2 +-
36 files changed, 382 insertions(+), 560 deletions(-)
delete mode 100644 packages/docs/site/docs/04-nodejs/01-index.md
create mode 100644 packages/docs/site/docs/05-local-development/01-wp-now.md
create mode 100644 packages/docs/site/docs/05-local-development/02-vscode-extension.md
create mode 100644 packages/docs/site/docs/05-local-development/03-php-wasm-node.md
create mode 100644 packages/docs/site/docs/05-local-development/_category_.json
delete mode 100644 packages/docs/site/docs/13-contributing/04-packages-and-projects.md
delete mode 100644 packages/docs/site/docs/13-contributing/05-triage.md
delete mode 100644 packages/docs/site/docs/13-contributing/06-publishing.md
delete mode 100644 packages/docs/site/docs/13-contributing/07-crash-reports.md
create mode 100644 packages/docs/site/docs/13-contributing/09-contributor-day.md
delete mode 100644 packages/docs/site/docs/14-contributor-day/01-index.md
delete mode 100644 packages/docs/site/docs/16-faq.md
delete mode 100644 packages/docs/site/docs/_fragments/_limitations_ui.md
delete mode 100644 packages/docs/site/docs/_fragments/_wp_now_overview.mdx
diff --git a/package.json b/package.json
index 4e7d237630..42ac4c3d74 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"build": "nx run-many --all --target=build",
"build:website": "nx build playground-website",
"build:docs": "nx build docs-site",
+ "dev:docs": "nx dev docs-site",
"changelog": "bun ./packages/meta/bin/update-changelog.ts; cp CHANGELOG.md packages/docs/site/docs/17-changelog.md",
"deploy:docs": "gh-pages -d dist/docs/build -t true",
"dev": "nx dev playground-website",
diff --git a/packages/docs/site/docs/01-start-here/01-index.md b/packages/docs/site/docs/01-start-here/01-index.md
index 47fb19c7a5..37f389ce2f 100644
--- a/packages/docs/site/docs/01-start-here/01-index.md
+++ b/packages/docs/site/docs/01-start-here/01-index.md
@@ -24,9 +24,9 @@ This site (Documentation) is where you will find all the information you need to
- [Start using WordPress Playground](../02-start-using/01-index.md) in 5 minutes (and check out the [demo site](https://playground.wordpress.net/))
- [Build your first app](../03-build-an-app/01-index.md) with WordPress Playground
-- Use Playground as a zero-setup [local development environment](../04-nodejs/01-index.md#start-a-zero-setup-dev-environment-via-vscode-extension)
+- Use Playground as a zero-setup [local development environment](../05-local-development/02-vscode-extension.md)
- Read about the [limitations](../12-limitations/01-index.md)
-- [WordCamp Contributor Day](../14-contributor-day/01-index.md)
+- [WordCamp Contributor Day](../13-contributing/09-contributor-day.md)
## Take a deep dive
diff --git a/packages/docs/site/docs/04-nodejs/01-index.md b/packages/docs/site/docs/04-nodejs/01-index.md
deleted file mode 100644
index 1704dbbdde..0000000000
--- a/packages/docs/site/docs/04-nodejs/01-index.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: Usage in Node.js
-slug: /usage-in-node-js
----
-
-# Using WordPress Playground in Node.js
-
-As a WebAssembly project, WordPress Playground can also be used in Node.js. Here's how you can do it:
-
-import TOCInline from '@theme/TOCInline';
-
-
-
-## Start a zero-setup dev environment via VScode extension
-
-You can use the [VScode extension](https://marketplace.visualstudio.com/items?itemName=WordPressPlayground.wordpress-playground) to develop your plugin or theme locally without installing Apache or MySQL.
-
-The extension ships with a portable WebAssembly version of PHP and sets up WordPress to use SQLite. All you have to do is click the "Start WordPress Server" button in VScode:
-
-import Image from '@theme/IdealImage';
-import vsCodeScreenshot from '@site/static/img/start-wordpress-server.png';
-
-
-
-### Work directly with WebAssembly PHP for Node.js
-
-And if you need a low-level control over the underlying WebAssembly PHP build, take a look at the [`@php-wasm/node` package](https://npmjs.org/@php-wasm/node) which ships the PHP WebAssembly runtime. This package is at the core of all WordPress Playground tools for Node.js.
diff --git a/packages/docs/site/docs/05-local-development/01-wp-now.md b/packages/docs/site/docs/05-local-development/01-wp-now.md
new file mode 100644
index 0000000000..79416bb646
--- /dev/null
+++ b/packages/docs/site/docs/05-local-development/01-wp-now.md
@@ -0,0 +1,41 @@
+---
+slug: wp-now
+---
+
+# wp-now NPM package
+
+[`@wp-now/wp-now`](https://www.npmjs.com/package/@wp-now/wp-now) is a CLI tool to spin up a WordPress site with a single command. Similarly to the [VS Code extension](/05-local-development/02-vscode-extension.md), it uses a portable WebAssembly version of PHP and SQLite. No Docker, MySQL, or Apache are required.
+
+## Launch wp-now in a plugin or theme directory
+
+Navigate to your plugin or theme directory and start `wp-now` with the following commands:
+
+```bash
+cd my-plugin-or-theme-directory
+npx @wp-now/wp-now start
+```
+
+## Launch wp-now in the `wp-content` directory with options
+
+You can also start `wp-now` from any `wp-content` folder. The following example passes parameters for changing the PHP and WordPress versions and loading a blueprint file.
+
+```bash
+cd my-wordpress-folder/wp-content
+npx @wp-now/wp-now start --wp=6.4 --php=8.0 --blueprint=path/to/blueprint.json
+```
+
+:::info **Documentation**
+
+`wp-now` is maintained in a different GitHub repository, [Playground Tools](https://github.com/WordPress/playground-tools/). You can find the latest documentation in the [dedicated README file](https://github.com/WordPress/playground-tools/blob/trunk/packages/wp-now/README.md).
+
+:::
+
+## Install wp-now globally
+
+Alternatively, you can install `@wp-now/wp-now` globally to load it from any directory:
+
+```bash
+npm install -g @wp-now/wp-now
+cd my-plugin-or-theme-directory
+wp-now start
+```
diff --git a/packages/docs/site/docs/05-local-development/02-vscode-extension.md b/packages/docs/site/docs/05-local-development/02-vscode-extension.md
new file mode 100644
index 0000000000..6de86fa23d
--- /dev/null
+++ b/packages/docs/site/docs/05-local-development/02-vscode-extension.md
@@ -0,0 +1,16 @@
+# VS Code extension
+
+Start a zero-setup development environment using the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=WordPressPlayground.wordpress-playground), and develop your plugin or theme locally without installing Apache or MySQL.
+
+:::info **Documentation**
+
+The VS Code extension is maintained in a different GitHub repository, [Playground Tools](https://github.com/WordPress/playground-tools/). You can find the latest documentation in the [dedicated README file](https://github.com/WordPress/playground-tools/blob/trunk/packages/vscode-extension/README.md).
+
+:::
+
+The extension ships with a portable WebAssembly version of PHP and sets up WordPress to use SQLite. Once installed, all you have to do is click the **Start WordPress Server** button in VS Code:
+
+import Image from '@theme/IdealImage';
+import vsCodeScreenshot from '@site/static/img/start-wordpress-server.png';
+
+
diff --git a/packages/docs/site/docs/05-local-development/03-php-wasm-node.md b/packages/docs/site/docs/05-local-development/03-php-wasm-node.md
new file mode 100644
index 0000000000..220283c56c
--- /dev/null
+++ b/packages/docs/site/docs/05-local-development/03-php-wasm-node.md
@@ -0,0 +1,19 @@
+---
+title: php-wasm/node
+---
+
+# Using WordPress Playground in Node.js
+
+As a WebAssembly project, you can also use WordPress Playground in Node.js.
+
+If you need low-level control over the underlying WebAssembly PHP build, take a look at the [`@php-wasm/node` package](https://npmjs.org/@php-wasm/node) which ships the PHP WebAssembly runtime. This package is at the core of all WordPress Playground tools for Node.js.
+
+:::info **API reference**
+
+Consult the [complete list](/api/node) of Classes, Functions, Interfaces, and Type Aliases.
+
+:::
+
+import PHPWASMNode from '@php-wasm/node/\README.md';
+
+
diff --git a/packages/docs/site/docs/05-local-development/_category_.json b/packages/docs/site/docs/05-local-development/_category_.json
new file mode 100644
index 0000000000..2db6aaf32f
--- /dev/null
+++ b/packages/docs/site/docs/05-local-development/_category_.json
@@ -0,0 +1,3 @@
+{
+ "label": "Local Development"
+}
diff --git a/packages/docs/site/docs/06-playground-apis/02-api-concepts.md b/packages/docs/site/docs/06-playground-apis/02-api-concepts.md
index 8796c5bce6..95e8b0e754 100644
--- a/packages/docs/site/docs/06-playground-apis/02-api-concepts.md
+++ b/packages/docs/site/docs/06-playground-apis/02-api-concepts.md
@@ -6,7 +6,7 @@ title: Concepts
WordPress Playground in the browser is all about links and iframes. Regardless of which API you choose, you will use it in one of the following ways:
-### Link to the Playground site
+## Link to the Playground site
You can customize WordPress Playground by modifying the https://playground.wordpress.net/ link. You can, for example, create a post, request a specific plugin, or run any PHP code.
diff --git a/packages/docs/site/docs/11-architecture/01-index.md b/packages/docs/site/docs/11-architecture/01-index.md
index 35f2a5d26e..f64e70afbc 100644
--- a/packages/docs/site/docs/11-architecture/01-index.md
+++ b/packages/docs/site/docs/11-architecture/01-index.md
@@ -1,4 +1,4 @@
-# Architecture Overview
+# Architecture overview
WordPress Playground consists of the following high-level components:
@@ -9,3 +9,22 @@ WordPress Playground consists of the following high-level components:
- [Public API](../06-playground-apis/01-index.md)
Visit each section to learn more about the specific parts of the architecture.
+
+## Tooling
+
+### NX: building packages and projects
+
+WordPress Playground uses [NX](https://nx.dev/), a build system designed for monorepos.
+
+The dependencies between Playground packages and projects [are too complex](https://github.com/WordPress/wordpress-playground/pull/151) for a bundler like Webpack, and NX handles this complexity much better:
+![Dependency graph](@site/static/img/dependencies.png)
+
+To learn more, head over to the [NX developer docs](https://nx.dev/getting-started/intro).
+
+### Lerna: publishing packages and projects
+
+WordPress Playground includes several NPM packages, a VS Code extension, WordPress plugins, a web app, and other GitHub releases, all managed across two monorepos: the main [wordpress-playground](https://github.com/WordPress/wordpress-playground) and [Playground Tools](https://github.com/WordPress/playground-tools/).
+
+We use [Lerna](https://lerna.js.org) to build, manage, and publish all JavaScript/TypeScript packages. Lerna handles everything simultaneously: it increments the version number, sets a new tag, and publishes the modified packages to `npm`.
+
+The published packages share the same version number, so when updating a single package, Lerna bumps the version number of all dependent packages.
diff --git a/packages/docs/site/docs/11-architecture/10-browser-iframe-rendering.md b/packages/docs/site/docs/11-architecture/10-browser-iframe-rendering.md
index 397082a8c9..085b1f3f6b 100644
--- a/packages/docs/site/docs/11-architecture/10-browser-iframe-rendering.md
+++ b/packages/docs/site/docs/11-architecture/10-browser-iframe-rendering.md
@@ -1,6 +1,6 @@
# Iframe-based rendering
-All the PHPRequestHandler responses must be rendered in an iframe to avoid reloading the page. Remember, the entire setup only lives as long as the main `index.html`. We want to avoid reloading the main app at all cost.
+To avoid page reloads, all the `PHPRequestHandler` responses must be rendered in an iframe. Remember, the entire setup only lives as long as the main `index.html`. We want to avoid reloading the main app at all costs.
In our app example above, `index.php` renders the following HTML:
@@ -8,7 +8,7 @@ In our app example above, `index.php` renders the following HTML:
Go to page.php
```
-Imagine our `index.html` rendered it in a `