Skip to content

Commit

Permalink
fix: simplified external embed links
Browse files Browse the repository at this point in the history
  • Loading branch information
@eddiejaoude
eddiejaoude committed Nov 29, 2023
1 parent f2d3558 commit 203320c
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 44 deletions.
45 changes: 32 additions & 13 deletions components/embeds/external/Profile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,27 @@ 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"
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 }
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 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 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">
Expand All @@ -36,12 +42,25 @@ export default function Profile({ data }) {
</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
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>
)
);
}
53 changes: 22 additions & 31 deletions components/user/UserProfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ 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 @@ -150,36 +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>
<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 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>
</>
)}
Expand Down

0 comments on commit 203320c

Please sign in to comment.