moved og:image outside of isReady scope so it renders on the server

This commit is contained in:
Peer Richelsen 2021-08-12 19:05:46 +02:00
parent d682804c5f
commit 99e003153e
3 changed files with 200 additions and 147 deletions

View file

@ -166,9 +166,9 @@ const DatePicker = ({
return selectedMonth ? (
<div
className={
"mt-8 sm:mt-0 sm:min-w-[480px] " +
"mt-8 sm:mt-0 sm:min-w-[455px] " +
(selectedDate
? "w-full sm:min-w-[465px] sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-6 "
? "w-full sm:w-1/2 md:w-1/3 sm:border-r sm:dark:border-gray-800 sm:pl-4 sm:pr-6 "
: "sm:w-1/2 sm:pl-4")
}>
<div className="flex text-gray-600 font-light text-xl mb-4">

View file

@ -47,13 +47,62 @@ export default function User(props): User {
</div>
));
return (
isReady && (
<div className="bg-neutral-50 dark:bg-black h-screen">
<>
<Head>
<title>{props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta name="description" content={"Book a time with " + (props.user.name || props.user.username)} />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://calendso/" />
<meta
property="og:title"
content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
/>
<meta
property="og:description"
content={"Book a time with " + (props.user.name || props.user.username)}
/>
<meta
property="og:image"
content={
"https://og-image-one-pi.vercel.app/" +
encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>").replace(
/'/g,
"%27"
) +
".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
encodeURIComponent(props.user.avatar)
}
/>
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://calendso/" />
<meta
property="twitter:title"
content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}
/>
<meta
property="twitter:description"
content={"Book a time with " + (props.user.name || props.user.username)}
/>
<meta
property="twitter:image"
content={
"https://og-image-one-pi.vercel.app/" +
encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>").replace(
/'/g,
"%27"
) +
".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" +
encodeURIComponent(props.user.avatar)
}
/>
</Head>
{isReady && (
<div className="bg-neutral-50 dark:bg-black h-screen">
<main className="max-w-3xl mx-auto py-24 px-4">
<div className="mb-8 text-center">
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
@ -73,7 +122,8 @@ export default function User(props): User {
)}
</main>
</div>
)
)}
</>
);
}

View file

@ -78,12 +78,11 @@ export default function Type(props): Type {
};
return (
isReady && (
<div>
<>
<Head>
<title>
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username}{" "}
| Calendso
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
Calendso
</title>
<meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta name="description" content={props.eventType.description} />
@ -126,6 +125,9 @@ export default function Type(props): Type {
}
/>
</Head>
{isReady && (
<div>
<main
className={
"mx-auto my-0 md:my-24 transition-max-width ease-in-out duration-500 " +
@ -207,7 +209,8 @@ export default function Type(props): Type {
{!props.user.hideBranding && <PoweredByCalendso />}
</main>
</div>
)
)}
</>
);
function TimezoneDropdown() {