Skip to content

Instantly share code, notes, and snippets.

@jomifepe

jomifepe/_document.tsx

Last active June 7, 2022 14:02
Show Gist options
  • Save jomifepe/4fda20ff8b1b8b879408586ced2bede9 to your computer and use it in GitHub Desktop.
Save jomifepe/4fda20ff8b1b8b879408586ced2bede9 to your computer and use it in GitHub Desktop.
Download ZIP
document
Raw
_document.tsx
/* eslint-disable max-len */
import Document, {
DocumentContext,
DocumentInitialProps,
Head,
Html,
Main,
NextScript,
} from 'next/document';
import React from 'react';
import { ServerStyleSheet } from 'styled-components';
import * as snippet from '@segment/snippet';
import getConfig from 'next/config';
import { IS_ENV, SEGMENT_KEY } from 'constants/config';
class CustomDocument extends Document<
DocumentInitialProps & { lang: string; direction: string }
> {
static async getInitialProps(
ctx: DocumentContext
): Promise<DocumentInitialProps & { lang: string; direction: string }> {
const sheet = new ServerStyleSheet();
const originalRenderPage = ctx.renderPage;
let lang = '';
let direction = '';
const request = ctx.req as any; // eslint-disable-line @typescript-eslint/no-explicit-any
if (request?.i18n) {
lang = request.i18n.language;
direction = request.i18n.dir(lang);
}
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
lang,
direction,
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
sheet.seal();
}
}
renderSnippet = (): string => {
if (IS_ENV.local || IS_ENV.testing) return '';
return snippet.min({ apiKey: SEGMENT_KEY, page: false });
};
render(): JSX.Element {
const {
publicRuntimeConfig: { assetsUrl },
} = getConfig();
return (
<Html lang={this.props.lang} dir={this.props.direction}>
<Head>
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="Keywords" />
<meta name="theme-color" content="#272727" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<link
rel="preload"
href={`${assetsUrl}/assets/fonts/Font-Regular.woff`}
as="font"
type="font/woff"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${assetsUrl}/assets/fonts/Font-Light.woff`}
as="font"
type="font/woff"
crossOrigin="anonymous"
/>
<link
rel="preload"
href={`${assetsUrl}/assets/fonts/Font-Bold.woff`}
as="font"
type="font/woff"
crossOrigin="anonymous"
/>
<link rel="manifest" href="/manifest.json" />
<link
href="/icons/favicon-16x16.png"
rel="icon"
type="image/png"
sizes="16x16"
/>
<link
href="/icons/favicon-32x32.png"
rel="icon"
type="image/png"
sizes="32x32"
/>
<link
href="/icons/apple-touch-icon.png"
rel="apple-touch-icon"
></link>
<link
rel="mask-icon"
href="/icons/safari-pinned-tab.svg"
color="black"
/>
{/*iOs SPLASH SCREENS */}
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-2048-2732.png"
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1668-2388.png"
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1536-2048.png"
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1668-2224.png"
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1620-2160.png"
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1284-2778.png"
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1170-2532.png"
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1125-2436.png"
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1242-2688.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-828-1792.png"
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-1242-2208.png"
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-750-1334.png"
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
<link
rel="apple-touch-startup-image"
href="/icons/splash/ios/apple-splash-640-1136.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
/>
{/*END ---iOs SPLASH SCREENS */}
<script dangerouslySetInnerHTML={{ __html: this.renderSnippet() }} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default CustomDocument;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment