Consolidated full development workflow

Author: ToriLindsay

src/assets/images/style-guide/ui-elements/edit.png

@@ -4,89 +4,54 @@ description: |
 sidebar:
     order: 1
 ---
+import { Details } from "~/components";
 
 The [Cloudflare Docs](https://developers.cloudflare.com/) are open source and hosted on the [cloudflare-docs repository](https://github.com/cloudflare/cloudflare-docs) on GitHub. This means that anyone, including those who are not part of the Cloudflare organization, can contribute to them. We welcome all suggestions that help keep our docs high quality and up to date.
 
-To contribute to our docs, you will need to [create an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github) (if you do not have one already) and log in. Then you have two options:
-* **[Create a GitHub issue](#create-a-github-issue)** if you want to quickly submit a general suggestion.
-* **[Create a GitHub pull request](#create-a-github-pull-request)** if you have a specific edit you want to make to a specific doc or docs. This option may require some setup, depending on what method you use.
+To contribute to our docs, you will need to [create an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github) (if you do not have one already) and log in. Then you have three options:
+* [GitHub issue](#create-a-github-issue): Quickly submit a general suggestion.
+* [Quick edit (edit button)](#quick-edit): Quickly open a pull request. This is best if you want to edit a single page in your web browser, and do not need to preview your changes.
+* [Full development](#full-development): Open a pull request. This is best if you want to edit multiple pages and preview your changes. This can be done in your web browser (with [Codespaces](https://docs.github.com/codespaces)) or on your local machine (with [Visual Studio Code](https://code.visualstudio.com/)).
 
 In addition to using the [Cloudflare Style Guide](/style-guide/) for guidance on grammar and style, we recommend browsing our [components](/style-guide/components/) to add additional formatting such as [notes](/style-guide/documentation-content-strategy/component-attributes/notes-tips-warnings/) and [code blocks](/style-guide/components/code/).
 
 ## Create a GitHub issue
 To create a GitHub issue:
-1. [Log in to GitHub](https://github.com/login) and go to the [cloudflare-docs repo](https://github.com/cloudflare/cloudflare-docs).
+1. [Log in to GitHub](https://github.com/login) and go to the [cloudflare-docs repository](https://github.com/cloudflare/cloudflare-docs).
 2. Select **Issues** and then **New issue**.
 3. Select the issue type, fill out the form, and select **Create**.
 
 [Learn more about creating GitHub issues.](https://docs.github.com/en/issues/tracking-your-work-with-issues/using-issues/creating-an-issue)
 
-## Create a GitHub pull request
-There are several methods you can use to create a pull request:
-* **[Edit page](#edit-page)**: This is best if you only want to edit one page, only want to use your web browser, and do not need to preview your changes.
-* **[Create with Codespace](#create-with-codespace)**: This is best if you want to edit multiple pages, only want to use your web browser, and want to preview your changes.
-* **[Edit locally](#edit-locally)**: This more advanced method requires setting up a local environment. Like the Codespace method, it allows you to edit multiple pages and preview your changes.
-
-[Learn more about creating pull requests on GitHub.](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
-
-### Edit page
-To create a GitHub pull request using the edit page method:
+## Quick edit
+To quickly open a pull request using the edit button:
 1. [Log in to GitHub](https://github.com/login).
-2. Go to the page you want to edit in the [Cloudflare Docs](https://developers.cloudflare.com/). Every page in the Cloudflare Docs (including this one) has an **Edit** button on the right sidebar and an **Edit page** button on the very bottom of the page.
-3. Select either **Edit** or **Edit page** on the page you want to edit.
+2. Go to the page you want to edit in the [Cloudflare Docs](https://developers.cloudflare.com/)
+3. Select <Details header="**Edit** or **Edit page**">Every page in the Cloudflare Docs (including this one) has an **Edit** button on the right sidebar and an **Edit page** button on the very bottom of the page.
+ ![Edit icon](~/assets/images/style-guide/ui-elements/edit.png)</Details>
 The page's markdown opens.
 	:::note
-	The first time you create a pull request in the cloudflare-docs repo, you will see a GitHub landing page that says "You need to fork this repository to propose changes." When you see this prompt, select **Fork this repository**. After you create the fork, all future pull requests for cloudflare-docs will write to a new branch in your fork.
+	The first time you create a pull request in the cloudflare-docs repo, you will see a GitHub landing page that says "You need to fork this repository to propose changes." Select **Fork this repository**. All of your future pull requests for cloudflare-docs will write to a new branch on your fork.
 	:::
 4. Make your edits and select **Commit changes**.
 5. In the form, update the **Commit message** with the product you changed in brackets and a brief description of your changes. For example “[Images] Fixed broken link."
 6. Update the **Extended description** with more details about what you changed and why. The more details, the better.
 7. Select **Propose changes** > **Create pull request** > **Create pull request** again.
 
-### Create with Codespace
-To create a GitHub pull request using the create with Codespace method:
-1. [Log in to GitHub](https://github.com/login) and go to the [cloudflare-docs repo](https://github.com/cloudflare/cloudflare-docs).
-2. Select the **Code** dropdown > **Codespaces** tab > **Create codespace on production**. A Codespace will open on the main `production` branch.
-3. Make sure you are on the latest version of `production`. To do so, select the **Source Control** icon in the sidebar > the ellipsis next to **Changes** > **Pull**.
-4. Select the current branch (in this case, `production`) from the bar at the bottom of the window > type a name for your new branch > **Create new branch**.
-	:::note
-	You cannot make changes on the main `production` branch.
-	:::
-5. Select the explorer icon in the left sidebar.
-6. Go to **src** > **content** > **docs** > and locate and select the mdx file you want to edit. The page's markdown opens.
-7. Make your edits.
-8. To preview your changes, type `npm run dev` into the Codespace terminal. A link will appear in the terminal, `https://localhost:1111/`, where you can preview your changes. This link automatically updates with any new edits you make.
-	:::note
-	When using `npm run dev` for the first time, follow the prompts in your terminal to install [Astro](https://astro.build/) and `npm` to your Codespace. If you are not prompted or if you are experiencing errors, install `npm` yourself with the command `npm i`.
-	:::
-9. To stage your changes, select **Source Control** in the left sidebar and select the plus sign next to the file name under **Changes**.
-10. To commit your changes, enter a commit message in the text field that briefly describes your changes, and then select **Commit** > **Publish Branch** > **origin**.
-11. Return to GitHub and select **Compare & pull request** next to your pull request.
-12. Update the title with the product you changed in brackets and a brief description of your changes. For example, “[Images] Fixed broken link." For the description, add more details about what you changed and why. The more details, the better.
-13. Select **Create pull request**.
-
-[Learn more about GitHub Codespaces.](https://docs.github.com/en/codespaces/quickstart)
-
-### Edit locally
-To create a GitHub pull request using the edit locally method, first set up the following local environment:
-* Install Node.js (version 22 or later). We recommend that you install Node.js and `npm` with [Volta](https://volta.sh/) because Volta makes it easy to manage and switch between Node versions. Alternatively, you can [install directly from Node.js](https://nodejs.org/en).
-  ```bash
-  $ curl https://get.volta.sh | bash
-  $ volta install node@22
-  ```
-* Open the project directory and install all required dependencies. You can use `npm`, which came bundled with your Node.js installation, or any other package manager.
-  ```bash
-  $ npm install
-	```
-In addition to your project dependencies, a file called `package-lock.json` is also generated, which ensures that everyone uses the exact same dependency versions. Make sure to commit `package-lock.json` to git whenever it changes.
-
-After setup, follow the same process as the **[Codespace method](#create-with-codespace)**:
-1. Pull production
-2. Create a new branch
-3. Stage your changes
-4. Commit your changes
-5. Publish the changes
-6. Create your pull request on GitHub
+## Full development
+To edit and open a pull request with the full development workflow:
+1. [Log in to GitHub](https://github.com/login) and [fork the cloudflare-docs repository](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo).
+2. If you are editing in your web browser (with [Codespaces](https://docs.github.com/en/codespaces)), move on to step 3.
+<br/>If you are editing on your local machine (with [Visual Studio Code](https://code.visualstudio.com/)):
+	* (Required) Install [Node.js](https://nodejs.org/en) (version 22 or later).
+	* (Recommended, but not required) Install [Volta](https://volta.sh/) for easier package management.
+	* (Required) [Clone the fork to your local machine.](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
+3. [Create a branch from your fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-and-deleting-branches-within-your-repository) (or from your clone).
+3. Make your edits.
+4. (Optional) Preview your edits. This requires installing `npm`. Follow the prompts to install it or run `npm install`. A link will appear in the terminal, `https://localhost:1111/`, where you can preview your edits. This link automatically updates with any new edits you make.
+5. [Commit your changes](https://docs.github.com/en/codespaces/developing-in-a-codespace/using-source-control-in-your-codespace).
+6. [Push your commits](https://docs.github.com/en/get-started/using-git/pushing-commits-to-a-remote-repository) to your branch and then back to your fork.
+7. Return to GitHub and [create a pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) from your committed changes. In the description form, add the product you changed in brackets and a brief description of your changes. For example “[Images] Fixed broken link."
 
 ## After you create an issue or PR
 After you open an issue or PR, a member of the Cloudflare organization will review your suggestion. Here is what to expect: