PCX review

Author: kodster28

src/content/docs/workers/vite-plugin/get-started.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: get-started
 title: Get started
-head: []
 sidebar:
   order: 1
 description: Get started with the Vite plugin
@@ -14,9 +13,9 @@ This guide demonstrates creating a standalone Worker from scratch.
 {/* Add link to React Router framework guide */}If you would instead like to create a new application from a ready-to-go template, refer to the [React](/workers/frameworks/framework-guides/react/) or [Vue](/workers/frameworks/framework-guides/vue/) framework guides.
 :::
 
-### Start with a basic `package.json`
+## Start with a basic `package.json`
 
-```json
+```json title="package.json"
 {
 	"name": "cloudflare-vite-quick-start",
 	"private": true,
@@ -35,15 +34,13 @@ This guide demonstrates creating a standalone Worker from scratch.
 Ensure that you include `"type": "module"` in order to use ES modules by default.
 :::
 
-### Install the dependencies
+## Install the dependencies
 
 <PackageManagers type="add" pkg="vite @cloudflare/vite-plugin wrangler" dev />
 
-### Create your Vite config file and include the Cloudflare plugin
-
-```ts
-// vite.config.ts
+## Create your Vite config file and include the Cloudflare plugin
 
+```ts title="vite.config.ts"
 import { defineConfig } from "vite";
 import { cloudflare } from "@cloudflare/vite-plugin";
 
@@ -54,9 +51,9 @@ export default defineConfig({
 
 The Cloudflare Vite plugin doesn't require any configuration by default and will look for a `wrangler.jsonc`, `wrangler.json` or `wrangler.toml` in the root of your application.
 
-Refer to the [API reference](/workers/vite-plugin/api/) for configuration options.
+Refer to the [API reference](/workers/vite-plugin/reference/api/) for configuration options.
 
-### Create your Worker config file
+## Create your Worker config file
 
 <WranglerConfig>
 
@@ -69,16 +66,14 @@ main = "./src/index.ts"
 </WranglerConfig>
 
 The `name` field specifies the name of your Worker.
-By default, this is also used as the name of the Worker's Vite Environment (see [Vite Environments](/workers/vite-plugin/vite-environments/) for more information).
+By default, this is also used as the name of the Worker's Vite Environment (see [Vite Environments](/workers/vite-plugin/reference/vite-environments/) for more information).
 The `main` field specifies the entry file for your Worker code.
 
 For more information about the Worker configuration, see [Configuration](/workers/wrangler/configuration/).
 
-### Create your Worker entry file
-
-```ts
-// src/index.ts
+## Create your Worker entry file
 
+```ts title="src/index.ts"
 export default {
 	fetch() {
 		return new Response(`Running in ${navigator.userAgent}!`);
@@ -88,6 +83,6 @@ export default {
 
 A request to this Worker will return 'Running in Cloudflare-Workers!', demonstrating that the code is running inside the Workers runtime.
 
-### Dev, build, preview and deploy
+## Dev, build, preview and deploy
 
 You can now start the Vite development server (`npm run dev`), build the application (`npm run build`), preview the built application (`npm run preview`), and deploy to Cloudflare (`npm run deploy`).

src/content/docs/workers/vite-plugin/index.mdx

@@ -3,7 +3,6 @@ pcx_content_type: overview
 title: Vite plugin
 sidebar:
   order: 16
-head: []
 description: A full-featured integration between Vite and the Workers runtime
 ---
 

src/content/docs/workers/vite-plugin/api.mdx renamed to src/content/docs/workers/vite-plugin/reference/api.mdx

@@ -1,19 +1,16 @@
 ---
 pcx_content_type: reference
 title: API
-head: []
 sidebar:
   order: 3
 description: Vite plugin API
 ---
 
-### `cloudflare()`
+## `cloudflare()`
 
 The `cloudflare` plugin should be included in the Vite `plugins` array:
 
-```ts {4, 7}
-// vite.config.ts
-
+```ts {4, 7} title="vite.config.ts"
 import { defineConfig } from "vite";
 import { cloudflare } from "@cloudflare/vite-plugin";
 
@@ -24,7 +21,7 @@ export default defineConfig({
 
 It accepts an optional `PluginConfig` parameter.
 
-### `interface PluginConfig`
+## `interface PluginConfig`
 
 - `configPath?: string`
 
@@ -40,7 +37,7 @@ It accepts an optional `PluginConfig` parameter.
   Setting the name here will override this.
   A typical use case is setting `viteEnvironment: { name: "ssr" }` to apply the Worker to the SSR environment.
 
-  See [Vite Environments](/workers/vite-plugin/vite-environments/) for more information.
+  See [Vite Environments](/workers/vite-plugin/reference/vite-environments/) for more information.
 
 - `persistState?: boolean | { path: string }`
 
@@ -54,7 +51,7 @@ It accepts an optional `PluginConfig` parameter.
   By default, the debugging inspector is enabled and listens on port `9229`.
   A custom port can be provided or, alternatively, setting this to `false` will disable the debugging inspector.
 
-  See [Debugging](/workers/vite-plugin/debugging/) for more information.
+  See [Debugging](/workers/vite-plugin/reference/debugging/) for more information.
 
 - `auxiliaryWorkers?: Array<AuxiliaryWorkerConfig>`
 
@@ -70,7 +67,7 @@ If using multiple Workers, each auxiliary Worker must be deployed individually.
 You can inspect the `dist` directory and then run `wrangler deploy -c dist/<auxiliary-worker>/wrangler.json` for each.
 :::
 
-### `interface AuxiliaryWorkerConfig`
+## `interface AuxiliaryWorkerConfig`
 
 - `configPath: string`
 
@@ -84,4 +81,4 @@ You can inspect the `dist` directory and then run `wrangler deploy -c dist/<auxi
   By default, the environment name is the Worker name with `-` characters replaced with `_`.
   Setting the name here will override this.
 
-  See [Vite Environments](/workers/vite-plugin/vite-environments/) for more information.
+  See [Vite Environments](/workers/vite-plugin/reference/vite-environments/) for more information.

src/content/docs/workers/vite-plugin/cloudflare-environments.mdx renamed to src/content/docs/workers/vite-plugin/reference/cloudflare-environments.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: reference
 title: Cloudflare Environments
-head: []
 sidebar:
   order: 9
 description: Using Cloudflare environments with the Vite plugin
@@ -48,7 +47,7 @@ This flattened configuration combines [top-level only](/workers/wrangler/configu
 :::note
 The default Vite environment name for a Worker is always the top-level Worker name.
 This enables you to reference the Worker consistently in your Vite config when using multiple Cloudflare environments.
-See [Vite Environments](/workers/vite-plugin/vite-environments/) for more information.
+See [Vite Environments](/workers/vite-plugin/reference/vite-environments/) for more information.
 :::
 
 Cloudflare environments can also be used in development.
@@ -60,7 +59,7 @@ Running `vite dev` or `vite build` without providing `CLOUDFLARE_ENV` will use t
 As Cloudflare environments are applied at dev and build time, specifying `CLOUDFLARE_ENV` when running `vite preview` or `wrangler deploy` will have no effect.
 :::
 
-### Combining Cloudflare environments and Vite modes
+## Combining Cloudflare environments and Vite modes
 
 You may wish to combine the concepts of [Cloudflare environments](/workers/wrangler/environments/) and [Vite modes](https://vite.dev/guide/env-and-mode.html#modes).
 With this approach, the Vite mode can be used to select the Cloudflare environment and a single method can be used to determine environment specific configuration and code.

src/content/docs/workers/vite-plugin/debugging.mdx renamed to src/content/docs/workers/vite-plugin/reference/debugging.mdx

@@ -1,17 +1,16 @@
 ---
 pcx_content_type: reference
 title: Debugging
-head: []
 sidebar:
   order: 5
 description: Debugging with the Vite plugin
 ---
 
 The Cloudflare Vite plugin has debugging enabled by default and listens on port `9229`.
-You may choose a custom port or disable debugging by setting the `inspectorPort` option in the [plugin config](/workers/vite-plugin/api#interface-pluginconfig).
+You may choose a custom port or disable debugging by setting the `inspectorPort` option in the [plugin config](/workers/vite-plugin/reference/api#interface-pluginconfig).
 There are two recommended methods for debugging your Workers during local development:
 
-### DevTools
+## DevTools
 
 When running `vite dev` or `vite preview`, a `/__debug` route is added that provides access to [Cloudflare's implementation](https://github.com/cloudflare/workers-sdk/tree/main/packages/chrome-devtools-patches) of [Chrome's DevTools](https://developer.chrome.com/docs/devtools/overview).
 Navigating to this route will open a DevTools tab for each of the Workers in your application.
@@ -22,11 +21,11 @@ Once the tab(s) are open, you can make a request to your application and start d
 When debugging multiple Workers, you may need to allow your browser to open pop-ups.
 :::
 
-### VS Code
+## VS Code
 
 To set up [VS Code](https://code.visualstudio.com/) to support breakpoint debugging in your application, you should create a `.vscode/launch.json` file that contains the following configuration:
 
-```json
+```json title=".vscode/launch.json"
 {
 	"configurations": [
 		{

src/content/docs/workers/vite-plugin/reference/index.mdx

@@ -0,0 +1,12 @@
+---
+pcx_content_type: navigation
+title: Reference
+sidebar:
+  order: 5
+  group:
+    hideIndex: true
+---
+
+import { DirectoryListing } from "~/components";
+
+<DirectoryListing />

src/content/docs/workers/vite-plugin/migrating-from-wrangler-dev.mdx renamed to src/content/docs/workers/vite-plugin/reference/migrating-from-wrangler-dev.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: reference
 title: Migrating from wrangler dev
-head: []
 sidebar:
   order: 6
 description: Migrating from wrangler dev to the Vite plugin
@@ -10,26 +9,26 @@ description: Migrating from wrangler dev to the Vite plugin
 In most cases, migrating from [`wrangler dev`](/workers/wrangler/commands/#dev) is straightforward and you can follow the instructions in [Get started](/workers/vite-plugin/get-started/).
 There are a few key differences to highlight:
 
-### Input and output Worker config files
+## Input and output Worker config files
 
 With the Cloudflare Vite plugin, your [Worker config file](/workers/wrangler/configuration/) (for example, `wrangler.jsonc`) is the input configuration and a separate output configuration is created as part of the build.
 This output file is a snapshot of your configuration at the time of the build and is modified to reference your build artifacts.
 It is the configuration that is used for preview and deployment.
 Once you have run `vite build`, running `wrangler deploy` or `vite preview` will automatically locate this output configuration file.
 
-### Cloudflare Environments
+## Cloudflare Environments
 
-With the Cloudflare Vite plugin, [Cloudflare Environments](/workers/vite-plugin/cloudflare-environments/) are applied at dev and build time.
+With the Cloudflare Vite plugin, [Cloudflare Environments](/workers/vite-plugin/reference/cloudflare-environments/) are applied at dev and build time.
 Running `wrangler deploy --env some-env` is therefore not applicable and the environment to deploy should instead be set by running `CLOUDFLARE_ENV=some-env vite build`.
 
-### Redundant fields in the Wrangler config file
+## Redundant fields in the Wrangler config file
 
 There are various options in the [Worker config file](/workers/wrangler/configuration/) that are ignored when using Vite, as they are either no longer applicable or are replaced by Vite equivalents.
 If these options are provided, then warnings will be printed to the console with suggestions for how to proceed.
 Examples where the Vite configuration should be used instead include `alias` and `define`.
-See [Vite Environments](/workers/vite-plugin/vite-environments/) for more information about configuring your Worker environments in Vite.
+See [Vite Environments](/workers/vite-plugin/reference/vite-environments/) for more information about configuring your Worker environments in Vite.
 
-### No remote mode
+## No remote mode
 
 The Vite plugin does not support [remote mode](/workers/local-development/#develop-using-remote-resources-and-bindings).
 We will be adding support for accessing remote resources in local development in a future update.

src/content/docs/workers/vite-plugin/secrets.mdx renamed to src/content/docs/workers/vite-plugin/reference/secrets.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: reference
 title: Secrets
-head: []
 sidebar:
   order: 7
 description: Using secrets with the Vite plugin
@@ -13,7 +12,7 @@ import { PackageManagers, WranglerConfig } from "~/components";
 For deployed Workers, they are set via the dashboard or Wrangler CLI.
 
 In local development, secrets can be provided to your Worker by using a [`.dev.vars`](/workers/configuration/secrets/#local-development-with-secrets) file.
-If you are using [Cloudflare Environments](/workers/vite-plugin/cloudflare-environments/) then the relevant `.dev.vars` file will be selected.
+If you are using [Cloudflare Environments](/workers/vite-plugin/reference/cloudflare-environments/) then the relevant `.dev.vars` file will be selected.
 For example, `CLOUDFLARE_ENV=staging vite dev` will load `.dev.vars.staging` if it exists and fall back to `.dev.vars`.
 
 :::note

src/content/docs/workers/vite-plugin/static-assets.mdx renamed to src/content/docs/workers/vite-plugin/reference/static-assets.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: reference
 title: Static Assets
-head: []
 sidebar:
   order: 4
 description: Static assets and the Vite plugin

src/content/docs/workers/vite-plugin/vite-environments.mdx renamed to src/content/docs/workers/vite-plugin/reference/vite-environments.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: reference
 title: Vite Environments
-head: []
 sidebar:
   order: 8
 description: Vite environments and the Vite plugin
@@ -12,7 +11,7 @@ import { WranglerConfig } from "~/components";
 The [Vite Environment API](https://vite.dev/guide/api-environment), released in Vite 6, is the key feature that enables the Cloudflare Vite plugin to integrate Vite directly with the Workers runtime.
 It is not necessary to understand all the intricacies of the Environment API as an end user, but it is useful to have a high-level understanding.
 
-### Default behavior
+## Default behavior
 
 Vite creates two environments by default: `client` and `ssr`.
 A front-end only application uses the `client` environment, whereas a full-stack application created with a framework typically uses the `client` environment for front-end code and the `ssr` environment for server-side rendering.
@@ -23,10 +22,10 @@ This name can be used to reference the environment in your Vite config in order
 
 :::note
 The default Vite environment name for a Worker is always the top-level Worker name.
-This enables you to reference the Worker consistently in your Vite config when using multiple [Cloudflare Environments](/workers/vite-plugin/cloudflare-environments/).
+This enables you to reference the Worker consistently in your Vite config when using multiple [Cloudflare Environments](/workers/vite-plugin/reference/cloudflare-environments/).
 :::
 
-### Environment configuration
+## Environment configuration
 
 In the following example we have a Worker named `my-worker` that is associated with a Vite environment named `my_worker`.
 We use the Vite config to set global constant replacements for this environment:
@@ -41,9 +40,7 @@ main = "./src/index.ts"
 
 </WranglerConfig>
 
-```ts
-// vite.config.ts
-
+```ts title="vite.config.ts"
 import { defineConfig } from "vite";
 import { cloudflare } from "@cloudflare/vite-plugin";
 
@@ -61,16 +58,14 @@ export default defineConfig({
 
 For more information about Vite's configuration options, see [Configuring Vite](https://vite.dev/config/).
 
-The default behavior of using the Worker name as the environment name is appropriate when you have a standalone Worker, such as an API that is accessed from your front-end application, or an [auxiliary Worker](/workers/vite-plugin/api/#interface-pluginconfig) that is accessed via service bindings.
+The default behavior of using the Worker name as the environment name is appropriate when you have a standalone Worker, such as an API that is accessed from your front-end application, or an [auxiliary Worker](/workers/vite-plugin/reference/api/#interface-pluginconfig) that is accessed via service bindings.
 
-### React Router v7
+## React Router v7
 
 If you are using the Cloudflare Vite plugin with [React Router v7](https://reactrouter.com/), then your Worker is used for server-side rendering and tightly integrated with the framework.
 To support this, you should assign it to the `ssr` environment by setting `viteEnvironment.name` in the plugin config.
 
-```ts
-// vite.config.ts
-
+```ts title="vite.config.ts"
 import { defineConfig } from "vite";
 import { cloudflare } from "@cloudflare/vite-plugin";
 import { reactRouter } from "@react-router/dev/vite";