sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(frontend): embeds

Browse source
This commit is contained in:
sam 2022-11-20 23:00:52 +01:00
parent 94cee93ccb
commit 7eb5af6c00
2 changed files with 74 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
frontend/pages/_app.tsx
View file

@ -10,6 +10,17 @@ function MyApp({ Component, pageProps }: AppProps) {
<RecoilRoot> <RecoilRoot>
<Head> <Head>
<title key="title">pronouns.cc</title> <title key="title">pronouns.cc</title>
<meta property="og:type" content="website" />
<meta name="theme-color" content="#aa8ed6" />
<meta key="sitename" property="og:site_name" content="pronouns.cc" />
<meta key="title" property="og:title" content="pronouns.cc" />
<meta
key="description"
property="og:description"
content="Name and pronoun cards!"
/>
<meta key="url" property="og:url" content={process.env.DOMAIN} />
</Head> </Head>
<Navigation /> <Navigation />
<Container> <Container>

66
frontend/pages/u/[user]/index.tsx
View file

@ -32,9 +32,7 @@ interface Props {
export default function Index({ user, partialMembers }: Props) { export default function Index({ user, partialMembers }: Props) {
return ( return (
<> <>
<Head> <UserHead user={user} />
<title key="title">{`@${user.username} - pronouns.cc`}</title>
</Head>
<IsOwnPageNotice user={user} /> <IsOwnPageNotice user={user} />
<div className="container mx-auto pb-[20vh]"> <div className="container mx-auto pb-[20vh]">
<div <div
@ -81,6 +79,68 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
} }
}; };
function UserHead({ user }: { user: User }) {
let description = "";
if (
user.names?.filter((name) => name.status === WordStatus.Favourite)
?.length &&
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
?.length
) {
description = `@${user.username} goes by ${user.names
.filter((name) => name.status === WordStatus.Favourite)
.join(", ")} and uses ${user.pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite)
.join(", ")} pronouns.`;
} else if (
user.names?.filter((name) => name.status === WordStatus.Favourite)?.length
) {
description = `@${user.username} goes by ${user.names
.filter((name) => name.status === WordStatus.Favourite)
.join(", ")}.`;
} else if (
user.pronouns?.filter((pronoun) => pronoun.status === WordStatus.Favourite)
?.length
) {
description = `@${user.username} uses ${user.pronouns
.filter((pronoun) => pronoun.status === WordStatus.Favourite)
.join(", ")} pronouns.`;
}
if (user.bio && user.bio !== "") {
description += `\n\n${user.bio.slice(0, 500)}`;
description.trim();
}
return (
<Head>
<title key="title">{`@${user.username} - pronouns.cc`}</title>
<meta key="sitename" property="og:site_name" content="pronouns.cc" />
<meta
key="title"
property="og:title"
content={
user.display_name
? `${user.display_name} (@${user.username})`
: `@${user.username}`
}
/>
{user.avatar_urls && user.avatar_urls.length > 0 ? (
<meta key="image" property="og:image" content={user.avatar_urls[0]} />
) : (
<></>
)}
<meta key="description" property="og:description" content={description} />
<meta
key="url"
property="og:url"
content={`${process.env.DOMAIN}/u/${user.username}`}
/>
</Head>
);
}
function IsOwnPageNotice({ user }: { user: User }) { function IsOwnPageNotice({ user }: { user: User }) {
const isThisMyPage = useRecoilValue(userState)?.id === user.id; const isThisMyPage = useRecoilValue(userState)?.id === user.id;
return isThisMyPage || true ? ( return isThisMyPage || true ? (