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>pull/1358/head^2
Peer Richelsen
GitHub
parent
3bc659af44
commit
d95e26d55c
|
|
@ -26,7 +26,7 @@ export default function Custom404() {
|
|||
title: t("api_reference"),
|
||||
description: t("api_reference_description"),
|
||||
icon: CodeIcon,
|
||||
href: "https://api.docs.cal.com",
|
||||
href: "https://developer.cal.com",
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<>
|
||||
|
|
@ -48,36 +48,49 @@ export default function Custom404() {
|
|||
noindex: true,
|
||||
}}
|
||||
/>
|
||||
<div className="bg-white min-h-screen px-4">
|
||||
<main className="max-w-xl mx-auto pb-6 pt-16 sm:pt-24">
|
||||
<div className="min-h-screen px-4 bg-white">
|
||||
<main className="max-w-xl pt-16 pb-6 mx-auto sm:pt-24">
|
||||
<div className="text-center">
|
||||
<p className="text-sm font-semibold text-black uppercase tracking-wide">404 error</p>
|
||||
<h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
|
||||
<p className="text-sm font-semibold tracking-wide text-black uppercase">404 error</p>
|
||||
<h1 className="mt-2 text-4xl font-extrabold tracking-tight text-gray-900 font-cal sm:text-5xl">
|
||||
{t("page_doesnt_exist")}
|
||||
</h1>
|
||||
{isEventType404 ? (
|
||||
{isSubpage ? (
|
||||
<span className="inline-block mt-2 text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
|
||||
) : (
|
||||
<a href="https://cal.com/signup" className="inline-block mt-2 text-lg ">
|
||||
) : process.env.NEXT_PUBLIC_BASE_URL == "https://app.cal.com" ? (
|
||||
<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("is_still_available")} <span className="text-blue-500">{t("register_now")}</span>.
|
||||
</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 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")}
|
||||
</h2>
|
||||
{!isEventType404 && (
|
||||
{!isSubpage && process.env.NEXT_PUBLIC_BASE_URL == "https://app.cal.com" && (
|
||||
<ul role="list" className="mt-4">
|
||||
<li className="border-2 border-green-500 px-4 py-2">
|
||||
<a href="https://cal.com/signup" className="relative py-6 flex items-start space-x-4">
|
||||
<li className="px-4 py-2 border-2 border-green-500">
|
||||
<a
|
||||
href={"https://cal.com/signup?username=" + username.replace("/", "")}
|
||||
className="relative flex items-start py-6 space-x-4">
|
||||
<div className="flex-shrink-0">
|
||||
<span className="flex items-center justify-center h-12 w-12 rounded-lg bg-green-50">
|
||||
<CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
|
||||
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-green-50">
|
||||
<CheckIcon className="w-6 h-6 text-green-500" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<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="focus:outline-none">
|
||||
|
|
@ -88,8 +101,8 @@ export default function Custom404() {
|
|||
</h3>
|
||||
<p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<div className="self-center flex-shrink-0">
|
||||
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -100,13 +113,13 @@ export default function Custom404() {
|
|||
{links.map((link, linkIdx) => (
|
||||
<li key={linkIdx} className="px-4 py-2">
|
||||
<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">
|
||||
<span className="flex items-center justify-center h-12 w-12 rounded-lg bg-gray-50">
|
||||
<link.icon className="h-6 w-6 text-gray-700" aria-hidden="true" />
|
||||
<span className="flex items-center justify-center w-12 h-12 rounded-lg bg-gray-50">
|
||||
<link.icon className="w-6 h-6 text-gray-700" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<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="absolute inset-0" aria-hidden="true" />
|
||||
|
|
@ -115,18 +128,18 @@ export default function Custom404() {
|
|||
</h3>
|
||||
<p className="text-base text-gray-500">{link.description}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<div className="self-center flex-shrink-0">
|
||||
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
<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">
|
||||
<span className="flex items-center justify-center h-12 w-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">
|
||||
<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="w-6 h-6" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clipRule="evenodd" fillRule="evenodd">
|
||||
<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"
|
||||
|
|
@ -144,7 +157,7 @@ export default function Custom404() {
|
|||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<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="absolute inset-0" aria-hidden="true" />
|
||||
|
|
@ -153,8 +166,8 @@ export default function Custom404() {
|
|||
</h3>
|
||||
<p className="text-base text-gray-500">{t("join_our_community")}</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
<div className="self-center flex-shrink-0">
|
||||
<ChevronRightIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue