mirror of
https://github.com/coder/coder.git
synced 2026-10-24 01:26:25 +08:00
Bryan
36b7b20e2a
While starting on the create workspace flow - I noticed some weird CSS issues. In particular, intermittently, the web UI would render like this:  ...and when that happened, there'd be an accompanying error in the console:  The issue is that NextJS is trying to render the page on the server and use the styles - and sometimes the classnames mismatch between server-side and client-side rendering. We actually worked around this in `cdr/m` with a `<SafeHydration />` component and a custom `_document.tsx` This change ports over both the component and custom `_document.tsx`. I noticed, in addition, I missed the favicons when switching to NextJS, so I brought those over too.
34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import Document, { DocumentContext, Head, Html, Main, NextScript } from "next/document"
|
|
import React from "react"
|
|
|
|
class MyDocument extends Document {
|
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
|
|
static async getInitialProps(ctx: DocumentContext) {
|
|
const initialProps = await Document.getInitialProps(ctx)
|
|
return { ...initialProps }
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
return (
|
|
<Html>
|
|
<Head>
|
|
<meta charSet="utf-8" />
|
|
<meta name="theme-color" content="#17172E" />
|
|
<meta name="application-name" content="Coder" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="csp-nonce" content="{{ .CSP.Nonce }}" />
|
|
<link crossOrigin="use-credentials" rel="mask-icon" href="/static/favicon.svg" color="#000000" />
|
|
<link rel="alternate icon" type="image/png" href="/static/favicon.png" />
|
|
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
|
|
</Head>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default MyDocument
|