xref: /expo/docs/pages/_document.tsx (revision bb8f4f99)
1import { Global } from '@emotion/core';
2import { BlockingSetInitialColorMode } from '@expo/styleguide';
3import { extractCritical } from 'emotion-server';
4import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
5import * as React from 'react';
6
7import * as Analytics from '~/common/analytics';
8import { globalExtras } from '~/global-styles/extras';
9import { globalFonts } from '~/global-styles/fonts';
10import { globalNProgress } from '~/global-styles/nprogress';
11import { globalPrism } from '~/global-styles/prism';
12import { globalReset } from '~/global-styles/reset';
13import { globalTables } from '~/global-styles/tables';
14import { globalTippy } from '~/global-styles/tippy';
15
16export default class MyDocument extends Document<{ css?: string }> {
17  static async getInitialProps(ctx: DocumentContext) {
18    const initialProps = await Document.getInitialProps(ctx);
19    const styles = extractCritical(initialProps.html);
20    return {
21      ...initialProps,
22      styles: (
23        <>
24          {initialProps.styles}
25          <style
26            data-emotion-css={styles.ids.join(' ')}
27            dangerouslySetInnerHTML={{ __html: styles.css }}
28          />
29        </>
30      ),
31    };
32  }
33
34  render() {
35    return (
36      <Html lang="en">
37        <Head>
38          <Analytics.GoogleScript id="UA-107832480-3" />
39          <script src="/static/libs/tippy/tippy.all.min.js" />
40          <script src="/static/libs/nprogress/nprogress.js" />
41
42          <Global
43            styles={[
44              globalFonts,
45              globalReset,
46              globalNProgress,
47              globalTables,
48              globalPrism,
49              globalTippy,
50              globalExtras,
51            ]}
52          />
53
54          <link rel="stylesheet" href="/static/libs/algolia/algolia.css" />
55          <link rel="stylesheet" href="/static/libs/algolia/algolia-mobile.css" />
56          <link
57            rel="stylesheet"
58            href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
59            integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
60            crossOrigin="anonymous"
61          />
62        </Head>
63        <body>
64          <BlockingSetInitialColorMode />
65          <Main />
66          <NextScript />
67        </body>
68      </Html>
69    );
70  }
71}
72