fix(og.tsx): ✨ add new param for social media

Author: yehezkielgunawan

src/pages/api/og.tsx

@@ -22,6 +22,7 @@ export default async function handler(req: NextRequest) {
   const title = searchParams.get("title") ?? "Title";
   const desc = searchParams.get("desc") ?? "Description";
   const siteName = searchParams.get("siteName") ?? "yehezgun.com";
+  const socialMedia = searchParams.get("socialMedia") ?? "Twitter: @yehezgun";
   const imgUrl = searchParams.get("imgUrl") ?? baseImageURL;
   return new ImageResponse(
     (
@@ -55,7 +56,7 @@ export default async function handler(req: NextRequest) {
             tw="font-medium text-xl"
             style={{ fontFamily: "FiraSans-Regular" }}
           >
-            Twitter: @yehezgun
+            {socialMedia}
           </p>
         </div>
       </div>

src/pages/index.tsx

@@ -15,12 +15,13 @@ const Home: NextPage = () => {
   const [title, setTitle] = useState<string>("Title");
   const [desc, setDesc] = useState<string>("Description");
   const [imgUrl, setImgUrl] = useState<string>("");
+  const [socialMedia, setSocialMedia] = useState<string>("Twitter: @yehezgun");
   const [siteName, setSiteName] = useState<string>("yehezgun.com");
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const ogUrl = new URL(
     `/api/og?title=${title}&desc=${desc}${
       imgUrl.length > 10 ? `&imgUrl=${imgUrl}` : ""
-    }&siteName=${siteName}`,
+    }&siteName=${siteName}&socialMedia=${socialMedia}`,
     baseURL
   );
 
@@ -36,6 +37,9 @@ const Home: NextPage = () => {
   const handleSiteNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSiteName(e.target.value);
   };
+  const handleSocialMediaChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSocialMedia(e.target.value);
+  };
 
   const onCopied = () => {
     setIsCopied(true);
@@ -92,6 +96,17 @@ const Home: NextPage = () => {
               defaultValue={siteName}
             />
           </div>
+          <div className="flex flex-col gap-2">
+            <label htmlFor="title" className="font-bold">
+              Social Media
+            </label>
+            <input
+              type="text"
+              onChange={handleSocialMediaChange}
+              className={clsxm("base-form")}
+              defaultValue={socialMedia}
+            />
+          </div>
           <Button block variant="secondary" onClick={() => onCopied()}>
             Copy URL
           </Button>