Skip to content

Commit

Permalink
fixes 404 for subpaths, adds prefilled url to sign up form (calcom#1355)
Browse files Browse the repository at this point in the history 
* fixes 404 for subpaths, adds prefilled url to sign up form

* Added tweak to support BASE_URL for self hosted (calcom#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 <[email protected]>
  • Loading branch information
@PeerRich @emrysal
PeerRich and emrysal authored Dec 20, 2021
1 parent 3bc659a commit d95e26d
Showing 1 changed file with 43 additions and 30 deletions.
73 changes: 43 additions & 30 deletions pages/404.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -36,7 +36,7 @@ export default function Custom404() {
},
];

const isEventType404 = router.asPath.includes("/event-types");
const isSubpage = router.asPath.includes("/", 2);

return (
<>
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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" />
Expand All @@ -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"
Expand All @@ -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" />
Expand All @@ -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>
Expand Down

0 comments on commit d95e26d

Please sign in to comment.