fixes 404 for subpaths, adds prefilled url to sign up form (#1355)
* fixes 404 for subpaths, adds prefilled url to sign up form * Added tweak to support BASE_URL for self hosted (#1356) * Added tweak to support BASE_URL for self hosted (without linking to our signup) * also hides the signup popular page Co-authored-by: Alex van Andel <me@alexvanandel.com>
This commit is contained in:
Peer Richelsen
GitHub
parent
3bc659af44
commit
d95e26d55c
1 changed files with 43 additions and 30 deletions
|
|
@ -26,7 +26,7 @@ export default function Custom404() {
|
||||||
title: t("api_reference"),
|
title: t("api_reference"),
|
||||||
description: t("api_reference_description"),
|
description: t("api_reference_description"),
|
||||||
icon: CodeIcon,
|
icon: CodeIcon,
|
||||||
href: "https://api.docs.cal.com",
|
href: "https://developer.cal.com",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: t("blog"),
|
title: t("blog"),
|
||||||
|
|
@ -36,7 +36,7 @@ export default function Custom404() {
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const isEventType404 = router.asPath.includes("/event-types");
|
const isSubpage = router.asPath.includes("/", 2);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -48,36 +48,49 @@ export default function Custom404() {
|
||||||
noindex: true,
|
noindex: true,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<div className="bg-white min-h-screen px-4">
|
<div className="min-h-screen px-4 bg-white">
|
||||||
<main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
|
<main className="max-w-xl pt-16 pb-6 mx-auto sm:pt-24">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<p className="text-sm font-semibold text-black uppercase tracking-wide">404 error</p>
|
<p className="text-sm font-semibold tracking-wide text-black uppercase">404 error</p>
|
||||||
<h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
|
<h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 font-cal sm:text-5xl">
|
||||||
{t("page_doesnt_exist")}
|
{t("page_doesnt_exist")}
|
||||||
</h1>
|
</h1>
|
||||||
{isEventType404 ? (
|
{isSubpage ? (
|
||||||
<span className="inline-block mt-2 text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
|
<span className="inline-block mt-2 text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
|
||||||
) : (
|
) : process.env.NEXT_PUBLIC_BASE_URL == "https://app.cal.com" ? (
|
||||||
<a href="https://cal.com/signup" className="inline-block mt-2 text-lg ">
|
<a
|
||||||
|
href={"https://cal.com/signup?username=" + username.replace("/", "")}
|
||||||
|
className="inline-block mt-2 text-lg ">
|
||||||
{t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
|
{t("the_username")} <strong className="text-blue-500">cal.com{username}</strong>{" "}
|
||||||
{t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
|
{t("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
|
||||||
</a>
|
</a>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{t("the_username")}{" "}
|
||||||
|
<strong className="text-green-500">
|
||||||
|
{new URL(process.env.NEXT_PUBLIC_BASE_URL || "").hostname}
|
||||||
|
{username}
|
||||||
|
</strong>{" "}
|
||||||
|
{t("is_still_available")}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-12">
|
<div className="mt-12">
|
||||||
<h2 className="text-sm font-semibold text-gray-500 tracking-wide uppercase">
|
<h2 className="text-sm font-semibold tracking-wide text-gray-500 uppercase">
|
||||||
{t("popular_pages")}
|
{t("popular_pages")}
|
||||||
</h2>
|
</h2>
|
||||||
{!isEventType404 && (
|
{!isSubpage && process.env.NEXT_PUBLIC_BASE_URL == "https://app.cal.com" && (
|
||||||
<ul role="list" className="mt-4">
|
<ul role="list" className="mt-4">
|
||||||
<li className="border-2 border-green-500 px-4 py-2">
|
<li className="px-4 py-2 border-2 border-green-500">
|
||||||
<a href="https://cal.com/signup" className="relative py-6 flex items-start space-x-4">
|
<a
|
||||||
|
href={"https://cal.com/signup?username=" + username.replace("/", "")}
|
||||||
|
className="relative flex items-start py-6 space-x-4">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex items-center justify-center h-12 w-12 rounded-lg bg-green-50">
|
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
|
||||||
<CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
|
<CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-base font-medium text-gray-900">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
|
||||||
<span className="focus:outline-none">
|
<span className="focus:outline-none">
|
||||||
|
|
@ -88,8 +101,8 @@ export default function Custom404() {
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
|
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="self-center flex-shrink-0">
|
||||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
@ -100,13 +113,13 @@ export default function Custom404() {
|
||||||
{links.map((link, linkIdx) => (
|
{links.map((link, linkIdx) => (
|
||||||
<li key={linkIdx} className="px-4 py-2">
|
<li key={linkIdx} className="px-4 py-2">
|
||||||
<Link href={link.href}>
|
<Link href={link.href}>
|
||||||
<a className="relative py-6 flex items-start space-x-4">
|
<a className="relative flex items-start py-6 space-x-4">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex items-center justify-center h-12 w-12 rounded-lg bg-gray-50">
|
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
|
||||||
<link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
|
<link.icon className="w-6 h-6 text-gray-700" aria-hidden="true" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-base font-medium text-gray-900">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
|
|
@ -115,18 +128,18 @@ export default function Custom404() {
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{link.description}</p>
|
<p className="text-base text-gray-500">{link.description}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="self-center flex-shrink-0">
|
||||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
<li className="px-4 py-2">
|
<li className="px-4 py-2">
|
||||||
<a href="https://cal.com/slack" className="relative py-6 flex items-start space-x-4">
|
<a href="https://cal.com/slack" className="relative flex items-start py-6 space-x-4">
|
||||||
<div className="flex-shrink-0">
|
<div className="flex-shrink-0">
|
||||||
<span className="flex items-center justify-center h-12 w-12 rounded-lg bg-gray-50">
|
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
|
||||||
<svg viewBox="0 0 2447.6 2452.5" className="h-6 w-6" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 2447.6 2452.5" className="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g clipRule="evenodd" fillRule="evenodd">
|
<g clipRule="evenodd" fillRule="evenodd">
|
||||||
<path
|
<path
|
||||||
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
|
d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
|
||||||
|
|
@ -144,7 +157,7 @@ export default function Custom404() {
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="flex-1 min-w-0">
|
||||||
<h3 className="text-base font-medium text-gray-900">
|
<h3 className="text-base font-medium text-gray-900">
|
||||||
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
|
<span className="rounded-sm focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-gray-500">
|
||||||
<span className="absolute inset-0" aria-hidden="true" />
|
<span className="absolute inset-0" aria-hidden="true" />
|
||||||
|
|
@ -153,8 +166,8 @@ export default function Custom404() {
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-shrink-0 self-center">
|
<div className="self-center flex-shrink-0">
|
||||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue