run prettier . --write

.github/workflows/development.yml

@@ -13,7 +13,7 @@ jobs:
     uses: open-sauced/hot/.github/workflows/development.yml@main
   build:
     runs-on: ubuntu-latest
-    steps: 
+    steps:
       - name: "☁️ checkout repository"
         uses: actions/checkout@v2
 

.github/workflows/issue-metrics.yml

@@ -2,46 +2,45 @@ name: Monthly issue metrics
 on:
   workflow_dispatch:
   schedule:
-    - cron: '13 2 1 * *'
+    - cron: "13 2 1 * *"
 
 jobs:
   build:
     name: issue metrics
     runs-on: ubuntu-latest
-
-    steps:
-
-    - name: Get dates for last month
-      shell: bash
-      run: |
-        # Get the current date
-        current_date=$(date +'%Y-%m-%d')
-
-        # Calculate the previous month
-        previous_date=$(date -d "$current_date -1 month" +'%Y-%m-%d')
-
-        # Extract the year and month from the previous date
-        previous_year=$(date -d "$previous_date" +'%Y')
-        previous_month=$(date -d "$previous_date" +'%m')
-
-        # Calculate the first day of the previous month
-        first_day=$(date -d "$previous_year-$previous_month-01" +'%Y-%m-%d')
 
-        # Calculate the last day of the previous month
-        last_day=$(date -d "$first_day +1 month -1 day" +'%Y-%m-%d')
-
-        echo "$first_day..$last_day"
-        echo "last_month=$first_day..$last_day" >> "$GITHUB_ENV"
-
-    - name: Run issue-metrics tool
-      uses: github/issue-metrics@v2
-      env:
-        GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        SEARCH_QUERY: 'repo:open-sauced/ai is:issue created:${{ env.last_month }} -reason:"not planned"'
-
-    - name: Create issue
-      uses: peter-evans/create-issue-from-file@v4
-      with:
-        title: Monthly issue metrics report
-        content-filepath: ./issue_metrics.md
-        assignees: bdougie
+    steps:
+      - name: Get dates for last month
+        shell: bash
+        run: |
+          # Get the current date
+          current_date=$(date +'%Y-%m-%d')
+
+          # Calculate the previous month
+          previous_date=$(date -d "$current_date -1 month" +'%Y-%m-%d')
+
+          # Extract the year and month from the previous date
+          previous_year=$(date -d "$previous_date" +'%Y')
+          previous_month=$(date -d "$previous_date" +'%m')
+
+          # Calculate the first day of the previous month
+          first_day=$(date -d "$previous_year-$previous_month-01" +'%Y-%m-%d')
+
+          # Calculate the last day of the previous month
+          last_day=$(date -d "$first_day +1 month -1 day" +'%Y-%m-%d')
+
+          echo "$first_day..$last_day"
+          echo "last_month=$first_day..$last_day" >> "$GITHUB_ENV"
+
+      - name: Run issue-metrics tool
+        uses: github/issue-metrics@v2
+        env:
+          GH_TOKEN: ${{ secrets.GH_TOKEN }}
+          SEARCH_QUERY: 'repo:open-sauced/ai is:issue created:${{ env.last_month }} -reason:"not planned"'
+
+      - name: Create issue
+        uses: peter-evans/create-issue-from-file@v4
+        with:
+          title: Monthly issue metrics report
+          content-filepath: ./issue_metrics.md
+          assignees: bdougie

.github/workflows/playwright.yml

@@ -1,26 +1,26 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, beta ]
+    branches: [main, beta]
   pull_request:
-    branches: [ main, beta ]
+    branches: [main, beta]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v3
-    - name: "🔧 setup Bun"
-      uses: oven-sh/setup-bun@v1
-    - name: Install dependencies
-      run: bun install
-    - name: Install Playwright Browsers
-      run: bun x playwright install --with-deps
-    - name: Run Playwright tests
-      run: bun x playwright test
-    - uses: actions/upload-artifact@v3
-      if: always()
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v3
+      - name: "🔧 setup Bun"
+        uses: oven-sh/setup-bun@v1
+      - name: Install dependencies
+        run: bun install
+      - name: Install Playwright Browsers
+        run: bun x playwright install --with-deps
+      - name: Run Playwright tests
+        run: bun x playwright test
+      - uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

docs/0-introduction.md

@@ -15,4 +15,4 @@ For styling, we use [Tailwind CSS](https://tailwindcss.com/) and GitHub's design
 ## Index
 
 - [Folder Structure](./1-folder-structure.md)
-- [Adding a New Component](#adding-a-new-component)
+- [Adding a New Component](#adding-a-new-component)

docs/1-folder-structure.md

@@ -4,15 +4,15 @@ The source code for the extension is located in the `src` directory. The `src` d
 
 - `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.
+  - `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.
+  - `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.
+  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.
+- `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

@@ -1,22 +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. 
+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. 
+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. 
+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.
-
-

docs/3-project-utilities.md

@@ -12,7 +12,9 @@ Added in PR [#36](https://github.com/open-sauced/ai/pull/36), the function allow
 Added in PR [#20](https://github.com/open-sauced/ai/pull/20), the function creates an HTML element of a specified tag name and with optional properties. The properties can include styles, which are applied to the element's inline style attribute. Other non-style properties are also supported and added to the created element using `Object.assign()`. [Orginal implementation](https://gist.github.com/nickytonline/8223b27b19c080c28d9f0d3b7fce1e82).
 
 ### [checkAuthentication()](https://github.com/open-sauced/ai/blob/beta/src/utils/checkAuthentication.ts)
+
 Added in PR [#56](https://github.com/open-sauced/ai/pull/56), this function checks if the user is authenticated by retrieving a cookie from Chrome storage and verifying its validity. If the cookie does not exist or is invalid, it removes any saved authentication token from Chrome storage.
 
 ### [domUpdateWatch()](https://github.com/open-sauced/ai/blob/beta/src/utils/dom-utils/domUpdateWatcher.ts)
+
 Added in PR [64](https://github.com/open-sauced/ai/pull/64), this function is used to observe changes in the DOM and trigger a callback function when changes occur. The function uses a `MutationObserver` to track changes in the document body, and checks if the page has fully loaded before executing the callback with any specified delay time.

e2e/open-popup.spec.ts

@@ -1,6 +1,6 @@
-import { test, expect } from './popupFixture';
+import { test, expect } from "./popupFixture";
 
-test('popup page', async ({ page, extensionId }) => {
-    await page.goto(`chrome-extension://${extensionId}/index.html`);
-    expect(page.locator('body')).toBeTruthy();
+test("popup page", async ({ page, extensionId }) => {
+  await page.goto(`chrome-extension://${extensionId}/index.html`);
+  expect(page.locator("body")).toBeTruthy();
 });

e2e/popupFixture.ts

@@ -2,29 +2,29 @@ import { test as base, chromium, type BrowserContext } from "@playwright/test";
 import path from "path";
 
 export const test = base.extend<{
-    context: BrowserContext;
-    extensionId: string;
+  context: BrowserContext;
+  extensionId: string;
 }>({
-    context: async ({}, use) => {
-        const pathToExtension = path.join(__dirname, "../dist");
-        const context = await chromium.launchPersistentContext("", {
-            headless: false,
-            args: [
-                `--headless=new`,
-                `--disable-extensions-except=${pathToExtension}`,
-                `--load-extension=${pathToExtension}`,
-            ],
-        });
-        await use(context);
-        await context.close();
-    },
-    extensionId: async ({ context }, use) => {
-        let [background] = context.serviceWorkers();
-        if (!background) background = await context.waitForEvent("serviceworker");
+  context: async ({}, use) => {
+    const pathToExtension = path.join(__dirname, "../dist");
+    const context = await chromium.launchPersistentContext("", {
+      headless: false,
+      args: [
+        `--headless=new`,
+        `--disable-extensions-except=${pathToExtension}`,
+        `--load-extension=${pathToExtension}`,
+      ],
+    });
+    await use(context);
+    await context.close();
+  },
+  extensionId: async ({ context }, use) => {
+    let [background] = context.serviceWorkers();
+    if (!background) background = await context.waitForEvent("serviceworker");
 
-        const extensionId = background.url().split("/")[2];
-        await use(extensionId);
-    },
+    const extensionId = background.url().split("/")[2];
+    await use(extensionId);
+  },
 });
 
 export const expect = test.expect;

index.html

@@ -1,8 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/opensauced-logo.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/src/assets/opensauced-logo.svg"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>OpenSauced.ai</title>
   </head>

manifest.json

@@ -20,6 +20,10 @@
     "48": "src/assets/os-icons/os-icon-48.png",
     "128": "src/assets/os-icons/os-icon-128.png"
   },
-  "host_permissions": ["https://github.com/*", "https://*.app.opensauced.pizza/*" , "https://www.linkedin.com/*"],
+  "host_permissions": [
+    "https://github.com/*",
+    "https://*.app.opensauced.pizza/*",
+    "https://www.linkedin.com/*"
+  ],
   "permissions": ["scripting", "storage", "tabs", "cookies"]
 }