docs: dev docs (#83)

README.md

@@ -19,11 +19,11 @@
 
 ![pr description demo](https://opensauced.ai/pr-description.gif)
 
-Leverage AI generate pull request descriptions based on the diff & commit messages. It works! [Install the Chrome Extension](https://bit.ly/opensaucedai) to get started.
+Leverage AI to generate pull request descriptions based on the diff & commit messages. It works! [Install the Chrome Extension](https://bit.ly/opensaucedai) to get started.
 
 ## Documentation
 
-The documentation for the project can be found [here](https://docs.opensauced.pizza/chrome-extension/introduction-to-the-chrome-extension/).
+The developer documentation for the project can be found [here](./docs/). For a usage guide, click [here](https://docs.opensauced.pizza/chrome-extension/introduction-to-the-chrome-extension/).
 
 ## Running the project locally
 

docs/0-introduction.md

@@ -0,0 +1,18 @@
+## OpenSauced Chrome Extension Developer Guide
+
+This guide is intended for developers who want to contribute to the OpenSauced Chrome Extension.
+It will walk you through the process of adding new components, updating existing components, and the
+various design patterns used in the extension.
+
+For instructions on how to install and run the extension locally, see the project [README](../README.md).
+
+## Tech Stack
+
+The extension is built using the [CRXJS Vite Plugin](https://crxjs.dev/vite-plugin/) with [React](https://reactjs.org/) for the extension popup and vanilla [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) for background and content scripts.
+We use [TypeScript](https://www.typescriptlang.org/) for type checking and [ESLint](https://eslint.org/) for linting.
+For styling, we use [Tailwind CSS](https://tailwindcss.com/) and GitHub's design system for injecting styles into the GitHub DOM.
+
+## Index
+
+- [Folder Structure](./1-folder-structure.md)
+- [Adding a New Component](#adding-a-new-component)

docs/1-folder-structure.md

@@ -0,0 +1,18 @@
+## Folder Structure
+
+The source code for the extension is located in the `src` directory. The `src` directory contains the following subdirectories:
+
+- `assets`: contains static assets such as images and fonts.
+- `content-scripts`: contains the content scripts that are used to manipulate the GitHub DOM.
+    - `components`: contains the custom-made vanilla JS components that are injected into the GitHub DOM.
+    - `github.ts`: contains the functions that are used to check which page the user is on and inject the appropriate components.
+    - `content-scripts.css`: contains the styles for our injected components.
+- `hooks`: contains custom React hooks that are used throughout the extension.
+- `pages`: contains the React components that are used to render the extension popup. We use [`react-chrome-extension-router`](https://npmjs.org/package/react-chrome-extension-router) for navigation through the popup pages.
+- `ts`: contains the TypeScript type definitions for DTOs and other custom types.
+- `utils`: contains utility functions that are used throughout the extension, such as functions for fetching OpenSauced API data, caching data, and parsing GitHub URLs.
+    - `dom-utils`: contains pre-injection verification functions that are used to check which (if any) component should be injected into the GitHub DOM. Some checks that can be done here include checking if the user is authenticated, checking if a repo exists on OpenSauced, etc.
+- `worker`: contains web workers that are used to run expensive tasks in the background, off the main thread.
+For example, the `background.ts` script uses a web worker to check for authentication cookies in the background, so that the user can be logged in to the extension without having to enter any information directly in the extension popup.
+- `App.tsx`: contains the main React component that is rendered in the extension popup. The first authentication check is also done here.
+- `constants.ts`: contains constants that are used throughout the extension, such as the API endpoints, GitHub URLs and classes, etc.

docs/2-adding-a-new-component.md

@@ -0,0 +1,22 @@
+## Adding a new component
+So you've set up your development environment and you're ready to start contributing to the OpenSauced Chrome Extension. Great! Let's walk through the process of adding a new component to the extension, or updating an existing component.
+
+Here are some steps to follow when adding a new component:
+
+1. Identify the component you want to add or update, and it's location. The component can be present in either the Extension Popup, or be an injected component on the GitHub website. 
+    * Injected components are located in their respective folders inside the `src/content-scripts/components` directory. 
+    * Popup components are located in the `src/pages` directory. 
+
+2. Adding popup components is relatively simpler, as they are just React components. You can add a new component by creating a new file in the `src/pages` directory, and importing it in the `src/App.tsx` file. This is already done for other components, so you can follow the same pattern.
+
+3. Injected components are written in vanilla JavaScript, and are injected into the GitHub website using a content script. For adding a new injected component, you will need to identify which GitHub page you need to inject the component into. For example, the `src/content-scripts/components/ViewOnOpenSaucedButton` component is injected into the GitHub profile page. 
+
+4. Once you've identified the page you want to inject the component into, you will need to add a conditonal statement in the `src/content-scripts/github.ts` file. This conditional statement will check if the current page is the page you want to inject the component into, and if it is, it will inject the component into the page. To match URL patterns inside the conditional statement, you can use the `window.location.href` variable, and create your own matcher inside the `src/utils.ts/urlMatcher.ts` file. Again, this is already done for other components, so you can follow the same pattern.
+
+5. Once you've added the conditional statement to check for the current GitHub page, you can add an injection script for your component inside the `src/utils/dom-utils` directory. This injection script will be responsible for injecting your component into the page. You can follow the pattern of other injection scripts to add your own. Normally, all logical checks and validations are done inside the injection script, like the user being logged in, or the component not already being injected into the page. 
+
+6. Inside the injection script, you create an instance of your component, and append it to the DOM. You can follow the pattern of other injection scripts to do this. We use the `src/utils/createHtmlElement.ts::createHtmlElement` function to create the DOM element for our component. The creation is done inside the `components` directory (including all event handlers, like click events), while the injection and locgical validations are done inside the `utils/dom-utils` directory.
+
+Tada🎉! You've successfully added a new component to the extension. You can now test your component by running the extension locally, and checking if it works as expected.
+
+