2021-09-09 13:51:06 +00:00
import Document , { DocumentContext , Head , Html , Main , NextScript , DocumentProps } from "next/document" ;
2021-07-07 19:58:18 +00:00
2021-09-09 13:51:06 +00:00
type Props = Record < string , unknown > & DocumentProps ;
2022-07-28 10:50:25 +00:00
function toRunBeforeReactOnClient() {
2022-08-16 04:18:13 +00:00
const calEmbedMode = location . search . includes ( "embed=" ) ;
try {
// eslint-disable-next-line @calcom/eslint/avoid-web-storage
window . sessionStorage . setItem ( "calEmbedMode" , String ( calEmbedMode ) ) ;
} catch ( e ) { }
2022-07-28 10:50:25 +00:00
window . isEmbed = ( ) = > {
2022-08-16 04:18:13 +00:00
try {
// eslint-disable-next-line @calcom/eslint/avoid-web-storage
return window . sessionStorage . getItem ( "calEmbedMode" ) === "true" ;
} catch ( e ) { }
// If we can't use sessionStorage to retrieve embed mode, just use the variable. It would fail to detect embed if page in iframe reloads without embed query param in it.
return calEmbedMode ;
2022-07-28 10:50:25 +00:00
} ;
2022-08-16 04:18:13 +00:00
2022-08-13 11:04:57 +00:00
window . resetEmbedStatus = ( ) = > {
2022-08-16 04:18:13 +00:00
try {
// eslint-disable-next-line @calcom/eslint/avoid-web-storage
window . sessionStorage . removeItem ( "calEmbedMode" ) ;
} catch ( e ) { }
2022-08-13 11:04:57 +00:00
} ;
2022-07-28 10:50:25 +00:00
window . getEmbedTheme = ( ) = > {
const url = new URL ( document . URL ) ;
return url . searchParams . get ( "theme" ) as "dark" | "light" ;
} ;
window . getEmbedNamespace = ( ) = > {
const url = new URL ( document . URL ) ;
const namespace = url . searchParams . get ( "embed" ) ;
return namespace ;
} ;
2022-10-14 10:10:54 +00:00
window . isPageOptimizedForEmbed = ( ) = > {
// Those pages are considered optimized, which know at backend that they are rendering for embed.
// Such pages can be shown straightaway without a loader for a better embed experience
return location . pathname . includes ( "forms/" ) ;
} ;
2022-07-28 10:50:25 +00:00
}
2021-09-09 13:51:06 +00:00
class MyDocument extends Document < Props > {
static async getInitialProps ( ctx : DocumentContext ) {
2021-07-07 19:58:18 +00:00
const initialProps = await Document . getInitialProps ( ctx ) ;
2022-07-12 14:18:53 +00:00
return { . . . initialProps } ;
2021-07-07 19:58:18 +00:00
}
render() {
2022-07-12 14:18:53 +00:00
const { locale } = this . props . __NEXT_DATA__ ;
2022-02-01 22:17:37 +00:00
const dir = locale === "ar" || locale === "he" ? "rtl" : "ltr" ;
2021-07-07 19:58:18 +00:00
return (
2022-02-01 22:17:37 +00:00
< Html lang = { locale } dir = { dir } >
2021-08-03 09:32:37 +00:00
< Head >
2022-07-15 05:47:37 +00:00
< link rel = "preload" href = "/cal.ttf" as = "font" type = "font/ttf" crossOrigin = "anonymous" / >
2021-08-03 09:39:06 +00:00
< link rel = "apple-touch-icon" sizes = "180x180" href = "/apple-touch-icon.png" / >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon-32x32.png" / >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon-16x16.png" / >
< link rel = "manifest" href = "/site.webmanifest" / >
< link rel = "mask-icon" href = "/safari-pinned-tab.svg" color = "#000000" / >
< meta name = "msapplication-TileColor" content = "#ff0000" / >
< meta name = "theme-color" content = "#ffffff" / >
2022-07-27 02:24:00 +00:00
< link
rel = "preload"
href = "/fonts/Inter-roman.var.woff2"
as = "font"
type = "font/woff2"
crossOrigin = "anonymous"
/ >
< link rel = "preload" href = "/fonts/cal.ttf" as = "font" type = "font/ttf" crossOrigin = "anonymous" / >
2022-08-24 20:18:42 +00:00
{ / * D e f i n e i s E m b e d h e r e s o t h a t i t c a n b e s h a r e d w i t h A p p ( e m b e d - i f r a m e ) a s w e l l a s t h e f o l l o w i n g c o d e t o c h a n g e b a c k g r o u n d a n d h i d e b o d y
2022-07-28 10:50:25 +00:00
Persist the embed mode in sessionStorage because query param might get lost during browsing .
* / }
2022-07-12 14:18:53 +00:00
< script
dangerouslySetInnerHTML = { {
2022-07-28 10:50:25 +00:00
__html : ` ( ${ toRunBeforeReactOnClient . toString ( ) } )() ` ,
2022-07-12 14:18:53 +00:00
} }
/ >
2021-08-03 09:32:37 +00:00
< / Head >
2022-03-31 08:45:47 +00:00
2022-09-07 15:01:33 +00:00
< body className = "dark:bg-darkgray-50 desktop-transparent bg-gray-100" >
2021-07-07 19:58:18 +00:00
< Main / >
< NextScript / >
2022-07-12 14:18:53 +00:00
{ /* In case of Embed we want background to be transparent so that it merges into the website seamlessly. Also, we keep the body hidden here and embed logic would take care of showing the body when it's ready */ }
{ /* We are doing it on browser and not on server because there are some pages which are not SSRd */ }
< script
dangerouslySetInnerHTML = { {
__html : `
if ( isEmbed ( ) ) {
2022-10-14 10:10:54 +00:00
if ( ! isPageOptimizedForEmbed ( ) ) {
document . body . style . display = "none" ;
}
2022-07-12 14:18:53 +00:00
document . body . style . background = "transparent" ;
} ` ,
2022-07-13 21:14:16 +00:00
} }
/ >
2021-07-07 19:58:18 +00:00
< / body >
< / Html >
) ;
}
}
export default MyDocument ;
