modal-soft
/
starter


			
				
					
						
						
							
							import Document, {Html, Head, Main, NextScript} from 'next/document'
import {ServerStyleSheet} from 'styled-components'
import pkg from '../../package.json'
import config from '../../next.config'

const publicUrl = process.env.NODE_ENV === 'production' ? pkg.homepage : config.basePath

export default class MyDocument extends Document {
	static async getInitialProps(ctx) {
		const sheet = new ServerStyleSheet()
		const originalRenderPage = ctx.renderPage

		try {
			ctx.renderPage = () =>
				originalRenderPage({
					enhanceApp: (App) => (props) =>
						sheet.collectStyles(
							<App
								{...props}
							/>,
						),
				})

			const initialProps = await Document.getInitialProps(ctx)

			return {
				...initialProps,
				styles: (
					<>
						{initialProps.styles}
						<link rel="preconnect" href="https://fonts.gstatic.com" />
						<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Encode+Sans:wdth,wght@75..112.5,100..900&display=swap" />
						<link rel="stylesheet" href={`${publicUrl}/global.css`} />
						<link rel="stylesheet" href={`${publicUrl}/theme.css`} />
						<link rel="stylesheet" title="Dark" href={`${publicUrl}/theme/dark.css`} />
						<link rel="alternate stylesheet" title="Light" href={`${publicUrl}/theme/light.css`} />
						{sheet.getStyleElement()}
					</>
				),
			}
		} catch (err) {
			console.error(err)
		} finally {
			sheet.seal()
		}
	}

	render() {
		return (
			<Html
				lang="en-PH"
			>
				<Head />
				<body>
					<Main />
					<NextScript />
				</body>
			</Html>
		)
	}
}