edit hip in browser walkthrough (#1336)

* edit hip in browser walkthrough

* url fix

* Apply suggestions from code review

Co-authored-by: Joey Hiller <[email protected]>

* copy edits from feedback

* swap gifs for images

* remove extra admonitions

* community feedback no branching guide

* updated images

* typo

* title update and image optimizations

* figure spacing

* figure spacing

---------

Co-authored-by: Joey Hiller <[email protected]>

docs/faq/edit-a-hip.mdx

@@ -0,0 +1,242 @@
+---
+id: edit-a-hip
+title: Propose Changes To An Existing HIP
+pagination_label: Edit an Existing HIP
+sidebar_label: Edit an Existing HIP
+description: Helium Documentation
+image: https://docs.helium.com/img/link-image.png
+slug: /edit-a-hip
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
+While HIPs are in discussion, the actual text is included in the
+[Helium HIP Repository on GitHub](https://github.com/helium/hip).
+
+Before a HIP goes to a vote, changes and revisions will likely need to be made to an existing
+proposal.
+
+:::tip Key Take Aways
+
+This page will walk users through the process of:
+
+- Creating a personal copy, or "fork", of the Helium HIP repository.
+- Making edits using the in-browser text editor.
+- Submitting these changes for review.
+
+:::
+
+---
+
+## Fork the Repo
+
+**Step 1.** Log in to an existing account or create a new account on [GitHub](https://github.com).
+
+**Step 2.** Open the Helium HIP Repository at
+[https://github.com/helium/hip](https://github.com/helium/hip)
+
+**Step 3.** Click the `Fork` button in the upper right-hand corner.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/fork-step-0.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 4.** Leave all settings default and confirm using the green `Create Fork` button at the
+bottom left-hand corner.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/fork-step-1.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+  <figcaption>
+    A copy of the Helium HIP repository will be made in the user's GitHub account and should open
+    automatically.
+  </figcaption>
+</figure>
+
+---
+
+## Edit an Existing HIP
+
+All HIPs in the Helium GitHub repository are written in Markdown an easy-to-read, easy-to-write
+syntax for formatting plain text. Read more about basic writing and formatting syntax
+[here.](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)
+
+**Step 1.** Begin inside the forked copy at `https://github.com/<githubUsername>/HIP`
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-0.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+  <figcaption>Your username will be visible here.</figcaption>
+</figure>
+
+<br />
+
+**Step 2.** Open the HIP to be edited by clicking on the file. This example uses 'HIP 83'.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-1.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+  <figcaption>Click on the HIP to edit.</figcaption>
+</figure>
+
+<br />
+
+**Step 3.** Click the `Pencil Icon` in the upper right-hand corner to make edits.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-2.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 4.** Make edits or changes to the HIP.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-3.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 5.** Click the green `Commit changes...` button in the upper right-hand corner.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-4.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 6.** In the pop-up window, select the
+`Create a new branch for this commit and start a pull request` option.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-5.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 7.** Click the Green `Propose changes` button.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-6.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 8.** Do not click the green `Create pull request` button on this page. Click the grey `Code`
+tab.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/edit-step-7.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+---
+
+## Make a Pull Request
+
+A Pull Request, or "PR", is quite literally an ask to the repository maintainers to "pull in"
+proposed changes.
+
+**Step 1.** A new banner will be presented with a green `Compare & pull request` button. Click the
+button to start a Pull Request
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/pull-request-step-0.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+  <figcaption>
+    The number may be more than 1, depending on how many edits ahead the forked repository is from
+    the main HIP repository.
+  </figcaption>
+</figure>
+
+<br />
+
+**Step 2.** Confirm the Pull Request is to the `helium/HIP` base `main` and the correct changes are
+being proposed.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/pull-request-step-1.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 3.** Edit the `Title` and `Description` to inform other readers and maintainers what changes
+were made.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/pull-request-step-2.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+  <figcaption>Good pull requests are detailed in their explanation of changes.</figcaption>
+</figure>
+
+<br />
+
+**Step 4.** Click the green `Create pull request` button.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/pull-request-step-3.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+**Step 5.** View the newly created Pull Request in the main Helium HIP repository.
+
+<figure className="screensnippet-wrapper">
+  <img
+    src={useBaseUrl('/img/hip/pull-request-step-4.png')}
+    style={{ maxHeight: 800, borderRadius: '40px', padding: '14px 16px 20px' }}
+  />
+</figure>
+
+<br />
+
+All PRs are reviewed by the HIP authors, and once approved are "merged" into the main branch by
+repository maintainers where the edits are visible to the Helium community.
+
+---
+
+## Stay Involved
+
+Once a PR is submitted, authors are asked to keep a watch on them for comments or change requests.
+By default, the user to submit a PR will be subscribed via email to receive notifications on PR
+activity.
+
+Timely responses in GitHub and Discord keep the process moving!

sidebarsDocs.js

@@ -180,7 +180,11 @@ module.exports = {
     {
       type: 'category',
       label: 'Community Governance',
-      items: ['community-governance/community-governance', 'community-governance/community-voting'],
+      items: [
+        'community-governance/community-governance',
+        'community-governance/community-voting',
+        'faq/edit-a-hip',
+      ],
     },
     {
       type: 'category',