updates readme (#421)

<!-- Ticket number or summary of work -->
# [DEVDOCS-]


## What changed?
<!-- Provide a bulleted list in the present tense -->
* Developer relations team ReadMe updates

## Release notes draft
<!-- Provide an entry for the release notes using simple, conversational
language. Don't be too technical. Explain how the change will benefit
the merchant and link to the feature.

Examples:
* The newly-released [X feature] is now available to use. Now, you’ll be
able to [perform Y action].
* We're happy to announce [X feature], which can help you [perform Y
action].
* [X feature] helps you to create [Y response] using the [Z query
parameter]. Now, you can deliver [ex, localized shopping experiences for
your customers].
* Fixed a bug in the [X endpoint]. Now the [Y field] will appear when
you click [Z option]. -->
* 

## Anything else?
<!-- Add related PRs, salient notes, additional ticket numbers, etc. -->

ping {names}

README.md

@@ -1,35 +1,54 @@
-# BigCommerce public developer documentation
+<p align="center">
+  <img alt="bcdevs logo" src="./assets/images/bcdevs-logo.png" width="100px" />
+  <h1 align="center">BigCommerce developer documentation</h1>
+</p>
 
-This repo is the source of truth for the public, open source BigCommerce DevDocs and API reference at [developer.bigcommerce.com](https://developer.bigcommerce.com). It consists of **Markdown React (.mdx)**, **OpenAPI Specification (.yml)**, and **JSON Schema (.json and .yml)** files.
+You've found the BigCommerce documentation GitHub repository, which contains the public content for the [BigCommerce Developer Center](https://developer.bigcommerce.com/docs).
+
+This repo is the source of truth for our public, open source documentation and API reference at [developer.bigcommerce.com](https://developer.bigcommerce.com). It consists of **Markdown React (.mdx)**, **OpenAPI Specification (.yml)**, and **JSON Schema (.json and .yml)** files.
 
 The BigCommerce DX team maintains these open source docs; we welcome your [issues](https://github.com/bigcommerce/docs/issues), [discussions](https://github.com/bigcommerce/docs/discussions), and [pull requests](https://github.com/bigcommerce/docs/pulls)!
 
+---
+
 ## Contributing
+Thanks for your interest in contributing to our documentation! Below are a few quick ways to get started: 
+
+### 👉 To make a change 
+Here are some quick links to our [Contribution](/CONTRIBUTING.md) guide: 
 
-If you're interested in contributing, see our [Contribution guide](CONTRIBUTING.md) and [Code of conduct](CODE_OF_CONDUCT.md).
+- [Making a Quick Edit](/CONTRIBUTING.md#making-a-quick-edit)
+- [Editing Locally](/CONTRIBUTING.md#editing-locally)
+- [Commit Messages](/CONTRIBUTING.md/cod#commit-messages)
+- [Style Guides](/CONTRIBUTING.md#style-guides)
+- [Contributing to Other Projects](/CONTRIBUTING.md#contributing-to-other-projects)
 
-## History
+### 👉 To discuss something 
+- Start a [Discussion](https://github.com/bigcommerce/docs/discussions). Our DevDocs team monitors GitHub Discussions regularly.
 
-On December 27, 2023, the following public documentation repositories were deprecated, and all documentation moved into this repository. We retained the `git` history of each document using the `--allow-unrelated-histories` flag. The following repositories are now read-only:
+### 👉 To report a bug or an issue you've encountered
+- Open a new [Issue](https://github.com/bigcommerce/docs/issues). Our DevDocs team monitors GitHub Issues regularly.
 
-* `https://github.com/bigcommerce/api-specs`
-* `https://github.com/bigcommerce/dev-docs`
-* `https://github.com/bigcommerce/theme-context-object-schemas`
+<br/>
 
-### API specifications
+*For more information, see our [Contribution Guidelines](./CONTRIBUTING.md) and [Code of conduct](./CODE_OF_CONDUCT.md).*
+
+---
+
+## API specifications
 
 If you maintain API clients, this repository is your source for the most up-to-date public API specifications.
 
-Please keep your fork up to date to ensure you're working with the newest source files.
+Always update your fork to ensure you're working with the newest source files.
 
-Significant dates include the following:
+<!-- Significant dates include the following:
 
 * As of August 22, 2022, all API specification files are in OAS 3+ format.
 * In March 2023, we made significant changes to support a new OAS parser at [developer.bigcommerce.com](https://developer.bigcommerce.com).
 * In May 2023, we subdivided both the Catalog and Payments API specifications into multiple files.
-* On December 27, 2023, all public docs moved into the [bigcommerce/docs](https://github.com/bigcommerce/docs) repo.
+* On December 27, 2023, all public docs moved into the [bigcommerce/docs](https://github.com/bigcommerce/docs) repo. -->
+
 
-<!--
 ## Directory structure
 
 ```shell

guides/create-a-site-preview.md

@@ -0,0 +1,36 @@
+# How to create a site preview 
+
+Creating a site preview is a straightforward process that allows you to see how your doc appears before it’s submitted.
+
+In this doc you’ll learn how to clone the developer-center repo to run a localhost: 3000 to preview IDE  (e.g., VS Code) changes, and how to use a static site preview generator. 
+
+## localhost:3000 review (on Mac)
+
+#### 1. Open terminal and navigate to your Documents folder.
+`cd ~/Documents`
+
+#### 2. Create a folder and name it dev-center.
+`mkdir dev-center`
+
+#### 3. Clone the developer-center repo.
+`git clone https://github.com/bigcommerce/developer-center.git`
+
+#### 4. Checkout the branch mdx-components.
+`git checkout mdx-components`
+
+#### 5. Install the latest legacy peer deps.
+`npm install --legacy-peer-deps`
+
+#### 6. Once installed, run the npm run dev script.
+`npm run dev script`
+
+#### 7. Open your browser and navigate to your localhost address.
+`ex. localhost:3000/preview`
+
+#### 8. Open your IDE and navigate to the developer-center directory, then open the pages/preview.mdx file. 
+
+#### 9. Below the generated text: Insert Content Below paste your .mdx doc file and changes.
+
+#### 10. Save your changes and preview the content in your browser window.
+Note: reload the browser page if it doesn’t immediately load.
+

guides/test-rendering-of-api-spec-file-changes.md

@@ -0,0 +1,47 @@
+# How to test rendering of API spec file changes
+
+If you want to preview how changes to an API spec file will look inside the Developer Center, without waiting for a preview deploy, you can use our spec tester tool. It requires no approval to use and will render a preview of any OAS 3.0+ yaml file with a public url.
+
+**To start, visit this url: https://developer.bigcommerce.com/spec-tester**
+
+You’ll see a simple screen detailing what spec file is being previewed with the endpoints available in it. Clicking on an endpoint will load the render view on the right hand side:
+
+![](//docs/assets/images/testing-api-spec-rendering-1.png)
+
+The top left of the tester has an input and dropdown. You can use this to find location of the file you want to edit by selecting the dropdown, as it will change the input value to be the URL of the associated file on GitHub. These files are what is rendering on the DevCenter in production.
+
+![](//docs/assets/images/testing-spec-rendering-2.png)
+
+**This input can be manually changed as well, enabling you to preview a spec file you are working on, as long as it has a public URL.**
+
+The most common way of getting a new public URL is to make changes in a GitHub branch.
+
+## Getting a public URL from GitHub
+
+#### By updating your branch name within an existing spec url
+
+Within the input box, you’ll notice there is a ‘docs/main’ part of the url. Edit “main” to be to be your branch name with the edits you want to preview for the same file:
+
+![](//docs/assets/images/testing-api-spec-rendering-3.png)
+*Remember to only change the branch name. Leave the rest of the url the same.*
+
+#### By updating your branch name within an existing spec url
+In a branch you’ve pushed to GitHub, look for the ‘…' action on the file you want to get the public URL for, then click 'view file’:
+
+![](//docs/assets/images/testing-api-spec-rendering-4.png)
+
+When it opens that file, you’ll see the option to view it in ‘raw’ form. Press that:
+![](//docs/assets/images/testing-api-spec-rendering-5.png)
+
+Now you will see the raw file with the public facing URL in the browser. Copy and past that into the input box:
+![](//docs/assets/images/testing-api-spec-rendering-6.png)
+
+## Making edits within the GitHub UI
+If you want to change a file within the browser, that’s possible on GitHub. Click edit on any API spec file and you will see the editor:
+![](//docs/assets/images/testing-api-spec-rendering-7.png)
+
+After committing your changes, you will see a modal that asks for a commit message and the name of your branch:
+
+![](//docs/assets/images/testing-api-spec-rendering-8.png)
+
+After you propose changes, your branch will be created! You can then use one of the 2 methods above to get the public URL of the file you’ll copy/paste into the spec tester URL box.