documentation-site/pages/_document.jsx (108 lines of code) (raw):
/*
Copyright (c) Uber Technologies, Inc.
This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/
import * as React from "react";
import Document, { Head, Html, Main, NextScript } from "next/document";
import { Provider as StyletronProvider } from "styletron-react";
import Favicons from "../components/meta-favicons";
import { styletron } from "../helpers/styletron";
import { GA_ID } from "../helpers/ga";
export default class MyDocument extends Document {
static async getInitialProps(context) {
const renderPage = () =>
context.renderPage({
enhanceApp: (App) => (props) => (
<StyletronProvider value={styletron}>
<App {...props} />
</StyletronProvider>
),
});
const stylesheets = styletron.getStylesheets() || [];
const isProduction = process.env.NODE_ENV === "production";
const initialProps = await Document.getInitialProps({
...context,
renderPage,
});
return { ...initialProps, stylesheets, isProduction };
}
setGoogleTags() {
return {
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_ID}');
`,
};
}
render() {
return (
<Html lang="en">
<Head>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
/>
{this.props.stylesheets.map((sheet, i) => (
<style
className="_styletron_hydrate_"
dangerouslySetInnerHTML={{
__html: sheet.css,
}}
media={sheet.attrs.media}
data-hydrate={sheet.attrs["data-hydrate"]}
key={i}
/>
))}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
/>
<link
rel="preload"
href="https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMoveText-Regular.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="https://d1a3f4spazzrp4.cloudfront.net/dotcom-assets/fonts/UberMoveText-Medium.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link rel="stylesheet" href="/fonts.css" />
<style>{`
* {
box-sizing: border-box;
}
body {
margin: 0;
}
::selection {
background: #276EF1;
color: white;
}
`}</style>
<Favicons />
</Head>
<body>
<Main />
<NextScript />
{this.props.isProduction && (
<React.Fragment>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
/>
<script dangerouslySetInnerHTML={this.setGoogleTags()} />
</React.Fragment>
)}
</body>
</Html>
);
}
}