fix: replace PRSocialCard component with GitHub OpenGraph image (#889)

Fixes #883

components/molecules/ContributorHighlight/contributor-highlight-card.tsx

@@ -1,7 +1,6 @@
 import Title from "components/atoms/Typography/title";
 import { generateApiPrUrl } from "lib/utils/github";
 import React, { useEffect, useState } from "react";
-import PullRequestHighlightCard from "../PullRequestHighlightCard/pull-request-highlight-card";
 import { fetchGithubPRInfo } from "lib/hooks/fetchGithubPRInfo";
 import {
   DropdownMenu,
@@ -17,6 +16,7 @@ import { FaUserPlus } from "react-icons/fa";
 import { GrFlag } from "react-icons/gr";
 
 import { ToastTrigger } from "lib/utils/toast-trigger";
+import GhOpenGraphImg from "../GhOpenGraphImg/gh-open-graph-img";
 
 interface ContributorHighlightCardProps {
   title?: string;
@@ -126,7 +126,7 @@ const ContributorHighlightCard = ({ title, desc, prLink, user }: ContributorHigh
       </div>
 
       {/* Generated OG card section */}
-      <PullRequestHighlightCard prLink={prLink} />
+      <GhOpenGraphImg githubLink={prLink} />
     </article>
   );
 };

components/molecules/GhOpenGraphImg/gh-open-graph-img.tsx

@@ -0,0 +1,24 @@
+import { generateGhOgImage } from "lib/utils/github";
+import Image from "next/image";
+import InvalidImage from "img/404 Image.svg";
+import { useEffect, useState } from "react";
+
+interface GhOpenGraphImgProps {
+  githubLink: string;
+}
+
+const GhOpenGraphImg = ({ githubLink }: GhOpenGraphImgProps): JSX.Element => {
+  const { isValid, url } = generateGhOgImage(githubLink);
+
+  return (
+    <>
+      {url && (
+        <picture>
+          <img src={isValid ? url : InvalidImage} alt={isValid ? "github og image" : "invalid url image"} />
+        </picture>
+      )}
+    </>
+  );
+};
+
+export default GhOpenGraphImg;

components/molecules/HighlightInput/highlight-input-form.tsx

@@ -4,9 +4,9 @@ import { createHighlights } from "lib/hooks/createHighlights";
 
 import { ToastTrigger } from "lib/utils/toast-trigger";
 import { ChangeEvent, useEffect, useRef, useState } from "react";
-import PullRequestHighlightCard from "../PullRequestHighlightCard/pull-request-highlight-card";
 import { useSWRConfig } from "swr";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
+import GhOpenGraphImg from "../GhOpenGraphImg/gh-open-graph-img";
 
 const HighlightInputForm = (): JSX.Element => {
   const { user } = useSupabaseAuth();
@@ -116,7 +116,7 @@ const HighlightInputForm = (): JSX.Element => {
         />
       </div>
 
-      {pullrequestLink && isDivFocused && <PullRequestHighlightCard prLink={pullrequestLink} />}
+      {pullrequestLink && isDivFocused && <GhOpenGraphImg githubLink={pullrequestLink} />}
 
       {isDivFocused && (
         <Button disabled={!bodyText} className="ml-auto" type="primary">

lib/utils/github.ts

@@ -39,4 +39,20 @@ const generateApiPrUrl = (
   }
 };
 
-export { getAvatarById, getAvatarByUsername, getProfileLink, getRepoIssuesLink, generateApiPrUrl };
+const generateGhOgImage = (githubUrl: string): { isValid: boolean; url: string } => {
+  try {
+    const trimmedUrl = githubUrl.trim();
+    const url = new URL(trimmedUrl.includes("https://") ? trimmedUrl : `https://${trimmedUrl}`);
+    const { pathname } = url;
+
+    if (url.hostname !== "github.com") {
+      return { isValid: false, url: "" };
+    }
+
+    return { isValid: true, url: `https://opengraph.githubassets.com/1${pathname}` };
+  } catch (err) {
+    return { isValid: false, url: "" };
+  }
+};
+
+export { getAvatarById, getAvatarByUsername, getProfileLink, getRepoIssuesLink, generateApiPrUrl, generateGhOgImage };

tests/lib/utils/github.test.ts

@@ -1,7 +1,12 @@
-import { getAvatarById, getAvatarByUsername, getProfileLink, getRepoIssuesLink } from "lib/utils/github";
+import {
+  getAvatarById,
+  getAvatarByUsername,
+  getProfileLink,
+  getRepoIssuesLink,
+  generateGhOgImage
+} from "lib/utils/github";
 
 describe("[lib] github methods", () => {
-
   it("Should return a valid avatar link", () => {
     const result = getAvatarById("Deadreyo", 460);
     expect(result).toEqual("https://avatars.githubusercontent.com/u/Deadreyo?size=460&v=4");
@@ -21,5 +26,12 @@ describe("[lib] github methods", () => {
     const result = getRepoIssuesLink("Deadreyo/insights");
     expect(result).toEqual("https://github.com/Deadreyo/insights/issues");
   });
-
+  it("Should return a valid image src link", () => {
+    const result = generateGhOgImage("https://github.com/open-sauced/hot/pull/448");
+    expect(result).toEqual({ isValid: true, url: "https://opengraph.githubassets.com/1/open-sauced/hot/pull/448" });
+  });
+  it("Should return an object with isValid set to false", () => {
+    const result = generateGhOgImage("https://gitub.com/open-sauced/hot/pull/448");
+    expect(result).toEqual({ isValid: false, url: "" });
+  });
 });