mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/booking/DatePicker.tsx
View file

@ -166,9 +166,9 @@ const DatePicker = ({
return selectedMonth ? ( return selectedMonth ? (
<div <div
className={ className={
"mt-8 sm:mt-0 sm:min-w-[480px] " + "mt-8 sm:mt-0 sm:min-w-[455px] " +
(selectedDate (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") : "sm:w-1/2 sm:pl-4")
}> }>
<div className="flex text-gray-600 font-light text-xl mb-4"> <div className="flex text-gray-600 font-light text-xl mb-4">

58
pages/[user].tsx
View file

@ -47,13 +47,62 @@ export default function User(props): User {
</div> </div>
)); ));
return ( return (
isReady && ( <>
<div className="bg-neutral-50 dark:bg-black h-screen">
<Head> <Head>
<title>{props.user.name || props.user.username} | Calendso</title> <title>{props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" /> <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"> <main className="max-w-3xl mx-auto py-24 px-4">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" /> <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> </main>
</div> </div>
) )}
</>
); );
} }

13
pages/[user]/[type].tsx
View file

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