Skip to content
This repository was archived by the owner on Aug 7, 2024. It is now read-only.

Commit b098d3c

Browse files
babblebeyeddiejaoudea0m0rajab
authored
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 <[email protected]> * fix: remove redundant return --------- Co-authored-by: Eddie Jaoude <[email protected]> Co-authored-by: Abdurrahman Rajab <[email protected]>
1 parent 56ca28a commit b098d3c

File tree

15 files changed

+4887
-1691
lines changed

15 files changed

+4887
-1691
lines changed

‎components/embeds/external/Profile.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* eslint-disable @next/next/no-img-element */
2+
export default function Profile({ data }) {
3+
return (
4+
<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">
5+
<img
6+
tw="mx-auto h-48 w-48 rounded-full"
7+
width={460}
8+
height={460}
9+
src={`https://github.com/${data.username}.png?size=460`}
10+
alt={ data.name }
11+
/>
12+
13+
<div tw="flex justify-center mt-6 text-lg font-semibold leading-7 tracking-tight text-white">
14+
<div tw="flex">{ data.name.slice(0, 49) }{ data.name.length > 49 && "..." }</div>
15+
</div>
16+
17+
<div tw="flex justify-center text-sm leading-6 text-gray-400">
18+
<div tw="flex">{ data.bio.slice(0, 59) }{ data.bio.length > 59 && "..." }</div>
19+
</div>
20+
21+
<div tw="mt-6 flex justify-center">
22+
<div tw="flex text-gray-400 mx-2">
23+
<svg tw="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
24+
<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" />
25+
</svg>
26+
</div>
27+
<div tw="flex text-gray-400 mx-2">
28+
<svg tw="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
29+
<path
30+
fillRule="evenodd"
31+
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"
32+
clipRule="evenodd"
33+
/>
34+
</svg>
35+
</div>
36+
</div>
37+
38+
<div tw="flex justify-center mt-6">
39+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307.38 75.51" width="128">
40+
<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>
41+
<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>
42+
<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>
43+
</svg>
44+
</div>
45+
</div>
46+
)
47+
}

‎components/embeds/Youtube.js‎ renamed to ‎components/embeds/internal/Youtube.js‎

File renamed without changes.

‎components/user/UserProfile.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import Markdown from "@components/Markdown";
1717

1818
function UserProfile({ BASE_URL, data }) {
1919
const [qrShow, setQrShow] = useState(false);
20+
const [embedFormat, setEmbedFormat] = useState("md");
2021
const [premiumShow, setPremiumShow] = useState(false);
2122
const router = useRouter();
2223
const fallbackImageSize = 120;
@@ -156,6 +157,30 @@ function UserProfile({ BASE_URL, data }) {
156157
</p>
157158
</ClipboardCopy>
158159
</div>
160+
<div className="mt-5 space-y-4 items-center justify-center w-full overflow-hidden">
161+
<h5 className="font-medium text-lg">Embed Profile</h5>
162+
<div className="flex">
163+
<select
164+
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"
165+
onChange={e => setEmbedFormat(e.currentTarget.value)}
166+
>
167+
<option value="md">Markdown</option>
168+
<option value="html">HTML</option>
169+
</select>
170+
<div className="flex flex-auto">
171+
<ClipboardCopy>
172+
<div className="dark:text-gray-300 border p-3 rounded-r-md h-full">
173+
<p className="truncate absolute max-w-[80%]">
174+
{embedFormat === "md"
175+
? `[![${data.username} | BioDrop](${BASE_URL}/${data.username}?embed)](${BASE_URL}/${data.username})`
176+
: `<a href="${BASE_URL}/${data.username}"><img src="${BASE_URL}/${data.username}?embed" alt="${data.username} | BioDrop" /></a>`
177+
}
178+
</p>
179+
</div>
180+
</ClipboardCopy>
181+
</div>
182+
</div>
183+
</div>
159184
</>
160185
)}
161186
</div>

0 commit comments

Comments
 (0)