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

feat: enable user profile embed on external site #9500

Merged
merged 19 commits into from
Nov 29, 2023
Merged

feat: enable user profile embed on external site #9500

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e95ca72
feat: add `@vercel/og` package
babblebey Oct 15, 2023
f42d448
feat: boilerplate embed endpoint on `edge` runtime
babblebey Oct 21, 2023
83649e2
feat: integrate `embed` endpoint into `[username]` route SSR
babblebey Oct 21, 2023
b4f14be
feat: add `satori`; remove `@vercel/og` package
babblebey Oct 29, 2023
3ee6caa
feat: add embed `Profile` component
babblebey Oct 29, 2023
69a8be3
feat: integrate embed `Profile` with `satori` in `embed` endpoint
babblebey Oct 29, 2023
bfd0a5d
chore: move `Youtube` to `embeds/internal` dir
babblebey Nov 5, 2023
dad2120
feat: boilerplate embed url on user profile
babblebey Nov 5, 2023
3d851b4
fix: nits
babblebey Nov 5, 2023
31c1d1c
feat: add `twemoji` util function
babblebey Nov 13, 2023
b5ebc34
feat: implement `twemoji` in `loadAdditiionalAsset` prop
babblebey Nov 13, 2023
7dba0e3
feat: add embed url field to profile share modal
babblebey Nov 13, 2023
9320edc
chore: modify theme fallback value
babblebey Nov 13, 2023
2ff300e
Merge branch 'main' into feat/embed-profile
babblebey Nov 13, 2023
e408cb4
fix(build): generate new `package-lock`
babblebey Nov 13, 2023
f9a1597
Update components/embeds/external/Profile.js
eddiejaoude Nov 19, 2023
59917ae
refactor: merge repeated part in components/user/UserProfile.js
babblebey Nov 19, 2023
afef523
fix: remove redundant return
babblebey Nov 19, 2023
8feb742
Merge branch 'feat/embed-profile' of https://github.com/babblebey/Lin…
babblebey Nov 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions components/embeds/external/Profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
0 components/embeds/Youtube.js → components/embeds/internal/Youtube.js
View file
Open in desktop
File renamed without changes.
33 changes: 33 additions & 0 deletions components/user/UserProfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -156,6 +157,38 @@ 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">
{embedFormat === "md" && (
<ClipboardCopy>
<div className="dark:text-gray-300 border p-3 rounded-r-md h-full">
<p className="truncate absolute max-w-[80%]">
{`[![${data.username} | BioDrop](${BASE_URL}/${data.username}?embed)](${BASE_URL}/${data.username})`}
</p>
</div>
</ClipboardCopy>
)}
{embedFormat === "html" && (
<ClipboardCopy>
<div className="dark:text-gray-300 border p-3 rounded-r-md h-full">
<p className="truncate absolute max-w-[80%]">
{`<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>
Expand Down
Loading