feat: enable user profile embed on external site

.github/workflows/vercel-preview.yml

@@ -6,7 +6,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - feat-reload-pwa
+      - feat-babblebey-embed-profile
 
 jobs:
   deploy:

components/embeds/external/Profile.js

@@ -0,0 +1,66 @@
+/* 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>
+  );
+}

components/user/UserProfile.js

@@ -149,12 +149,28 @@ function UserProfile({ BASE_URL, data }) {
                   </Link>
                 ))}
               </div>
-              <div className=" flex items-center justify-center w-full overflow-hidden">
-                <ClipboardCopy>
-                  <p className="dark:text-gray-300 border p-3 rounded-md">
-                    {`${BASE_URL}/${data.username}`}
-                  </p>
-                </ClipboardCopy>
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center justify-center w-full overflow-hidden">
+                  <ClipboardCopy>
+                    <p className="dark:text-gray-300 border p-3 rounded-md">
+                      {`${BASE_URL}/${data.username}`}
+                    </p>
+                  </ClipboardCopy>
+                </div>
+                <div className="flex items-center justify-center w-full overflow-hidden">
+                  <ClipboardCopy>
+                    <p className="dark:text-gray-300 border p-3 rounded-md">
+                      {`[![${data.username} | BioDrop](${BASE_URL}/${data.username}?embed)](${BASE_URL}/${data.username})`}
+                    </p>
+                  </ClipboardCopy>
+                </div>
+                <div className="flex items-center justify-center w-full overflow-hidden">
+                  <ClipboardCopy>
+                    <p className="dark:text-gray-300 border p-3 rounded-md">
+                      {`<a href="${BASE_URL}/${data.username}"><img src="${BASE_URL}/${data.username}?embed" alt="${data.username} | BioDrop" /></a>`}
+                    </p>
+                  </ClipboardCopy>
+                </div>
               </div>
             </>
           )}

middleware.js

@@ -31,6 +31,7 @@ export async function middleware(req) {
   const hostedDomains = [hostedDomain, `www.${hostedDomain}`];
 
   // if custom domain + on root path
+  console.log("--------", "domain: ", hostname, "path: ", reqPathName);
   if (!hostedDomains.includes(hostname) && reqPathName === "/") {
     console.log(`custom domain used: "${hostname}"`);