Test Commit

Varshithvhegde · Feb 4, 2024 · f70f02d · f70f02d
1 parent 2307686
commit f70f02d
Showing 1 changed file with 50 additions and 29 deletions.
diff --git a/app/[userName]/page.tsx b/app/[userName]/page.tsx
@@ -14,40 +14,47 @@ export default function User({ params }: { params: { userName: string } }) {
   }, [params.userName]);
 
   useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
 
-    const timoutId = setTimeout(()=>{
+    // Delay initialization after 2 seconds
+    timeoutId = setTimeout(() => {
+      if (cardRef.current) {
+        console.log("====================================");
+        console.log("CardRef Present");
+        console.log("====================================");
 
-    if (cardRef.current) {
-      console.log("====================================");
-      console.log("CardRef Present");
-      console.log("====================================");
+        toPng(cardRef.current)
+          .then((dataUrl) => {
+            // Create a local image file
+            const blob = dataURLtoBlob(dataUrl);
+            const imageURL = URL.createObjectURL(blob);
 
-      toPng(cardRef.current)
-        .then((dataUrl) => {
-          const head = document.head || document.getElementsByTagName("head")[0];
-          const ogImageTag = document.querySelector("meta[property='og:image']");
+            // Set the local image file URL to og:image
+            const head = document.head || document.getElementsByTagName("head")[0];
+            const ogImageTag = document.querySelector("meta[property='og:image']");
 
-          if (ogImageTag) {
-            ogImageTag.setAttribute("content", dataUrl);
-          } else {
-            const newOgImageTag = document.createElement("meta");
-            newOgImageTag.setAttribute("property", "og:image");
-            newOgImageTag.setAttribute("content", dataUrl);
-            head.appendChild(newOgImageTag);
-          }
-        })
-        .catch((error) => {
-          console.error("Error generating image:", error);
-        });
-    } else {
-      console.log("====================================");
-      console.log("No CardRef");
-      console.log("====================================");
-    }
-  },2000);
+            if (ogImageTag) {
+              ogImageTag.setAttribute("content", imageURL);
+            } else {
+              const newOgImageTag = document.createElement("meta");
+              newOgImageTag.setAttribute("property", "og:image");
+              newOgImageTag.setAttribute("content", imageURL);
+              head.appendChild(newOgImageTag);
+            }
+          })
+          .catch((error) => {
+            console.error("Error generating image:", error);
+          });
+      } else {
+        console.log("====================================");
+        console.log("No CardRef");
+        console.log("====================================");
+      }
+    }, 2000);
 
-  return () => clearTimeout(timoutId);
-  }, [randomComponent,cardRef]);
+    // Cleanup function to clear the timeout in case the component unmounts
+    return () => clearTimeout(timeoutId);
+  }, [randomComponent, cardRef]);
 
   const getRandomComponent = () => {
     const randomNumber = Math.floor(Math.random() * 3);
@@ -64,6 +71,20 @@ export default function User({ params }: { params: { userName: string } }) {
     }
   };
 
+  // Convert data URL to Blob
+  const dataURLtoBlob = (dataURL: string): Blob => {
+    const arr = dataURL.split(",");
+    const mime = arr[0].match(/:(.*?);/)![1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+  };
+
+
   return (
     <>
       {/* <Head> */}