From 87b0cafd50046b8a3470e753bafc8b588aca6f86 Mon Sep 17 00:00:00 2001
From: victor <chrollolucilfer1402@gmail.com>
Date: Mon, 26 Feb 2024 12:35:27 +0530
Subject: [PATCH] feat: Mastodon Verification (#9858)

---
 components/user/UserLink.js  | 113 +++++++++++++++++++----------------
 components/user/UserLinks.js |  10 ++++
 2 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/components/user/UserLink.js b/components/user/UserLink.js
index 3dd6c050b4a..bb3dffc33d3 100644
--- a/components/user/UserLink.js
+++ b/components/user/UserLink.js
@@ -27,6 +27,7 @@ export default function UserLink({
   isEnabled = true,
   manage = false,
   url,
+  rel,
 }) {
   const DisplayIcon = getIcon(link.icon);
   let aria = "";
@@ -38,61 +39,73 @@ export default function UserLink({
   }
 
   const item = (link) => (
-    <Link
-      href={
-        url ? url : `${BASE_URL}/api/profiles/${username}/links/${link._id}`
-      }
-      target="_blank"
-      rel="noopener noreferrer"
-      className={classNames(
-        animations[link.animation] === animations.iconGlow && "z-0",
-        animations[link.animation] !== animations.glow &&
-          "dark:hover:bg-secondary-low/40 hover:bg-secondary-low/40",
-        isEnabled && getLinkAnimation.get(animations[link.animation]),
-        "relative rounded-full border border-primary-medium-low dark:border-primary-medium-low dark:hover:border-[color:var(--hover-color)] hover:border-[color:var(--hover-color)] hover:shadow-xl p-4 my-2 w-full content-start flex flex-row gap-4 items-center dark:bg-primary-medium grow",
-      )}
-      style={{
-        "--hover-color": colors[link.icon],
-      }}
-    >
-      <span className="relative">
-        <span
-          style={{ color: colors[link.icon] }}
-          className={getIconAnimation.get(animations[link.animation])}
-        >
-          <DisplayIcon aria-label={`${aria} icon`} />
+    <>
+      {rel && (
+        <span className="w-0 h-0 absolute left-[-9999px] overflow-hidden ">
+          <a
+            rel={rel}
+            href={link.url}
+            title="mastodon verification link"
+            aria-label="hidded mastodon link to get verified on mastodon"
+          />
         </span>
-        {animations[link.animation] === animations.ping && (
-          <span style={{ color: colors[link.icon] }} className={`relative`}>
+      )}
+      <Link
+        href={
+          url ? url : `${BASE_URL}/api/profiles/${username}/links/${link._id}`
+        }
+        target="_blank"
+        rel="noopener noreferrer"
+        className={classNames(
+          animations[link.animation] === animations.iconGlow && "z-0",
+          animations[link.animation] !== animations.glow &&
+            "dark:hover:bg-secondary-low/40 hover:bg-secondary-low/40",
+          isEnabled && getLinkAnimation.get(animations[link.animation]),
+          "relative rounded-full border border-primary-medium-low dark:border-primary-medium-low dark:hover:border-[color:var(--hover-color)] hover:border-[color:var(--hover-color)] hover:shadow-xl p-4 my-2 w-full content-start flex flex-row gap-4 items-center dark:bg-primary-medium grow",
+        )}
+        style={{
+          "--hover-color": colors[link.icon],
+        }}
+      >
+        <span className="relative">
+          <span
+            style={{ color: colors[link.icon] }}
+            className={getIconAnimation.get(animations[link.animation])}
+          >
             <DisplayIcon aria-label={`${aria} icon`} />
           </span>
-        )}
-      </span>
-      <span className="grow">{link.name}</span>
-      {manage && link.isPinned && (
-        <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-secondary-low text-secondary-high-high ring-1 ring-inset ring-secondary-high/10">
-          Pinned
-        </span>
-      )}
-      {manage && (
-        <span
-          className={classNames(
-            link.isEnabled
-              ? "bg-tertiary-low text-tertiary-high"
-              : "bg-primary-low text-primary-high",
-            "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-primary-high/10",
+          {animations[link.animation] === animations.ping && (
+            <span style={{ color: colors[link.icon] }} className={`relative`}>
+              <DisplayIcon aria-label={`${aria} icon`} />
+            </span>
           )}
-        >
-          {link.isEnabled ? "Enabled" : "Disabled"}
-        </span>
-      )}
-      {manage && link.group && (
-        <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-tertiary-high text-tertiary-low ring-1 ring-inset ring-tertiary-low/10">
-          {link.group}
         </span>
-      )}
-      {manage && <Bulb isEnabled={isEnabled} />}
-    </Link>
+        <span className="grow">{link.name}</span>
+        {manage && link.isPinned && (
+          <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-secondary-low text-secondary-high-high ring-1 ring-inset ring-secondary-high/10">
+            Pinned
+          </span>
+        )}
+        {manage && (
+          <span
+            className={classNames(
+              link.isEnabled
+                ? "bg-tertiary-low text-tertiary-high"
+                : "bg-primary-low text-primary-high",
+              "inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ring-primary-high/10",
+            )}
+          >
+            {link.isEnabled ? "Enabled" : "Disabled"}
+          </span>
+        )}
+        {manage && link.group && (
+          <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-tertiary-high text-tertiary-low ring-1 ring-inset ring-tertiary-low/10">
+            {link.group}
+          </span>
+        )}
+        {manage && <Bulb isEnabled={isEnabled} />}
+      </Link>
+    </>
   );
 
   const edit = (link) => (
diff --git a/components/user/UserLinks.js b/components/user/UserLinks.js
index 1a341022b10..9790492f3ae 100644
--- a/components/user/UserLinks.js
+++ b/components/user/UserLinks.js
@@ -10,6 +10,15 @@ export default function UserLinks({ BASE_URL, links, username }) {
     return { ...acc, [group]: [...curGroup, obj] };
   }, {});
 
+  links.forEach((link) => {
+    const regex = new RegExp("Mastodon", "i");
+    const match = regex.test(link.name) || regex.test(link.icon);
+    if (match) {
+      link.rel = "me";
+      return;
+    }
+  });
+
   return (
     <>
       {!links?.length && <Alert type="info" message="No Links found" />}
@@ -40,6 +49,7 @@ export default function UserLinks({ BASE_URL, links, username }) {
                   link={link}
                   username={username}
                   isEnabled={link.isEnabled}
+                  rel={link.rel}
                 />
               ))}
             </div>