feat: user profile embed on external site (#9500)

* feat: add `@vercel/og` package * feat: boilerplate embed endpoint on `edge` runtime * feat: integrate `embed` endpoint into `[username]` route SSR * feat: add `satori`; remove `@vercel/og` package * feat: add embed `Profile` component * feat: integrate embed `Profile` with `satori` in `embed` endpoint * chore: move `Youtube` to `embeds/internal` dir * feat: boilerplate embed url on user profile * fix: nits * feat: add `twemoji` util function * feat: implement `twemoji` in `loadAdditiionalAsset` prop * feat: add embed url field to profile share modal * chore: modify theme fallback value * fix(build): generate new `package-lock` * Update components/embeds/external/Profile.js * refactor: merge repeated part in components/user/UserProfile.js Suggestion by @a0m0rajab Co-authored-by: Abdurrahman Rajab <rajab-2@windowslive.com> * fix: remove redundant return --------- Co-authored-by: Eddie Jaoude <eddie@jaoudestudios.com> Co-authored-by: Abdurrahman Rajab <rajab-2@windowslive.com>
EddieHubCommunity · Nov 29, 2023 · b098d3c · b098d3c
1 parent 56ca28a
commit b098d3c
Show file tree

Hide file tree

Showing 15 changed files with 4,887 additions and 1,691 deletions.
diff --git a/components/embeds/external/Profile.js b/components/embeds/external/Profile.js
@@ -0,0 +1,47 @@
+/* eslint-disable @next/next/no-img-element */
+export default function Profile({ data }) {
+  return (
+    <div tw="flex flex-col w-[320px] border-[10px] border-white text-center rounded-3xl shadow-lg shadow-black/25 bg-[#122640] m-3 px-5 py-10">
+      <img
+        tw="mx-auto h-48 w-48 rounded-full" 
+        width={460}
+        height={460} 
+        src={`https://github.com/${data.username}.png?size=460`} 
+        alt={ data.name } 
+      />
+
+      <div tw="flex justify-center mt-6 text-lg font-semibold leading-7 tracking-tight text-white">
+        <div tw="flex">{ data.name.slice(0, 49) }{ data.name.length > 49 && "..." }</div>
+      </div>
+
+      <div tw="flex justify-center text-sm leading-6 text-gray-400">
+        <div tw="flex">{ data.bio.slice(0, 59) }{ data.bio.length > 59 && "..." }</div>
+      </div>
+
+      <div tw="mt-6 flex justify-center">
+        <div tw="flex text-gray-400 mx-2">
+          <svg tw="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84" />
+          </svg>
+        </div>
+        <div tw="flex text-gray-400 mx-2">
+          <svg tw="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fillRule="evenodd"
+              d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </div>
+      </div>
+
+      <div tw="flex justify-center mt-6">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307.38 75.51" width="128">
+          <path fill="#ee626c" d="M51.7 6.51C51.7 2.77 54.39 0 58.13 0s6.43 2.77 6.43 6.51-2.69 6.43-6.43 6.43-6.43-2.69-6.43-6.43Zm1.54 11.64h9.68v40.2h-9.68v-40.2ZM70.66 38.24c0-12.21 8.95-21.16 21.64-21.16s21.64 8.95 21.64 21.16S104.99 59.4 92.3 59.4s-21.64-8.95-21.64-21.16Zm33.44 0c0-7.08-4.72-12.12-11.8-12.12s-11.88 5.05-11.88 12.12 4.8 12.12 11.88 12.12 11.8-5.04 11.8-12.12Z"></path>
+          <path fill="#fff" d="M121.77 5.13h18.88c18.63 0 28.4 10.66 28.4 26.61s-9.76 26.61-28.4 26.61h-18.88V5.13Zm18.88 43.61c12.29 0 17.82-6.67 17.82-17.01s-5.53-16.92-17.82-16.92h-8.46v33.93h8.46ZM175.8 34.99c0-12.12 7.16-17.9 17.66-17.9s17.57 5.78 17.57 18.06v.25h-9.6v-.41c0-6.51-3.25-8.87-7.97-8.87s-7.98 2.36-7.98 8.87v23.35h-9.68V34.99ZM214.62 38.24c0-12.21 8.95-21.16 21.64-21.16s21.64 8.95 21.64 21.16-8.95 21.16-21.64 21.16-21.64-8.95-21.64-21.16Zm33.44 0c0-7.08-4.72-12.12-11.8-12.12s-11.88 5.05-11.88 12.12 4.8 12.12 11.88 12.12 11.8-5.04 11.8-12.12ZM264.26 38.57c0-13.02 8.79-21.48 21.4-21.48s21.73 8.79 21.73 21.56c0 13.75-10.25 20.75-20.02 20.75-5.78 0-10.58-2.44-13.43-6.92v23.03h-9.68V38.57Zm33.36-.33c0-7.08-4.8-12.12-11.88-12.12s-11.8 5.05-11.8 12.12 4.72 12.12 11.8 12.12 11.88-5.04 11.88-12.12Z"></path>
+          <path fill="#ee626c" d="M32.3 27.82a15.14 15.14 0 0 0 6.82-12.66C39.12 6.79 32.34 0 23.96 0H.04v27.72H0v30.33h21.96v-8.46H10.04V34.46h15.65c4.1 0 7.42 3.32 7.42 7.42v.29c0 .69-.2 1.38-.42 2.03-.21.61-.45 1.2-.72 1.79-.34.72-.75 1.41-1.14 2.11-.47.85-.95 1.69-1.42 2.54-.54.97-1.09 1.95-1.63 2.92-.49.87-.98 1.75-1.47 2.62-.3.54-.61 1.09-.91 1.63l-.13.23h5.39c8.21 0 14.87-6.66 14.87-14.87v-.59c0-7.65-5.78-13.95-13.21-14.77ZM10.08 8.44h9.2c4.61 0 8.34 3.73 8.34 8.34s-3.73 8.34-8.34 8.34h-9.2V8.44Z"></path>
+        </svg>
+      </div>
+    </div>
+  )
+}
diff --git a/components/embeds/Youtube.js → components/embeds/internal/Youtube.js b/components/embeds/Youtube.js → components/embeds/internal/Youtube.js
diff --git a/components/user/UserProfile.js b/components/user/UserProfile.js
@@ -17,6 +17,7 @@ import Markdown from "@components/Markdown";
 
 function UserProfile({ BASE_URL, data }) {
   const [qrShow, setQrShow] = useState(false);
+  const [embedFormat, setEmbedFormat] = useState("md");
   const [premiumShow, setPremiumShow] = useState(false);
   const router = useRouter();
   const fallbackImageSize = 120;
@@ -156,6 +157,30 @@ function UserProfile({ BASE_URL, data }) {
                   </p>
                 </ClipboardCopy>
               </div>
+              <div className="mt-5 space-y-4 items-center justify-center w-full overflow-hidden">
+                <h5 className="font-medium text-lg">Embed Profile</h5>
+                <div className="flex">
+                  <select 
+                    className="w-fit flex-none dark:text-gray-300 border-white pr-8 focus:border-white focus:ring-0 bg-transparent border p-3 rounded-l-md"
+                    onChange={e => setEmbedFormat(e.currentTarget.value)}
+                  >
+                    <option value="md">Markdown</option>
+                    <option value="html">HTML</option>
+                  </select>
+                  <div className="flex flex-auto">
+<ClipboardCopy>
+  <div className="dark:text-gray-300 border p-3 rounded-r-md h-full">
+    <p className="truncate absolute max-w-[80%]">
+      {embedFormat === "md" 
+        ? `[![${data.username} | BioDrop](${BASE_URL}/${data.username}?embed)](${BASE_URL}/${data.username})`
+        : `<a href="${BASE_URL}/${data.username}"><img src="${BASE_URL}/${data.username}?embed" alt="${data.username} | BioDrop" /></a>`
+      }
+    </p>
+  </div>
+</ClipboardCopy>
+                  </div>
+                </div> 
+              </div>
             </>
           )}
         </div>