fix(frontend): embed improvements

This commit is contained in:
Sam 2022-11-20 23:31:46 +01:00
parent 7eb5af6c00
commit 83c1fa6e42
1 changed files with 33 additions and 12 deletions

View File

@ -32,6 +32,9 @@ interface Props {
export default function Index({ user, partialMembers }: Props) { export default function Index({ user, partialMembers }: Props) {
return ( return (
<> <>
<Head>
<title key="title">{`@${user.username} - pronouns.cc`}</title>
</Head>
<UserHead user={user} /> <UserHead user={user} />
<IsOwnPageNotice user={user} /> <IsOwnPageNotice user={user} />
<div className="container mx-auto pb-[20vh]"> <div className="container mx-auto pb-[20vh]">
@ -89,14 +92,21 @@ function UserHead({ user }: { user: User }) {
) { ) {
description = `@${user.username} goes by ${user.names description = `@${user.username} goes by ${user.names
.filter((name) => name.status === WordStatus.Favourite) .filter((name) => name.status === WordStatus.Favourite)
.map((name) => name.name)
.join(", ")} and uses ${user.pronouns .join(", ")} and uses ${user.pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite) .filter((pronoun) => pronoun.status === WordStatus.Favourite)
.map(
(pronoun) =>
pronoun.display_text ??
pronoun.pronouns.split("/").slice(0, 2).join("/")
)
.join(", ")} pronouns.`; .join(", ")} pronouns.`;
} else if ( } else if (
user.names?.filter((name) => name.status === WordStatus.Favourite)?.length user.names?.filter((name) => name.status === WordStatus.Favourite)?.length
) { ) {
description = `@${user.username} goes by ${user.names description = `@${user.username} goes by ${user.names
.filter((name) => name.status === WordStatus.Favourite) .filter((name) => name.status === WordStatus.Favourite)
.map((name) => name.name)
.join(", ")}.`; .join(", ")}.`;
} else if ( } else if (
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite) user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
@ -104,21 +114,24 @@ function UserHead({ user }: { user: User }) {
) { ) {
description = `@${user.username} uses ${user.pronouns description = `@${user.username} uses ${user.pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite) .filter((pronoun) => pronoun.status === WordStatus.Favourite)
.map(
(pronoun) =>
pronoun.display_text ??
pronoun.pronouns.split("/").slice(0, 2).join("/")
)
.join(", ")} pronouns.`; .join(", ")} pronouns.`;
} else if (user.bio && user.bio !== "") {
description = user.bio.slice(0, 500);
} }
if (user.bio && user.bio !== "") { const domain =
description += `\n\n${user.bio.slice(0, 500)}`; typeof window !== "undefined" ? window.location.origin : process.env.DOMAIN;
description.trim();
}
return ( return (
<Head> <Head>
<title key="title">{`@${user.username} - pronouns.cc`}</title> <meta key="og:sitename" property="og:site_name" content="pronouns.cc" />
<meta key="sitename" property="og:site_name" content="pronouns.cc" />
<meta <meta
key="title" key="og:title"
property="og:title" property="og:title"
content={ content={
user.display_name user.display_name
@ -127,15 +140,23 @@ function UserHead({ user }: { user: User }) {
} }
/> />
{user.avatar_urls && user.avatar_urls.length > 0 ? ( {user.avatar_urls && user.avatar_urls.length > 0 ? (
<meta key="image" property="og:image" content={user.avatar_urls[0]} /> <meta
key="og:image"
property="og:image"
content={user.avatar_urls[0]}
/>
) : ( ) : (
<></> <></>
)} )}
<meta key="description" property="og:description" content={description} />
<meta <meta
key="url" key="og:description"
property="og:description"
content={description}
/>
<meta
key="og:url"
property="og:url" property="og:url"
content={`${process.env.DOMAIN}/u/${user.username}`} content={`${domain}/u/${user.username}`}
/> />
</Head> </Head>
); );