moved og:image outside of isReady scope so it renders on the server
This commit is contained in:
parent
d682804c5f
commit
99e003153e
3 changed files with 200 additions and 147 deletions
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in a new issue