2023-04-18 18:45:32 +00:00
import { DefaultSeo } from "next-seo" ;
import { Inter } from "next/font/google" ;
import localFont from "next/font/local" ;
2023-06-10 15:19:17 +00:00
import Head from "next/head" ;
2023-04-18 18:45:32 +00:00
import Script from "next/script" ;
import "@calcom/embed-core/src/embed-iframe" ;
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired" ;
2023-07-10 14:10:30 +00:00
import { WEBAPP_URL , IS_CALCOM } from "@calcom/lib/constants" ;
2023-06-02 18:28:03 +00:00
import { buildCanonical } from "@calcom/lib/next-seo.config" ;
2023-04-18 18:45:32 +00:00
import type { AppProps } from "@lib/app-providers" ;
import AppProviders from "@lib/app-providers" ;
import { seoConfig } from "@lib/config/next-seo.config" ;
2023-07-19 12:30:25 +00:00
import I18nLanguageHandler from "@components/I18nLanguageHandler" ;
2023-04-18 18:45:32 +00:00
export interface CalPageWrapper {
2023-06-06 11:59:57 +00:00
( props? : AppProps ) : JSX . Element ;
2023-04-18 18:45:32 +00:00
PageWrapper? : AppProps [ "Component" ] [ "PageWrapper" ] ;
}
const interFont = Inter ( { subsets : [ "latin" ] , variable : "--font-inter" , preload : true , display : "swap" } ) ;
const calFont = localFont ( {
src : "../fonts/CalSans-SemiBold.woff2" ,
variable : "--font-cal" ,
preload : true ,
display : "swap" ,
} ) ;
function PageWrapper ( props : AppProps ) {
const { Component , pageProps , err , router } = props ;
let pageStatus = "200" ;
if ( router . pathname === "/404" ) {
pageStatus = "404" ;
} else if ( router . pathname === "/500" ) {
pageStatus = "500" ;
}
// On client side don't let nonce creep into DOM
// It also avoids hydration warning that says that Client has the nonce value but server has "" because browser removes nonce attributes before DOM is built
// See https://github.com/kentcdodds/nonce-hydration-issues
// Set "" only if server had it set otherwise keep it undefined because server has to match with client to avoid hydration error
const nonce = typeof window !== "undefined" ? ( pageProps . nonce ? "" : undefined ) : pageProps . nonce ;
const providerProps = {
. . . props ,
pageProps : {
. . . props . pageProps ,
nonce ,
} ,
} ;
// Use the layout defined at the page level, if available
const getLayout = Component . getLayout ? ? ( ( page ) = > page ) ;
2023-06-02 18:28:03 +00:00
const path = router . asPath ;
2023-04-18 18:45:32 +00:00
return (
< AppProviders { ...providerProps } >
2023-06-10 15:19:17 +00:00
< Head >
< meta
name = "viewport"
content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/ >
< / Head >
2023-06-02 18:28:03 +00:00
< DefaultSeo
// Set canonical to https://cal.com or self-hosted URL
canonical = {
2023-07-10 14:10:30 +00:00
IS_CALCOM
2023-06-02 18:28:03 +00:00
? buildCanonical ( { path , origin : "https://cal.com" } ) // cal.com & .dev
: buildCanonical ( { path , origin : WEBAPP_URL } ) // self-hosted
}
{ . . . seoConfig . defaultNextSeo }
/ >
2023-07-19 12:30:25 +00:00
< I18nLanguageHandler / >
2023-04-18 18:45:32 +00:00
< Script
nonce = { nonce }
id = "page-status"
dangerouslySetInnerHTML = { { __html : ` window.CalComPageStatus = ' ${ pageStatus } ' ` } }
/ >
< style jsx global > { `
: root {
-- font - inter : $ { interFont . style . fontFamily } ;
-- font - cal : $ { calFont . style . fontFamily } ;
}
` }</style>
{ getLayout (
Component . requiresLicense ? (
< LicenseRequired >
< Component { ...pageProps } err = { err } / >
< / LicenseRequired >
) : (
< Component { ...pageProps } err = { err } / >
) ,
router
) }
< / AppProviders >
) ;
}
export default PageWrapper ;
