feat: Invite to OpenSauced

src/components/InviteToOpenSauced/InviteToOpenSaucedButton.ts

@@ -0,0 +1,21 @@
+import logoIcon from "../../assets/opensauced-icon.svg";
+import "../../index.css";
+
+export const InviteToOpenSaucedButton = () => {
+  const inviteToOpenSaucedButton = document.createElement("a");
+  Object.assign(inviteToOpenSaucedButton, {
+    className:
+      "inline-block mt-4 mb-1 text-white rounded-md p-2 no-underline text-md font-semibold text-center select-none w-full border border-solid cursor-pointer border-orange hover:shadow-button hover:no-underline",
+    innerHTML: `
+        <img
+          class="mx-2 inline-block align-top"
+          src="${chrome.runtime.getURL(logoIcon)}"
+          alt="OpenSauced Logo"
+          width="20"
+          height="20"
+        />
+        <span>Invite to OpenSauced</span>
+        `,
+  });
+  return inviteToOpenSaucedButton;
+};

src/components/InviteToOpenSauced/InviteToOpenSaucedModal.ts

@@ -0,0 +1,46 @@
+import "../../index.css";
+
+interface Socials {
+  emailAddress?: string;
+  twitterUsername?: string;
+  linkedInUsername?: string;
+}
+
+export const InviteToOpenSaucedModal = (
+  username: string,
+  { emailAddress, twitterUsername, linkedInUsername }: Socials = {}
+) => {
+  //TODO: Conditionally render social icons
+  const socialIcons = `<span class="flex flex-nowrap space-x-3"> <a href="https://github.com/bdougie">
+    <img src="https://images.weserv.nl/?url=cdn4.iconfinder.com/data/icons/miu-flat-social/60/mail-512.png&h=60&w=60&fit=cover&mask=circle" alt="Email">
+  </a>
+  <a href="https://github.com/bdougie">
+  <img src="https://images.weserv.nl/?url=cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png&h=60&w=60&fit=cover&mask=circle" alt="Twitter">
+</a>
+<a href="https://github.com/bdougie">
+<img src="https://images.weserv.nl/?url=cdn1.iconfinder.com/data/icons/logotypes/32/circle-linkedin-512.png&h=60&w=60&fit=cover&mask=circle" alt="LinkedIn">
+</a>
+</span>`;
+
+  const inviteToOpenSaucedModal = document.createElement("div");
+  Object.assign(inviteToOpenSaucedModal, {
+    className:
+      "fixed h-full w-full z-50 bg-gray-600 bg-opacity-50 overflow-y-auto  inset-0 ",
+    style: "display: none;",
+    id: "invite-modal",
+    innerHTML: `<div
+        class="min-w-[30%] relative top-60 mx-auto p-4 border w-96 rounded-md shadow-button border-solid border-orange bg-slate-800"
+    >
+        <div class="mt-2 text-left">
+            <h3 class="text-2xl leading-6 font-bold">Invite to OpenSauced!</h3>
+            <div class="mt-2">
+                <p class="text-sm">
+                    Use the social icons below to invite ${username} to OpenSauced.
+                </p>
+            </div>
+            ${socialIcons}
+        </div>
+    </div>`,
+  });
+  return inviteToOpenSaucedModal;
+};

src/content-scripts/profileScreen.ts

@@ -1,25 +1,11 @@
-import { getGithubUsername } from "../utils/getDetailsFromGithubUrl";
+import { getGithubUsername } from "../utils/matchers";
 import { getOpenSaucedUser } from "../utils/fetchOpenSaucedApiData";
-import { ViewOnOpenSaucedButton } from "../components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
-
-function injectViewOnOpenSaucedButton() {
-  const username = getGithubUsername(window.location.href);
-  if (!username) {
-    return;
-  }
-
-  const openSaucedUser = getOpenSaucedUser(username);
-  if (!openSaucedUser) {
-    return;
-  }
-
-  const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
-
-  const userBio = document.querySelector(".p-note.user-profile-bio");
-  if (!userBio) {
-    return;
-  }
-  userBio.appendChild(viewOnOpenSaucedButton);
+import injectViewOnOpenSauced from "../utils/viewOnOpenSauced";
+import injectInviteToOpenSauced from "../utils/inviteToOpenSauced";
+
+const username = getGithubUsername(window.location.href);
+if (username != null) {
+  const openSaucedUser = await getOpenSaucedUser(username);
+  if (openSaucedUser) injectViewOnOpenSauced(username);
+  else injectInviteToOpenSauced(username);
 }
-
-injectViewOnOpenSaucedButton();

src/utils/fetchOpenSaucedApiData.ts

@@ -1,9 +1,17 @@
 export const getOpenSaucedUser = async (username: string) => {
-  const response = await fetch(
-    `https://api.opensauced.pizza/v1/users/${username}`
-  );
-  if (response.status !== 200) {
-    return null;
-  }
-  return await response.json();
-};
+    try {
+        const response = await fetch(`https://api.opensauced.pizza/v1/users/${username}`);
+        return response.status === 200;
+    } catch (error) {
+        return false;
+    }    
+    };
+
+
+
+
+
+
+
+
+

src/utils/inviteToOpenSauced.ts

@@ -0,0 +1,40 @@
+//import {USER_BIO_SELECTOR} from "../config.json";
+import { InviteToOpenSaucedButton } from "../components/InviteToOpenSauced/InviteToOpenSaucedButton";
+import { InviteToOpenSaucedModal } from "../components/InviteToOpenSauced/InviteToOpenSaucedModal";
+import { getTwitterUsername } from "./matchers";
+import { getLinkedInUsername } from "./matchers";
+
+const injectViewOnOS = (username: string) => {
+  const emailAddress: string | undefined = (
+    document.querySelector(`a[href^="mailto:"]`) as HTMLAnchorElement
+  )?.href.substr(7);
+  const twitterUrl: string | undefined = (
+    document.querySelector(`a[href*="twitter.com"]`) as HTMLAnchorElement
+  )?.href;
+  const linkedInUrl: string | undefined = (
+    document.querySelector(`a[href*="linkedin.com"]`) as HTMLAnchorElement
+  )?.href;
+  console.log(linkedInUrl);
+  if (!(emailAddress || twitterUrl || linkedInUrl)) return;
+
+  const twitterUsername = twitterUrl && getTwitterUsername(twitterUrl);
+  const linkedInUsername = linkedInUrl && getLinkedInUsername(linkedInUrl);
+  const inviteToOpenSaucedButton = InviteToOpenSaucedButton();
+  const inviteToOpenSaucedModal = InviteToOpenSaucedModal(username, {
+    emailAddress,
+    twitterUsername,
+    linkedInUsername,
+  });
+
+  inviteToOpenSaucedButton.onclick = () => {
+    inviteToOpenSaucedModal.style.display = "block";
+  };
+
+  const userBio = document.querySelector(".p-note.user-profile-bio");
+  if (!userBio) return;
+
+  userBio.appendChild(inviteToOpenSaucedButton);
+  document.body.appendChild(inviteToOpenSaucedModal);
+};
+
+export default injectViewOnOS;

src/utils/matchers.ts

@@ -0,0 +1,18 @@
+export const getGithubUsername = (url: string) => {
+  const match = url.match(/github\.com\/([^/]+)/);
+  return match && match[1];
+};
+
+export const getLinkedInUsername = (url: string) => {
+  const match = url.match(
+    /https:\/\/www\.linkedin\.com\/in\/(?<username>[a-zA-Z0-9]{3,100})\/?/
+  );
+  return match ? match[1] : undefined;
+};
+
+export const getTwitterUsername = (url: string) => {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?twitter\.com\/(?:#!\/)?@?([^\/\?\s]*)/
+  );
+  return match ? match[1] : undefined;
+};

src/utils/viewOnOpenSauced.ts

@@ -0,0 +1,12 @@
+import { ViewOnOpenSaucedButton } from "../components/ViewOnOpenSaucedButton/ViewOnOpenSaucedButton";
+
+const injectViewOnOpenSauced = (username: string) => {
+  const viewOnOpenSaucedButton = ViewOnOpenSaucedButton(username);
+
+  const userBio = document.querySelector(".p-note.user-profile-bio");
+  if (!userBio) return;
+
+  userBio.appendChild(viewOnOpenSaucedButton);
+};
+
+export default injectViewOnOpenSauced;